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

added option to disable artwork bg, changes to settings style, fixed selects size on settings

Browse source
This commit is contained in:
booploops 2022-01-21 05:07:43 -08:00
parent e57fc2528d
commit 2f3e477ce5
5 changed files with 192 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/main/base/store.ts
View file

@ -54,6 +54,7 @@ export class ConfigStore {
"theme": "",
"scrollbars": 0, // 0 = show on hover, 2 = always hide, 3 = always show
"refresh_rate": 0,
"window_background_style": "artwork", // "none", "artwork", "color"
"animated_artwork": "limited", // 0 = always, 1 = limited, 2 = never
"animated_artwork_qualityLevel": 1,
"bg_artwork_rotation": false,

11
src/renderer/index.js
View file

@ -731,9 +731,14 @@ const app = new Vue({
document.location.reload()
},
getAppClasses() {
let classes = {}
if (this.cfg.advanced.experiments.includes('compactui')) {
return { compact: true }
classes.compact = true
}
if(this.cfg.visual.window_background_style == "none") {
classes.simplebg = true
}
return classes
},
invokeDrawer(panel) {
if (this.drawer.panel == panel && this.drawer.open) {
@ -2744,7 +2749,7 @@ const app = new Vue({
// if rgb
return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
},
getNowPlayingArtworkBG(size = 600) {
getNowPlayingArtworkBG(size = 32, force = false) {
let self = this
if (typeof this.mk.nowPlayingItem === "undefined") return;
let bginterval = setInterval(() => {
@ -2753,7 +2758,7 @@ const app = new Vue({
}
try {
if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackID && document.querySelector('.bg-artwork')) {
if ((this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackID && document.querySelector('.bg-artwork')) || force) {
if (document.querySelector('.bg-artwork')) {
clearInterval(bginterval);
}

37
src/renderer/style.less
View file

@ -46,6 +46,7 @@ body {
transition: opacity .10s var(--appleEase);
}
a:-webkit-any-link {
color: var(--keyColor);
}
@ -130,6 +131,25 @@ body.notransparency::before {
overflow: hidden;
background-size: 400% 400%;
&.simplebg {
background: #0e0e0e;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
z-index:0;
background-image: url(data:image/png;base64,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);
}
.app-chrome {
z-index: 1;
}
}
//&::before {
// position: absolute;
// top: -50%;
@ -2131,7 +2151,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
.md-select {
width: 100%;
padding: 6px;
border-radius: 6px;
border: 1px solid rgba(200, 200, 200, 0.1);
@ -4610,6 +4629,22 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* Cider */
.settings-page {
padding:0px;
.md-option-header {
padding: 1.25em 1.25em;
border-bottom: unset;
border-top: unset;
font-weight: 600;
font-size: 1.0em;
background: rgb(255 255 255 / 3%);
}
.settings-option-body {
margin: 16px;
}
}
// sidebar icon
.svg-icon {
--color: #aaa;

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

@ -574,7 +574,7 @@
</div>
</transition>
<transition name="wpfade">
<div class="bg-artwork-container"
<div class="bg-artwork-container" v-if="cfg.visual.window_background_style == 'artwork'"
:class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
<img @load="chrome.artworkReady = true" class="bg-artwork a "
>

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

@ -4,116 +4,133 @@
<div class="md-option-header">
<span>Audio</span>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Audio Quality
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
Audio Quality
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:180px;" v-model="app.cfg.audio.quality" v-on:change="changeAudioQuality">
<!-- // <option value="990">Extreme</option> -->
<option value="256">High</option>
<option value="64">Low</option>
<option value="auto">Auto</option>
</select>
</div>
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:180px;" v-model="app.cfg.audio.quality" v-on:change="changeAudioQuality">
<!-- // <option value="990">Extreme</option> -->
<option value="256">High</option>
<option value="64">Low</option>
<option value="auto">Auto</option>
</select>
<div class="md-option-line">
<div class="md-option-segment">
Seamless Audio Transitions
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.audio.seamless_audio" switch/>
</div>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Seamless Audio Transitions
<div class="md-option-line">
<div class="md-option-segment">
Enable Advanced Functionality
<br>
<small>Enabling AudioContext functionality will allow for extended audio features like Audio Normalization , Equalizers and Visualizers, however on some systems this may cause stuttering in audio tracks.</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.advanced.AudioContext" v-on:change="toggleAudioContext" switch/>
</div>
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.audio.seamless_audio" switch/>
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
<div class="md-option-segment" >
Audio Normalization
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.audio.normalization" v-on:change="toggleNormalization" switch/>
</div>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Enable Advanced Functionality
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
<div class="md-option-segment" >
Audio Spatialization
<br>
<small>Enabling AudioContext functionality will allow for extended audio features like Audio Normalization , Equalizers and Visualizers, however on some systems this may cause stuttering in audio tracks.</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.advanced.AudioContext" v-on:change="toggleAudioContext" switch/>
</div>
</div>
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
<div class="md-option-segment" >
Audio Normalization
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.audio.normalization" v-on:change="toggleNormalization" switch/>
</div>
</div>
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
<div class="md-option-segment" >
Audio Spatialization
<br>
<small>Spatialize audio and make audio more 3-dimensional (note: This is not Dolby Atmos)</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.audio.spatial" v-on:change="toggleSpatial" switch/>
<small>Spatialize audio and make audio more 3-dimensional (note: This is not Dolby Atmos)</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.audio.spatial" v-on:change="toggleSpatial" switch/>
</div>
</div>
</div>
<div class="md-option-header">
<span>Visual</span>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Animated Artwork
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
Window Background Style
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" @change="$root.getNowPlayingArtworkBG(undefined, true)" v-model="app.cfg.visual.window_background_style">
<option value="none">None</option>
<option value="artwork">Artwork</option>
</select>
</div>
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" v-model="app.cfg.visual.animated_artwork">
<option value="always">Always</option>
<option value="limited">Limit to pages and special entries</option>
<option value="disabled">Disable Everywhere</option>
</select>
</div>
</div>
<div class="md-option-line" v-if="app.cfg.visual.animated_artwork == 'always' || app.cfg.visual.animated_artwork == 'limited'">
<div class="md-option-segment">
Animated Artwork Quality
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" v-model="app.cfg.visual.animated_artwork_qualityLevel">
<option value="0">Low</option>
<option value="1">Medium</option>
<option value="2">High</option>
<option value="3">Very High</option>
<option value="4">Extreme</option>
</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">
Hardware Acceleration<br>
<small>(Requires relaunch)</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:180px;" v-model="app.cfg.visual.hw_acceleration" >
<option value="default">Default</option>
<option value="webgpu">WebGPU</option>
<option value="disabled">Disabled</option>
</select>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Show Personal Info
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.visual.showuserinfo" v-on:change="toggleUserInfo" switch/>
<div class="md-option-line">
<div class="md-option-segment">
Animated Artwork
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" v-model="app.cfg.visual.animated_artwork">
<option value="always">Always</option>
<option value="limited">Limit to pages and special entries</option>
<option value="disabled">Disable Everywhere</option>
</select>
</div>
</div>
<div class="md-option-line" v-if="app.cfg.visual.animated_artwork == 'always' || app.cfg.visual.animated_artwork == 'limited'">
<div class="md-option-segment">
Animated Artwork Quality
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" v-model="app.cfg.visual.animated_artwork_qualityLevel">
<option value="0">Low</option>
<option value="1">Medium</option>
<option value="2">High</option>
<option value="3">Very High</option>
<option value="4">Extreme</option>
</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">
Hardware Acceleration<br>
<small>(Requires relaunch)</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:180px;" v-model="app.cfg.visual.hw_acceleration" >
<option value="default">Default</option>
<option value="webgpu">WebGPU</option>
<option value="disabled">Disabled</option>
</select>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Show Personal Info
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.visual.showuserinfo" v-on:change="toggleUserInfo" switch/>
</div>
</div>
</div>
<div class="md-option-header">
<span>Lyrics</span>
</div>
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
Enable Musixmatch Lyrics
@ -413,9 +430,12 @@
<input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch/>
</div>
</div>
<div class="md-option-header">
<span>Conectivity</span>
</div>
</div>
<div class="md-option-header">
<span>Conectivity</span>
</div>
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
Discord Rich Presence
@ -472,9 +492,12 @@
<input type="checkbox" v-model="app.cfg.lastfm.enabledRemoveFeaturingArtists" switch/>
</div>
</div>
<div class="md-option-header">
<span>Experimental</span>
</div>
</div>
<div class="md-option-header">
<span>Experimental</span>
</div>
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
Compact UI
@ -485,10 +508,12 @@
</button>
</div>
</div>
</div>
<div style="opacity: 0.5; pointer-events: none">
<div class="md-option-header">
<span>Unfinished / Non Functional</span>
</div>
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
Theme
@ -561,6 +586,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
</script>
@ -575,11 +601,11 @@
}
},
mounted: function () {
if (app.cfg.lastfm.enabled){
if (app.cfg.lastfm.enabled) {
const element = document.getElementById('lfmConnect');
if (element){
element.innerHTML = `Disconnect\n<p style="font-size: 8px"><i>(Authed: ${app.cfg.lastfm.auth_token})</i></p>`;
element.onclick = app.LastFMDeauthorize;
if (element) {
element.innerHTML = `Disconnect\n<p style="font-size: 8px"><i>(Authed: ${app.cfg.lastfm.auth_token})</i></p>`;
element.onclick = app.LastFMDeauthorize;
}
}
},
@ -590,31 +616,33 @@
removeExperiment(flag) {
app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
},
toggleAudioContext: function(){
if (app.cfg.advanced.AudioContext){
toggleAudioContext: function () {
if (app.cfg.advanced.AudioContext) {
CiderAudio.init();
if (app.cfg.audio.normalization){
CiderAudio.normalizerOn()}
if (app.cfg.audio.spatial){
CiderAudio.spatialOn()}
if (app.cfg.audio.normalization) {
CiderAudio.normalizerOn()
}
if (app.cfg.audio.spatial) {
CiderAudio.spatialOn()
}
} else {
CiderAudio.off();
}
},
toggleNormalization : function(){
if (app.cfg.audio.normalization){
toggleNormalization: function () {
if (app.cfg.audio.normalization) {
CiderAudio.normalizerOn()
} else {CiderAudio.normalizerOff()}
} else { CiderAudio.normalizerOff() }
},
toggleSpatial : function(){
if (app.cfg.audio.spatial){
toggleSpatial: function () {
if (app.cfg.audio.spatial) {
CiderAudio.spatialOn()
} else {CiderAudio.spatialOff()}
} else { CiderAudio.spatialOff() }
},
changeAudioQuality : function(){
changeAudioQuality: function () {
app.mk.bitrate = app.cfg.audio.quality
},
toggleUserInfo : function(){
toggleUserInfo: function () {
app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
}
}