improved artist page
This commit is contained in:
vapormusic
parent
2c0af49b08
commit
272d3392a1
7 changed files with 643 additions and 50 deletions
|
|
@ -42,6 +42,7 @@ export class BrowserWindow {
|
|||
"pages/apple-account-settings",
|
||||
"pages/library-songs",
|
||||
"pages/library-albums",
|
||||
"pages/library-artists",
|
||||
"pages/browse",
|
||||
"pages/settings",
|
||||
"pages/listen_now",
|
||||
|
|
@ -83,7 +84,7 @@ export class BrowserWindow {
|
|||
"components/mediaitem-hrect",
|
||||
"components/mediaitem-square",
|
||||
"components/mediaitem-mvview",
|
||||
"components/libraryartist-item",
|
||||
// "components/libraryartist-item",
|
||||
"components/listennow-child",
|
||||
"components/mediaitem-mvview-sp",
|
||||
"components/animatedartwork-view",
|
||||
|
|
@ -94,6 +95,7 @@ export class BrowserWindow {
|
|||
"components/castmenu",
|
||||
"components/artist-chip",
|
||||
"components/hello-world",
|
||||
"components/inline-collection-list",
|
||||
],
|
||||
appRoutes: [
|
||||
{
|
||||
|
|
@ -186,6 +188,11 @@ export class BrowserWindow {
|
|||
component: `<cider-library-albums :data="library.songs"></cider-library-albums>`,
|
||||
condition: `page == 'library-albums'`,
|
||||
onEnter: `getLibraryAlbumsFull(null, 1); getAlbumSort(); searchLibraryAlbums(1); getLibrarySongsFull() ;searchLibraryAlbums(1);`
|
||||
}, {
|
||||
page: "library-artists",
|
||||
component: `<cider-library-artists></cider-library-artists>`,
|
||||
condition: `page == 'library-artists'`,
|
||||
onEnter: `getLibraryArtistsFull(null, 0);`
|
||||
}, {
|
||||
page: "appleCurator",
|
||||
component: `<cider-applecurator :data="appleCurator"></cider-applecurator>`,
|
||||
|
|
|
|||
|
|
@ -278,6 +278,194 @@
|
|||
|
||||
}
|
||||
|
||||
// Podcast Page
|
||||
.content-inner.library-artists-page {
|
||||
// top: 0;
|
||||
height: calc(100% - var(--navigationBarHeight));
|
||||
padding: 0px;
|
||||
.inner-container {
|
||||
display: flex;
|
||||
height : calc(100% - var(--navigationBarHeight));
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
|
||||
.list-flat {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.podcast-artwork {
|
||||
width : 200px;
|
||||
margin: 16px auto;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.podcasts-list {
|
||||
height : 100%;
|
||||
width : 280px;
|
||||
background : rgb(200 200 200 / 10%);
|
||||
overflow-y : overlay;
|
||||
border-right: 1px solid var(--color2);
|
||||
flex : none;
|
||||
overflow-x : hidden;
|
||||
|
||||
.podcast-list-header {
|
||||
border-bottom : 1px solid var(--color2);
|
||||
font-size : 0.7em;
|
||||
padding : 6px;
|
||||
background : #ffffff17;
|
||||
text-transform: uppercase;
|
||||
font-weight : 600;
|
||||
opacity : 0.5;
|
||||
}
|
||||
|
||||
.podcasts-search {
|
||||
padding : 10px;
|
||||
position : sticky;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
border-bottom: 1px solid var(--color2);
|
||||
z-index : 2;
|
||||
background : #303030;
|
||||
}
|
||||
}
|
||||
|
||||
.episodes-list {
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
background: rgb(200 200 200 / 6%);
|
||||
overflow-y: overlay;
|
||||
overflow-x: hidden;
|
||||
|
||||
.episodes-inline-info {
|
||||
padding: 14px 14px 0px 14px;
|
||||
|
||||
.podcast-show-info {
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
flex-direction : column;
|
||||
}
|
||||
|
||||
.podcast-show-description {
|
||||
margin : 32px 6px;
|
||||
font-size : 0.8rem;
|
||||
white-space: pre-wrap;
|
||||
display : block;
|
||||
}
|
||||
|
||||
.podcast-artwork {
|
||||
width : 120px;
|
||||
margin: 0px auto;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.podcast-no-search-results {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.podcasts-details {
|
||||
width : 300px;
|
||||
flex : none;
|
||||
background : rgb(255 255 255 / 5%);
|
||||
overflow-y : overlay;
|
||||
overflow-x : hidden;
|
||||
top : 2%;
|
||||
z-index : 2;
|
||||
border-left : 1px solid var(--color2);
|
||||
padding-bottom: 1em;
|
||||
|
||||
.meta-btn {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.podcasts-details-header {
|
||||
display : flex;
|
||||
justify-content: end;
|
||||
align-items : center;
|
||||
position : sticky;
|
||||
top : 0;
|
||||
z-index : 2;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width : 50px;
|
||||
height : 42px;
|
||||
background-image : var(--gfx-closeBtn);
|
||||
background-position: center;
|
||||
background-repeat : no-repeat;
|
||||
-webkit-app-region : no-drag;
|
||||
appearance : none;
|
||||
border : 0;
|
||||
background-color : transparent;
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(196, 43, 28)
|
||||
}
|
||||
}
|
||||
|
||||
.podcast-genre {
|
||||
text-align : center;
|
||||
margin : 6px;
|
||||
font-size : 0.8em;
|
||||
font-weight: 500;
|
||||
opacity : 0.8;
|
||||
}
|
||||
|
||||
.podcast-metainfo {
|
||||
text-align: center;
|
||||
font-size : 0.7em;
|
||||
opacity : 0.8;
|
||||
}
|
||||
|
||||
.podcast-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.podcast-play-btn {
|
||||
width : 50%;
|
||||
display: block;
|
||||
margin : 0 auto;
|
||||
}
|
||||
|
||||
.podcast-description {
|
||||
margin : 12px;
|
||||
font-size : 0.75em;
|
||||
white-space: pre-wrap;
|
||||
display : block;
|
||||
line-break : anywhere;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1230px) {
|
||||
.content-inner.podcasts-page {
|
||||
.podcasts-details {
|
||||
height : 96%;
|
||||
width : 300px;
|
||||
flex : none;
|
||||
background : rgb(20 20 20 / 97%);
|
||||
overflow-y : overlay;
|
||||
overflow-x : hidden;
|
||||
position : absolute;
|
||||
right : 2%;
|
||||
top : 2%;
|
||||
border-radius: 10px;
|
||||
box-shadow : var(--ciderShadow-Generic);
|
||||
z-index : 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1230px) {
|
||||
.content-inner.podcasts-page {
|
||||
.podcasts-details {
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@ const app = new Vue({
|
|||
pluginPages: {
|
||||
page: "hello-world",
|
||||
pages: [],
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cfg: {
|
||||
|
|
|
|||
|
|
@ -46,11 +46,6 @@
|
|||
</template>
|
||||
</transition>
|
||||
<!-- Library - Artists-->
|
||||
<transition :name="chrome.desiredPageTransition" v-on:enter="getLibraryArtistsFull(null, 0);">
|
||||
<template v-if="page == 'library-artists'">
|
||||
<%- include('../pages/library-artists') %>');
|
||||
%>
|
||||
</template>
|
||||
</transition>
|
||||
|
||||
|
||||
</div>
|
||||
132
src/renderer/views/components/inline-collection-list.ejs
Normal file
132
src/renderer/views/components/inline-collection-list.ejs
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<script type="text/x-template" id="inline-collection-list">
|
||||
<div class="collection-page">
|
||||
<h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
|
||||
<div v-if="data['data'] != 'null'" class="well itemContainer">
|
||||
<template v-for="(item, key) in data.data">
|
||||
<template v-if="item.type == 'artists'">
|
||||
<mediaitem-square :item="item"></mediaitem-square>
|
||||
</template>
|
||||
<template v-else>
|
||||
<mediaitem-list-item
|
||||
v-if="getKind(item) == 'song'"
|
||||
:index="key"
|
||||
:item="item"></mediaitem-list-item>
|
||||
<mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
|
||||
</template>
|
||||
</template>
|
||||
<button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
|
||||
</button>
|
||||
</div>
|
||||
<transition name="fabfade">
|
||||
<button class="top-fab" v-show="showFab" @click="scrollToTop()">
|
||||
<%- include("../svg/arrow-up.svg") %>
|
||||
</button>
|
||||
</transition>
|
||||
<div class="well itemContainer" v-show="loading">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('inline-collection-list', {
|
||||
template: "#inline-collection-list",
|
||||
props: {
|
||||
data: {
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "artists"
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
triggerEnabled: true,
|
||||
canSeeTrigger: false,
|
||||
showFab: false,
|
||||
commonKind: "song",
|
||||
api: this.$root.mk.api,
|
||||
loading: false,
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
data: function(newVal, oldVal) {
|
||||
console.log("newdata",newVal);
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
getKind(item) {
|
||||
if (typeof item.kind != "undefined") {
|
||||
this.commonKind = item.kind;
|
||||
return item.kind
|
||||
}
|
||||
if (typeof item.attributes.playParams != "undefined") {
|
||||
this.commonKind = item.attributes.playParams.kind
|
||||
return item.attributes.playParams.kind
|
||||
}
|
||||
return this.commonKind
|
||||
},
|
||||
scrollToTop() {
|
||||
let target = document.querySelector(".header-text")
|
||||
document.querySelector("#app-content").scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
},
|
||||
getNext() {
|
||||
let self = this
|
||||
this.triggerEnabled = false;
|
||||
if (typeof this.data.next == "undefined") {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
|
||||
this.api.v3.music(this.data.next, app.collectionList.requestBody).then((response) => {
|
||||
console.log(response)
|
||||
if (!app.collectionList.response.groups) {
|
||||
this.data.data = this.data.data.concat(response.data.data);
|
||||
if (response.data.next) {
|
||||
this.data.next = response.data.next;
|
||||
this.triggerEnabled = true;
|
||||
}
|
||||
this.loading = false
|
||||
} else {
|
||||
if (!response.data.results[app.collectionList.response.groups]) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.data.data = this.data.data.concat(response.data.results[app.collectionList.response.groups].data);
|
||||
if (response.data.results[app.collectionList.response.groups].next) {
|
||||
this.data.next = response.data.results[app.collectionList.response.groups].next;
|
||||
this.triggerEnabled = true;
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
headerVisibility: function(isVisible, entry) {
|
||||
if (isVisible) {
|
||||
this.showFab = false;
|
||||
} else {
|
||||
this.showFab = true;
|
||||
}
|
||||
},
|
||||
visibilityChanged: function(isVisible, entry) {
|
||||
if (isVisible) {
|
||||
this.canSeeTrigger = true;
|
||||
this.getNext();
|
||||
} else {
|
||||
this.canSeeTrigger = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
49
src/renderer/views/pages/library-artists copy.ejs
Normal file
49
src/renderer/views/pages/library-artists copy.ejs
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<div class="content-inner">
|
||||
<div class="row">
|
||||
<div class="col" style="padding:0;">
|
||||
<h1 class="header-text">{{$root.getLz('term.artists')}}</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="padding:0;">
|
||||
<div class="search-input-container" style="width:100%;margin: 16px 0;">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search" style="width:100%;" spellcheck="false" :placeholder="$root.getLz('term.search') + '...'" @input="searchLibraryArtists" v-model="library.artists.search" class="search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto flex-center">
|
||||
<div class="row">
|
||||
<!-- <div class="col">
|
||||
<select class="md-select" v-model="library.artists.sorting[1]" @change="searchLibraryArtists(1)">
|
||||
<optgroup label="Sort By">
|
||||
<option v-for="(sort, index) in library.artists.sortingOptions" :value="index">{{ sort }}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div> -->
|
||||
<div class="col">
|
||||
<select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryArtists(1)">
|
||||
<optgroup :label="$root.getLz('term.sortOrder')">
|
||||
<option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option>
|
||||
<option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="col">
|
||||
<select class="md-select" v-model="library.artists.viewAs">
|
||||
<optgroup label="View As">
|
||||
<option value="covers">Cover Art</option>
|
||||
<option value="list">List</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well">
|
||||
<!-- <mediaitem-square v-if="library.artists.viewAs == 'covers'" :item="item" v-for="item in library.artists.displayListing">
|
||||
</mediaitem-square> -->
|
||||
<libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
|
||||
</libraryartist-item>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,49 +1,271 @@
|
|||
<div class="content-inner">
|
||||
<div class="row">
|
||||
<div class="col" style="padding:0;">
|
||||
<h1 class="header-text">{{$root.getLz('term.artists')}}</h1>
|
||||
<script type="text/x-template" id="cider-library-artists">
|
||||
<div class="content-inner library-artists-page">
|
||||
<!-- <div class="row">
|
||||
<div class="col" style="padding:0;">
|
||||
<h1 class="header-text">{{$root.getLz('term.artists')}}</h1>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
<div class="inner-container">
|
||||
<div class="podcasts-list">
|
||||
<libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
|
||||
</libraryartist-item>
|
||||
</div>
|
||||
<div class="episodes-list" >
|
||||
<div class="episodes-inline-info">
|
||||
<inline-collection-list v-if="clresponse != []" :data="clresponse" :type="cltype" :title="cltitle"></inline-collection-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="padding:0;">
|
||||
<div class="search-input-container" style="width:100%;margin: 16px 0;">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search" style="width:100%;" spellcheck="false" :placeholder="$root.getLz('term.search') + '...'" @input="searchLibraryArtists" v-model="library.artists.search" class="search-input">
|
||||
</script>
|
||||
<script>
|
||||
Vue.component('cider-library-artists', {
|
||||
template: '#cider-library-artists',
|
||||
data: function () {
|
||||
return {
|
||||
library: this.$root.library,
|
||||
app: this.$root,
|
||||
ciderPodcasts: [],
|
||||
podcasts: [],
|
||||
episodes: [],
|
||||
search: {
|
||||
term: "",
|
||||
loading: false,
|
||||
results: [],
|
||||
resultsLibrary: [],
|
||||
next: ""
|
||||
},
|
||||
podcastSelected: {
|
||||
id: -1
|
||||
},
|
||||
selected: {
|
||||
id: -1
|
||||
},
|
||||
collectionList: {
|
||||
response: null, title: null, type: null, requestBody: null
|
||||
},
|
||||
clresponse: [],
|
||||
cltitle: '',
|
||||
cltype: "artists",
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let self = this;
|
||||
this.$root.$on('ap-inlinecollection', function(e){
|
||||
console.log("hey",e)
|
||||
self.clresponse = e.response;
|
||||
self.cltitle = e.title ?? '';
|
||||
self.cltype = e.type ;
|
||||
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getInlineCollection(e){
|
||||
console.log("hey",e);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script type="text/x-template" id="libraryartist-item">
|
||||
<div v-observe-visibility="{callback: visibilityChanged}"
|
||||
@click="select"
|
||||
class="cd-mediaitem-list-item"
|
||||
:class="{'mediaitem-selected': app.select_hasMediaItem(guid)}"
|
||||
@contextmenu="contextMenu">
|
||||
<template v-if="isVisible">
|
||||
<div class="artwork" v-if="showArtwork == true">
|
||||
<mediaitem-artwork
|
||||
:url="getArtwork()"
|
||||
size="50"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto flex-center">
|
||||
<div class="row">
|
||||
<!-- <div class="col">
|
||||
<select class="md-select" v-model="library.artists.sorting[1]" @change="searchLibraryArtists(1)">
|
||||
<optgroup label="Sort By">
|
||||
<option v-for="(sort, index) in library.artists.sortingOptions" :value="index">{{ sort }}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div> -->
|
||||
<div class="col">
|
||||
<select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryArtists(1)">
|
||||
<optgroup :label="$root.getLz('term.sortOrder')">
|
||||
<option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option>
|
||||
<option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}"
|
||||
@dblclick="app.routeView(item)">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<!-- <div class="col">
|
||||
<select class="md-select" v-model="library.artists.viewAs">
|
||||
<optgroup label="View As">
|
||||
<option value="covers">Cover Art</option>
|
||||
<option value="list">List</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="well">
|
||||
<!-- <mediaitem-square v-if="library.artists.viewAs == 'covers'" :item="item" v-for="item in library.artists.displayListing">
|
||||
</mediaitem-square> -->
|
||||
<libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
|
||||
</libraryartist-item>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('libraryartist-item', {
|
||||
template: '#libraryartist-item',
|
||||
data: function () {
|
||||
return {
|
||||
isVisible: false,
|
||||
addedToLibrary: false,
|
||||
guid: this.uuidv4(),
|
||||
app: this.$root,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
'item': {type: Object, required: true},
|
||||
'parent': {type: String, required: false},
|
||||
'index': {type: Number, required: false, default: -1},
|
||||
'show-artwork': {type: Boolean, default: true},
|
||||
'show-library-status': {type: Boolean, default: true},
|
||||
'show-meta-data': {type: Boolean, default: false},
|
||||
'show-duration': {type: Boolean, default: true},
|
||||
'contextExt': {type: Object, required: false},
|
||||
},
|
||||
methods: {
|
||||
uuidv4() {
|
||||
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
||||
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||||
);
|
||||
},
|
||||
msToMinSec(ms) {
|
||||
var minutes = Math.floor(ms / 60000);
|
||||
var seconds = ((ms % 60000) / 1000).toFixed(0);
|
||||
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
|
||||
},
|
||||
getDataType() {
|
||||
return this.item.type
|
||||
},
|
||||
async select(e) {
|
||||
let u = this.item
|
||||
let u1 = await app.mk.api.v3.music(`/v1/me/library/artists/${u.id}/albums`, {
|
||||
"platform": "web",
|
||||
"include[library-albums]": "artists,tracks",
|
||||
"include[library-artists]": "catalog",
|
||||
"fields[artists]": "url",
|
||||
"includeOnly": "catalog,artists"
|
||||
})
|
||||
this.showCollection({data : Object.assign({},u1.data.data)}, u.attributes.name?? '', '');
|
||||
//app.select_selectMediaItem(u.id, this.getDataType(), this.index, this.guid, true)
|
||||
},
|
||||
showCollection(response, title, type, requestBody = {}){
|
||||
console.log(response, title, type, requestBody);
|
||||
this.$root.$emit('ap-inlinecollection', {
|
||||
response: response, title: title, type: type, requestBody: {}}
|
||||
);
|
||||
},
|
||||
getArtwork(){
|
||||
let u = ""
|
||||
try{
|
||||
u = this.item.relationships.catalog.data[0].attributes.artwork.url}
|
||||
catch (e){};
|
||||
return u;
|
||||
},
|
||||
contextMenu(event) {
|
||||
|
||||
let self = this
|
||||
let data_type = this.getDataType()
|
||||
|
||||
let item = self.item
|
||||
item.attributes.artistName = item.attributes.name;
|
||||
|
||||
let useMenu = "normal"
|
||||
if (app.selectedMediaItems.length <= 1) {
|
||||
app.selectedMediaItems = []
|
||||
app.select_selectMediaItem(this.item.id, data_type, this.index, this.guid, true)
|
||||
} else {
|
||||
useMenu = "multiple"
|
||||
}
|
||||
|
||||
let menus = {
|
||||
multiple: {
|
||||
items: [] //
|
||||
},
|
||||
normal: {
|
||||
items: [
|
||||
{
|
||||
"name": app.getLz('action.goToArtist'),
|
||||
"icon": "./assets/feather/user.svg",
|
||||
"action": function () {
|
||||
app.searchAndNavigate(self.item, 'artist')
|
||||
console.log(self.item)
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/radio.svg",
|
||||
"name": app.getLz('action.startRadio'),
|
||||
"action": function () {
|
||||
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
|
||||
app.mk.play()
|
||||
app.selectedMediaItems = []
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "./assets/feather/share.svg",
|
||||
"name": app.getLz('action.share'),
|
||||
"action": function () {
|
||||
if (!self.item.attributes.url && self.item.relationships){
|
||||
if (self.item.relationships.catalog){
|
||||
app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {self.app.copyToClipboard((u.data.data.length && u.data.data.length > 0)? u.data.data[0].attributes.url : u.data.data.attributes.url)})
|
||||
}
|
||||
} else {
|
||||
self.app.copyToClipboard(self.item.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)
|
||||
}
|
||||
if (this.contextExt.multiple) {
|
||||
menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
|
||||
}
|
||||
}
|
||||
//CiderContextMenu.Create(event, menus[useMenu]); // Depreciated Context Menu
|
||||
app.showMenuPanel(menus[useMenu], event);
|
||||
|
||||
},
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
this.isVisible = isVisible
|
||||
},
|
||||
addToLibrary() {
|
||||
let item = this.item
|
||||
if (item.attributes.playParams.id) {
|
||||
console.log('adding to library', item.attributes.playParams.id)
|
||||
app.addToLibrary(item.attributes.playParams.id.toString())
|
||||
this.addedToLibrary = true
|
||||
} else if (item.id) {
|
||||
console.log('adding to library', item.id)
|
||||
app.addToLibrary(item.id.toString())
|
||||
this.addedToLibrary = true
|
||||
}
|
||||
},
|
||||
async removeFromLibrary() {
|
||||
let item = this.item
|
||||
let params = {"fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library"}
|
||||
let id = item.id ?? item.attributes.playParams.id
|
||||
let res = await app.mkapi(item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.playParams.id ?? 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.data.item ?? '';
|
||||
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
|
||||
if (item.attributes.playParams.id) {
|
||||
console.log('remove from library', id)
|
||||
app.removeFromLibrary(truekind, id)
|
||||
this.addedToLibrary = false
|
||||
} else if (item.id) {
|
||||
console.log('remove from library', id)
|
||||
app.removeFromLibrary(truekind, id)
|
||||
this.addedToLibrary = false
|
||||
}
|
||||
},
|
||||
playTrack() {
|
||||
let item = this.item
|
||||
let parent = this.parent
|
||||
let childIndex = this.index
|
||||
console.log(item, parent, childIndex)
|
||||
if (parent != null && childIndex != null) {
|
||||
app.queueParentandplayChild(parent, childIndex, item);
|
||||
} else {
|
||||
app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue