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

updated fullscreen drawer animation

Browse source
This commit is contained in:
booploops 2022-01-03 22:53:48 -08:00
parent a1284adad1
commit 5d02b60df0
3 changed files with 27 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/renderer/index.js
View file

@ -105,10 +105,15 @@ const store = new Vuex.Store({
albums: [],
recentlyAdded: [],
playlists: []
},
artwork: {
playerLCD: ""
}
},
mutations: {
setLCDArtwork(state, artwork) {
state.artwork.playerLCD = artwork
}
}
})
@ -2430,9 +2435,13 @@ const app = new Vue({
this.currentTrackID = this.mk.nowPlayingItem["id"];
document.querySelector('.bg-artwork').src = "";
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
document.querySelectorAll('.bg-artwork').forEach(artwork => {
artwork.src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
getBase64FromUrl(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).then(img =>{
document.querySelectorAll('.bg-artwork').forEach(artwork => {
artwork.src = img;
})
self.$store.commit("setLCDArtwork", img)
})
// Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
// let angle = "140deg"
// let gradient = ""
@ -2534,7 +2543,12 @@ const app = new Vue({
const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id)
if (data != null && data !== "") {
document.querySelector('.bg-artwork').src = (data["attributes"]["artwork"]["url"]).toString();
getBase64FromUrl((data["attributes"]["artwork"]["url"]).toString()).then(img =>{
document.querySelector('.bg-artwork').forEach(artwork => {
artwork.src = img;
})
self.$store.commit("setLCDArtwork", img)
})
}
} catch (e) {
}

15
src/renderer/style.less
View file

@ -346,18 +346,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
position: absolute;
width: 100%;
height: 100%;
&::before {
position: absolute;
top: -10%;
left: -100%;
width: 100vh;
height: 100vh;
background-image: var(--bgColor);
content: "";
z-index: -1;
transform: rotateZ(0deg);
transform-origin: center;
animation: bgRotate 10s linear infinite;
.bg-artwork-container .bg-artwork {
filter: brightness(100%) blur(180px) saturate(280%) contrast(1);
}
}
}

7
src/renderer/views/main.ejs
View file

@ -447,7 +447,12 @@
</div>
<transition name="drawertransition">
<div class="app-drawer" v-if="drawer.open">
<div class="bgArtworkMaterial"></div>
<div class="bgArtworkMaterial">
<div class="bg-artwork-container">
<img class="bg-artwork a" :src="$store.state.artwork.playerLCD">
<img class="bg-artwork b" :src="$store.state.artwork.playerLCD">
</div>
</div>
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view>
<div v-if="drawer.panel == 'lyrics'" class="lyric-footer">