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.lyrics = []
self.richlyrics = [] self.richlyrics = []
app.getCurrentArtURL(); app.getCurrentArtURL();
app.getNowPlayingArtwork(42); // app.getNowPlayingArtwork(42);
app.getNowPlayingArtworkBG(32); app.getNowPlayingArtworkBG(32);
app.loadLyrics(); app.loadLyrics();
@ -2538,56 +2538,67 @@ const app = new Vue({
}, 200) }, 200)
}, },
getNowPlayingArtwork(size = 600) { // getNowPlayingArtwork(size = 600) {
if (typeof this.mk.nowPlayingItem === "undefined") return; // if (typeof this.mk.nowPlayingItem === "undefined") return;
let interval = setInterval(() => { // let interval = setInterval(() => {
try { // try {
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackIDBG && document.querySelector('.app-playback-controls .artwork')) { // if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackIDBG && document.querySelector('.app-playback-controls .artwork')) {
this.currentTrackIDBG = this.mk.nowPlayingItem["id"]; // this.currentTrackIDBG = this.mk.nowPlayingItem["id"];
if (document.querySelector('.app-playback-controls .artwork') != null) { // if (document.querySelector('.app-playback-controls .artwork') != null) {
clearInterval(interval); // clearInterval(interval);
} // }
if (app.mk.nowPlayingItem.attributes.artwork != null && app.mk.nowPlayingItem.attributes.artwork.url != null && app.mk.nowPlayingItem.attributes.artwork.url!= '' ) { // 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)}")`); // document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${decodeURI((this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"])).replace('{w}', size).replace('{h}', size)}")`);
try { // try {
clearInterval(interval); // clearInterval(interval);
} catch (err) { // } catch (err) {
} // }
} else { // } else {
this.setLibraryArt() // this.setLibraryArt()
} // }
} else if (this.mk.nowPlayingItem["id"] == this.currentTrackID) { // } else if (this.mk.nowPlayingItem["id"] == this.currentTrackID) {
try { // try {
clearInterval(interval); // clearInterval(interval);
} catch (err) { // } catch (err) {
} // }
} // }
} catch (e) { // } catch (e) {
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] && document.querySelector('.app-playback-controls .artwork')) { // if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] && document.querySelector('.app-playback-controls .artwork')) {
this.setLibraryArt() // this.setLibraryArt()
try { // try {
clearInterval(interval); // clearInterval(interval);
} catch (err) { // } catch (err) {
} // }
} // }
} // }
}, 200) // }, 200)
}, // },
async getCurrentArtURL(){ async getCurrentArtURL(){
try{ try{
this.currentArtUrl = ''; 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!= '' ) 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 { } else {
let data = await this.mk.api.library.song(this.mk.nowPlayingItem.id); let data = await this.mk.api.library.song(this.mk.nowPlayingItem.id);
if (data != null && data !== "" && data.attributes != null && data.attributes.artwork != null) { if (data != null && data !== "" && data.attributes != null && data.attributes.artwork != null) {
this.currentArtUrl = (data["attributes"]["artwork"]["url"] ?? '').replace('{w}', 50).replace('{h}', 50);; this.currentArtUrl = (data["attributes"]["artwork"]["url"] ?? '').replace('{w}', 50).replace('{h}', 50);
} else {this.currentArtUrl = ''} 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){ }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{ .lyric-body{
justify-content: center;
} }
} }
@ -3668,8 +3668,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
font-size: 0.9em; font-size: 0.9em;
margin-top: 0.25vh; height: 1.2em;
height: 0.9em;
line-height: 0.9em; line-height: 0.9em;
overflow: hidden; overflow: hidden;
max-width: 360px; max-width: 360px;
@ -3687,6 +3686,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.song-artist { .song-artist {
font-size: 0.875em; font-size: 0.875em;
} }
.song-name {
margin-top: 0.15vh;
}
} }
.app-playback-controls .playback-info { .app-playback-controls .playback-info {
@ -3713,7 +3715,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
@bgColor: transparent; @bgColor: transparent;
//height: 16px; //height: 16px;
position: absolute; position: absolute;
bottom: -2.5vh; bottom: -1.5vh;
left: 0px; left: 0px;
background: @bgColor; background: @bgColor;

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

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