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 {

53
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,10 +52,14 @@
<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?.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> 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">
@ -146,10 +152,12 @@
<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"
@end="drag=false;put()">
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1"> <template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" <mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
:showIndex="true" :showIndex="true"
@ -159,8 +167,11 @@
</template> </template>
<template v-else> <template v-else>
<div v-for="disc in nestedPlaylist"> <div v-for="disc in nestedPlaylist">
<div class="playlist-time">{{($root.getLz("term.discNumber") ?? "").replace("${discNumber}",disc.disc)}}</div> <div class="playlist-time">{{($root.getLz("term.discNumber") ??
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" "").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()"
@ -176,7 +187,8 @@
<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,15 +207,17 @@
</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"
v-if="data.views[view].data.length != 0">
<div> <div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -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,7 +298,9 @@
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);
@ -610,7 +634,6 @@
} }
}, },
getItemParent: function (data) { getItemParent: function (data) {
kind = data.attributes.playParams.kind; kind = data.attributes.playParams.kind;