removed CiderContextMenu, cleaned out some unused files
This commit is contained in:
booploops
parent
3340fb93df
commit
f02558a9fd
5 changed files with 0 additions and 677 deletions
|
|
@ -54,7 +54,6 @@ export class BrowserWindow {
|
||||||
"components/equalizer",
|
"components/equalizer",
|
||||||
"components/add-to-playlist",
|
"components/add-to-playlist",
|
||||||
"components/queue",
|
"components/queue",
|
||||||
"components/queue-item",
|
|
||||||
"components/mediaitem-scroller-horizontal",
|
"components/mediaitem-scroller-horizontal",
|
||||||
"components/mediaitem-scroller-horizontal-large",
|
"components/mediaitem-scroller-horizontal-large",
|
||||||
"components/mediaitem-scroller-horizontal-sp",
|
"components/mediaitem-scroller-horizontal-sp",
|
||||||
|
|
@ -62,7 +61,6 @@ export class BrowserWindow {
|
||||||
"components/mediaitem-list-item",
|
"components/mediaitem-list-item",
|
||||||
"components/mediaitem-hrect",
|
"components/mediaitem-hrect",
|
||||||
"components/mediaitem-square",
|
"components/mediaitem-square",
|
||||||
"components/mediaitem-square-sp",
|
|
||||||
"components/mediaitem-mvview",
|
"components/mediaitem-mvview",
|
||||||
"components/libraryartist-item",
|
"components/libraryartist-item",
|
||||||
"components/listennow-child",
|
"components/listennow-child",
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,5 @@
|
||||||
Vue.use(VueObserveVisibility);
|
Vue.use(VueObserveVisibility);
|
||||||
var notyf = new Notyf();
|
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 = {
|
const MusicKitObjects = {
|
||||||
LibraryPlaylist: function () {
|
LibraryPlaylist: function () {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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"> — </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>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue