okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

playlist/album revamp, temp disabled inline playlists

Browse source 
revamped playlists/albums pages

temporarily disabled inline versions until they are updated
This commit is contained in:
booploops 2022-04-20 21:43:26 -07:00
parent 355495c6da
commit 26d17be145
7 changed files with 216 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/renderer/less/bootstrap.less vendored
View file

@ -991,6 +991,18 @@
opacity : 0; opacity : 0;
} }
.fade {
transition: opacity 0.15s var(--appleEase);
}
@media (prefers-reduced-motion: reduce) {
.fade {
transition: none;
}
}
.fade:not(.show) {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog { .modal.fade .modal-dialog {
transition: none; transition: none;
@ -2424,6 +2436,7 @@ fieldset:disabled .btn {
-webkit-user-drag: none; -webkit-user-drag: none;
// transition: transform .35s var(--appleEase), background-color .35s var(--appleEase); // transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
font-weight: 500; font-weight: 500;
margin: 0px 4px;
&:hover { &:hover {
// transition: transform .35s var(--appleEase), background-color 0s var(--appleEase); // transition: transform .35s var(--appleEase), background-color 0s var(--appleEase);
background-color: var(--hover); background-color: var(--hover);

36
src/renderer/less/pages.less
View file

@ -493,10 +493,41 @@
//background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%); //background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%);
top : 0; top : 0;
padding-top : var(--navigationBarHeight); padding-top : var(--navigationBarHeight);
display:flex;
flex-direction: column;
height: 100%;
overflow: hidden;
.playlist-body { .playlist-body {
padding : var(--contentInnerPadding) 2em; padding : 32px;
margin-top: -75px; // margin-top: -75px;
overflow-y:overlay;
height:100%;
padding:0px;
background-color: var(--color1);
&.scrollbody {
.tabs {
display: flex;
flex-flow: column;
height: 100%;
.tab-content {
height: 100%;
overflow: hidden;
margin:0px;
.tab-pane {
height: 100%;
overflow-y: overlay;
overflow-x:hidden;
padding: var(--contentInnerPadding);
.well {
margin:0px;
}
}
}
}
}
} }
.floating-header { .floating-header {
@ -510,6 +541,7 @@
background : rgba(0, 0, 0, 0.25); background : rgba(0, 0, 0, 0.25);
top : var(--navigationBarHeight); top : var(--navigationBarHeight);
transition : opacity 0.1s var(--appleEase); transition : opacity 0.1s var(--appleEase);
display: none;
} }
.playlist-display { .playlist-display {

3
src/renderer/main/vueapp.js
View file

@ -1652,7 +1652,8 @@ const app = new Vue({
params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright" params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright"
} }
if (this.cfg.advanced.experiments.includes('inline-playlists')) { // if (this.cfg.advanced.experiments.includes('inline-playlists')) {
if(false) {
let showModal = kind.toString().includes("album") || kind.toString().includes("playlist") let showModal = kind.toString().includes("album") || kind.toString().includes("playlist")
if (app.page.includes("playlist") || app.page.includes("album")) { if (app.page.includes("playlist") || app.page.includes("album")) {
showModal = false showModal = false

5
src/renderer/views/components/mediaitem-scroller-horizontal.ejs
View file

@ -1,5 +1,5 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal"> <script type="text/x-template" id="mediaitem-scroller-horizontal">
<vue-horizontal> <vue-horizontal ref="horizontal">
<slot></slot> <slot></slot>
<mediaitem-square :key="item?.id ?? ''" :kind="kind" :item="item" v-for="item in items"></mediaitem-square> <mediaitem-square :key="item?.id ?? ''" :kind="kind" :item="item" v-for="item in items"></mediaitem-square>
</vue-horizontal> </vue-horizontal>
@ -24,6 +24,9 @@
app: this.$root, app: this.$root,
} }
}, },
mounted() {
// this.$refs.horizontal.refresh()
},
methods: {} methods: {}
}); });
</script> </script>

164
src/renderer/views/pages/cider-playlist.ejs
View file

@ -142,65 +142,70 @@
</div> </div>
</div> </div>
</div> </div>
<div class="playlist-body"> <div class="playlist-body scrollbody">
<div class="well">
<div style="width:100%"> <b-tabs pills align="center" content-class="mt-3">
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'" <b-tab title="Tracks">
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()"> <div class="">
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1"> <div style="width:100%">
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" <draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
:showIndex="true" v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')" <template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
:context-ext="buildContextMenu()"
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
</template>
<template v-else>
<div v-for="disc in nestedPlaylist">
<div class="playlist-time">{{($root.getLz("term.discNumber") ?? "").replace("${discNumber}",disc.disc)}}</div>
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" <mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
:showIndex="true" :showIndex="true"
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')" :showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
:context-ext="buildContextMenu()" :context-ext="buildContextMenu()"
v-for="(item,index) in disc.tracks"></mediaitem-list-item> v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
</div> </template>
<template v-else>
<div v-for="disc in nestedPlaylist">
<div class="playlist-time">{{($root.getLz("term.discNumber") ?? "").replace("${discNumber}",disc.disc)}}</div>
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
:showIndex="true"
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
:context-ext="buildContextMenu()"
v-for="(item,index) in disc.tracks"></mediaitem-list-item>
</div>
</template> </template>
</draggable> </draggable>
</div> </div>
</div> </div>
<div class="friends-info" v-if="itemBadges.length != 0"> <div class="friends-info" v-if="itemBadges.length != 0">
<div class="well"> <div class="well">
<div class="badge-container"> <div class="badge-container">
<div class="socialBadge" :title="`${badge.attributes.name} - @${badge.attributes.handle}`" <div class="socialBadge" :title="`${badge.attributes.name} - @${badge.attributes.handle}`"
v-for="badge in itemBadges"> v-for="badge in itemBadges">
<mediaitem-artwork <mediaitem-artwork
:url="badge.attributes.artwork.url" :url="badge.attributes.artwork.url"
:size="60"></mediaitem-artwork> :size="60"></mediaitem-artwork>
</div>
</div>
</div> </div>
</div> </div>
</div> <div class="playlist-time">
</div> {{getFormattedDate()}}
<div class="playlist-time"> </div>
{{getFormattedDate()}} <div class="playlist-time total">{{app.getTotalTime()}}</div>
</div> <div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') "
<div class="playlist-time total">{{app.getTotalTime()}}</div> style="width: 50%;">
<div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') " {{data.attributes.copyright}}
style="width: 50%;"> </div>
{{data.attributes.copyright}} <template
</div> v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
<template <div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold"
v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0"> @click="app.routeView(data.relationships.catalog.data[0])">
<div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold" {{$root.getLz("action.showAlbum")}}
@click="app.routeView(data.relationships.catalog.data[0])"> </div>
{{$root.getLz("action.showAlbum")}} </template>
</div> <hr>
</template> </b-tab>
<hr> <template v-if="typeof data.views != 'undefined'">
<template v-if="typeof data.meta != 'undefined'"> <b-tab lazy :title="data.views[view].attributes.title" v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
<div v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0"> <div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3>{{ data.views[view].attributes.title }}</h3> <h3>{{ data.views[view].attributes.title }}</h3>
</div> </div>
@ -211,9 +216,11 @@
:items="data.views[view].data"></mediaitem-scroller-horizontal> :items="data.views[view].data"></mediaitem-scroller-horizontal>
</div> </div>
</div> </div>
</div> </div>
</template> </b-tab>
</template>
</b-tabs>
</div> </div>
</template> </template>
</div> </div>
@ -254,31 +261,32 @@
} }
}, },
methods: { methods: {
openInfoModal(){ openInfoModal() {
app.moreinfodata = []; app.moreinfodata = [];
app.moreinfodata = { app.moreinfodata = {
title : this.data?.attributes ? (this.data?.attributes?.name ?? title: this.data?.attributes ? (this.data?.attributes?.name ??
(this.data?.attributes?.title ?? '') ?? '') : '', (this.data?.attributes?.title ?? '') ?? '') : '',
subtitle: this.data?.attributes?.artistName ?? '', subtitle: this.data?.attributes?.artistName ?? '',
content: ((this.data?.attributes?.editorialNotes != null ) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '') ) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : '')) content: ((this.data?.attributes?.editorialNotes != null) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '')) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : ''))
} }
app.modals.moreInfo = true; app.modals.moreInfo = true;
}, },
generateNestedPlaylist(){ generateNestedPlaylist() {
this.nestedPlaylist = []; this.nestedPlaylist = [];
if (this.data?.type?.includes("album")){ if (this.data?.type?.includes("album")) {
console.log(this.data.relationships.tracks.data) console.log(this.data.relationships.tracks.data)
let songlists = this.data.relationships.tracks.data; let songlists = this.data.relationships.tracks.data;
let discs = songlists.map(x => {return x.attributes.discNumber}).filter((item, i, ar) => ar.indexOf(item) === i); let discs = songlists.map(x => { return x.attributes.discNumber }).filter((item, i, ar) => ar.indexOf(item) === i);
if (discs && discs.length > 1){ if (discs && discs.length > 1) {
for (disc of discs){ for (disc of discs) {
let songs = songlists.filter(x => x.attributes.discNumber == disc); let songs = songlists.filter(x => x.attributes.discNumber == disc);
this.nestedPlaylist.push({disc: disc, tracks: songs}) this.nestedPlaylist.push({ disc: disc, tracks: songs })
}
} }
} console.log(this.nestedPlaylist)
console.log(this.nestedPlaylist)
}}, }
},
isHeaderVisible(visible) { isHeaderVisible(visible) {
this.headerVisible = visible this.headerVisible = visible
}, },
@ -363,7 +371,7 @@
this.confirm = false this.confirm = false
}, },
async removeFromLibrary(id) { async removeFromLibrary(id) {
const params = {"fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library"}; const params = { "fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library" };
var id = this.data.id ?? this.data.attributes.playParams.id var id = this.data.id ?? this.data.attributes.playParams.id
const res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false, this.data.attributes.playParams.id ?? this.data.id, params); const res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false, this.data.attributes.playParams.id ?? this.data.id, params);
if (res.data.data[0] && res.data.data[0].relationships && res.data.data[0].relationships.library && res.data.data[0].relationships.library.data && res.data.data[0].relationships.library.data.length > 0) { if (res.data.data[0] && res.data.data[0].relationships && res.data.data[0].relationships.library && res.data.data[0].relationships.library.data && res.data.data[0].relationships.library.data.length > 0) {
@ -466,9 +474,9 @@
let self = this let self = this
let artistId = null let artistId = null
if(typeof this.data.relationships.artists != "undefined") { if (typeof this.data.relationships.artists != "undefined") {
artistId = this.data.relationships.artists.data[0].id artistId = this.data.relationships.artists.data[0].id
if(this.data.relationships.artists.data[0].type == "library-artists") { if (this.data.relationships.artists.data[0].type == "library-artists") {
artistId = this.data.relationships.artists.data[0].relationships.catalog.data[0].id artistId = this.data.relationships.artists.data[0].relationships.catalog.data[0].id
} }
} }
@ -522,15 +530,15 @@
} }
} }
if(artistId != null) { if (artistId != null) {
if(app.followingArtist(artistId)){ if (app.followingArtist(artistId)) {
menuItems.items.follow.hidden = true menuItems.items.follow.hidden = true
menuItems.items.unfollow.hidden = false menuItems.items.unfollow.hidden = false
} else { } else {
menuItems.items.follow.hidden = false menuItems.items.follow.hidden = false
menuItems.items.unfollow.hidden = true menuItems.items.unfollow.hidden = true
} }
}else{ } else {
menuItems.items.follow.hidden = true menuItems.items.follow.hidden = true
menuItems.items.unfollow.hidden = true menuItems.items.unfollow.hidden = true
} }
@ -607,7 +615,7 @@
let query = (this.data ?? app.showingPlaylist).relationships.tracks.data.map(item => new MusicKit.MediaItem(item)); let query = (this.data ?? app.showingPlaylist).relationships.tracks.data.map(item => new MusicKit.MediaItem(item));
app.mk.stop().then(function () { app.mk.stop().then(function () {
app.mk.setQueue({[truekind]: [id], parameters: {l: app.mklang}}).then(function () { app.mk.setQueue({ [truekind]: [id], parameters: { l: app.mklang } }).then(function () {
app.mk.play().then(function () { app.mk.play().then(function () {
if (query.length > 100) { if (query.length > 100) {
let u = query.slice(100); let u = query.slice(100);

133
src/renderer/views/pages/playlist-inline.ejs
View file

@ -151,78 +151,85 @@
</div> </div>
</div> </div>
</div> </div>
<div class="playlist-body"> <div class="playlist-body scrollbody">
<div class="well">
<div style="width:100%"> <b-tabs pills align="center" content-class="mt-3">
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'" <b-tab title="Tracks">
v-model="data.relationships.tracks.data" @start="drag=true" <div class="">
@end="drag=false;put()"> <div style="width:100%">
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1"> <draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
:showIndex="true" <template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')" <mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
:context-ext="buildContextMenu()" :showIndex="true"
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item> :showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
</template> :context-ext="buildContextMenu()"
<template v-else> v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
<div v-for="disc in nestedPlaylist"> </template>
<div class="playlist-time">{{($root.getLz("term.discNumber") ?? "").replace("${discNumber}",disc.disc)}}</div> <template v-else>
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" <div v-for="disc in nestedPlaylist">
:showIndex="true" <div class="playlist-time">{{($root.getLz("term.discNumber") ?? "").replace("${discNumber}",disc.disc)}}</div>
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')" <mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
:context-ext="buildContextMenu()" :showIndex="true"
v-for="(item,index) in disc.tracks"></mediaitem-list-item> :showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
:context-ext="buildContextMenu()"
v-for="(item,index) in disc.tracks"></mediaitem-list-item>
</div>
</template>
</draggable>
</div>
</div>
<div class="friends-info" v-if="itemBadges.length != 0">
<div class="well">
<div class="badge-container">
<div class="socialBadge" :title="`${badge.attributes.name} - @${badge.attributes.handle}`"
v-for="badge in itemBadges">
<mediaitem-artwork
:url="badge.attributes.artwork.url"
:size="60"></mediaitem-artwork>
</div>
</div> </div>
</template>
</draggable>
</div>
</div>
<div class="friends-info" v-if="itemBadges.length != 0">
<div class="well">
<div class="badge-container">
<div class="socialBadge"
:title="`${badge.attributes.name} - @${badge.attributes.handle}`"
v-for="badge in itemBadges">
<mediaitem-artwork
:url="badge.attributes.artwork.url"
:size="60"></mediaitem-artwork>
</div> </div>
</div> </div>
</div> <div class="playlist-time">
</div> {{getFormattedDate()}}
<div class="playlist-time"> </div>
{{getFormattedDate()}} <div class="playlist-time total">{{app.getTotalTime()}}</div>
</div> <div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') "
<div class="playlist-time total">{{app.getTotalTime()}}</div> style="width: 50%;">
<div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') " {{data.attributes.copyright}}
style="width: 50%;"> </div>
{{data.attributes.copyright}} <template
</div> v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
<template <div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold"
v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0"> @click="app.routeView(data.relationships.catalog.data[0])">
<div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold" {{$root.getLz("action.showAlbum")}}
@click="app.routeView(data.relationships.catalog.data[0])"> </div>
{{$root.getLz("action.showAlbum")}} </template>
</div> <hr>
</template> </b-tab>
<hr> <template v-if="typeof data.views != 'undefined'">
<template v-if="typeof data.meta != 'undefined'"> <b-tab lazy :title="data.views[view].attributes.title" v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
<div v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0"> <div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3>{{ data.views[view].attributes.title }}</h3> <h3>{{ data.views[view].attributes.title }}</h3>
</div> </div>
</div> </div>
<div> <div class="row">
<mediaitem-scroller-horizontal <div class="col">
:items="data.views[view].data"></mediaitem-scroller-horizontal> <mediaitem-scroller-horizontal
:items="data.views[view].data"></mediaitem-scroller-horizontal>
</div>
</div> </div>
</div> </div>
</template> </b-tab>
</template>
</b-tabs>
</div> </div>
</template> </template>
</div> </div>

2
src/renderer/views/pages/settings.ejs
View file

@ -919,7 +919,7 @@
{{$root.getLz('settings.option.experimental.inline_playlists')}} {{$root.getLz('settings.option.experimental.inline_playlists')}}
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.advanced.experiments.includes('inline-playlists')" @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')" switch/> <input type="checkbox" disabled v-model="app.cfg.advanced.experiments.includes('inline-playlists')" @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')" switch/>
</div> </div>
</div> </div>