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

adds notification for updating library

Browse source
This commit is contained in:
booploops 2021-12-04 16:14:55 -08:00
parent f073f32880
commit c70d769fe1
2 changed files with 73 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -167,7 +167,8 @@
</transition> </transition>
<div class="app-sidebar-footer"> <div class="app-sidebar-footer">
<input type="range" class="display--small"> <input type="range" class="display--small">
<button class="app-sidebar-button" style="width:100%" @click="chrome.menuOpened = !chrome.menuOpened"> <button class="app-sidebar-button" style="width:100%"
@click="chrome.menuOpened = !chrome.menuOpened">
<template v-if="chrome.userinfo.attributes"> <template v-if="chrome.userinfo.attributes">
<div class="sidebar-user-icon" <div class="sidebar-user-icon"
:style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}"> :style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}">
@ -178,7 +179,9 @@
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo"> <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
<template v-if="chrome.userinfo.attributes"> <template v-if="chrome.userinfo.attributes">
<div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}</div> <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}</div>
<div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle }}</div> <div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
}}
</div>
</template> </template>
<template v-else> <template v-else>
Sign in Sign in
@ -189,15 +192,21 @@
</div> </div>
</button> </button>
</div> </div>
<div class="app-sidebar-notification" v-if="library.songs.downloadState == 1">
Updating your library...<br>
{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}
</div>
</div> </div>
<div id="app-content"> <div id="app-content">
<!-- Browse --> <!-- Browse -->
<transition name="wpfade"> <transition name="wpfade">
<template v-if="page == 'browse'"> <template v-if="page == 'browse'">
<div class="content-inner"> <div class="content-inner">
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start MusicKit <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
MusicKit
</button> </button>
<button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">Stop <button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">
Stop
MusicKit MusicKit
</button> </button>
<br> <br>
@ -243,7 +252,7 @@
<!-- Listen Now --> <!-- Listen Now -->
<transition v-on:enter="getListenNow()" name="wpfade"> <transition v-on:enter="getListenNow()" name="wpfade">
<template v-if="page == 'listen_now'" @created="console.log('listennow')"> <template v-if="page == 'listen_now'" @created="console.log('listennow')">
<cider-listen-now :data="listennow"></cider-listen-now> <cider-listen-now :data="listennow"></cider-listen-now>
</template> </template>
</transition> </transition>
<!-- Radio --> <!-- Radio -->
@ -265,27 +274,27 @@
<!-- 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"> <div class="content-inner" v-if="library.songs.downloadState == 2">
<h1 class="header-text">Songs</h1> <h1 class="header-text">Songs</h1>
<template v-if="library.songs.downloadState == 1"> <div class="search-input-container" style="width:100%;margin: 16px 0px;">
<h1 style="text-align: center">Downloading...</h1> <div class="search-input--icon"></div>
<h3 style="text-align: center">{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</h3> <input type="search"
style="width:100%;"
</template> spellcheck="false"
<template v-if="library.songs.downloadState == 2"> placeholder="Search..."
<div class="search-input-container" style="width:100%;margin: 16px 0px;"> @input="searchLibrarySongs"
<div class="search-input--icon"></div> v-model="library.songs.search"
<input type="search" class="search-input">
style="width:100%;" </div>
spellcheck="false" <mediaitem-list-item :item="item"
placeholder="Search..." v-for="item in library.songs.displayListing"></mediaitem-list-item>
@input="searchLibrarySongs" </div>
v-model="library.songs.search" <div class="content-inner" v-if="library.songs.downloadState == 0">
class="search-input"> </div>
</div> <div class="content-inner centered" v-if="library.songs.downloadState == 1">
<mediaitem-list-item :item="item" <h1 style="text-align: center">Updating your library</h1>
v-for="item in library.songs.displayListing"></mediaitem-list-item> <h3 style="text-align: center">{{ library.songs.meta.progress }} / {{
</template> library.songs.meta.total }}</h3>
</div> </div>
</template> </template>
</transition> </transition>
@ -302,7 +311,8 @@
placeholder="Search..." placeholder="Search..."
class="search-input"> class="search-input">
</div> </div>
<mediaitem-square-large :item="item" v-for="item in library.albums.listing"></mediaitem-square-large> <mediaitem-square-large :item="item"
v-for="item in library.albums.listing"></mediaitem-square-large>
</div> </div>
</template> </template>
</transition> </transition>
@ -347,15 +357,17 @@
</div> </div>
</div> </div>
<template v-if="recom.attributes.display.kind == 'MusicCoverShelf'"> <template v-if="recom.attributes.display.kind == 'MusicCoverShelf'">
<mediaitem-scroller-horizontal-large :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large> <mediaitem-scroller-horizontal-large
:items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
</template> </template>
<template v-else-if="recom.attributes.display.kind == 'MusicSuperHeroShelf'"> <template v-else-if="recom.attributes.display.kind == 'MusicSuperHeroShelf'">
</template> </template>
<template v-else> <template v-else>
<mediaitem-scroller-horizontal-sp :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp> <mediaitem-scroller-horizontal-sp
:items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
</template> </template>
</template> </template>
</div> </div>
</script> </script>
<!-- Search --> <!-- Search -->
@ -363,7 +375,7 @@
<div class="content-inner"> <div class="content-inner">
<div class="row"> <div class="row">
<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 :item="getTopResult()"></mediaitem-square>
</template> </template>
@ -394,7 +406,8 @@
<button class="cd-btn-seeall">See All</button> <button class="cd-btn-seeall">See All</button>
</div> </div>
</div> </div>
<mediaitem-scroller-horizontal :items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal> <mediaitem-scroller-horizontal
:items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal>
</template> </template>
<template v-if="search.results.artists"> <template v-if="search.results.artists">
<div class="row"> <div class="row">
@ -450,8 +463,8 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal-large"> <script type="text/x-template" id="mediaitem-scroller-horizontal-large">
<template> <template>
<div class="cd-hmedia-scroller"> <div class="cd-hmedia-scroller">
<mediaitem-square-large :item="item" <mediaitem-square-large :item="item"
v-for="item in items"></mediaitem-square-large> v-for="item in items"></mediaitem-square-large>
</div> </div>
</template> </template>
</script> </script>
@ -461,8 +474,8 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal-sp"> <script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
<template> <template>
<div class="cd-hmedia-scroller"> <div class="cd-hmedia-scroller">
<mediaitem-square-sp :item="item" <mediaitem-square-sp :item="item"
v-for="item in items"></mediaitem-square-sp> v-for="item in items"></mediaitem-square-sp>
</div> </div>
</template> </template>
</script> </script>
@ -485,7 +498,7 @@
<template v-if="item.attributes.artistName"> <template v-if="item.attributes.artistName">
{{ item.attributes.artistName }} {{ item.attributes.artistName }}
<template v-if="item.attributes.albumName"> <template v-if="item.attributes.albumName">
- {{ item.attributes.albumName }} - {{ item.attributes.albumName }}
</template> </template>
</template> </template>
</div> </div>
@ -565,8 +578,8 @@
<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-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'}" :class="{'round': item.type == 'artists'}"
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></div> :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></div>
@ -577,8 +590,9 @@
</div> </div>
<div class="subtitle text-overflow-elipsis" <div class="subtitle text-overflow-elipsis"
:style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" :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;" > 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 ?? '') }} {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
:(item.attributes.artistName ?? '') }}
</div> </div>
</div> </div>
</template> </template>

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

@ -205,6 +205,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
width: 100%; width: 100%;
} }
.content-inner.centered {
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.app-drawer { .app-drawer {
width: 300px; width: 300px;
@ -310,6 +317,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
text-align: left; text-align: left;
} }
.app-sidebar-notification {
text-align: center;
font-size: 12px;
min-height: 60px;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid rgb(200 200 200 / 15%);
background: rgb(0 0 0 / 15%);
}
.app-sidebar-content { .app-sidebar-content {
padding: 8px; padding: 8px;
overflow-y: scroll; overflow-y: scroll;