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

added fancy playlist transformation

Browse source
This commit is contained in:
booploops 2022-04-21 00:46:30 -07:00
parent ac5a024d14
commit 1baf6e5f9a
2 changed files with 111 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -498,6 +498,11 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
.mediaContainer {
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
width: 260px;height:260px;
}
.playlist-body { .playlist-body {
padding : 32px; padding : 32px;
// margin-top: -75px; // margin-top: -75px;
@ -553,6 +558,7 @@
min-height: 300px; min-height: 300px;
position : relative; position : relative;
box-shadow: 0px 4px 6px 3px rgb(0 0 0 / 10%); box-shadow: 0px 4px 6px 3px rgb(0 0 0 / 10%);
transition: min-height 0.5s ease-in-out;
.artworkContainer { .artworkContainer {
position : absolute; position : absolute;
@ -630,12 +636,14 @@
} }
.playlist-desc { .playlist-desc {
transition: height .2s ease-in-out, opacity .2s ease-in-out;
box-sizing : border-box; box-sizing : border-box;
font-size : 14px; font-size : 14px;
flex-shrink : unset; flex-shrink : unset;
margin-right: 5px; margin-right: 5px;
max-height : 100px; max-height : 100px;
position : relative; position : relative;
height : 4vh;
.content { .content {
height : 4vh; height : 4vh;
@ -732,6 +740,8 @@
font-size: 0.9em; font-size: 0.9em;
margin : 6px; margin : 6px;
opacity : 0.7; opacity : 0.7;
transition: height .2s ease-in-out, opacity .2s ease-in-out;
height: 0.9em;
} }
&.inline-playlist { &.inline-playlist {
@ -776,6 +786,35 @@
} }
} }
} }
&.plmin {
.playlist-display {
transition: min-height 0.5s ease-in-out;
min-height: 200px;
.playlistInfo {
}
.mediaContainer {
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
width: 128px!important;
height: 128px!important;
}
.playlist-time {
transition: height .2s ease-in-out, opacity .2s ease-in-out;
height: 0px;
opacity: 0;
}
.playlist-desc {
transition: height .2s ease-in-out, opacity .2s ease-in-out;
height: 0px!important;
opacity: 0;
}
}
}
} }
@keyframes playlistArtworkFadeIn { @keyframes playlistArtworkFadeIn {

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

@ -1,5 +1,6 @@
<script type="text/x-template" id="cider-playlist"> <script type="text/x-template" id="cider-playlist">
<div class="content-inner playlist-page" v-if="data != [] && data.attributes != null" <div class="content-inner playlist-page" :class="classes" v-if="data != [] && data.attributes != null"
@mouseleave="minClass(false)"
:style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}"> :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
<template v-if="app.playlists.loadingState == 0"> <template v-if="app.playlists.loadingState == 0">
<div class="content-inner centered"> <div class="content-inner centered">
@ -8,6 +9,7 @@
</template> </template>
<template v-if="app.playlists.loadingState == 1"> <template v-if="app.playlists.loadingState == 1">
<div class="playlist-display" <div class="playlist-display"
@mouseover="minClass(false)"
:style="{ :style="{
'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '', '--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
'--textColor': (data.attributes.artwork != null && data.attributes.artwork['textColor1'] != null) ? ('#' + data.attributes.artwork.textColor1) : '' '--textColor': (data.attributes.artwork != null && data.attributes.artwork['textColor1'] != null) ? ('#' + data.attributes.artwork.textColor1) : ''
@ -15,7 +17,7 @@
<div class="playlistInfo"> <div class="playlistInfo">
<div class="row"> <div class="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div style="width: 260px;height:260px;"> <div class="mediaContainer">
<mediaitem-artwork <mediaitem-artwork
shadow="large" shadow="large"
:video-priority="true" :video-priority="true"
@ -50,11 +52,15 @@
<artist-chip v-for="artist in data.relationships.artists?.data" <artist-chip v-for="artist in data.relationships.artists?.data"
:item="artist"></artist-chip> :item="artist"></artist-chip>
</template> </template>
<div class="playlist-desc" v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))"> <div class="playlist-desc"
<div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null" class="content" v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short" @click="openInfoModal()"></div> <div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null"
<div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null" class="content" class="content"
v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard"></div> v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
@click="openInfoModal()"></div>
<div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null"
class="content"
v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard"></div>
<!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn" <!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
@click="editorialNotesExpanded = !editorialNotesExpanded"> @click="editorialNotesExpanded = !editorialNotesExpanded">
{{app.getLz('term.showMore')}} {{app.getLz('term.showMore')}}
@ -146,37 +152,43 @@
<b-tabs pills align="center" content-class="mt-3"> <b-tabs pills align="center" content-class="mt-3">
<b-tab :title="$root.getLz('term.tracks')"> <b-tab :title="$root.getLz('term.tracks')">
<div @mouseover="minClass(true)">
<div class=""> <div class="">
<div style="width:100%"> <div style="width:100%">
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'" <draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()"> v-model="data.relationships.tracks.data" @start="drag=true"
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1"> @end="drag=false;put()">
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" <template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
<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 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"
: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 data.relationships.tracks.data"></mediaitem-list-item> v-for="(item,index) in disc.tracks"></mediaitem-list-item>
</template> </div>
<template v-else>
<div v-for="disc in nestedPlaylist"> </template>
<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>
</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"
@ -195,29 +207,31 @@
</div> </div>
<template <template
v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0"> v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
<div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold" <div class="playlist-time showExtended item-navigate"
style="color:#fa586a; font-weight: bold"
@click="app.routeView(data.relationships.catalog.data[0])"> @click="app.routeView(data.relationships.catalog.data[0])">
{{$root.getLz("action.showAlbum")}} {{$root.getLz("action.showAlbum")}}
</div> </div>
</template> </template>
<hr> </div>
</b-tab> </b-tab>
<template v-if="typeof data.views != 'undefined'"> <template v-if="typeof data.views != '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"> <b-tab lazy :title="data.views[view].attributes.title" v-for="view in data.meta.views.order"
<div> v-if="data.views[view].data.length != 0">
<div class="row"> <div>
<div class="col"> <div class="row">
<h3>{{ data.views[view].attributes.title }}</h3> <div class="col">
<h3>{{ data.views[view].attributes.title }}</h3>
</div>
</div>
<div class="row">
<div class="col">
<mediaitem-scroller-horizontal
:items="data.views[view].data"></mediaitem-scroller-horizontal>
</div>
</div>
</div> </div>
</div> </b-tab>
<div class="row">
<div class="col">
<mediaitem-scroller-horizontal
:items="data.views[view].data"></mediaitem-scroller-horizontal>
</div>
</div>
</div>
</b-tab>
</template> </template>
</b-tabs> </b-tabs>
@ -245,6 +259,7 @@
headerVisible: true, headerVisible: true,
useArtistChip: false, useArtistChip: false,
nestedPlaylist: [], nestedPlaylist: [],
classes: [],
} }
}, },
mounted: function () { mounted: function () {
@ -261,6 +276,13 @@
} }
}, },
methods: { methods: {
minClass(val) {
if (val) {
this.classes = ["plmin"]
} else {
this.classes = []
}
},
openInfoModal() { openInfoModal() {
app.moreinfodata = []; app.moreinfodata = [];
app.moreinfodata = { app.moreinfodata = {
@ -276,11 +298,13 @@
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)
@ -371,7 +395,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) {
@ -594,7 +618,7 @@
menuItems.items.follow.hidden = true menuItems.items.follow.hidden = true
menuItems.items.unfollow.hidden = true menuItems.items.unfollow.hidden = true
} }
try{ try {
let rating = await app.getRating(self.data) let rating = await app.getRating(self.data)
if (rating == 0) { if (rating == 0) {
menuItems.headerItems.find(x => x.id == 'love').disabled = false menuItems.headerItems.find(x => x.id == 'love').disabled = false
@ -606,11 +630,10 @@
menuItems.headerItems.find(x => x.id == 'undo_dislike').hidden = false menuItems.headerItems.find(x => x.id == 'undo_dislike').hidden = false
menuItems.headerItems.find(x => x.id == 'dislike').hidden = true menuItems.headerItems.find(x => x.id == 'dislike').hidden = true
} }
} catch(err) { } catch (err) {
} }
}, },
getItemParent: function (data) { getItemParent: function (data) {
kind = data.attributes.playParams.kind; kind = data.attributes.playParams.kind;
@ -680,7 +703,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);