github-mirror/YesPlayMusic
2
0
Fork 0
mirror of https://github.com/qier222/YesPlayMusic.git synced 2025-01-19 17:12:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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
Show Stats 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"
class="dynamic-background"
>
<div v-show="showLyrics">
<div
class="top-right"
:style="{ backgroundImage: `url(${imageUrl})` }"
/>
<div
class="bottom-left"
:style="{ backgroundImage: `url(${imageUrl})` }"
/>
</div>
<div
v-show="this.$store.state.showLyrics"
class="top-right"
:style="{ backgroundImage: `url(${bgImageUrl})` }"
/>
<div
v-show="this.$store.state.showLyrics"
class="bottom-left"
:style="{ backgroundImage: `url(${bgImageUrl})` }"
/>
</div>
<div class="left-side">
<div>
@ -214,6 +214,20 @@ export default {
imageUrl() {
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() {
let ret = [];
// 空内容的去除
@ -373,14 +387,14 @@ export default {
}
.dynamic-background {
filter: blur(50px) opacity(0.6) contrast(var(--contrast-dynamic-background))
brightness(var(--brightness-dynamic-background));
.top-right,
.bottom-left {
z-index: 0;
width: 140vw;
height: 140vw;
width: 14vw;
height: 14vw;
position: absolute;
filter: blur(50px) opacity(0.6) contrast(var(--contrast-dynamic-background))
brightness(var(--brightness-dynamic-background));
background-size: cover;
animation: rotate 150s linear infinite;
}
@ -401,10 +415,10 @@ export default {
@keyframes rotate {
0% {
transform: rotate(0deg);
transform: rotate(0deg) scale(10);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg) scale(10);
}
}