adds notification for updating library
This commit is contained in:
booploops
parent
f073f32880
commit
c70d769fe1
2 changed files with 73 additions and 41 deletions
|
|
@ -167,7 +167,8 @@
|
|||
</transition>
|
||||
<div class="app-sidebar-footer">
|
||||
<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">
|
||||
<div class="sidebar-user-icon"
|
||||
:style="{'--artwork': getMediaItemArtwork(chrome.userinfo.attributes['artwork']['url'], 26)}">
|
||||
|
|
@ -178,7 +179,9 @@
|
|||
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
|
||||
<template v-if="chrome.userinfo.attributes">
|
||||
<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 v-else>
|
||||
Sign in
|
||||
|
|
@ -189,15 +192,21 @@
|
|||
</div>
|
||||
</button>
|
||||
</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 id="app-content">
|
||||
<!-- Browse -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'browse'">
|
||||
<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 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
|
||||
</button>
|
||||
<br>
|
||||
|
|
@ -243,7 +252,7 @@
|
|||
<!-- Listen Now -->
|
||||
<transition v-on:enter="getListenNow()" name="wpfade">
|
||||
<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>
|
||||
</transition>
|
||||
<!-- Radio -->
|
||||
|
|
@ -265,27 +274,27 @@
|
|||
<!-- Library - Songs -->
|
||||
<transition name="wpfade" v-on:enter="getLibrarySongsFull()">
|
||||
<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>
|
||||
<template v-if="library.songs.downloadState == 1">
|
||||
<h1 style="text-align: center">Downloading...</h1>
|
||||
<h3 style="text-align: center">{{ library.songs.meta.progress }} / {{ library.songs.meta.total }}</h3>
|
||||
|
||||
</template>
|
||||
<template v-if="library.songs.downloadState == 2">
|
||||
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search"
|
||||
style="width:100%;"
|
||||
spellcheck="false"
|
||||
placeholder="Search..."
|
||||
@input="searchLibrarySongs"
|
||||
v-model="library.songs.search"
|
||||
class="search-input">
|
||||
</div>
|
||||
<mediaitem-list-item :item="item"
|
||||
v-for="item in library.songs.displayListing"></mediaitem-list-item>
|
||||
</template>
|
||||
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search"
|
||||
style="width:100%;"
|
||||
spellcheck="false"
|
||||
placeholder="Search..."
|
||||
@input="searchLibrarySongs"
|
||||
v-model="library.songs.search"
|
||||
class="search-input">
|
||||
</div>
|
||||
<mediaitem-list-item :item="item"
|
||||
v-for="item in library.songs.displayListing"></mediaitem-list-item>
|
||||
</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>
|
||||
</transition>
|
||||
|
|
@ -302,7 +311,8 @@
|
|||
placeholder="Search..."
|
||||
class="search-input">
|
||||
</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>
|
||||
</template>
|
||||
</transition>
|
||||
|
|
@ -347,15 +357,17 @@
|
|||
</div>
|
||||
</div>
|
||||
<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 v-else-if="recom.attributes.display.kind == 'MusicSuperHeroShelf'">
|
||||
</template>
|
||||
</template>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Search -->
|
||||
|
|
@ -363,7 +375,7 @@
|
|||
<div class="content-inner">
|
||||
<div class="row">
|
||||
<div class="col-sm" style="width: auto;" v-if="getTopResult()">
|
||||
<template >
|
||||
<template>
|
||||
<h3>Top Result</h3>
|
||||
<mediaitem-square :item="getTopResult()"></mediaitem-square>
|
||||
</template>
|
||||
|
|
@ -394,7 +406,8 @@
|
|||
<button class="cd-btn-seeall">See All</button>
|
||||
</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 v-if="search.results.artists">
|
||||
<div class="row">
|
||||
|
|
@ -450,8 +463,8 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
|
||||
<template>
|
||||
<div class="cd-hmedia-scroller">
|
||||
<mediaitem-square-large :item="item"
|
||||
v-for="item in items"></mediaitem-square-large>
|
||||
<mediaitem-square-large :item="item"
|
||||
v-for="item in items"></mediaitem-square-large>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
|
@ -461,8 +474,8 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
|
||||
<template>
|
||||
<div class="cd-hmedia-scroller">
|
||||
<mediaitem-square-sp :item="item"
|
||||
v-for="item in items"></mediaitem-square-sp>
|
||||
<mediaitem-square-sp :item="item"
|
||||
v-for="item in items"></mediaitem-square-sp>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
|
@ -485,7 +498,7 @@
|
|||
<template v-if="item.attributes.artistName">
|
||||
{{ item.attributes.artistName }}
|
||||
<template v-if="item.attributes.albumName">
|
||||
- {{ item.attributes.albumName }}
|
||||
- {{ item.attributes.albumName }}
|
||||
</template>
|
||||
</template>
|
||||
</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)"
|
||||
class="cd-mediaitem-square-sp"
|
||||
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}"
|
||||
|
||||
>
|
||||
|
||||
>
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></div>
|
||||
|
|
@ -577,8 +590,9 @@
|
|||
</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 ?? '') }}
|
||||
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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -205,6 +205,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.content-inner.centered {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-drawer {
|
||||
width: 300px;
|
||||
|
|
@ -310,6 +317,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
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 {
|
||||
padding: 8px;
|
||||
overflow-y: scroll;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue