girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 13:17:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf(lyrics): optimize GPU usage for dynamic lyric backgrounds (#602)

Browse source 
optimize GPU usage for dynamic lyric backgrounds

#484
This commit is contained in:
Map1en_ 2021-04-26 15:39:10 +08:00 • committed by GitHub
parent 2c8ba10e20
commit 6922c716e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/views/lyrics.vue
View file

@ -5,16 +5,16 @@
v-if="settings.showLyricsDynamicBackground" v-if="settings.showLyricsDynamicBackground"
class="dynamic-background" class="dynamic-background"
> >
<div v-show="showLyrics"> <div
<div v-show="this.$store.state.showLyrics"
class="top-right" class="top-right"
:style="{ backgroundImage: `url(${imageUrl})` }" :style="{ backgroundImage: `url(${bgImageUrl})` }"
/> />
<div <div
class="bottom-left" v-show="this.$store.state.showLyrics"
:style="{ backgroundImage: `url(${imageUrl})` }" class="bottom-left"
/> :style="{ backgroundImage: `url(${bgImageUrl})` }"
</div> />
</div> </div>
<div class="left-side"> <div class="left-side">
<div> <div>
@ -214,6 +214,20 @@ export default {
imageUrl() { imageUrl() {
return this.player.currentTrack?.al?.picUrl + '?param=1024y1024'; return this.player.currentTrack?.al?.picUrl + '?param=1024y1024';
}, },
bgImageUrl() {
return this.player.currentTrack?.al?.picUrl + "?param=500y500";
},
progress: {
get() {
return this.playerRef.progress;
},
set(value) {
this.playerRef.setProgress(value);
},
},
progressMax() {
return this.playerRef.progressMax;
},
lyricWithTranslation() { lyricWithTranslation() {
let ret = []; let ret = [];
// 空内容的去除 // 空内容的去除
@ -373,14 +387,14 @@ export default {
} }
.dynamic-background { .dynamic-background {
filter: blur(50px) opacity(0.6) contrast(var(--contrast-dynamic-background))
brightness(var(--brightness-dynamic-background));
.top-right, .top-right,
.bottom-left { .bottom-left {
z-index: 0; z-index: 0;
width: 140vw; width: 14vw;
height: 140vw; height: 14vw;
position: absolute; position: absolute;
filter: blur(50px) opacity(0.6) contrast(var(--contrast-dynamic-background))
brightness(var(--brightness-dynamic-background));
background-size: cover; background-size: cover;
animation: rotate 150s linear infinite; animation: rotate 150s linear infinite;
} }
@ -401,10 +415,10 @@ export default {
@keyframes rotate { @keyframes rotate {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg) scale(10);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg) scale(10);
} }
} }