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

fix the now playing image once and for all

Browse source
This commit is contained in:
vapormusic 2022-01-07 13:43:19 +07:00
parent 95eb02d837
commit cd84682d53
4 changed files with 59 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/renderer/assets/feather/folder.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 311 B

89
src/renderer/index.js
View file

@ -597,7 +597,7 @@ const app = new Vue({
self.lyrics = []
self.richlyrics = []
app.getCurrentArtURL();
app.getNowPlayingArtwork(42);
// app.getNowPlayingArtwork(42);
app.getNowPlayingArtworkBG(32);
app.loadLyrics();
@ -2538,56 +2538,67 @@ const app = new Vue({
}, 200)
},
getNowPlayingArtwork(size = 600) {
if (typeof this.mk.nowPlayingItem === "undefined") return;
let interval = setInterval(() => {
// getNowPlayingArtwork(size = 600) {
// if (typeof this.mk.nowPlayingItem === "undefined") return;
// let interval = setInterval(() => {
try {
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackIDBG && document.querySelector('.app-playback-controls .artwork')) {
this.currentTrackIDBG = this.mk.nowPlayingItem["id"];
if (document.querySelector('.app-playback-controls .artwork') != null) {
clearInterval(interval);
}
if (app.mk.nowPlayingItem.attributes.artwork != null && app.mk.nowPlayingItem.attributes.artwork.url != null && app.mk.nowPlayingItem.attributes.artwork.url!= '' ) {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${decodeURI((this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"])).replace('{w}', size).replace('{h}', size)}")`);
try {
clearInterval(interval);
} catch (err) {
}
} else {
this.setLibraryArt()
}
} else if (this.mk.nowPlayingItem["id"] == this.currentTrackID) {
try {
clearInterval(interval);
} catch (err) {
}
}
} catch (e) {
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] && document.querySelector('.app-playback-controls .artwork')) {
this.setLibraryArt()
try {
clearInterval(interval);
} catch (err) {
}
// try {
// if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackIDBG && document.querySelector('.app-playback-controls .artwork')) {
// this.currentTrackIDBG = this.mk.nowPlayingItem["id"];
// if (document.querySelector('.app-playback-controls .artwork') != null) {
// clearInterval(interval);
// }
// if (app.mk.nowPlayingItem.attributes.artwork != null && app.mk.nowPlayingItem.attributes.artwork.url != null && app.mk.nowPlayingItem.attributes.artwork.url!= '' ) {
// document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${decodeURI((this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"])).replace('{w}', size).replace('{h}', size)}")`);
// try {
// clearInterval(interval);
// } catch (err) {
// }
// } else {
// this.setLibraryArt()
// }
// } else if (this.mk.nowPlayingItem["id"] == this.currentTrackID) {
// try {
// clearInterval(interval);
// } catch (err) {
// }
// }
// } catch (e) {
// if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] && document.querySelector('.app-playback-controls .artwork')) {
// this.setLibraryArt()
// try {
// clearInterval(interval);
// } catch (err) {
// }
}
// }
}
}, 200)
// }
// }, 200)
},
// },
async getCurrentArtURL(){
try{
this.currentArtUrl = '';
if (app.mk.nowPlayingItem != null && app.mk.nowPlayingItem.attributes != null && app.mk.nowPlayingItem.attributes.artwork != null && app.mk.nowPlayingItem.attributes.artwork.url != null && app.mk.nowPlayingItem.attributes.artwork.url!= '' )
{this.currentArtUrl = (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"] ?? '').replace('{w}', 50).replace('{h}', 50);
{
this.currentArtUrl = (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"] ?? '').replace('{w}', 50).replace('{h}', 50);
try{
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);}
catch (e) {}
} else {
let data = await this.mk.api.library.song(this.mk.nowPlayingItem.id);
if (data != null && data !== "" && data.attributes != null && data.attributes.artwork != null) {
this.currentArtUrl = (data["attributes"]["artwork"]["url"] ?? '').replace('{w}', 50).replace('{h}', 50);;
} else {this.currentArtUrl = ''}
this.currentArtUrl = (data["attributes"]["artwork"]["url"] ?? '').replace('{w}', 50).replace('{h}', 50);
try{
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);}
catch (e) {}
} else {this.currentArtUrl = '';
try{
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);}
catch (e) {}
}
}
}catch(e){

10
src/renderer/style.less
View file

@ -3597,7 +3597,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
.lyric-body{
justify-content: center;
}
}
@ -3668,8 +3668,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-weight: 600;
text-align: center;
font-size: 0.9em;
margin-top: 0.25vh;
height: 0.9em;
height: 1.2em;
line-height: 0.9em;
overflow: hidden;
max-width: 360px;
@ -3687,6 +3686,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.song-artist {
font-size: 0.875em;
}
.song-name {
margin-top: 0.15vh;
}
}
.app-playback-controls .playback-info {
@ -3713,7 +3715,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
@bgColor: transparent;
//height: 16px;
position: absolute;
bottom: -2.5vh;
bottom: -1.5vh;
left: 0px;
background: @bgColor;

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

@ -70,7 +70,7 @@
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
<div class="artwork" @click="drawer.open = false; appMode = 'fullscreen'">
<img class="small" :url="currentArtUrl"></img>
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="playback-info">
<div class="song-name">