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

Merge branch 'Apple-Music-Electron:main' into main

Browse source
This commit is contained in:
Brandon Plank 2021-12-06 18:04:13 -05:00 • committed by GitHub
commit 1da7f8fe46
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 485 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

272
resources/cider-ui-tests/index.html
View file

@ -99,7 +99,9 @@
<button class="playback-button--small queue"></button> <button class="playback-button--small queue"></button>
</div> </div>
<div class="app-chrome-item generic"> <div class="app-chrome-item generic">
<button class="playback-button--small lyrics" @click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"></button> <button class="playback-button--small lyrics"
@click="drawertest = !drawertest; lyricon =!lyricon; if(drawertest == true){loadLyrics();}"
></button>
</div> </div>
<div class="app-chrome-item full-height"> <div class="app-chrome-item full-height">
<div class="window-controls"> <div class="window-controls">
@ -142,7 +144,8 @@
<div class="app-sidebar-header-text"> <div class="app-sidebar-header-text">
Playlists Playlists
</div> </div>
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" href="item.href"> <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" :href="item.href"
@click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
{{ item.attributes.name }} {{ item.attributes.name }}
</button> </button>
</div> </div>
@ -170,10 +173,10 @@
<button class="app-sidebar-button" style="width:100%" <button class="app-sidebar-button" style="width:100%"
@click="chrome.menuOpened = !chrome.menuOpened"> @click="chrome.menuOpened = !chrome.menuOpened">
<template v-if="chrome.userinfo.attributes"> <template v-if="chrome.userinfo.attributes">
<div class="sidebar-user-icon" <img class="sidebar-user-icon" loading="lazy"
:style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}">
</div> :src="getMediaItemArtwork(chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : '', 26)"
/>
</template> </template>
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo"> <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
@ -195,10 +198,25 @@
<div class="app-sidebar-notification" v-if="library.songs.downloadState == 1"> <div class="app-sidebar-notification" v-if="library.songs.downloadState == 1">
<div>Updating your library...</div> <div>Updating your library...</div>
<div>{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</div> <div>{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</div>
<div style="width: 100%"><progress style="width: 80%;" :value="library.songs.meta.progress" :max="library.songs.meta.total"></progress></div> <div style="width: 100%">
<progress style="width: 80%;" :value="library.songs.meta.progress"
:max="library.songs.meta.total"></progress>
</div>
</div> </div>
</div> </div>
<div id="app-content"> <div id="app-content">
<!-- Playlist / Album page-->
<transition name="wpfade">
<template v-if="page.includes('playlist_')">
<cider-playlist :data="showingPlaylist"></cider-playlist>
</template>
</transition>
<transition name="wpfade">
<template v-if="page.includes('album_')">
<cider-playlist :data="showingPlaylist"></cider-playlist>
</template>
</transition>
</transition>
<!-- Browse --> <!-- Browse -->
<transition name="wpfade"> <transition name="wpfade">
<template v-if="page == 'browse'"> <template v-if="page == 'browse'">
@ -275,7 +293,7 @@
<!-- Library - Songs --> <!-- Library - Songs -->
<transition name="wpfade" v-on:enter="getLibrarySongsFull()"> <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
<template v-if="page == 'library-songs'"> <template v-if="page == 'library-songs'">
<div class="content-inner" v-if="library.songs.downloadState == 2"> <div class="content-inner">
<h1 class="header-text">Songs</h1> <h1 class="header-text">Songs</h1>
<div class="search-input-container" style="width:100%;margin: 16px 0px;"> <div class="search-input-container" style="width:100%;margin: 16px 0px;">
<div class="search-input--icon"></div> <div class="search-input--icon"></div>
@ -290,13 +308,6 @@
<mediaitem-list-item :item="item" <mediaitem-list-item :item="item"
v-for="item in library.songs.displayListing"></mediaitem-list-item> v-for="item in library.songs.displayListing"></mediaitem-list-item>
</div> </div>
<div class="content-inner" v-if="library.songs.downloadState == 0">
</div>
<div class="content-inner centered" v-if="library.songs.downloadState == 1">
<h1 style="text-align: center">Updating your library</h1>
<h3 style="text-align: center">{{ library.songs.meta.progress }} / {{
library.songs.meta.total }}</h3>
</div>
</template> </template>
</transition> </transition>
<!-- Library - Albums --> <!-- Library - Albums -->
@ -318,9 +329,11 @@
</template> </template>
</transition> </transition>
</div> </div>
<div class="app-drawer" v-if="drawertest"> <transition name="drawertransition">
<lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics"></lyrics-view> <div class="app-drawer" v-if="drawertest">
</div> <lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics"></lyrics-view>
</div>
</transition>
</div> </div>
</div> </div>
<transition name="wpfade"> <transition name="wpfade">
@ -335,6 +348,23 @@
</div> </div>
<script type="text/x-template" id="mediaitem-artwork">
<template v-if="type == 'artists'">
<div class="mediaitem-artwork rounded"
>
<img :src="app.getMediaItemArtwork(url, size)"
class="mediaitem-artwork--img">
</div>
</template>
<template v-else>
<div class="mediaitem-artwork"
>
<img :src="app.getMediaItemArtwork(url, size)"
class="mediaitem-artwork--img">
</div>
</template>
</script>
<!-- Generic Collection of MediaItems --> <!-- Generic Collection of MediaItems -->
<script type="text/x-template" id="collection-view-generic"> <script type="text/x-template" id="collection-view-generic">
<template> <template>
@ -371,6 +401,34 @@
</div> </div>
</script> </script>
<!-- Album / Playlist View -->
<script type="text/x-template" id="cider-playlist">
<div class="content-inner">
<template v-if="data != [] && data.attributes != []">
<div class="playlist-display row">
<div class="col-auto">
<mediaitem-artwork
:url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : (data.relationships.tracks.data.length > 0 ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
size="200"
></mediaitem-artwork>
</div>
<div class="col playlist-info">
<div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
<div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??
''}}
</div>
<div class="playlist-desc"
v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.short ?? (data.attributes.editorialNotes.standard ?? '') ) : (data.attributes.description ? (data.attributes.description.short ?? (data.attributes.description.standard ?? '')) : ''))"></div>
</div>
</div>
<mediaitem-list-item :item="item"
v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
<div class="playlist-time">{{app.getTotalTime()}}</div>
</template>
</div>
</script>
<!-- Search --> <!-- Search -->
<script type="text/x-template" id="cider-search"> <script type="text/x-template" id="cider-search">
<div class="content-inner"> <div class="content-inner">
@ -378,7 +436,7 @@
<div class="col-sm" style="width: auto;" v-if="getTopResult()"> <div class="col-sm" style="width: auto;" v-if="getTopResult()">
<template> <template>
<h3>Top Result</h3> <h3>Top Result</h3>
<mediaitem-square :item="getTopResult()"></mediaitem-square> <mediaitem-square-large :item="getTopResult()"></mediaitem-square>
</template> </template>
</div> </div>
<div class="col" v-if="search.results.songs"> <div class="col" v-if="search.results.songs">
@ -407,8 +465,8 @@
<button class="cd-btn-seeall">See All</button> <button class="cd-btn-seeall">See All</button>
</div> </div>
</div> </div>
<mediaitem-scroller-horizontal <mediaitem-scroller-horizontal-large
:items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal> :items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal-large>
</template> </template>
<template v-if="search.results.artists"> <template v-if="search.results.artists">
<div class="row"> <div class="row">
@ -419,8 +477,8 @@
<button class="cd-btn-seeall">See All</button> <button class="cd-btn-seeall">See All</button>
</div> </div>
</div> </div>
<mediaitem-square :item="item" <mediaitem-square-large :item="item"
v-for="item in search.results.artists.data.limit(5)"></mediaitem-square> v-for="item in search.results.artists.data.limit(5)"></mediaitem-square-large>
</template> </template>
<template v-if="search.results.playlists"> <template v-if="search.results.playlists">
<div class="row"> <div class="row">
@ -431,8 +489,8 @@
<button class="cd-btn-seeall">See All</button> <button class="cd-btn-seeall">See All</button>
</div> </div>
</div> </div>
<mediaitem-square :item="item" <mediaitem-square-large :item="item"
v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square> v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large>
</template> </template>
</template> </template>
</div> </div>
@ -487,10 +545,13 @@
<template> <template>
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)" <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
class="cd-mediaitem-list-item"> class="cd-mediaitem-list-item">
<div class="artwork" v-if="item.attributes.artwork" <div class="artwork">
:class="{'round': item.type == 'artists'}" <mediaitem-artwork
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url ? item.attributes.artwork.url : '', 34)} :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
"></div> size="34"
:type="item.type"
></mediaitem-artwork>
</div>
<div class="info-rect"> <div class="info-rect">
<div class="title text-overflow-elipsis"> <div class="title text-overflow-elipsis">
{{ item.attributes.name }} {{ item.attributes.name }}
@ -516,10 +577,13 @@
<template> <template>
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)" <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
class="cd-mediaitem-hrect"> class="cd-mediaitem-hrect">
<div class="artwork" <div class="artwork">
:class="{'round': item.type == 'artists'}" <mediaitem-artwork
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 70)} :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
"></div> size="70"
:type="item.type"
></mediaitem-artwork>
</div>
<div class="info-rect"> <div class="info-rect">
<div class="title text-overflow-elipsis"> <div class="title text-overflow-elipsis">
{{ item.attributes.name }} {{ item.attributes.name }}
@ -541,9 +605,13 @@
<template> <template>
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)" <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
class="cd-mediaitem-square"> class="cd-mediaitem-square">
<div class="artwork" <div class="artwork">
:class="{'round': item.type == 'artists'}" <mediaitem-artwork
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div> :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
size="300"
:type="item.type"
></mediaitem-artwork>
</div>
<div class="title text-overflow-elipsis"> <div class="title text-overflow-elipsis">
{{ item.attributes.name }} {{ item.attributes.name }}
</div> </div>
@ -558,16 +626,55 @@
<script type="text/x-template" id="mediaitem-square-large"> <script type="text/x-template" id="mediaitem-square-large">
<template> <template>
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)" <div style="position: relative; display: inline-flex;">
class="cd-mediaitem-square-large"> <div @click.self='app.routeView(item)'
<div class="artwork" class="cd-mediaitem-square-large">
:class="{'round': item.type == 'artists'}" <div class="artwork">
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div> <mediaitem-artwork
<div class="title text-overflow-elipsis"> :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
{{ item.attributes.name }} 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',
width: '40px',
height: '40px',} :
{margin: '35px',
width: '120px',
height: '120px',}]"
@click="app.playMediaItem(item)">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
<path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
</svg>
</div>
</div>
<div class="title text-overflow-elipsis" @click='app.routeView(item)'>
{{ item.attributes.name ?? '' }}
</div>
<div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
{{ item.attributes.artistName ?? '' }}
</div>
</div> </div>
<div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName"> <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
{{ item.attributes.artistName }} <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',
width: '40px',
height: '40px',} :
{margin: '35px',
width: '120px',
height: '120px',}]"
@click="app.playMediaItem(item)">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
<path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
</svg>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -576,24 +683,61 @@
<!-- MediaItem Square SP --> <!-- MediaItem Square SP -->
<script type="text/x-template" id="mediaitem-square-sp"> <script type="text/x-template" id="mediaitem-square-sp">
<template> <template>
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)" <div style="position: relative; display: inline-flex;">
class="cd-mediaitem-square-sp" <div @click.self='app.routeView(item)'
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}" class="cd-mediaitem-square-sp"
: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"
: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',
width: '40px',
height: '40px',} :
{margin: '35px',
width: '120px',
height: '120px',}]"
@click="app.playMediaItem(item)">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
<path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
</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"
:style="{'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;">
{{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
:(item.attributes.artistName ?? '') }}
</div>
>
<div class="artwork"
:class="{'round': item.type == 'artists'}"
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></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>
<div class="subtitle text-overflow-elipsis" <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
:style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" <div class="button" style="
style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;"> border-radius: 50%;
{{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short background: rgba(50,50,50,0.7);"
:(item.attributes.artistName ?? '') }} :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',
width: '40px',
height: '40px',} :
{margin: '35px',
width: '120px',
height: '120px',}]"
@click="app.playMediaItem(item)">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
<path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path>
</svg>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -605,12 +749,16 @@
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)"
v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}"> v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
{{ lyric.line }} {{ lyric.line }}
<div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''">
{{ lyric.translation }}
<div>
</h3> </h3>
</template> </template>
<template v-else> <template v-else>
<h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime" :end="lyric.endTime" <h3 class="lyric-line" @click="app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
:end="lyric.endTime"
v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}"> v-bind:class="{ active: app.getLyricClass(lyric.startTime, lyric.endTime)}">
<div class="lyricWaiting" > <div class="lyricWaiting">
<div class='WaitingDot1'></div> <div class='WaitingDot1'></div>
<div class='WaitingDot2'></div> <div class='WaitingDot2'></div>
<div class='WaitingDot3'></div> <div class='WaitingDot3'></div>

120
resources/cider-ui-tests/index.js
View file

@ -1,3 +1,16 @@
Vue.component('mediaitem-artwork', {
template: '#mediaitem-artwork',
props: ['size', 'url', 'type'],
methods: {
getArtworkStyle() {
return {
width: this.size + 'px',
height: this.size + 'px'
};
}
}
});
Vue.component('sidebar-library-item', { Vue.component('sidebar-library-item', {
template: '#sidebar-library-item', template: '#sidebar-library-item',
props: ['name', 'page', 'cd-click'], props: ['name', 'page', 'cd-click'],
@ -53,7 +66,7 @@ Vue.component('mediaitem-list-item', {
Vue.component('lyrics-view', { Vue.component('lyrics-view', {
template: '#lyrics-view', template: '#lyrics-view',
props: ["time", "lyrics"], props: ["time", "lyrics", "translation"],
methods: {} methods: {}
}); });
@ -76,6 +89,11 @@ Vue.component('cider-listen-now', {
props: ["data"] props: ["data"]
}) })
Vue.component('cider-playlist', {
template: "#cider-playlist",
props: ["data"]
})
const MusicKitTools = { const MusicKitTools = {
getHeader() { getHeader() {
return new Headers({ return new Headers({
@ -110,6 +128,7 @@ const app = new Vue({
radio: { radio: {
personal: [] personal: []
}, },
showingPlaylist: [],
library: { library: {
songs: { songs: {
listing: [], listing: [],
@ -142,7 +161,9 @@ const app = new Vue({
artworkReady: false, artworkReady: false,
userinfo: {}, userinfo: {},
menuOpened: false, menuOpened: false,
maximized: false maximized: false,
drawerOpened: false,
drawerState: "queue"
}, },
page: "browse" page: "browse"
}, },
@ -160,6 +181,12 @@ const app = new Vue({
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime) self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
self.lyriccurrenttime = app.mk.currentPlaybackTime; self.lyriccurrenttime = app.mk.currentPlaybackTime;
if (document.querySelector(".lyric-line.active")) {
document.querySelector(".lyric-line.active").scrollIntoView({
behavior: "smooth",
block: "center"
})
}
// animated dot like AM - bad perf // animated dot like AM - bad perf
if (self.lyricon && self.drawertest){ if (self.lyricon && self.drawertest){
let currentLine = document.querySelector(`.lyric-line.active`) let currentLine = document.querySelector(`.lyric-line.active`)
@ -228,6 +255,47 @@ const app = new Vue({
}) })
document.body.removeAttribute("loading") document.body.removeAttribute("loading")
}, },
async getPlaylistFromID(id){
try{
this.showingPlaylist = await app.mk.api.library.playlist(id)} catch (e){console.log(e);
try{this.showingPlaylist = await app.mk.api.playlist(id)} catch (err) {console.log(err)}
}
},
routeView (item){
app.showingPlaylist = [];
let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
console.log(kind, id, isLibrary)
if(!kind.toString().includes("radioStation") && !kind.toString().includes("song"))
{app.page = (kind) + "_"+ (id);
console.log("oks");
app.getTypeFromID((kind),(id), (isLibrary));} else {
app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
}
},
playMediaItem(item){
let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
console.log(kind, id, isLibrary)
app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
},
async getTypeFromID(kind,id, isLibrary = false){
var a;
try {
a = await this.mkapi(kind.toString(), isLibrary, id.toString());
}
catch (e) {
console.log(e);
try {
console.log("opp", !isLibrary);
a = await this.mkapi(kind.toString(), !isLibrary, id.toString());
} catch (err) { console.log(err); a = [] } finally { this.showingPlaylist = a }
} finally { this.showingPlaylist = a };
},
searchLibrarySongs() { searchLibrarySongs() {
let self = this let self = this
if (this.library.songs.search == "") { if (this.library.songs.search == "") {
@ -269,6 +337,10 @@ const app = new Vue({
if (this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) { if (this.library.songs.downloadState == 2 || this.library.songs.downloadState == 1) {
return return
} }
if(localStorage.getItem("librarySongs") != null) {
this.library.songs.listing = JSON.parse(localStorage.getItem("librarySongs"))
this.library.songs.displayListing = this.library.songs.listing
}
this.library.songs.downloadState = 1 this.library.songs.downloadState = 1
function downloadChunk() { function downloadChunk() {
@ -290,6 +362,10 @@ const app = new Vue({
self.library.songs.meta.progress = library.length self.library.songs.meta.progress = library.length
if(typeof downloaded.next == "undefined") { if(typeof downloaded.next == "undefined") {
console.log("downloaded.next is undefined") console.log("downloaded.next is undefined")
self.library.songs.listing = library
self.library.songs.downloadState = 2
self.searchLibrarySongs()
localStorage.setItem("librarySongs", JSON.stringify(library))
} }
if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") { if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
console.log(`downloading next chunk - ${library.length} songs so far`) console.log(`downloading next chunk - ${library.length} songs so far`)
@ -298,12 +374,18 @@ const app = new Vue({
self.library.songs.listing = library self.library.songs.listing = library
self.library.songs.downloadState = 2 self.library.songs.downloadState = 2
self.searchLibrarySongs() self.searchLibrarySongs()
localStorage.setItem("librarySongs", JSON.stringify(library))
console.log(library) console.log(library)
} }
} }
downloadChunk() downloadChunk()
}, },
getTotalTime(){
if (app.showingPlaylist.relationships.tracks.data.length > 0){
time = Math.round([].concat(...app.showingPlaylist.relationships.tracks.data).reduce((a, { attributes: { durationInMillis }}) => a + durationInMillis, 0)/60000);
return app.showingPlaylist.relationships.tracks.data.length + " tracks, "+ time +" mins.";} else return ""
},
async getLibrarySongs() { async getLibrarySongs() {
var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0}) var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
this.library.songs.listing = response.data this.library.songs.listing = response.data
@ -472,8 +554,10 @@ const app = new Vue({
for (var i = u.length -1; i >= 0; i--) { for (var i = u.length -1; i >= 0; i--) {
let xline = (/(\[[0-9.:\[\]]*\])+(.*)/).exec(u[i]) let xline = (/(\[[0-9.:\[\]]*\])+(.*)/).exec(u[i])
let end = (preLrc.length > 0) ? ((preLrc[preLrc.length-1].startTime) ?? 99999) : 99999 let end = (preLrc.length > 0) ? ((preLrc[preLrc.length-1].startTime) ?? 99999) : 99999
preLrc.push({ startTime: app.toMS(xline[1].substring(1,xline[1].length - 2)) ?? 0, endTime: end, line: xline[2] }) preLrc.push({ startTime: app.toMS(xline[1].substring(1,xline[1].length - 2)) ?? 0, endTime: end, line: xline[2], translation: '' })
} }
if (preLrc.length > 0)
preLrc.push({startTime: 0,endTime: preLrc[preLrc.length-1].startTime, line: "lrcInstrumental", translation: ''});
app.lyrics = preLrc.reverse(); app.lyrics = preLrc.reverse();
if (lrcfile != null && lrcfile != '') { if (lrcfile != null && lrcfile != '') {
// load translation // load translation
@ -507,9 +591,20 @@ const app = new Vue({
let status2 = jsonResponse2["message"]["header"]["status_code"]; let status2 = jsonResponse2["message"]["header"]["status_code"];
if (status2 == 200) { if (status2 == 200) {
try { try {
let lyrics = jsonResponse2["message"]["body"]["translations_list"]; let preTrans = []
if (lyrics.length > 0) { let u = app.lyrics;
// convert translations to suitable json let translation_list = jsonResponse2["message"]["body"]["translations_list"];
if (translation_list.length > 0) {
for (var i = 0; i < u.length - 1; i++) {
preTrans[i] = ""
for (var trans_line of translation_list){
if (u[i].line == " "+trans_line["translation"]["matched_line"]){
u[i].translation = trans_line["translation"]["description"];
break;
}
}
}
app.lyrics = u;
} }
} catch (e) { } catch (e) {
/// not found trans -> ignore /// not found trans -> ignore
@ -589,15 +684,8 @@ const app = new Vue({
}, },
getLyricClass(start, end) { getLyricClass(start, end) {
//this.lyriccurrenttime = app.getCurrentTime(); //this.lyriccurrenttime = app.getCurrentTime();
if (this.lyriccurrenttime >= start && this.lyriccurrenttime <= end) { const delayfix = 0.5
setTimeout(() => { if (this.lyriccurrenttime + delayfix >= start && this.lyriccurrenttime + delayfix <= end) {
if (document.querySelector(".lyric-line.active")) {
document.querySelector(".lyric-line.active").scrollIntoView({
behavior: "smooth",
block: "center"
})
}
}, 200)
return true; return true;
} else { } else {
return false; return false;
@ -677,7 +765,7 @@ const app = new Vue({
} }
}, },
getMediaItemArtwork(url, size = 64) { getMediaItemArtwork(url, size = 64) {
return `url("${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}")`; return `${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}`;
}, },
getNowPlayingArtworkBG(size = 600) { getNowPlayingArtworkBG(size = 600) {
if (!this.mkReady()) { if (!this.mkReady()) {

185
resources/cider-ui-tests/style.css
View file

@ -721,6 +721,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 30%); box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 30%);
} }
.playlist-artwork {
height: 190px;
width: 190px;
background: blue;
border-radius: 6px;
background: var(--artwork);
background-size: cover;
box-shadow: var(--mediaItemShadow);
flex: 0 0 auto;
margin: 6px;
margin-top: 0px;
}
.media-item--small .text { .media-item--small .text {
font-weight: 600; font-weight: 600;
font-size: 0.90em; font-size: 0.90em;
@ -1264,6 +1277,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
margin: 3px; margin: 3px;
} }
.lyrics-translation {
font-size: 1.6rem;
font-weight: 400;
}
@keyframes lyricWaitingLine { @keyframes lyricWaitingLine {
0% { 0% {
opacity: 0.25; opacity: 0.25;
@ -1320,6 +1338,41 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.mediaitem-artwork {
border-radius: var(--mediaItemRadius);
overflow: hidden;
flex: 0 0 auto;
position:relative;
width: 100%;
height: 100%;
}
.mediaitem-artwork.rounded {
border-radius: 100%;
}
.mediaitem-artwork::after {
content: "";
box-shadow: var(--mediaItemShadow);
z-index: 1;
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
border-radius: inherit;
}
.mediaitem-artwork.rounded::after {
border-radius: 100%;
}
.mediaitem-artwork>img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* horizontal media scroller */ /* horizontal media scroller */
.cd-hmedia-scroller { .cd-hmedia-scroller {
margin: 0 auto; margin: 0 auto;
@ -1357,14 +1410,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.cd-mediaitem-list-item .artwork { .cd-mediaitem-list-item .artwork {
height: 34px; height: 34px;
width: 34px; width: 34px;
background: blue;
border-radius: var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
background: var(--artwork); object-fit: cover;
background-size: contain; object-position: center;
box-shadow: var(--mediaItemShadow);
flex: 0 0 auto; flex: 0 0 auto;
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 12px; margin: 12px;
border: 0px;
outline: none;
} }
.cd-mediaitem-list-item .artwork.round { .cd-mediaitem-list-item .artwork.round {
@ -1421,7 +1474,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
border-radius: var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
background: var(--artwork); background: var(--artwork);
background-size: contain; background-size: contain;
box-shadow: var(--mediaItemShadow);
flex: 0 0 auto; flex: 0 0 auto;
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 18px; margin: 18px;
@ -1475,11 +1527,24 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
border-top-right-radius: 6px; border-top-right-radius: 6px;
background: var(--artwork); background: var(--artwork);
background-size: cover; background-size: cover;
box-shadow: var(--mediaItemShadow); flex: 0 0 auto;
flex: 0 0 auto;
margin: 6px; margin: 6px;
margin-top: 0px; margin-top: 0px;
} }
.artwork
{height: 190px;
width: 190px;
background: blue;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: var(--artwork);
background-size: cover;
flex: 0 0 auto;
margin: 6px;
margin-top: 0px;
}
.cd-mediaitem-square-sp .artwork:hover { .cd-mediaitem-square-sp .artwork:hover {
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
} }
@ -1499,6 +1564,24 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
font-size: 12px; font-size: 12px;
} }
.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay {
z-index: 3;
}
.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover {
opacity: 1;
}
.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay {
pointer-events: none;
}
.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay {
opacity: 1;
}
/* mediaitem-square-large */ /* mediaitem-square-large */
.cd-mediaitem-square-large { .cd-mediaitem-square-large {
width: 190px; width: 190px;
@ -1513,28 +1596,62 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
} }
.cd-mediaitem-square-large > * {
.cd-mediaitem-square-large:hover { z-index: inherit;
background: rgb(200 200 200 / 10%);
} }
/* .cd-mediaitem-square-large .artwork:hover {
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
} */
.cd-mediaitem-square-large .artwork { .cd-mediaitem-square-large .artwork {
height: 190px; height: 190px;
width: 190px; width: 190px;
background: blue; background: blue;
border-radius: var(--mediaItemRadius); border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: var(--artwork); background: var(--artwork);
background-size: cover; background-size: cover;
box-shadow: var(--mediaItemShadow);
flex: 0 0 auto; flex: 0 0 auto;
margin: 6px; margin: 6px;
margin-top: 0px; margin-top: 0px;
} }
.cd-mediaitem-square-large .artwork:hover { .cd-mediaitem-square-large-overlay{
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset; position: absolute;
width: 190px;
float: right;
height: 250px;
top: 0px;
margin: 10px;
margin-top: 0px;
opacity: 0;
} }
.cd-mediaitem-square-large-overlay > * {
pointer-events: auto;
}
.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay {
z-index: 3;
}
.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover {
opacity: 1;
}
.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay {
pointer-events: none;
}
.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay {
opacity: 1;
}
.cd-mediaitem-square-large .artwork.round { .cd-mediaitem-square-large .artwork.round {
border-radius: var(--mediaItemRadiusRound); border-radius: var(--mediaItemRadiusRound);
} }
@ -1623,6 +1740,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.wpfade-leave-to { .wpfade-leave-to {
opacity: 0; opacity: 0;
} }
/* Transitions End */
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
@ -1641,4 +1759,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
--gfx-restoreBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjI0LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PqiFCFwAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHNJREFUGJWtkKEOwlAMRc+QM5AwQYJFoPjZCWb2YRPIaeRTLwfTLQs0UxzX3tumtxCog78UdVTbZmM8AmsdXIABeKH2ak221dDuamnUCjyA+WtbB0zAGXgT0ycSFk31kBky/moUeBLpbsl91wi6Nnbfs/g+7XOQq6ifjfkAAAAASUVORK5CYII='); --gfx-restoreBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjI0LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PqiFCFwAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHNJREFUGJWtkKEOwlAMRc+QM5AwQYJFoPjZCWb2YRPIaeRTLwfTLQs0UxzX3tumtxCog78UdVTbZmM8AmsdXIABeKH2ak221dDuamnUCjyA+WtbB0zAGXgT0ycSFk31kBky/moUeBLpbsl91wi6Nnbfs/g+7XOQq6ifjfkAAAAASUVORK5CYII=');
--gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC'); --gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC');
} }
}
.playlist-display {
flex-wrap: nowrap;
margin-bottom: 32px;
}
.playlist-display .playlist-info{
flex-shrink: unset;
display: flex;
flex-flow: column;
justify-content: flex-end;
}
.playlist-display .playlist-info .playlist-name {
font-weight: 700;
font-size: 1.6rem;
margin-bottom: 6px;
margin-right: 6px;
flex-shrink: unset;
}
.playlist-display .playlist-info .playlist-artist {
font-weight: 500;
font-size: 1.6rem;
margin-bottom: 6px;
margin-right: 6px;
flex-shrink: unset;
}
.playlist-display .playlist-info .playlist-desc {
box-sizing: border-box;
font-size: 1.1rem;
flex-shrink: unset;
margin-right: 5px;
}
.playlist-display .playlist-info .playlist-time {
margin: 6px;
opacity: 0.7;
} }