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

limiting + artwork bg

Browse source
This commit is contained in:
booploops 2021-12-03 17:06:42 -08:00
parent a5885cf31b
commit 71e698b9dd
3 changed files with 77 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -202,7 +202,13 @@
<transition name="wpfade">
<template v-if="page == 'listen_now'">
<div class="content-inner">
<h1 class="header-text">Listen Now</h1>
<div class="winbox">
<div class="fancy">990kbps</div>
<div class="">
<button class="md-btn md-btn-primary">Audio Quality Settings</button>
</div>
</div>
</div>
</template>
</transition>
@ -246,7 +252,16 @@
</div>
</div>
</div>
<div class="bg-artwork"></div>
<transition name="wpfade">
<img v-show="chrome.artworkReady"
@load="chrome.artworkReady = true"
class="bg-artwork"
:src="getNowPlayingArtworkBG(32)">
</transition>
<transition name="wpfade">
<div class="bg-artwork--placeholder" v-else></div>
</transition>
</div>
<script type="text/x-template" id="cider-search">
@ -263,13 +278,13 @@
<div class="col">
<h3>Songs</h3>
</div>
<div class="col-auto flex-center" v-if="search.results.songs.data.length == search.limit">
<div class="col-auto flex-center" v-if="search.results.songs.data.length >= 6">
<button class="cd-btn-seeall">See All</button>
</div>
</div>
<div>
<mediaitem-list-item :item="item"
v-for="item in search.results.songs.data"></mediaitem-list-item>
v-for="item in search.results.songs.data.limit(6)"></mediaitem-list-item>
</div>
</div>
</div>
@ -280,36 +295,36 @@
<div class="col">
<h3>Albums</h3>
</div>
<div class="col-auto flex-center" v-if="search.results.albums.data.length == search.limit">
<div class="col-auto flex-center" v-if="search.results.albums.data.length >= 10">
<button class="cd-btn-seeall">See All</button>
</div>
</div>
<mediaitem-square :item="item"
v-for="item in search.results.albums.data"></mediaitem-square>
v-for="item in search.results.albums.data.limit(10)"></mediaitem-square>
</template>
<template v-if="search.results.artists">
<div class="row">
<div class="col">
<h3>Artists</h3>
</div>
<div class="col-auto flex-center" v-if="search.results.artists.data.length == search.limit">
<div class="col-auto flex-center" v-if="search.results.artists.data.length >= 5">
<button class="cd-btn-seeall">See All</button>
</div>
</div>
<mediaitem-square :item="item"
v-for="item in search.results.artists.data"></mediaitem-square>
v-for="item in search.results.artists.data.limit(5)"></mediaitem-square>
</template>
<template v-if="search.results.playlists">
<div class="row">
<div class="col">
<h3>Playlists</h3>
</div>
<div class="col-auto flex-center" v-if="search.results.playlists.data.length == search.limit">
<div class="col-auto flex-center" v-if="search.results.playlists.data.length >= 10">
<button class="cd-btn-seeall">See All</button>
</div>
</div>
<mediaitem-square :item="item"
v-for="item in search.results.playlists.data"></mediaitem-square>
v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square>
</template>
</template>
</div>

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

@ -47,6 +47,11 @@ const MusicKitTools = {
}
}
// limit an array to a certain number of items
Array.prototype.limit = function (n) {
return this.slice(0, n);
};
const app = new Vue({
el: "#app",
data: {
@ -74,6 +79,9 @@ const app = new Vue({
listing: [],
details: {}
},
chrome: {
artworkReady: false
},
page: "browse"
},
methods: {
@ -87,11 +95,16 @@ const app = new Vue({
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
})
this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
self.chrome.artworkReady = false
})
this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
self.playlists.listing = res.data
})
document.body.removeAttribute("loading")
},
getSidebarItemClass(page) {
if (this.page == page) {
return ["active"]
@ -203,6 +216,16 @@ const app = new Vue({
getMediaItemArtwork(url, size = 64) {
return `url("${url.replace('{w}', size).replace('{h}', size)}")`;
},
getNowPlayingArtworkBG(size = 600) {
if(!this.mkReady()) {
return ""
}
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
} else {
return "";
}
},
getNowPlayingArtwork(size = 600) {
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`;

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

@ -85,6 +85,24 @@ body[loading] {
position: relative;
overflow: hidden;
}
[hidden] {
display: none !important;
}
.bg-artwork--placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #222;
z-index: -1;
background-size: cover;
background-position: center;
opacity: 0.70;
}
.bg-artwork {
position: absolute;
@ -92,10 +110,19 @@ body[loading] {
left: 0;
width: 100%;
height: 100%;
background: url("artwork.jpeg");
background: var(--artwork);
z-index: -1;
background-size: cover;
background-position: center;
filter: blur(60px) saturate(180%);
display: none;
opacity: 0.70;
transition: opacity .25s var(--appleEase);
}
[artwork-hidden] {
transition: opacity .25s var(--appleEase);
opacity:0;
}
body {