added headerItems to context menu
This commit is contained in:
booploops
parent
9071dbc6ab
commit
549939e109
4 changed files with 79 additions and 42 deletions
|
|
@ -296,7 +296,8 @@ const app = new Vue({
|
|||
visible: false,
|
||||
content: {
|
||||
name: "",
|
||||
items: {}
|
||||
items: {},
|
||||
headerItems: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -340,7 +341,8 @@ const app = new Vue({
|
|||
async showMenuPanel(data) {
|
||||
app.menuPanel.visible = true;
|
||||
app.menuPanel.content.name = data.name ?? "";
|
||||
app.menuPanel.content.items = data.items ?? [];
|
||||
app.menuPanel.content.items = data.items ?? {};
|
||||
app.menuPanel.content.headerItems = data.headerItems ?? {};
|
||||
},
|
||||
async getSvgIcon(url) {
|
||||
let response = await fetch(url);
|
||||
|
|
|
|||
|
|
@ -2811,6 +2811,30 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.menu-header-body {
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
background: rgb(200 200 200 / 10%);
|
||||
.menu-option-header {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--selected);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--selected-click);
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-panel-body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
|
|
|||
|
|
@ -256,40 +256,7 @@
|
|||
]
|
||||
},
|
||||
normal: {
|
||||
items: [
|
||||
{
|
||||
"icon": "./assets/feather/list.svg",
|
||||
"name": "Add to Playlist...",
|
||||
"action": function () {
|
||||
app.promptAddToPlaylist()
|
||||
}
|
||||
},
|
||||
{
|
||||
"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 = []
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/radio.svg",
|
||||
"name": "Start Radio",
|
||||
"action": function () {
|
||||
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
|
||||
app.mk.play()
|
||||
app.selectedMediaItems = []
|
||||
})
|
||||
}
|
||||
},
|
||||
headerItems: [
|
||||
{
|
||||
"icon": "./assets/feather/heart.svg",
|
||||
"id": "love",
|
||||
|
|
@ -328,6 +295,41 @@
|
|||
app.unlove(self.item)
|
||||
}
|
||||
},
|
||||
],
|
||||
items: [
|
||||
{
|
||||
"icon": "./assets/feather/list.svg",
|
||||
"name": "Add to Playlist...",
|
||||
"action": function () {
|
||||
app.promptAddToPlaylist()
|
||||
}
|
||||
},
|
||||
{
|
||||
"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 = []
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/radio.svg",
|
||||
"name": "Start Radio",
|
||||
"action": function () {
|
||||
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
|
||||
app.mk.play()
|
||||
app.selectedMediaItems = []
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/user.svg",
|
||||
"name": "Go to Artist",
|
||||
|
|
@ -371,14 +373,14 @@
|
|||
try{
|
||||
let rating = await app.getRating(self.item)
|
||||
if (rating == 0) {
|
||||
menus.normal.items.find(x => x.id == 'love').disabled = false
|
||||
menus.normal.items.find(x => x.id == 'dislike').disabled = false
|
||||
menus.normal.headerItems.find(x => x.id == 'love').disabled = false
|
||||
menus.normal.headerItems.find(x => x.id == 'dislike').disabled = false
|
||||
} else if (rating == 1) {
|
||||
menus.normal.items.find(x => x.id == 'unlove').hidden = false
|
||||
menus.normal.items.find(x => x.id == 'love').hidden = true
|
||||
menus.normal.headerItems.find(x => x.id == 'unlove').hidden = false
|
||||
menus.normal.headerItems.find(x => x.id == 'love').hidden = true
|
||||
} else if (rating == -1) {
|
||||
menus.normal.items.find(x => x.id == 'undo_dislike').hidden = false
|
||||
menus.normal.items.find(x => x.id == 'dislike').hidden = true
|
||||
menus.normal.headerItems.find(x => x.id == 'undo_dislike').hidden = false
|
||||
menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
|
||||
}
|
||||
} catch(err) {
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-header-body" v-if="Object.keys(content.headerItems).length != 0">
|
||||
<template v-for="item in content.headerItems">
|
||||
<button class="menu-option-header" :title="item.name" v-if="canDisplay(item)" :style="getStyle(item)" @click="action(item)">
|
||||
<div class="sidebar-icon" style="margin: 0;" v-if="item.icon">
|
||||
<div class="svg-icon" :style="{'--url': 'url(' + item.icon + ')'}"></div>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="menu-body">
|
||||
<template v-for="item in content.items">
|
||||
<button class="menu-option" v-if="canDisplay(item)" :style="getStyle(item)" @click="action(item)">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue