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

added toggle for animated artwork background, animated background will stop when window is out of focus

Browse source
This commit is contained in:
booploops 2022-01-03 20:51:15 -08:00
parent 05f152247d
commit e087129b01
5 changed files with 67 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.js
View file

@ -50,6 +50,7 @@ const configDefaults = {
"refresh_rate": 0, "refresh_rate": 0,
"animated_artwork": "limited", // 0 = always, 1 = limited, 2 = never "animated_artwork": "limited", // 0 = always, 1 = limited, 2 = never
"animated_artwork_qualityLevel": 1, "animated_artwork_qualityLevel": 1,
"bg_artwork_rotation": false,
"hw_acceleration": "default", // default, webgpu, disabled "hw_acceleration": "default", // default, webgpu, disabled
"window_transparency": "default" "window_transparency": "default"
}, },

3
src/renderer/index.js
View file

@ -223,6 +223,7 @@ const app = new Vue({
mxmtoken: "", mxmtoken: "",
mkIsReady: false, mkIsReady: false,
playerReady: false, playerReady: false,
animateBackground: false,
lyricon: false, lyricon: false,
currentTrackID: '', currentTrackID: '',
currentTrackIDBG: '', currentTrackIDBG: '',
@ -2583,10 +2584,12 @@ const app = new Vue({
document.querySelectorAll(".animated-artwork-video").forEach(el => { document.querySelectorAll(".animated-artwork-video").forEach(el => {
el.play() el.play()
}) })
this.animateBackground = true
} else { } else {
document.querySelectorAll(".animated-artwork-video").forEach(el => { document.querySelectorAll(".animated-artwork-video").forEach(el => {
el.pause() el.pause()
}) })
this.animateBackground = false
} }
}, },
async nowPlayingContextMenu(event) { async nowPlayingContextMenu(event) {

50
src/renderer/style.less
View file

@ -99,13 +99,8 @@ body[platform='linux'] {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-size: 400% 400%; background-size: 400% 400%;
}
.bgGradientMaterial { &::before {
position:relative;
}
.bgGradientMaterial::before {
position: absolute; position: absolute;
top: -50%; top: -50%;
left: -50%; left: -50%;
@ -118,9 +113,18 @@ body[platform='linux'] {
transform-origin: center; transform-origin: center;
animation: bgRotate 10s linear infinite; animation: bgRotate 10s linear infinite;
filter: brightness(100%) saturate(200%) contrast(1.5); filter: brightness(100%) saturate(200%) contrast(1.5);
}
&.noanimation::before {
animation: none;
}
} }
#app::before { .bgGradientMaterial-base {
position:relative;
}
.bgGradientMaterial-base::before {
position: absolute; position: absolute;
top: -50%; top: -50%;
left: -50%; left: -50%;
@ -305,6 +309,27 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 94%; height: 94%;
backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
box-shadow: var(--ciderShadow-Generic); 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 { .search-input-container {
@ -3327,9 +3352,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
box-shadow: unset; box-shadow: unset;
background: black; background: black;
.bgArtworkMaterial {
display: block;
top: -50%;
left: -20%;
width: 200VH;
height: 200VH;
}
.lyric-body { .lyric-body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0px;
margin: 0px;
overflow: hidden;
.lyric-line { .lyric-line {
pointer-events: none; pointer-events: none;

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

@ -30,7 +30,7 @@
</head> </head>
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>"> <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"> <transition name="fsModeSwitch">
<div id="app-main" v-show="appMode == 'player'"> <div id="app-main" v-show="appMode == 'player'">
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div> <div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
@ -447,6 +447,7 @@
</div> </div>
<transition name="drawertransition"> <transition name="drawertransition">
<div class="app-drawer" v-if="drawer.open"> <div class="app-drawer" v-if="drawer.open">
<div class="bgArtworkMaterial"></div>
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics" <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view> :richlyrics="richlyrics"></lyrics-view>
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue> <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>

8
src/renderer/views/pages/settings.ejs
View file

@ -82,6 +82,14 @@
</select> </select>
</div> </div>
</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-line">
<div class="md-option-segment"> <div class="md-option-segment">
Window Transparency Window Transparency