Merge branch 'develop' into develop

This commit is contained in:
GamingLiamStudios 2022-02-08 09:42:04 +11:00 committed by GitHub
commit 3f1bd2b0a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 53 additions and 797 deletions

View file

@ -54,7 +54,6 @@ export class BrowserWindow {
"components/equalizer",
"components/add-to-playlist",
"components/queue",
"components/queue-item",
"components/mediaitem-scroller-horizontal",
"components/mediaitem-scroller-horizontal-large",
"components/mediaitem-scroller-horizontal-sp",
@ -62,7 +61,6 @@ export class BrowserWindow {
"components/mediaitem-list-item",
"components/mediaitem-hrect",
"components/mediaitem-square",
"components/mediaitem-square-sp",
"components/mediaitem-mvview",
"components/libraryartist-item",
"components/listennow-child",

View file

@ -1,78 +1,5 @@
Vue.use(VueObserveVisibility);
var notyf = new Notyf();
// This is going to suck to code
var CiderContextMenu = {
Menu: function (event) {
this.items = []
},
async Create(event, menudata) {
var menuBackground = document.createElement("div");
var menu = document.createElement("div");
menu.classList.add("context-menu-body");
menu.classList.add("context-menu-open");
menuBackground.classList.add("context-menu");
menu.style.left = 0 + "px";
menu.style.top = 0 + "px";
menu.style.position = "absolute";
menu.style.zIndex = "99909";
menu.addEventListener("animationend", function () {
menu.classList.remove("context-menu-open");
}, {once: true});
function close() {
menuBackground.style.pointerEvents = "none";
menu.classList.add("context-menu-close");
menu.addEventListener("animationend", function () {
menuBackground.remove();
menu.remove();
}, {once: true});
}
// when menubackground is clicked, remove it
menuBackground.addEventListener("click", close);
menuBackground.addEventListener("contextmenu", close);
// add menu to menuBackground
menuBackground.appendChild(menu);
document.body.appendChild(menuBackground);
if (typeof menudata.items == "object") {
menudata.items = Object.values(menudata.items);
}
console.log(menudata);
// for each item in menudata create a menu item
for (var i = 0; i < menudata.items.length; i++) {
let item = document.createElement("button")
if (menudata.items[i]["disabled"] === true) {
continue
}
item.tabIndex = 0
item.classList.add("context-menu-item")
if (menudata.items[i]["icon"]) {
item.innerHTML += `<div class="sidebar-icon">${await app.getSvgIcon(menudata.items[i]["icon"])}</div>`
}
item.innerHTML += menudata.items[i].name
item.onclick = menudata.items[i].action
menu.appendChild(item)
}
menu.style.width = (menu.offsetWidth + 10) + "px";
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
// if menu would be off the screen, move it into view, but preserve the width
if (menu.offsetLeft + menu.offsetWidth > window.innerWidth) {
menu.style.left = (window.innerWidth - menu.offsetWidth) + "px";
}
if (menu.offsetTop + menu.offsetHeight > window.innerHeight) {
menu.style.top = (window.innerHeight - menu.offsetHeight) + "px";
}
return menuBackground;
}
}
const MusicKitObjects = {
LibraryPlaylist: function () {
@ -1242,10 +1169,24 @@ const app = new Vue({
return this.playerLCD.playbackDuration
}
},
convertToMins(time) {
let mins = Math.floor(time / 60)
let seconds = (Math.floor(time % 60) / 100).toFixed(2)
return `${mins}:${seconds.replace("0.", "")}`
convertTime(time) {
if (typeof time !== "number") {
time = parseInt(time)
}
const timeGates = {
600: 15,
3600: 14,
36000: 12,
}
for (let key in timeGates) {
if (time < key) {
return new Date(time * 1000).toISOString().substring(timeGates[key], 19)
}
}
return new Date(time * 1000).toISOString().substring(11, 19)
},
hashCode(str) {
let hash = 0,
@ -3073,23 +3014,6 @@ const app = new Vue({
})
self.$store.commit("setLCDArtwork", img)
})
// Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
// let angle = "140deg"
// let gradient = ""
// let colors = Object.values(palette).filter(color=>color!=null)
// if(colors.length > 0){
// let stops = []
// colors.forEach(color=>{
// stops.push(`${self._rgbToRgb(color._rgb)} 0%`)
// })
// stops.push(`${self._rgbToRgb(colors[0]._rgb)} 100%`)
// gradient = `linear-gradient(${angle}, ${stops.join(", ")}`
// }
//
// document.querySelector("#app").style.setProperty("--bgColor", gradient)
// }).setQuantizer(Vibrant.Quantizer.WebWorker)
try {
clearInterval(bginterval);
} catch (err) {
@ -3114,47 +3038,6 @@ const app = new Vue({
}
}, 200)
},
// getNowPlayingArtwork(size = 600) {
// if (typeof this.mk.nowPlayingItem === "undefined") return;
// let interval = setInterval(() => {
// try {
// if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackIDBG && document.querySelector('.app-playback-controls .artwork')) {
// this.currentTrackIDBG = this.mk.nowPlayingItem["id"];
// if (document.querySelector('.app-playback-controls .artwork') != null) {
// clearInterval(interval);
// }
// if (app.mk.nowPlayingItem.attributes.artwork != null && app.mk.nowPlayingItem.attributes.artwork.url != null && app.mk.nowPlayingItem.attributes.artwork.url!= '' ) {
// document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${decodeURI((this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"])).replace('{w}', size).replace('{h}', size)}")`);
// try {
// clearInterval(interval);
// } catch (err) {
// }
// } else {
// this.setLibraryArt()
// }
// } else if (this.mk.nowPlayingItem["id"] == this.currentTrackID) {
// try {
// clearInterval(interval);
// } catch (err) {
// }
// }
// } catch (e) {
// if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] && document.querySelector('.app-playback-controls .artwork')) {
// this.setLibraryArt()
// try {
// clearInterval(interval);
// } catch (err) {
// }
// }
// }
// }, 200)
// },
async getCurrentArtURL() {
try {
this.currentArtUrl = '';
@ -3169,11 +3052,6 @@ const app = new Vue({
data = data.data.data[0];
if (data != null && data !== "" && data.attributes != null && data.attributes.artwork != null) {
this.currentArtUrl = (data["attributes"]["artwork"]["url"] ?? '').replace('{w}', 50).replace('{h}', 50);
// if (this.currentArtUrl != ""){
// let attr = MusicKitInterop.getAttributes();
// attr.artwork.url = this.currentArtUrl;
// ipcRenderer.send('forceUpdateRPC',attr)
// }
try {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
} catch (e) {
@ -3398,18 +3276,11 @@ const app = new Vue({
}
},
async nowPlayingContextMenu(event) {
// function revisedRandId() {
// return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
// }
let self = this
let data_type = this.mk.nowPlayingItem.playParams.kind
let item_id = this.mk.nowPlayingItem.attributes.playParams.id ?? this.mk.nowPlayingItem.id
let isLibrary = this.mk.nowPlayingItem.attributes.playParams.isLibrary ?? false
let params = {"fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "t": "1"}
// let res = await app.mkapi(data_type, isLibrary , item_id, params);
// if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
// item_id = res.relationships.library.data[0].id
// }
app.selectedMediaItems = []
app.select_selectMediaItem(item_id, data_type, 0, '12344', isLibrary)
let useMenu = "normal"
@ -3466,54 +3337,43 @@ const app = new Vue({
app.promptAddToPlaylist()
}
},
{
"icon": "./assets/feather/plus.svg",
"id": "addToLibrary",
"name": app.getLz('action.addToLibrary') + " ...",
"disabled": false,
"action": function () {
app.addToLibrary(app.mk.nowPlayingItem.id);
// if (!isLibrary) {app.addToLibrary(item_id); this.mk.nowPlayingItem.attributes.playParams["isLibrary"] = true} else { app.removeFromLibrary(data_type,item_id); this.mk.nowPlayingItem.attributes.playParams["isLibrary"] = false};
}
},
{
"icon": "./assets/feather/radio.svg",
"name": app.getLz('action.startRadio'),
"action": function () {
app.mk.setStationQueue({song: app.mk.nowPlayingItem.id}).then(() => {
app.mk.play()
app.selectedMediaItems = []
})
}
},
{
"icon": "./assets/feather/share.svg",
"name": app.getLz('action.share'),
"action": function () {
app.mkapi(app.mk.nowPlayingItem.attributes?.playParams?.kind ?? app.mk.nowPlayingItem.type ?? 'songs', false, app.mk.nowPlayingItem._songId ?? app.mk.nowPlayingItem.id ?? '').then(u => {
app.copyToClipboard((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
})
{
"icon": "./assets/feather/plus.svg",
"id": "addToLibrary",
"name": app.getLz('action.addToLibrary') + " ...",
"disabled": false,
"action": function () {
app.addToLibrary(app.mk.nowPlayingItem.id);
}
},
{
"icon": "./assets/feather/radio.svg",
"name": app.getLz('action.startRadio'),
"action": function () {
app.mk.setStationQueue({song: app.mk.nowPlayingItem.id}).then(() => {
app.mk.play()
app.selectedMediaItems = []
})
}
},
{
"icon": "./assets/feather/share.svg",
"name": app.getLz('action.share'),
"action": function () {
app.mkapi(app.mk.nowPlayingItem.attributes?.playParams?.kind ?? app.mk.nowPlayingItem.type ?? 'songs', false, app.mk.nowPlayingItem._songId ?? app.mk.nowPlayingItem.id ?? '').then(u => {
app.copyToClipboard((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
})
}
}
}
]
}
}
if (this.contextExt) {
// if this.context-ext.normal is true append all options to the 'normal' menu which is a kvp of arrays
if (this.contextExt.normal) {
menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
}
}
// isLibrary = await app.inLibrary([this.mk.nowPlayingItem])
// console.warn(isLibrary)
// if(isLibrary.length != 0) {
// if (isLibrary[0].attributes.inLibrary) {
// menus.normal.items.find(x => x.id == "addToLibrary").disabled = true
// }
// }else{
// menus.normal.items.find(x => x.id == "addToLibrary").disabled = true
// }
this.showMenuPanel(menus[useMenu], event)
try {

View file

@ -1,10 +1,10 @@
@import url("ameframework.css");
@import url("assets/fonts/Inter/inter.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url("less/ameframework.less");
@import url("less/bootstrap.less");
@import url("less/notyf.less");

View file

@ -57,7 +57,7 @@
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
style="display: inline-block"></div>
</div>
<div class="audio-type ppe-icon" v-if="app.cfg.advanced.ciderPPE == true"></div>
<div class="audio-type ppe-icon" v-if="cfg.advanced.ciderPPE == true"></div>
<div class="song-artist-album">
<div class="song-artist-album-content"
:class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
@ -80,8 +80,8 @@
<div class="song-duration"
style="justify-content: space-between; height: 1px;"
:style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
<p style="width: auto">{{ convertToMins(getSongProgress()) }}</p>
<p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}
<p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
<p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}
</p>
</div>

View file

@ -41,8 +41,8 @@
<div class="song-progress">
<div class="song-duration" style="justify-content: space-between; height: 1px;"
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
<p style="width: auto">{{ app.convertToMins(app.getSongProgress()) }}</p>
<p style="width: auto">{{ app.convertToMins(app.mk.currentPlaybackDuration) }}</p>
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
</div>
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"

View file

@ -1,244 +0,0 @@
<script type="text/x-template" id="mediaitem-square-large">
<div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-square-large" ref="main2">
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
size="300"
:type="item.type"></mediaitem-artwork>
</div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<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','position': 'absolute',
width: '40px',
height: '40px',} :
{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','position': 'absolute',
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 ?? '' }}
</div>
<div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName" :style = "{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}" @click="if(item.attributes.artistName)app.searchAndNavigate(item,'artist')">
{{ item.attributes.artistName ?? '' }}
</div>
</div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0">
<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','position': 'absolute',
width: '40px',
height: '40px',} :
{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','position': 'absolute',
width: '120px',
height: '120px',}]" @click="console.log('as');contextMenu()">
<%- include("../svg/more.svg") %>
</div>
</div>
</div>
</script>
<script>
Vue.component('mediaitem-square-large', {
template: '#mediaitem-square-large',
props: ['item'],
data: function () {
return {
isVisible: false,
addedToLibrary: false,
app: this.$root,
}
},
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);
},
async isInLibrary() {
if (this.item.type && !this.item.type.includes("library")) {
var params = {
"fields[playlists]": "inLibrary",
"fields[albums]": "inLibrary",
"relate": "library",
"extend": this.revisedRandId()
}
var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
} else {
this.addedToLibrary = true
}
},
async removeFromLibrary(id) {
var params = {
"fields[playlists]": "inLibrary",
"fields[songs]": "inLibrary",
"fields[albums]": "inLibrary",
"relate": "library",
"extend": this.revisedRandId()
}
var id = this.item.id ?? this.item.attributes.playParams.id
var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
id = res.relationships.library.data[0].id
}
let kind = this.item.attributes.playParams.kind ?? this.item.type ?? '';
var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
app.mk.api.v3.music(`v1/me/library/${truekind}/${id.toString()}`,{},
{
fetchOptions: {
method: "DELETE"
}})
this.addedToLibrary = true
},
async contextMenu(event) {
if (!event) { event = this.$refs.main } else { console.log(event) }
let self = this
let useMenu = "normal"
await this.isInLibrary()
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, this.item.attributes.playParams.isLibrary ?? false)
} else {
useMenu = "multiple"
}
let menus = {
multiple: {
items: [
{
name: this.$root.getLz('action.playTracksNext').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
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: app.getLz('action.playTracksLater').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
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 = []
}
},
{
"id": "addToPlaylist",
"name": "Add to Playlist...",
"action": function () {
app.promptAddToPlaylist()
}
},
{
"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
}
;
}
},
{
"name": this.$root.getLz('term.share'),
"action": function () {
self.app.copyToClipboard(self.item.attributes.url)
}
}
]
}
}
CiderContextMenu.Create(event, menus[useMenu])
},
}
});
</script>

View file

@ -1,293 +0,0 @@
<script type="text/x-template" id="mediaitem-square-sp">
<div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}" width="250px">
<div @click.self='app.routeView(item)' v-if="isVisible"
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 : ''"
size="300"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:type="item.type"></mediaitem-artwork>
</div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<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': '153px','position': 'absolute','margin-left': '153px',
width: '30px',
height: '30px',} :
{margin: '35px',display:'none',
width: '120px',
height: '120px',}]" @click="clickContext()">
<%- include("../svg/more.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': '153px',
width: '30px', 'margin-left': '8px',
height: '30px',} :
{margin: '35px','position': 'absolute',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.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">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis "
:class="{'item-navigate': ((item.attributes.editorialNotes == null) && item.attributes.artistName)}"
:style="{ 'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : '' ,'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;"
@click="subtitleSearchNavigate(item)"
>
{{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
:(item.attributes.artistName ?? '') }}
</div>
</div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)' tabindex="0" v-if="isVisible">
<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': '153px','position': 'absolute','margin-left': '153px',
width: '30px',
height: '30px',} :
{margin: '35px','position': 'absolute', display: 'none',
width: '120px',
height: '120px',}]" @click="clickContext()">
<%- include("../svg/more.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': '153px',
width: '30px', 'margin-left': '8px',
height: '30px',} :
{margin: '35px','position': 'absolute',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
</div>
</div>
</script>
<script>
Vue.component('mediaitem-square-sp', {
template: '#mediaitem-square-sp',
props: ['item'],
data: function () {
return {
app: this.$root,
isVisible: true,
addedToLibrary : false,
}
},
methods: {
revisedRandId() {
return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
},
async isInLibrary() {
if (this.item.type && !this.item.type.includes("library")) {
var params = {"fields[playlists]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "extend": this.revisedRandId()}
var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
res = res.data.data[0]
this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
} else {
this.addedToLibrary = true
}
},
async removeFromLibrary(id) {
var params = {"fields[playlists]": "inLibrary","fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "extend": this.revisedRandId()}
var id = this.item.id ?? this.item.attributes.playParams.id
var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
res = res.data.data[0]
if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
id = res.relationships.library.data[0].id
}
let kind = this.item.attributes.playParams.kind ?? this.item.type ?? '';
var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
app.mk.api.v3.music(`v1/me/library/${truekind}/${id.toString()}`,{},
{
fetchOptions: {
method: "DELETE"
}})
this.addedToLibrary = true
},
subtitleSearchNavigate(item) {
if((item.attributes.editorialNotes == null) && item.attributes.artistName)app.searchAndNavigate(item,'artist')
},
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);
}
,
visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible
},
async contextMenu(event) {
if (!event) {
event = this.$refs.main
} else {
console.log(event)
}
let self = this
let useMenu = "normal"
await this.isInLibrary()
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, this.item.attributes.playParams.isLibrary ?? false)
} else {
useMenu = "multiple"
}
let menus = {
multiple: {
items: [
{
name: app.getLz('action.playTracksNext').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
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: app.getLz('action.playTracksLater').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
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 = []
}
},
{
"id": "addToPlaylist",
"name": "Add to Playlist...",
"action": function () {
app.promptAddToPlaylist()
}
},
{
"id": "love",
"name": "Love",
"disabled": true,
"action": function () {
app.love(self.item)
}
},
{
"id": "unlove",
"name": "Unlove",
"disabled": true,
"action": function () {
app.unlove(self.item)
}
},
{
"id": "dislike",
"name": "Dislike",
"disabled": true,
"action": function () {
app.dislike(self.item)
}
},
{
"id": "undo_dislike",
"name": "Undo dislike",
"disabled": true,
"action": function () {
app.unlove(self.item)
}
},
{
"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};
}
},
]
}
}
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
}
if ((self.item.attributes.playParams.kind ?? self.item.type).includes("playlist")) {
// remove the add to playlist option by id "addToPlaylist" using the .filter() method
menus.normal.items = menus.normal.items.filter(function (item) {
return item.id != "addToPlaylist"
})
}
CiderContextMenu.Create(event, menus[useMenu])
},
}
});
</script>

View file

@ -44,8 +44,8 @@
<div class="song-progress">
<div class="song-duration" style="justify-content: space-between; height: 1px; margin-bottom: 1px;"
:style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
<p style="width: auto">{{ app.convertToMins(app.getSongProgress()) }}</p>
<p style="width: auto">{{ app.convertToMins(app.mk.currentPlaybackDuration) }}</p>
<p style="width: auto">{{ app.convertTime(app.getSongProgress()) }}</p>
<p style="width: auto">{{ app.convertTime(app.mk.currentPlaybackDuration) }}</p>
</div>
<input type="range" step="0.01" min="0" :style="app.progressBarStyle()"

View file

@ -1,65 +0,0 @@
<script type="text/x-template" id="queue-item">
<template>
<div v-observe-visibility="{callback: visibilityChanged}"
@contextmenu="contextMenu"
class="cd-mediaitem-list-item">
<template v-if="isVisible">
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="34"
:type="item.type"></mediaitem-artwork>
</div>
<div class="info-rect" :style="{'padding-left': '16px'}">
<div class="title text-overflow-elipsis">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
<template v-if="item.attributes.artistName" >
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')">
{{ item.attributes.artistName }}
</div>
<template v-if="item.attributes.albumName">&nbsp;—&nbsp;</template>
<template v-if="item.attributes.albumName">
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'album')">
{{ item.attributes.albumName }}
</div>
</template>
</template>
</div>
</div>
<div class="duration">
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
</div>
</template>
</div>
</template>
</script>
<script>
Vue.component('queue-item', {
template: '#queue-item',
props: ['item'],
data: function () {
return {}
},
methods: {
contextMenu(event) {
let self = this
CiderContextMenu.Create(event, {
items: [{
"name": $root.getLz('action.removeFromQueue'),
"action": function () {
}
}]
});
},
msToMinSec(ms) {
var minutes = Math.floor(ms / 60000);
var seconds = ((ms % 60000) / 1000).toFixed(0);
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
},
}
});
</script>