diff --git a/src/renderer/assets/feather/heart.svg b/src/renderer/assets/feather/heart.svg new file mode 100644 index 00000000..a083b7e2 --- /dev/null +++ b/src/renderer/assets/feather/heart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/feather/play.svg b/src/renderer/assets/feather/play.svg new file mode 100644 index 00000000..fd76e30d --- /dev/null +++ b/src/renderer/assets/feather/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/feather/plus.svg b/src/renderer/assets/feather/plus.svg new file mode 100644 index 00000000..703c5b7b --- /dev/null +++ b/src/renderer/assets/feather/plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/feather/share-2.svg b/src/renderer/assets/feather/share-2.svg new file mode 100644 index 00000000..09b1c7bc --- /dev/null +++ b/src/renderer/assets/feather/share-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/feather/share.svg b/src/renderer/assets/feather/share.svg new file mode 100644 index 00000000..df38c14d --- /dev/null +++ b/src/renderer/assets/feather/share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/feather/thumbs-down.svg b/src/renderer/assets/feather/thumbs-down.svg new file mode 100644 index 00000000..3e7bcd6d --- /dev/null +++ b/src/renderer/assets/feather/thumbs-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/feather/thumbs-up.svg b/src/renderer/assets/feather/thumbs-up.svg new file mode 100644 index 00000000..5f966cd9 --- /dev/null +++ b/src/renderer/assets/feather/thumbs-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/assets/feather/x-circle.svg b/src/renderer/assets/feather/x-circle.svg new file mode 100644 index 00000000..94aad5e5 --- /dev/null +++ b/src/renderer/assets/feather/x-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/index.js b/src/renderer/index.js index b2621936..7623d4b2 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -5,7 +5,7 @@ var CiderContextMenu = { Menu: function (event) { this.items = [] }, - Create(event, menudata) { + async Create(event, menudata) { var menuBackground = document.createElement("div"); var menu = document.createElement("div"); menu.classList.add("context-menu-body"); @@ -52,7 +52,10 @@ var CiderContextMenu = { } item.tabIndex = 0 item.classList.add("context-menu-item") - item.innerHTML = menudata.items[i].name + if(menudata.items[i]["icon"]) { + item.innerHTML += `
${await app.getSvgIcon(menudata.items[i]["icon"])}
` + } + item.innerHTML += menudata.items[i].name item.onclick = menudata.items[i].action menu.appendChild(item) } @@ -2797,12 +2800,14 @@ const app = new Vue({ normal: { items: [ { + "icon": "./assets/feather/list.svg", "name": "Add to Playlist...", "action": function () { app.promptAddToPlaylist() } }, { + "icon": "./assets/feather/plus.svg", "id": "addToLibrary", "name": "Add to Library...", "disabled": false, @@ -2812,6 +2817,7 @@ const app = new Vue({ } }, { + "icon": "./assets/feather/heart.svg", "id": "love", "name": "Love", "disabled": true, @@ -2820,6 +2826,7 @@ const app = new Vue({ } }, { + "icon": "./assets/feather/x-circle.svg", "id": "unlove", "name": "Unlove", "disabled": true, @@ -2828,6 +2835,7 @@ const app = new Vue({ } }, { + "icon": "./assets/feather/thumbs-down.svg", "id": "dislike", "name": "Dislike", "disabled": true, @@ -2836,6 +2844,7 @@ const app = new Vue({ } }, { + "icon": "./assets/feather/x-circle.svg", "id": "undo_dislike", "name": "Undo dislike", "disabled": true, @@ -2844,6 +2853,7 @@ const app = new Vue({ } }, { + "icon": "./assets/feather/radio.svg", "name": "Start Radio", "action": function () { app.mk.setStationQueue({song: item_id}).then(() => { diff --git a/src/renderer/style.less b/src/renderer/style.less index 9ccd74d8..8e8e8d9e 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -578,7 +578,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track { .context-menu-item { background: transparent; - display: block; + display: flex; width: 100%; text-align: left; color: #eee; diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs index 695ba86a..300b0f2b 100644 --- a/src/renderer/views/components/mediaitem-list-item.ejs +++ b/src/renderer/views/components/mediaitem-list-item.ejs @@ -247,20 +247,12 @@ normal: { items: [ { + "icon": "./assets/feather/list.svg", "name": "Add to Playlist...", "action": function () { app.promptAddToPlaylist() } }, - { - "name": "Start Radio", - "action": function () { - app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => { - app.mk.play() - app.selectedMediaItems = [] - }) - } - }, { "name": "Play Next", "action": function () { @@ -278,6 +270,17 @@ } }, { + "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/heart.svg", "id": "love", "name": "Love", "disabled": true, @@ -286,6 +289,7 @@ } }, { + "icon": "./assets/feather/x-circle.svg", "id": "unlove", "name": "Unlove", "disabled": true, @@ -294,6 +298,7 @@ } }, { + "icon": "./assets/feather/thumbs-down.svg", "id": "dislike", "name": "Dislike", "disabled": true, @@ -302,6 +307,7 @@ } }, { + "icon": "./assets/feather/x-circle.svg", "id": "undo_dislike", "name": "Undo dislike", "disabled": true, @@ -310,18 +316,21 @@ } }, { + "icon": "./assets/feather/user.svg", "name": "Go to Artist", "action": function () { app.searchAndNavigate(self.item, 'artist') } }, { + "icon": "./assets/feather/disc.svg", "name": "Go to Album", "action": function () { app.searchAndNavigate(self.item, 'album') } }, { + "icon": "./assets/feather/share.svg", "name": "Share", "action": function () { self.app.copyToClipboard(self.item.attributes.url) diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs index 888f7c6b..b3fbf55a 100644 --- a/src/renderer/views/components/mediaitem-square.ejs +++ b/src/renderer/views/components/mediaitem-square.ejs @@ -304,6 +304,14 @@ }, normal: { items: [ + { + "icon": "./assets/feather/list.svg", + "id": "addToPlaylist", + "name": "Add to Playlist...", + "action": function () { + app.promptAddToPlaylist() + } + }, { "name": "Play Next", "action": function () { @@ -321,13 +329,7 @@ } }, { - "id": "addToPlaylist", - "name": "Add to Playlist...", - "action": function () { - app.promptAddToPlaylist() - } - }, - { + "icon": "./assets/feather/plus.svg", "name": (this.addedToLibrary) ? "Remove from Library..." : "Add to Library...", "action": async function () { let item_id = self.item.attributes.playParams.id ?? self.item.id; @@ -345,6 +347,7 @@ } }, { + "icon": "./assets/feather/heart.svg", "id": "love", "name": "Love", "disabled": true, @@ -353,6 +356,7 @@ } }, { + "icon": "./assets/feather/x-circle.svg", "id": "unlove", "name": "Unlove", "disabled": true, @@ -361,6 +365,7 @@ } }, { + "icon": "./assets/feather/thumbs-down.svg", "id": "dislike", "name": "Dislike", "disabled": true, @@ -369,6 +374,7 @@ } }, { + "icon": "./assets/feather/x-circle.svg", "id": "undo_dislike", "name": "Undo dislike", "disabled": true, @@ -377,6 +383,7 @@ } }, { + "icon": "./assets/feather/share.svg", "name": "Share", "action": function () { self.app.copyToClipboard(self.item.attributes.url)