okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add context buttons to the squares

Browse source
This commit is contained in:
vapormusic 2021-12-18 10:42:49 +07:00
parent f6a5d19d52
commit afea5747dc
4 changed files with 243 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
resources/cider-ui/views/components/lyrics-view.ejs
View file

@ -154,7 +154,6 @@
return relativeTime >= verseTime && relativeTime <= timeEnd - timeStart
},
getVerseLine(index) {
if (this.richlyrics[index] != null && this.richlyrics[index].l != null) {
return this.richlyrics[index].l
}

124
resources/cider-ui/views/components/mediaitem-square-large.ejs
View file

@ -1,8 +1,8 @@
<script type="text/x-template" id="mediaitem-square-large">
<template>
<div style="position: relative; display: inline-flex;">
<div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-square-large">
class="cd-mediaitem-square-large" ref="main2">
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
@ -14,14 +14,25 @@
<div class="button" style="
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px','position': 'absolute',
width: '40px',
height: '40px',} :
{margin: '35px',
{margin: '35px', 'position': 'absolute',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
<div class="button" style="
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'position': 'absolute','margin': '140px',
width: '40px', 'margin-left': '10px',
height: '40px',} :
{display: 'none',margin: '35px',
width: '120px',
height: '120px',}]" @click="clickContext() ">
<%- include("../svg/more.svg") %>
</div>
</div>
<div class="title text-overflow-elipsis" @click='app.routeView(item)'>
{{ item.attributes.name ?? '' }}
@ -43,6 +54,17 @@
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
<div class="button" style="
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'position': 'absolute','margin': '140px',
width: '40px', 'margin-left': '10px',
height: '40px',} :
{display: 'none',margin: '35px',
width: '120px',
height: '120px',}]" @click="console.log('as');contextMenu()">
<%- include("../svg/more.svg") %>
</div>
</div>
</div>
</template>
@ -52,6 +74,98 @@
Vue.component('mediaitem-square-large', {
template: '#mediaitem-square-large',
props: ['item'],
methods: {}
methods: {
clickContext() {
var evt = document.createEvent('MouseEvent');
var rect = this.$refs.main2.getBoundingClientRect();
evt.initMouseEvent(
"contextmenu",
true /* bubble */, true /* cancelable */,
window, null,
0, 0, rect.x + 100, rect.y +100, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/, null
);
this.$refs.main.dispatchEvent(evt);
}
,contextMenu(event) {
if (!event){event = this.$refs.main} else {console.log(event)}
let self = this
let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) {
app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
} else {
useMenu = "multiple"
}
let menus = {
multiple: {
items: [
{
name: `Play ${app.selectedMediaItems.length} tracks next`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
}
}
console.log(itemsToPlay)
app.selectedMediaItems = []
}
},
{
name: `Play ${app.selectedMediaItems.length} tracks later`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
}
}
app.selectedMediaItems = []
}
},
]
},
normal: {
items: [
{
"name": "Play Next",
"action": function () {
app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
app.mk.queue._reindex()
app.selectedMediaItems = []
}
},
{
"name": "Play Later",
"action": function () {
app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
app.mk.queue._reindex()
app.selectedMediaItems = []
}
},
]
}
}
CiderContextMenu.Create(event, menus[useMenu])
},}
});
</script>

126
resources/cider-ui/views/components/mediaitem-square-sp.ejs
View file

@ -1,8 +1,8 @@
<script type="text/x-template" id="mediaitem-square-sp">
<template>
<div style="position: relative; display: inline-flex;">
<div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-square-sp" :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
class="cd-mediaitem-square-sp" ref="main2" :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
@ -14,14 +14,25 @@
<div class="button" style="
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px','position': 'absolute',
width: '40px',
height: '40px',} :
{margin: '35px',
{margin: '35px','position': 'absolute',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
<div class="button" style="
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'position': 'absolute','margin': '140px',
width: '40px', 'margin-left': '10px',
height: '40px',} :
{display: 'none',margin: '35px',
width: '120px',
height: '120px',}]" @click="clickContext()">
<%- include("../svg/more.svg") %>
</div>
</div>
<div class="title text-overflow-elipsis"
:style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="font-weight: 600">
@ -49,7 +60,19 @@
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
<div class="button" style="
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'position': 'absolute','margin': '140px',
width: '40px', 'margin-left': '10px',
height: '40px',} :
{display: 'none',margin: '35px',
width: '120px',
height: '120px',}]" @click="clickContext()">
<%- include("../svg/more.svg") %>
</div>
</div>
</div>
</template>
</script>
@ -58,6 +81,99 @@
Vue.component('mediaitem-square-sp', {
template: '#mediaitem-square-sp',
props: ['item'],
methods: {}
methods: { clickContext() {
var evt = document.createEvent('MouseEvent');
var rect = this.$refs.main2.getBoundingClientRect();
evt.initMouseEvent(
"contextmenu",
true /* bubble */, true /* cancelable */,
window, null,
0, 0, rect.x + 100, rect.y +100, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/, null
);
this.$refs.main.dispatchEvent(evt);
}
,contextMenu(event) {
if (!event){event = this.$refs.main} else {console.log(event)}
let self = this
let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) {
app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
} else {
useMenu = "multiple"
}
let menus = {
multiple: {
items: [
{
name: `Play ${app.selectedMediaItems.length} tracks next`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playNext({[kind + "s"]: itemsToPlay[kind]})
}
}
console.log(itemsToPlay)
app.selectedMediaItems = []
}
},
{
name: `Play ${app.selectedMediaItems.length} tracks later`,
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
if (!itemsToPlay[item.kind]) {
itemsToPlay[item.kind] = []
}
itemsToPlay[item.kind].push(item.id)
})
// loop through itemsToPlay
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
}
}
app.selectedMediaItems = []
}
},
]
},
normal: {
items: [
{
"name": "Play Next",
"action": function () {
app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
app.mk.queue._reindex()
app.selectedMediaItems = []
}
},
{
"name": "Play Later",
"action": function () {
app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
app.mk.queue._reindex()
app.selectedMediaItems = []
}
},
]
}
}
CiderContextMenu.Create(event, menus[useMenu])
},}
});
</script>

3
resources/cider-ui/views/svg/more.svg Normal file
View file

@ -0,0 +1,3 @@
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
<path d="M8.89547677 13.5330073c0-1.1057457-.97371638-2.0959657-2.09596577-2.0959657-1.13875305 0-2.0794621.99022-2.0794621 2.0959657 0 1.1222494.94070905 2.0794621 2.0794621 2.0794621 1.12224939 0 2.09596577-.9572127 2.09596577-2.0794621zm6.68398533 0c0-1.1057457-.9572127-2.0959657-2.0794621-2.0959657-1.1222494 0-2.0794621.99022-2.0794621 2.0959657 0 1.1222494.9572127 2.0794621 2.0794621 2.0794621 1.1222494 0 2.0794621-.9572127 2.0794621-2.0794621zm6.700489 0c0-1.1057457-.940709-2.0959657-2.0794621-2.0959657-1.1222494 0-2.0959658.99022-2.0959658 2.0959657 0 1.1222494.9737164 2.0794621 2.0959658 2.0794621 1.1387531 0 2.0794621-.9572127 2.0794621-2.0794621z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 772 B