added toggle for animated artwork background, animated background will stop when window is out of focus
This commit is contained in:
booploops
parent
05f152247d
commit
e087129b01
5 changed files with 67 additions and 18 deletions
1
index.js
1
index.js
|
|
@ -50,6 +50,7 @@ const configDefaults = {
|
|||
"refresh_rate": 0,
|
||||
"animated_artwork": "limited", // 0 = always, 1 = limited, 2 = never
|
||||
"animated_artwork_qualityLevel": 1,
|
||||
"bg_artwork_rotation": false,
|
||||
"hw_acceleration": "default", // default, webgpu, disabled
|
||||
"window_transparency": "default"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -223,6 +223,7 @@ const app = new Vue({
|
|||
mxmtoken: "",
|
||||
mkIsReady: false,
|
||||
playerReady: false,
|
||||
animateBackground: false,
|
||||
lyricon: false,
|
||||
currentTrackID: '',
|
||||
currentTrackIDBG: '',
|
||||
|
|
@ -2583,10 +2584,12 @@ const app = new Vue({
|
|||
document.querySelectorAll(".animated-artwork-video").forEach(el => {
|
||||
el.play()
|
||||
})
|
||||
this.animateBackground = true
|
||||
} else {
|
||||
document.querySelectorAll(".animated-artwork-video").forEach(el => {
|
||||
el.pause()
|
||||
})
|
||||
this.animateBackground = false
|
||||
}
|
||||
},
|
||||
async nowPlayingContextMenu(event) {
|
||||
|
|
|
|||
|
|
@ -99,28 +99,32 @@ body[platform='linux'] {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
background-size: 400% 400%;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 250%;
|
||||
background-image: var(--bgColor);
|
||||
content: "";
|
||||
z-index: -1;
|
||||
transform: rotateZ(0deg);
|
||||
transform-origin: center;
|
||||
animation: bgRotate 10s linear infinite;
|
||||
filter: brightness(100%) saturate(200%) contrast(1.5);
|
||||
}
|
||||
|
||||
&.noanimation::before {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bgGradientMaterial {
|
||||
.bgGradientMaterial-base {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.bgGradientMaterial::before {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 250%;
|
||||
background-image: var(--bgColor);
|
||||
content: "";
|
||||
z-index: -1;
|
||||
transform: rotateZ(0deg);
|
||||
transform-origin: center;
|
||||
animation: bgRotate 10s linear infinite;
|
||||
filter: brightness(100%) saturate(200%) contrast(1.5);
|
||||
}
|
||||
|
||||
#app::before {
|
||||
.bgGradientMaterial-base::before {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
|
|
@ -305,6 +309,27 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
height: 94%;
|
||||
backdrop-filter: blur(40px) saturate(180%);
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
overflow: hidden;
|
||||
|
||||
.bgArtworkMaterial {
|
||||
display: none;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-container {
|
||||
|
|
@ -3327,9 +3352,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
box-shadow: unset;
|
||||
background: black;
|
||||
|
||||
.bgArtworkMaterial {
|
||||
display: block;
|
||||
top: -50%;
|
||||
left: -20%;
|
||||
width: 200VH;
|
||||
height: 200VH;
|
||||
}
|
||||
|
||||
.lyric-body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
|
||||
.lyric-line {
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</head>
|
||||
|
||||
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
|
||||
<div id="app">
|
||||
<div id="app" :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
|
||||
<transition name="fsModeSwitch">
|
||||
<div id="app-main" v-show="appMode == 'player'">
|
||||
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
|
||||
|
|
@ -447,6 +447,7 @@
|
|||
</div>
|
||||
<transition name="drawertransition">
|
||||
<div class="app-drawer" v-if="drawer.open">
|
||||
<div class="bgArtworkMaterial"></div>
|
||||
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
|
||||
:richlyrics="richlyrics"></lyrics-view>
|
||||
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
|
||||
|
|
|
|||
|
|
@ -82,6 +82,14 @@
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
Animated Window Background
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
Window Transparency
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue