added option to disable artwork bg, changes to settings style, fixed selects size on settings
This commit is contained in:
booploops
parent
e57fc2528d
commit
2f3e477ce5
5 changed files with 192 additions and 123 deletions
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue