+
+ @mouseenter="checkLibrary"
+ @mouseover="showInLibrary = true"
+ @mouseleave="showInLibrary = false"
+ :class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
-
+
<%- include("../svg/play.svg") %>
-
-
+
+
-
-
+
+ @dblclick="route()">
{{ item.attributes.name }}
@@ -44,10 +49,8 @@
+
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
@@ -68,11 +71,13 @@
template: '#mediaitem-list-item',
data: function () {
return {
+ showInLibrary: false,
isVisible: false,
addedToLibrary: false,
guid: this.uuidv4(),
app: this.$root,
- displayDuration: true
+ displayDuration: true,
+ addClasses: {}
}
},
props: {
@@ -84,14 +89,36 @@
'show-meta-data': {type: Boolean, default: false},
'show-duration': {type: Boolean, default: true},
'contextExt': {type: Object, required: false},
+ 'class-list': {type: String, required: false, default: ""},
},
mounted() {
let duration = this.item.attributes.durationInMillis ?? 0
if (duration == 0 || !this.showDuration) {
this.displayDuration = false
}
+ this.getClasses()
},
methods: {
+ async checkLibrary() {
+ if(this.addedToLibrary) {return this.addedToLibrary}
+ if(this.item.type.includes("library-playlists") || this.item.type.includes("station")) {
+ this.addedToLibrary = true
+ return
+ }
+ this.$root.inLibrary([this.item]).then(res => {
+ this.addedToLibrary = res[0].attributes.inLibrary
+ })
+ return this.addedToLibrary
+ },
+ getClasses() {
+ if(this.classList) {
+ this.addClasses = {}
+ let classList = this.classList.split(' ')
+ for(let i = 0; i < classList.length; i++) {
+ this.addClasses[classList[i]] = true
+ }
+ }
+ },
dragStart(evt) {
evt.dataTransfer.setData('text/plain', JSON.stringify({
type: this.item.attributes.playParams.kind ?? this.item.type,
@@ -197,12 +224,14 @@
items: [
{
"name": "Add to Playlist...",
+ "icon": "./assets/feather/plus.svg",
"action": function () {
app.promptAddToPlaylist()
}
},
{
name: `Play ${app.selectedMediaItems.length} tracks next`,
+ "icon": "./assets/arrow-bend-up.svg",
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
@@ -224,6 +253,7 @@
},
{
name: `Play ${app.selectedMediaItems.length} tracks later`,
+ "icon": "./assets/arrow-bend-down.svg",
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
@@ -245,7 +275,68 @@
]
},
normal: {
+ headerItems: [
+ {
+ "icon": "./assets/feather/heart.svg",
+ "id": "love",
+ "name": "Love",
+ "hidden": false,
+ "disabled": true,
+ "action": function () {
+ app.love(self.item)
+ }
+ },
+ {
+ "icon": "./assets/feather/heart.svg",
+ "id": "unlove",
+ "active": true,
+ "name": "Unlove",
+ "hidden": true,
+ "action": function () {
+ app.unlove(self.item)
+ }
+ },
+ {
+ "icon": "./assets/feather/thumbs-down.svg",
+ "id": "dislike",
+ "name": "Dislike",
+ "hidden": false,
+ "disabled": true,
+ "action": function () {
+ app.dislike(self.item)
+ }
+ },
+ {
+ "icon": "./assets/feather/thumbs-down.svg",
+ "id": "undo_dislike",
+ "name": "Undo dislike",
+ "active": true,
+ "hidden": true,
+ "action": function () {
+ app.unlove(self.item)
+ }
+ },
+ ],
items: [
+ {
+ "id": "addToLibrary",
+ "icon": "./assets/feather/plus.svg",
+ "name": "Add to library",
+ "hidden": false,
+ "disabled": true,
+ "action": function () {
+ self.addToLibrary()
+ }
+ },
+ {
+ "id": "removeFromLibrary",
+ "icon": "./assets/feather/x-circle.svg",
+ "name": "Remove from library",
+ "hidden": true,
+ "action": function () {
+ self.removeFromLibrary()
+ }
+ },
{
"icon": "./assets/feather/list.svg",
"name": "Add to Playlist...",
@@ -255,6 +346,7 @@
},
{
"name": "Play Next",
+ "icon": "./assets/arrow-bend-up.svg",
"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()
@@ -263,6 +355,7 @@
},
{
"name": "Play Later",
+ "icon": "./assets/arrow-bend-down.svg",
"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()
@@ -279,42 +372,6 @@
})
}
},
- {
- "icon": "./assets/feather/heart.svg",
- "id": "love",
- "name": "Love",
- "disabled": true,
- "action": function () {
- app.love(self.item)
- }
- },
- {
- "icon": "./assets/feather/unheart.svg",
- "id": "unlove",
- "name": "Unlove",
- "disabled": true,
- "action": function () {
- app.unlove(self.item)
- }
- },
- {
- "icon": "./assets/feather/thumbs-down.svg",
- "id": "dislike",
- "name": "Dislike",
- "disabled": true,
- "action": function () {
- app.dislike(self.item)
- }
- },
- {
- "icon": "./assets/feather/x-circle.svg",
- "id": "undo_dislike",
- "name": "Undo dislike",
- "disabled": true,
- "action": function () {
- app.unlove(self.item)
- }
- },
{
"icon": "./assets/feather/user.svg",
"name": "Go to Artist",
@@ -352,21 +409,38 @@
if (this.contextExt.multiple) {
menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
}
+ }
+ app.showMenuPanel(menus[useMenu], event)
+
+ try {
+ await this.checkLibrary().then(res => {
+ console.log(res)
+ if(res) {
+ menus.normal.items.find(x => x.id == 'addToLibrary').hidden = true
+ menus.normal.items.find(x => x.id == 'removeFromLibrary').hidden = false
+ }else{
+ menus.normal.items.find(x => x.id == 'addToLibrary').disabled = false
+ }
+ })
+
+ }catch(e) {
+
}
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').disabled = false
+ 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').disabled = false
+ menus.normal.headerItems.find(x => x.id == 'undo_dislike').hidden = false
+ menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
}
} catch(err) {
}
- CiderContextMenu.Create(event, menus[useMenu])
},
visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible
@@ -474,6 +548,14 @@
else {
app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
}})
+ },
+ route(){
+ let kind = (this.item.attributes.playParams ? (this.item.attributes.playParams.kind ?? (this.item.type ?? '')) : (this.item.type ?? ''));
+ if (kind.toLowerCase().includes('album') || kind.toLowerCase().includes('playlist')){
+ app.routeView(this.item)
+ } else {
+ this.playTrack()
+ }
}
}
});
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index d71554f3..eb589347 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -76,7 +76,7 @@
},
methods: {
getBgColor() {
- let color = `#${(this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : `333333`}`
+ let color = `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : `333333`}`
let c = color.substring(1); // strip #
var rgb = parseInt(c, 16); // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff; // extract red
@@ -85,8 +85,6 @@
var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
- console.log(color)
- console.log(luma)
if (luma > 140) {
return "#aaaaaa"
}else{
@@ -142,9 +140,10 @@
}
},
async getBadges() {
- let self = this
- if (this.badges[this.item.attributes.playParams.id ?? this.item.id]) {
- let friends = this.badges[this.item.attributes.playParams.id ?? this.item.id]
+ const self = this
+ const id = (this.item.attributes.playParams ? this.item.attributes.playParams.id : null) || this.item.id
+ if (id && this.badges[id]) {
+ let friends = this.badges[id]
if (friends) {
friends.forEach(function (friend) {
self.app.mk.api.socialProfile(friend).then(data => {
@@ -247,7 +246,6 @@
} else {
console.log(event)
}
- await this.isInLibrary();
let self = this
let useMenu = "normal"
if (app.selectedMediaItems.length <= 1) {
@@ -261,6 +259,7 @@
items: [
{
name: `Play ${app.selectedMediaItems.length} tracks next`,
+ "icon": "./assets/arrow-bend-up.svg",
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
@@ -282,6 +281,7 @@
},
{
name: `Play ${app.selectedMediaItems.length} tracks later`,
+ "icon": "./assets/arrow-bend-down.svg",
action: () => {
let itemsToPlay = {}
app.selectedMediaItems.forEach(item => {
@@ -303,6 +303,48 @@
]
},
normal: {
+ headerItems: [
+ {
+ "icon": "./assets/feather/heart.svg",
+ "id": "love",
+ "name": "Love",
+ "hidden": false,
+ "disabled": true,
+ "action": function () {
+ app.love(self.item)
+ }
+ },
+ {
+ "icon": "./assets/feather/heart.svg",
+ "id": "unlove",
+ "active": true,
+ "name": "Unlove",
+ "hidden": true,
+ "action": function () {
+ app.unlove(self.item)
+ }
+ },
+ {
+ "icon": "./assets/feather/thumbs-down.svg",
+ "id": "dislike",
+ "name": "Dislike",
+ "hidden": false,
+ "disabled": true,
+ "action": function () {
+ app.dislike(self.item)
+ }
+ },
+ {
+ "icon": "./assets/feather/thumbs-down.svg",
+ "id": "undo_dislike",
+ "name": "Undo dislike",
+ "active": true,
+ "hidden": true,
+ "action": function () {
+ app.unlove(self.item)
+ }
+ },
+ ],
items: [
{
"icon": "./assets/feather/list.svg",
@@ -312,8 +354,35 @@
app.promptAddToPlaylist()
}
},
+ {
+ "id": "addToLibrary",
+ "icon": "./assets/feather/plus.svg",
+ "name": "Add to library",
+ "hidden": false,
+ "disabled": true,
+ "action": function () {
+ let item_id = self.item.attributes.playParams.id ?? self.item.id;
+ let data_type = self.item.attributes.playParams.kind ?? self.item.type;
+ app.addToLibrary(item_id);
+ self.addedToLibrary = true;
+ }
+ },
+ {
+ "id": "removeFromLibrary",
+ "icon": "./assets/feather/x-circle.svg",
+ "name": "Remove from library",
+ "hidden": true,
+ "action": async function () {
+ console.log("remove");
+ let item_id = self.item.attributes.playParams.id ?? self.item.id;
+ let data_type = self.item.attributes.playParams.kind ?? self.item.type;
+ await self.removeFromLibrary(item_id);
+ self.addedToLibrary = false
+ }
+ },
{
"name": "Play Next",
+ "icon": "./assets/arrow-bend-up.svg",
"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()
@@ -322,66 +391,13 @@
},
{
"name": "Play Later",
+ "icon": "./assets/arrow-bend-down.svg",
"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/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;
- let data_type = self.item.attributes.playParams.kind ?? self.item.type;
- if (self.addedToLibrary != true) {
- console.log("add");
- app.addToLibrary(item_id);
- self.addedToLibrary = true
- } else {
- console.log("remove");
- await self.removeFromLibrary(item_id);
- self.addedToLibrary = false
- }
- ;
- }
- },
- {
- "icon": "./assets/feather/heart.svg",
- "id": "love",
- "name": "Love",
- "disabled": true,
- "action": function () {
- app.love(self.item)
- }
- },
- {
- "icon": "./assets/feather/unheart.svg",
- "id": "unlove",
- "name": "Unlove",
- "disabled": true,
- "action": function () {
- app.unlove(self.item)
- }
- },
- {
- "icon": "./assets/feather/thumbs-down.svg",
- "id": "dislike",
- "name": "Dislike",
- "disabled": true,
- "action": function () {
- app.dislike(self.item)
- }
- },
- {
- "icon": "./assets/feather/x-circle.svg",
- "id": "undo_dislike",
- "name": "Undo dislike",
- "disabled": true,
- "action": function () {
- app.unlove(self.item)
- }
- },
{
"icon": "./assets/feather/share.svg",
"name": "Share",
@@ -398,14 +414,35 @@
return item.id != "addToPlaylist"
})
}
- 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
- } else if (rating == 1) {
- menus.normal.items.find(x => x.id == 'unlove').disabled = false
- } else if (rating == -1) {
- menus.normal.items.find(x => x.id == 'undo_dislike').disabled = false
+ app.showMenuPanel(menus[useMenu], event)
+
+ try {
+ await this.isInLibrary().then((_) => {
+ if(self.addedToLibrary) {
+ menus.normal.items.find(x => x.id == 'addToLibrary').hidden = true
+ menus.normal.items.find(x => x.id == 'removeFromLibrary').hidden = false
+ }else{
+ menus.normal.items.find(x => x.id == 'addToLibrary').disabled = false
+ }
+ })
+
+ }catch(e) {
+
+ }
+ try{
+ let rating = await app.getRating(self.item)
+ if (rating == 0) {
+ 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.headerItems.find(x => x.id == 'unlove').hidden = false
+ menus.normal.headerItems.find(x => x.id == 'love').hidden = true
+ } else if (rating == -1) {
+ menus.normal.headerItems.find(x => x.id == 'undo_dislike').hidden = false
+ menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
+ }
+ } catch(err) {
+
}
if (this.contextExt) {
@@ -416,7 +453,6 @@
menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
}
}
- CiderContextMenu.Create(event, menus[useMenu])
},
},
beforeDestroy: function () {
diff --git a/src/renderer/views/components/menu-panel.ejs b/src/renderer/views/components/menu-panel.ejs
new file mode 100644
index 00000000..5ca79cb3
--- /dev/null
+++ b/src/renderer/views/components/menu-panel.ejs
@@ -0,0 +1,111 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/views/components/queue.ejs b/src/renderer/views/components/queue.ejs
index bf883cf2..bfd2abd0 100644
--- a/src/renderer/views/components/queue.ejs
+++ b/src/renderer/views/components/queue.ejs
@@ -113,7 +113,7 @@
}]
}
}
- CiderContextMenu.Create(event, menus[useMenu]);
+ app.showMenuPanel(menus[useMenu], event);
},
playQueueItem(index) {
app.mk.changeToMediaAtIndex(index)
diff --git a/src/renderer/views/components/sidebar-playlist.ejs b/src/renderer/views/components/sidebar-playlist.ejs
index 127b7b3c..6756288a 100644
--- a/src/renderer/views/components/sidebar-playlist.ejs
+++ b/src/renderer/views/components/sidebar-playlist.ejs
@@ -134,6 +134,7 @@
"addToFavorites": {
name: "Add to favorites",
disabled: true,
+ hidden: true,
action: () => {
this.addFavorite(playlist_id, "library-playlists")
}
@@ -143,7 +144,7 @@
if(this.item.type === "library-playlist-folders") {
menu.items.addToFavorites.disabled = true
}
- CiderContextMenu.Create(event, menu)
+ app.showMenuPanel(menu, event)
},
dragOver(evt) {
evt.preventDefault();
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 8dc07f00..06814d72 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -30,7 +30,7 @@
-
+
@@ -48,23 +48,23 @@
-
+
-
+
-
-
-
+
-
-
+
-
+
+
+
+
+
+
@@ -427,7 +486,9 @@
- <%- include('pages/library-songs') %>
+
+
@@ -456,31 +517,42 @@
+
@@ -127,7 +128,8 @@
-
-
+
+
-
@@ -181,21 +183,30 @@
-
+
![]()
![]()
-
+
+
+
+
-
+
![]()
![]()
+
+<%- include('pages/apple-account-settings') %>
+
+<%- include('pages/library-songs') %>
+
<%- include("components/mediaitem-artwork"); %>
@@ -563,6 +640,9 @@
<%- include('pages/search') %>
+
+<%- include('pages/about') %>
+
@@ -576,6 +656,8 @@
+
+<%- include('components/menu-panel') %>
<%- include('components/sidebar-playlist') %>
diff --git a/src/renderer/views/pages/about.ejs b/src/renderer/views/pages/about.ejs
index 47da5814..4c5790d2 100644
--- a/src/renderer/views/pages/about.ejs
+++ b/src/renderer/views/pages/about.ejs
@@ -1,19 +1,107 @@
-Major thanks to the Cider Development Team and all of our contributors.
+
+
\ No newline at end of file
diff --git a/src/renderer/views/pages/apple-account-settings.ejs b/src/renderer/views/pages/apple-account-settings.ejs
new file mode 100644
index 00000000..c791ef0e
--- /dev/null
+++ b/src/renderer/views/pages/apple-account-settings.ejs
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/src/renderer/views/pages/artist-feed.ejs b/src/renderer/views/pages/artist-feed.ejs
index a427147a..a7cfce52 100644
--- a/src/renderer/views/pages/artist-feed.ejs
+++ b/src/renderer/views/pages/artist-feed.ejs
@@ -8,7 +8,7 @@
Your Artists Feed
+
-
@@ -88,7 +101,8 @@
+
-
Top Songs
+
@@ -138,12 +138,14 @@
let followAction = "follow"
let followActions = {
follow: {
+ icon: "./assets/feather/plus-circle.svg",
name: "Follow Artist",
action: ()=>{
self.app.cfg.home.followedArtists.push(self.data.id)
}
},
unfollow: {
+ icon: "./assets/feather/x-circle.svg",
name: "Unfollow Artist",
action: ()=>{
let index = self.app.cfg.home.followedArtists.indexOf(self.data.id)
@@ -156,9 +158,10 @@
if(this.app.cfg.home.followedArtists.includes(self.data.id)) {
followAction = "unfollow"
}
- CiderContextMenu.Create(event, {
+ app.showMenuPanel({
items: [
{
+ icon: "./assets/feather/play.svg",
name: "Play Artist Radio",
action: ()=>{
app.mk.setStationQueue({artist:self.data.id}).then(()=>{
@@ -168,13 +171,14 @@
},
followActions[followAction],
{
+ icon: "./assets/feather/share.svg",
name: "Share",
action: ()=>{
self.app.copyToClipboard(self.data.attributes.url)
}
}
]
- })
+ }, event)
},
getArtistPalette(artist) {
if (artist["attributes"]["artwork"]) {
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index de987fc3..04b9e9d7 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -16,7 +16,7 @@
-
-
-
-
-
-
- {{getFormattedDate(data.attributes.releaseDate)}}
+ {{getFormattedDate()}}
{{app.getTotalTime()}}
+
+
+
\ No newline at end of file
diff --git a/src/renderer/views/pages/madeforyou.ejs b/src/renderer/views/pages/madeforyou.ejs
index 66676aba..1120e258 100644
--- a/src/renderer/views/pages/madeforyou.ejs
+++ b/src/renderer/views/pages/madeforyou.ejs
@@ -1,6 +1,6 @@
-
-
+
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 99156ca3..7615759b 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -90,18 +90,6 @@
Made For You
-
- Window Transparency
-
-
-
-
-
Hardware Acceleration
@@ -447,7 +435,7 @@
@@ -447,7 +435,7 @@
LastFM Scrobbling
-
+
@@ -477,77 +465,92 @@
- Unfinished / Non Functional
+ Experimental
- Theme
+ Compact UI
-
-
+
-
+
-
- Theme Options
+
+
+ Unfinished / Non Functional
-
-
+
-
+
-
+ Theme
+
+
+
+
-
- Scrollbars
+
+
-
+ Theme Options
+
+
+
+
-
+
-
+
-
+ Scrollbars
+
+
+
+
-
- Refresh Rate
+
+
-
+ Refresh Rate
+
+
+
+
-
+
-
+
-
+ Close Button Behavior
+
+
+
+
-
-
- Close Button Behavior
-
-
-
-
-
-
@@ -573,6 +576,12 @@
}
},
methods: {
+ addExperiment(flag) {
+ app.cfg.advanced.experiments.push(flag);
+ },
+ removeExperiment(flag) {
+ app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
+ },
toggleAudioContext: function(){
if (app.cfg.advanced.AudioContext){
CiderAudio.init();
diff --git a/src/renderer/views/svg/in-library.svg b/src/renderer/views/svg/in-library.svg
new file mode 100644
index 00000000..d5806ea9
--- /dev/null
+++ b/src/renderer/views/svg/in-library.svg
@@ -0,0 +1,13 @@
+
+
+
diff --git a/src/renderer/views/svg/pip.svg b/src/renderer/views/svg/pip.svg
index 40f5b738..76253ddc 100644
--- a/src/renderer/views/svg/pip.svg
+++ b/src/renderer/views/svg/pip.svg
@@ -2,12 +2,7 @@
- Open Cider on Startup
-
-
-
+
+
+ Open Cider on Startup
+
+
+
+