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

Added library-songs caching, Added mediaitem-artwork element

Browse source
This commit is contained in:
booploops 2021-12-06 14:29:17 -08:00
parent f97ab166de
commit 9b8f515858
3 changed files with 229 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

251
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" @click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'> <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,19 +198,22 @@
<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--> <!-- Playlist / Album page-->
<transition name="wpfade" > <transition name="wpfade">
<template v-if="page.includes('playlist_')" > <template v-if="page.includes('playlist_')">
<cider-playlist :data="showingPlaylist"></cider-playlist> <cider-playlist :data="showingPlaylist"></cider-playlist>
</template> </template>
</transition> </transition>
<transition name="wpfade" > <transition name="wpfade">
<template v-if="page.includes('album_')" > <template v-if="page.includes('album_')">
<cider-playlist :data="showingPlaylist"></cider-playlist> <cider-playlist :data="showingPlaylist"></cider-playlist>
</template> </template>
</transition> </transition>
</transition> </transition>
@ -287,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>
@ -302,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 -->
@ -330,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">
@ -347,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>
@ -387,19 +405,25 @@
<script type="text/x-template" id="cider-playlist"> <script type="text/x-template" id="cider-playlist">
<div class="content-inner"> <div class="content-inner">
<template v-if="data != [] && data.attributes != []"> <template v-if="data != [] && data.attributes != []">
<div class="playlist-display row"> <div class="playlist-display row">
<div class="col playlist-artwork" <div class="col-auto">
:style="{'--artwork': app.getMediaItemArtwork((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 ?? '':''), 300)} <mediaitem-artwork
"></div> :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 ?? '':'')"
<div class="playlist-info"> size="200"
<div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div> ></mediaitem-artwork>
<div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ?? ''}}</div> </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 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> </div>
</div> <mediaitem-list-item :item="item"
<mediaitem-list-item :item="item" v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
v-for="item in data.relationships.tracks.data"></mediaitem-list-item> <div class="playlist-time">{{app.getTotalTime()}}</div>
<div class="playlist-time" >{{app.getTotalTime()}}</div>
</template> </template>
</div> </div>
@ -454,7 +478,7 @@
</div> </div>
</div> </div>
<mediaitem-square-large :item="item" <mediaitem-square-large :item="item"
v-for="item in search.results.artists.data.limit(5)"></mediaitem-square-large> 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">
@ -466,7 +490,7 @@
</div> </div>
</div> </div>
<mediaitem-square-large :item="item" <mediaitem-square-large :item="item"
v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large> v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square-large>
</template> </template>
</template> </template>
</div> </div>
@ -521,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 ? 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 }}
@ -550,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 }}
@ -575,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>
@ -594,26 +628,31 @@
<template> <template>
<div style="position: relative; display: inline-flex;"> <div style="position: relative; display: inline-flex;">
<div @click.self='app.routeView(item)' <div @click.self='app.routeView(item)'
class="cd-mediaitem-square-large"> class="cd-mediaitem-square-large">
<div class="artwork" <div class="artwork">
:class="{'round': item.type == 'artists'}" <mediaitem-artwork
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}" :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
> size="300"
:type="item.type"
></mediaitem-artwork>
</div> </div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'> <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<div class="button" style = " <div class="button" style="
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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', :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', width: '40px',
height: '40px',} : height: '40px',} :
{margin: '35px', {margin: '35px',
width: '120px', width: '120px',
height: '120px',}]" height: '120px',}]"
@click="app.playMediaItem(item)"> @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> <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 class="title text-overflow-elipsis" @click='app.routeView(item)'> <div class="title text-overflow-elipsis" @click='app.routeView(item)'>
{{ item.attributes.name ?? '' }} {{ item.attributes.name ?? '' }}
</div> </div>
<div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName"> <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
@ -621,18 +660,21 @@
</div> </div>
</div> </div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'> <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<div class="button" style = " <div class="button" style="
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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', :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', width: '40px',
height: '40px',} : height: '40px',} :
{margin: '35px', {margin: '35px',
width: '120px', width: '120px',
height: '120px',}]" height: '120px',}]"
@click="app.playMediaItem(item)"> @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> <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>
@ -641,53 +683,63 @@
<!-- 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 style="position: relative; display: inline-flex;"> <div style="position: relative; display: inline-flex;">
<div @click.self='app.routeView(item)' <div @click.self='app.routeView(item)'
class="cd-mediaitem-square-sp" class="cd-mediaitem-square-sp"
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}"> :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
<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 : ''"
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'> size="300"
<div class="button" style = " :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%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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', :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', width: '40px',
height: '40px',} : height: '40px',} :
{margin: '35px', {margin: '35px',
width: '120px', width: '120px',
height: '120px',}]" height: '120px',}]"
@click="app.playMediaItem(item)"> @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> <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
</div> <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>
<div class="title text-overflow-elipsis" </svg>
:style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" </div>
style="font-weight: 600"> </div>
{{ item.attributes.name }} <div class="title text-overflow-elipsis"
</div> :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
<div class="subtitle text-overflow-elipsis" style="font-weight: 600">
:style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" {{ item.attributes.name }}
style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;"> </div>
{{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short <div class="subtitle text-overflow-elipsis"
:(item.attributes.artistName ?? '') }} :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
</div> 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> </div>
<div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'> <div class="cd-mediaitem-square-large-overlay" @click.self='app.routeView(item)'>
<div class="button" style = " <div class="button" style="
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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', :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', width: '40px',
height: '40px',} : height: '40px',} :
{margin: '35px', {margin: '35px',
width: '120px', width: '120px',
height: '120px',}]" height: '120px',}]"
@click="app.playMediaItem(item)"> @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> <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph">
</div> <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>
</div> </svg>
</div>
</div>
</div>
</template> </template>
</script> </script>
<script type="text/x-template" id="lyrics-view"> <script type="text/x-template" id="lyrics-view">
@ -699,13 +751,14 @@
{{ lyric.line }} {{ lyric.line }}
<div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''"> <div class="lyrics-translation" v-if="lyric.translation && lyric.translation != ''">
{{ lyric.translation }} {{ lyric.translation }}
<div> <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>

28
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'],
@ -148,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"
}, },
@ -322,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() {
@ -343,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`)
@ -351,6 +374,7 @@ 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)
} }
} }
@ -741,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()) {

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

@ -1338,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;
@ -1375,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 {
@ -1439,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;
@ -1493,7 +1527,6 @@ 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;
@ -1507,7 +1540,6 @@ 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;
@ -1581,7 +1613,6 @@ 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;
@ -1709,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 {
@ -1731,13 +1763,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.playlist-display { .playlist-display {
flex-wrap: nowrap; flex-wrap: nowrap;
margin-bottom: 32px;
} }
.playlist-info{ .playlist-info{
flex-shrink: unset; flex-shrink: unset;
} }
.playlist-name { .playlist-info .playlist-name {
font-weight: 700; font-weight: 700;
font-size: 1.6rem; font-size: 1.6rem;
margin-bottom: 6px; margin-bottom: 6px;
@ -1745,21 +1778,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
flex-shrink: unset; flex-shrink: unset;
} }
.playlist-artist { .playlist-info .playlist-artist {
font-weight: 500; font-weight: 500;
font-size: 1.6rem; font-size: 1.6rem;
margin-bottom: 6px; margin-bottom: 6px;
margin-right: 6px; margin-right: 6px;
flex-shrink: unset; flex-shrink: unset;
} }
.playlist-desc { .playlist-info .playlist-desc {
box-sizing: border-box; box-sizing: border-box;
font-size: 1.1rem; font-size: 1.1rem;
flex-shrink: unset; flex-shrink: unset;
margin-right: 5px; margin-right: 5px;
} }
.playlist-time { .playlist-info .playlist-time {
margin: 6px; margin: 6px;
opacity: 0.7; opacity: 0.7;
} }