1544 lines
No EOL
98 KiB
Text
1544 lines
No EOL
98 KiB
Text
<script type="text/x-template" id="settings-window">
|
|
<div class="settings-panel" @click.self="close()">
|
|
<div class="settings-window"
|
|
:class="{'maxed': $store.state.pageState['settings'].fullscreen, 'no-sidebar': sidebarVis()}">
|
|
<button class="close-btn minmax-btn"
|
|
@click="$store.state.pageState['settings'].fullscreen = !$store.state.pageState['settings'].fullscreen"
|
|
:class="{'min': $store.state.pageState['settings'].fullscreen}"></button>
|
|
<button class="close-btn" @click="close()"></button>
|
|
<b-tabs class="no-style" pills vertical content-class="mt-3"
|
|
v-model="$store.state.pageState['settings'].currentTabIndex">
|
|
<b-tab>
|
|
<template #title>
|
|
<div>
|
|
<svg-icon url="./assets/settings.svg" classes="md" name="settings-general"/>
|
|
</div>
|
|
<div>
|
|
{{ $root.getLz('settings.header.general') }}
|
|
</div>
|
|
</template>
|
|
<div class="settings-tab-content">
|
|
<div class="md-option-container">
|
|
<!-- General Settings -->
|
|
<div class="md-option-header">
|
|
<span>{{$root.getLz('settings.header.general')}}</span>
|
|
</div>
|
|
<div class="settings-option-body">
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('term.language')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select" @change="$root.setLz('');$root.setLzManual()"
|
|
v-model="app.cfg.general.language">
|
|
<optgroup :label="index" v-for="(categories, index) in getLanguages()">
|
|
<option v-for="lang in categories" :value="lang.code">
|
|
{{lang.nameNative}}
|
|
({{
|
|
lang.nameEnglish }})
|
|
</option>
|
|
</optgroup>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('term.accountSettings')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" @click="app.appRoute('apple-account-settings')">
|
|
{{$root.getLz('term.accountSettings')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('term.privateSession')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="$root.cfg.general.privateEnabled"
|
|
v-on:change="$root.mk.privateEnabled = $root.cfg.general.privateEnabled"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.platform !== 'linux'">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.window.openOnStartup')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.general.onStartup.enabled" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.cfg.general.onStartup.enabled">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.window.openOnStartup.hidden')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.general.onStartup.hidden" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.general.resumebehavior')}}<br>
|
|
<small>
|
|
{{$root.getLz('settings.option.general.resumebehavior.description')}}<br>
|
|
<b>{{$root.getLz('settings.option.general.resumebehavior.locally')}}: </b>
|
|
{{$root.getLz('settings.option.general.resumebehavior.locally.description')}}<br>
|
|
<b>{{$root.getLz('settings.option.general.resumebehavior.history')}}: </b>
|
|
{{$root.getLz('settings.option.general.resumebehavior.history.description')}}
|
|
</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select" style="width:180px;"
|
|
v-model="$root.cfg.general.resumeOnStartupBehavior">
|
|
<option value="disabled">{{$root.getLz('term.disabled')}}</option>
|
|
<option value="local">
|
|
{{$root.getLz('settings.option.general.resumebehavior.locally')}}
|
|
</option>
|
|
<option value="history">
|
|
{{$root.getLz('settings.option.general.resumebehavior.history')}}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.general.resumetabs')}}<br>
|
|
<small>
|
|
{{$root.getLz('settings.option.general.resumetabs.description')}}<br>
|
|
<b>{{$root.getLz('settings.option.general.resumetabs.dynamic')}}: </b>
|
|
{{$root.getLz('settings.option.general.resumetabs.dynamic.description')}}
|
|
</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select" style="width:180px;"
|
|
v-model="$root.cfg.general.resumeTabs.tab">
|
|
<option value="dynamic">
|
|
{{$root.getLz('settings.option.general.resumetabs.dynamic')}}
|
|
</option>
|
|
<option value="home">{{$root.getLz('home.title')}}</option>
|
|
<option value="listen_now">{{$root.getLz('term.listenNow')}}</option>
|
|
<option value="browse">{{$root.getLz('term.browse')}}</option>
|
|
<option value="radio">{{$root.getLz('term.radio')}}</option>
|
|
<option value="library-recentlyadded">
|
|
{{$root.getLz('term.recentlyAdded')}}
|
|
</option>
|
|
<option value="library-songs">{{$root.getLz('term.songs')}}</option>
|
|
<option value="library-albums">{{$root.getLz('term.albums')}}</option>
|
|
<option value="library-artists">{{$root.getLz('term.artists')}}</option>
|
|
<option value="library-videos">{{$root.getLz('term.videos')}}</option>
|
|
<option value="podcasts">{{$root.getLz('term.podcasts')}}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.general.customizeSidebar')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" v-b-modal.modal-1>
|
|
{{$root.getLz('settings.option.general.customizeSidebar.customize')}}
|
|
</button>
|
|
</div>
|
|
<b-modal id="modal-1" centered size="lg"
|
|
:title="$root.getLz('settings.option.general.customizeSidebar')">
|
|
<div class="settings-option-body">
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{ $root.getLz('term.recentlyAdded') }}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.general.sidebarItems.recentlyAdded"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{ $root.getLz('term.songs') }}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.general.sidebarItems.songs"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{ $root.getLz('term.albums') }}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.general.sidebarItems.albums"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{ $root.getLz('term.artists') }}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.general.sidebarItems.artists"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{ $root.getLz('term.videos') }}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.general.sidebarItems.videos"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{ $root.getLz('term.podcasts') }}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.general.sidebarItems.podcasts"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-modal>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.general.keybindings')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" @click="$root.openSettingsPage('keybindings')">
|
|
{{$root.getLz('action.open')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.general.themeUpdateNotification')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.general.themeUpdateNotification"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.general.showLovedTracksInline')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.general.showLovedTracksInline"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{'Local files path'}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" @click="openLocalSongsPathMenu">
|
|
{{'Edit Paths'}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-tab>
|
|
<b-tab>
|
|
<template #title>
|
|
<div>
|
|
<svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio"/>
|
|
</div>
|
|
<div>
|
|
{{ $root.getLz('settings.header.audio') }}
|
|
</div>
|
|
</template>
|
|
<div class="settings-tab-content">
|
|
<div class="md-option-container">
|
|
<!-- Audio Settings -->
|
|
<div class="md-option-header">
|
|
<span>{{$root.getLz('settings.header.audio')}}</span>
|
|
</div>
|
|
<div class="settings-option-body">
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.audio.quality')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select" style="width:180px;"
|
|
v-model="app.cfg.audio.quality"
|
|
v-on:change="changeAudioQuality">
|
|
<!-- // <option value="">{{$root.getLz('settings.header.audio.quality.hireslossless')}}</option> -->
|
|
<!-- <option value="">{{$root.getLz('settings.header.audio.quality.lossless')}}</option> -->
|
|
<option value="HIGH">
|
|
{{$root.getLz('settings.header.audio.quality.high')}}
|
|
({{$root.getLz('settings.header.audio.quality.high.description')}})
|
|
</option>
|
|
<option value="STANDARD">
|
|
{{$root.getLz('settings.header.audio.quality.standard')}}
|
|
({{$root.getLz('settings.header.audio.quality.standard.description')}})
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('term.audioControls')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" onclick="app.modals.audioControls = true">
|
|
{{$root.getLz('term.audioControls')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.audio.changePlaybackRate')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" onclick="app.modals.audioPlaybackRate = true">
|
|
{{$root.getLz('settings.option.audio.playbackRate.change')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.audio.seamlessTransition')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.audio.seamless_audio"
|
|
v-on:change="app.mk._bag.features['seamless-audio-transitions'] = app.cfg.audio.seamless_audio"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality')}}
|
|
<br>
|
|
<small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.description')}}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.advanced.AudioContext"
|
|
v-on:change="toggleAudioContext"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('term.equalizer')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" onclick="app.modals.equalizer = true">
|
|
{{$root.getLz('term.equalizer')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
|
|
<div class="md-option-segment" style="white-space: pre-line;">
|
|
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization')}}
|
|
<small>{{app.cfg.audio.equalizer.vibrantBass != 0 ||
|
|
app.cfg.audio.maikiwiAudio.spatial
|
|
=== true || app.cfg.audio.maikiwiAudio.ciderPPE === true ?
|
|
`${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}\n${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled')}`
|
|
:
|
|
$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.audio.normalization"
|
|
v-on:change="toggleNormalization"
|
|
:disabled="app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer1 === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer2 === true"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line"
|
|
v-show="app.cfg.advanced.AudioContext && app.cfg.audio.normalization && app.cfg.audio.advanced">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.audio.dbspl.display')}}
|
|
<br>
|
|
<small>{{$root.getLz('settings.option.audio.dbspl.description')}}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.audio.dBSPL" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.cfg.audio.dBSPL">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.audio.dbfs.calibration')}}
|
|
<br>
|
|
<small>{{$root.getLz('settings.option.audio.dbfs.description')}}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="number" v-model="app.cfg.audio.dBSPLcalibration"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-tab>
|
|
<b-tab v-if="app.cfg.advanced.AudioContext">
|
|
<template #title>
|
|
<div>
|
|
<svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs"/>
|
|
</div>
|
|
<div>
|
|
{{ $root.getLz('settings.option.audio.audioLab') }}
|
|
</div>
|
|
</template>
|
|
<div class="settings-tab-content">
|
|
<audiolabs-page/>
|
|
</div>
|
|
</b-tab>
|
|
<b-tab>
|
|
<template #title>
|
|
<div>
|
|
<svg-icon url="./assets/feather/style.svg" classes="md" name="settings-styles"/>
|
|
</div>
|
|
<div>
|
|
{{ $root.getLz('settings.header.visual.styles') }}
|
|
</div>
|
|
</template>
|
|
<div class="settings-tab-content">
|
|
<installed-themes/>
|
|
</div>
|
|
</b-tab>
|
|
<b-tab>
|
|
<template #title>
|
|
<div>
|
|
<svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual"/>
|
|
</div>
|
|
<div>
|
|
{{ $root.getLz('settings.header.visual') }}
|
|
</div>
|
|
</template>
|
|
<div class="settings-tab-content">
|
|
<div class="md-option-container">
|
|
<!-- Visual Settings -->
|
|
<div class="md-option-header">
|
|
<span>{{$root.getLz('settings.header.visual')}}</span>
|
|
</div>
|
|
<div class="settings-option-body">
|
|
<!--<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.header.visual.theme')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn md-btn-block" @click="$root.appRoute('installed-themes')">
|
|
{{$root.getLz('settings.option.visual.theme.manageStyles')}}
|
|
</button>
|
|
</div>
|
|
</div>-->
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz("settings.option.visual.windowStyle")}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select"
|
|
v-model="$root.cfg.visual.directives.windowLayout">
|
|
<option value="default">Maverick</option>
|
|
<option value="twopanel">Mojave</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.windowBackgroundStyle')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select" @change="windowBgStyleChange"
|
|
v-model="app.cfg.visual.window_background_style">
|
|
<option value="none">
|
|
{{$root.getLz('settings.header.visual.windowBackgroundStyle.none')}}
|
|
</option>
|
|
<option value="artwork">
|
|
{{$root.getLz('settings.header.visual.windowBackgroundStyle.artwork')}}
|
|
</option>
|
|
<option value="image">
|
|
{{$root.getLz('settings.header.visual.windowBackgroundStyle.image')}}
|
|
</option>
|
|
<option value="color">
|
|
{{$root.getLz('settings.header.visual.windowBackgroundStyle.color')}}
|
|
</option>
|
|
<option v-if="$root.platform == 'win32'" value="mica">
|
|
Mica (Beta)
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line child"
|
|
v-if="app.cfg.visual.window_background_style == 'color'">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.windowColor')}}
|
|
</div>
|
|
<div class="md-option-segment_auto">
|
|
<input type="color" v-model="app.cfg.visual.windowColor"/>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.customAccentColor')}}
|
|
</div>
|
|
<div class="md-option-segment_auto">
|
|
<input type="checkbox" v-model="app.cfg.visual.customAccentColor"
|
|
:disabled="app.cfg.visual.purplePodcastPlaybackBar" switch/>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line child" v-if="app.cfg.visual.customAccentColor">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.accentColor')}}
|
|
</div>
|
|
<div class="md-option-segment_auto">
|
|
<input type="color" v-model="app.cfg.visual.accentColor"/>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.purplePodcastPlaybackBar')}}
|
|
</div>
|
|
<div class="md-option-segment_auto">
|
|
<input type="checkbox" v-model="app.cfg.visual.purplePodcastPlaybackBar"
|
|
:disabled="app.cfg.visual.customAccentColor" switch/>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
|
|
<small>({{$root.getLz('settings.option.visual.hardwareAcceleration.description')}})</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select" style="width:180px;"
|
|
v-model="app.cfg.visual.hw_acceleration"
|
|
@change="promptForRelaunch()">
|
|
<option value="default">
|
|
{{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
|
|
</option>
|
|
<option value="webgpu">
|
|
{{$root.getLz('settings.header.visual.hardwareAcceleration.webGPU')}}
|
|
</option>
|
|
<option value="disabled">{{$root.getLz('term.disabled')}}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.showPersonalInfo')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.visual.showuserinfo"
|
|
v-on:change="toggleUserInfo" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Window Settings -->
|
|
<div class="md-option-header">
|
|
<span>{{$root.getLz('settings.header.window')}}</span>
|
|
</div>
|
|
<div class="settings-option-body">
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz("settings.option.window.maxElementScale")}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select @change="$root.setWindowScaleFactor()" class="md-select"
|
|
v-model="app.cfg.visual.maxElementScale">
|
|
<option value="-1">Default (1.5x)</option>
|
|
<option value="1">1.0x</option>
|
|
<option value="1.1">1.1x</option>
|
|
<option value="1.2">1.2x</option>
|
|
<option value="1.3">1.3x</option>
|
|
<option value="1.4">1.4x</option>
|
|
<option value="1.5">1.5x</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.platform !== 'darwin'">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz("settings.option.window.close_button_hide")}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.platform !== 'darwin'">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz("settings.option.window.useNativeTitleBar")}}<br>
|
|
<small>({{$root.getLz("settings.option.visual.hardwareAcceleration.description")}})</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
|
|
@change="promptForRelaunch()"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.platform !== 'darwin'">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz("settings.option.window.windowControlStyle")}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select" v-model="app.cfg.visual.windowControlPosition">
|
|
<option value="0">
|
|
{{$root.getLz("settings.option.window.windowControlStyle.right")}}
|
|
</option>
|
|
<option value="1">
|
|
{{$root.getLz("settings.option.window.windowControlStyle.left")}}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Advanced Visual -->
|
|
<div class="md-option-header">
|
|
<span>{{$root.getLz('settings.header.advanced')}}</span>
|
|
</div>
|
|
<div class="settings-option-body">
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.animatedArtwork')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select" v-model="app.cfg.visual.animated_artwork">
|
|
<option value="always">
|
|
{{$root.getLz('settings.header.visual.animatedArtwork.always')}}
|
|
</option>
|
|
<option value="limited">
|
|
{{$root.getLz('settings.header.visual.animatedArtwork.limited')}}
|
|
</option>
|
|
<option value="disabled">
|
|
{{$root.getLz('settings.header.visual.animatedArtwork.disable')}}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</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">
|
|
{{$root.getLz('settings.option.visual.animatedArtworkQuality')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select"
|
|
v-model="app.cfg.visual.animated_artwork_qualityLevel">
|
|
<option value="0">
|
|
{{$root.getLz('settings.header.visual.animatedArtworkQuality.low')}}
|
|
</option>
|
|
<option value="1">
|
|
{{$root.getLz('settings.header.visual.animatedArtworkQuality.medium')}}
|
|
</option>
|
|
<option value="2">
|
|
{{$root.getLz('settings.header.visual.animatedArtworkQuality.high')}}
|
|
</option>
|
|
<option value="3">
|
|
{{$root.getLz('settings.header.visual.animatedArtworkQuality.veryHigh')}}
|
|
</option>
|
|
<option value="4">
|
|
{{$root.getLz('settings.header.visual.animatedArtworkQuality.extreme')}}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.animatedWindowBackground')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-tab>
|
|
<b-tab>
|
|
<template #title>
|
|
<div>
|
|
<svg-icon url="./assets/feather/plugins.svg" classes="md" name="settings-plugins"/>
|
|
</div>
|
|
<div>
|
|
{{ $root.getLz('term.plugins') }}
|
|
</div>
|
|
</template>
|
|
<div class="settings-tab-content">
|
|
<plugins-github/>
|
|
</div>
|
|
</b-tab>
|
|
<b-tab>
|
|
<template #title>
|
|
<div>
|
|
<svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics"/>
|
|
</div>
|
|
<div>
|
|
{{ $root.getLz('settings.header.lyrics') }}
|
|
</div>
|
|
</template>
|
|
<div class="settings-tab-content">
|
|
<div class="md-option-container">
|
|
<!-- Lyric Settings -->
|
|
<div class="md-option-header">
|
|
<span>{{$root.getLz('settings.header.lyrics')}}</span>
|
|
</div>
|
|
<div class="settings-option-body">
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.lyrics.musixmatchPreferredLanguage')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select" v-model="app.cfg.lyrics.mxm_language">
|
|
<option value='disabled'>Disabled</option>
|
|
<option value='afrikaans'>Afrikaans</option>
|
|
<option value='albanian'>Albanian</option>
|
|
<option value='arab'>Arabic</option>
|
|
<option value='armenian'>Armenian</option>
|
|
<option value='azerbaijani'>Azerbaijani</option>
|
|
<option value='bengali'>Bengali</option>
|
|
<option value='bosnian'>Bosnian</option>
|
|
<option value='bulgarian'>Bulgarian</option>
|
|
<option value='chinese'>Chinese (Simplified)</option>
|
|
<option value='chinese-trad'>Chinese (Traditional)</option>
|
|
<option value='croatian'>Croatian</option>
|
|
<option value='czech'>Czech</option>
|
|
<option value='danish'>Danish</option>
|
|
<option value='estonian'>Estonian</option>
|
|
<option value='english'>English</option>
|
|
<option value='farsi'>Farsi</option>
|
|
<option value='filipino'>Filipino</option>
|
|
<option value='french'>French</option>
|
|
<option value='georgian'>Georgian</option>
|
|
<option value='german'>German</option>
|
|
<option value='greek'>Greek</option>
|
|
<option value='gujarati'>Gujarati</option>
|
|
<option value='haitian-creole'>Haitian-Creole</option>
|
|
<option value='hebrew'>Hebrew</option>
|
|
<option value='hindi'>Hindi</option>
|
|
<option value='hungarian'>Hungarian</option>
|
|
<option value='icelandic'>Icelandic</option>
|
|
<option value='italian'>Italian</option>
|
|
<option value='japanese'>Japanese</option>
|
|
<option value='japanese-romaji'>Romanized Japanese</option>
|
|
<option value='kannada'>Kannada</option>
|
|
<option value='kazakh'>Kazakh</option>
|
|
<option value='korean-romaji'>Romanized Korean</option>
|
|
<option value='lao'>Lao</option>
|
|
<option value='latvian'>Latvian</option>
|
|
<option value='lithuanian'>Lithuanian</option>
|
|
<option value='macedonian'>Macedonian</option>
|
|
<option value='malay'>Malay</option>
|
|
<option value='malayalam'>Malayalam</option>
|
|
<option value='mongolian'>Mongolian</option>
|
|
<option value='nepali'>Nepali</option>
|
|
<option value='norwegian'>Norwegian</option>
|
|
<option value='panjabi'>Panjabi</option>
|
|
<option value='polish'>Polish</option>
|
|
<option value='portuguese'>Portuguese</option>
|
|
<option value='romanian'>Romanian</option>
|
|
<option value='russian'>Russian</option>
|
|
<option value='serbian'>Serbian</option>
|
|
<option value='slovak'>Slovak</option>
|
|
<option value='slovenian'>Slovenian</option>
|
|
<option value='spanish'>Spanish</option>
|
|
<option value='suomi'>Suomi</option>
|
|
<option value='swedish'>Swedish</option>
|
|
<option value='tamil'>Tamil</option>
|
|
<option value='telugu'>Telugu</option>
|
|
<option value='turkish'>Turkish</option>
|
|
<option value='ukrainian'>Ukrainian</option>
|
|
<option value='urdu'>Urdu</option>
|
|
<option value='uzbek'>Uzbek</option>
|
|
<option value='vietnamese'>Vietnamese</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.lyrics.enableYoutubeLyrics')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.lyrics.enableQQLyrics')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.lyrics.enable_qq" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-tab>
|
|
<b-tab>
|
|
<template #title>
|
|
<div>
|
|
<svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity"/>
|
|
</div>
|
|
<div>
|
|
{{ $root.getLz('settings.header.connectivity') }}
|
|
</div>
|
|
</template>
|
|
<div class="settings-tab-content">
|
|
<div class="md-option-container">
|
|
<!-- Connectivity Settings -->
|
|
<div class="md-option-header">
|
|
<span>{{$root.getLz('settings.header.connectivity')}}</span>
|
|
</div>
|
|
<div class="settings-option-body">
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.playbackNotifications')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.general.playbackNotifications"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DiscordRPC -->
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.discordRPC')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.enabled"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.discordRPC.clientName')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<select class="md-select" v-model="app.cfg.connectivity.discord_rpc.client">
|
|
<option value="Cider">{{$root.getLz('app.name')}}</option>
|
|
<option value="AppleMusic">{{$root.getLz('term.appleMusic')}}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.discordRPC.clearOnPause')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.connectivity.discord_rpc.clear_on_pause" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.discordRPC.hideButtons')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.connectivity.discord_rpc.hide_buttons" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.discordRPC.hideTimestamp')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.connectivity.discord_rpc.hide_timestamp" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br/>
|
|
<small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title},
|
|
{album},
|
|
{trackNumber}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="text"
|
|
v-model="app.cfg.connectivity.discord_rpc.details_format"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.discordRPC.stateFormat')}}
|
|
<small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title},
|
|
{album},
|
|
{trackNumber}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="text" v-model="app.cfg.connectivity.discord_rpc.state_format"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.discordRPC.reload')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" @click="reloadDiscordRPC()">
|
|
{{$root.getLz('menubar.options.reload')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LastFM -->
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.lastfmScrobble')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" id="lfmConnect"
|
|
@click="app.cfg.connectivity.lastfm.enabled ? lfmDisconnect() : lfmAuthorize()">
|
|
{{$root.getLz(`term.${$root.cfg.connectivity.lastfm.enabled ? "disconnect" :
|
|
"connect"}`)}}<br>
|
|
<small>{{app.cfg.connectivity.lastfm.enabled ?
|
|
`${$root.getLz('term.authed')}:
|
|
${$root.cfg.connectivity.lastfm.secrets.username}` : '' }}</small>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="lastfmConnecting">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.lastfmScrobble.manualToken')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<form @submit.prevent="submitToken">
|
|
<input type="text" autofocus id="lfmToken"/>
|
|
<input type="submit" class="md-btn"
|
|
@value="$root.getLz('action.submit')"/>
|
|
</form>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.lastfmScrobble.delay')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="number" min="50" max="100"
|
|
v-model="app.cfg.connectivity.lastfm.scrobble_after"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop')}}
|
|
<small>{{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop.description')}}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.connectivity.lastfm.filter_loop"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line" v-show="app.cfg.connectivity.lastfm.enabled">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connectivity.lastfmScrobble.filterTypes')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" @change="filterChange" value="song">{{$root.getLz('term.songs')}}<br>
|
|
<input type="checkbox" @change="filterChange" value="musicVideo">{{$root.getLz('term.musicVideos')}}<br>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-tab>
|
|
<b-tab>
|
|
<template #title>
|
|
<div>
|
|
<svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced"/>
|
|
</div>
|
|
<div>
|
|
{{$root.getLz('settings.header.advanced')}}
|
|
</div>
|
|
</template>
|
|
<div class="settings-tab-content">
|
|
<div class="md-option-container">
|
|
<!-- Debug Settings -->
|
|
<div class="md-option-header">
|
|
<span>{{$root.getLz('settings.header.debug')}}</span>
|
|
</div>
|
|
<div class="settings-option-body">
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.debug.copy_log')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" @click="copyLogs">
|
|
{{$root.getLz('action.copy')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.debug.openAppData')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" @click="openAppData">
|
|
{{$root.getLz('action.open')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
Performant Logging
|
|
<small>Disables debug logging, resulting in a slightly faster Cider. (Requires
|
|
relaunch)</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.advanced.disableLogging" switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Experimental Settings -->
|
|
<div class="md-option-header">
|
|
<span>{{$root.getLz('settings.header.experimental')}}</span>
|
|
</div>
|
|
<div class="settings-option-body">
|
|
|
|
<!--<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.plugin.github.explore')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" @click="$root.openSettingsPage('github-plugins')">{{
|
|
$root.getLz("settings.option.visual.plugin.github.explore") }}
|
|
</button>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.experimental.reinstallwidevine')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" @click="reinstallWidevineCDM">
|
|
{{$root.getLz('settings.option.experimental.reinstallwidevine')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
Immersive Fullscreen Test
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.advanced.experiments.includes('immersive-preview')"
|
|
@click="app.cfg.advanced.experiments.includes('immersive-preview') ? removeExperiment('immersive-preview') : addExperiment('immersive-preview')"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.experimental.unknownPlugin')}}
|
|
<br>
|
|
<small>{{$root.getLz('settings.option.experimental.unknownPlugin.description')}}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.advanced.experiments.includes('unknown-sources')"
|
|
@click="app.cfg.advanced.experiments.includes('unknown-sources') ? removeExperiment('unknown-sources') : addExperiment('unknown-sources')"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
Use MusicKit V3
|
|
<small>Requires relaunch</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.advanced.experiments.includes('ampv3')"
|
|
@click="app.cfg.advanced.experiments.includes('ampv3') ? removeExperiment('ampv3') : addExperiment('ampv3')"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.advanced.playlistTrackMapping')}}
|
|
<br>
|
|
<small>{{$root.getLz('settings.option.advanced.playlistTrackMapping.description')}}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.advanced.playlistTrackMapping"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
Local Files
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.advanced.experiments.includes('localLibrary')"
|
|
@click="app.cfg.advanced.experiments.includes('localLibrary') ? removeExperiment('localLibrary') : addExperiment('localLibrary')"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.experimental.compactUI')}}
|
|
<small
|
|
v-if="!!app.getThemeDirective('forceUI')">{{$root.getLz('term.themeManaged')}}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox"
|
|
v-model="app.cfg.advanced.experiments.includes('compactui')"
|
|
@click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')"
|
|
switch :disabled="!!app.getThemeDirective('forceUI')"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.experimental.inline_playlists')}}
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" disabled
|
|
v-model="app.cfg.advanced.experiments.includes('inline-playlists')"
|
|
@click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line update-check" v-if="app.platform === 'win32'">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.visual.transparent')}}<br>
|
|
<small>({{$root.getLz('settings.option.visual.transparent.description')}})</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" v-model="app.cfg.visual.transparent" switch
|
|
@change="promptForRelaunch()"/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-tab>
|
|
<!--keybinds Settings -->
|
|
<b-tab id="hid">
|
|
<template>
|
|
<keybinds-settings/>
|
|
</template>
|
|
</b-tab>
|
|
<!--keybinds-settings -->
|
|
<!--Github-theme-settings -->
|
|
<b-tab id="hid">
|
|
<template>
|
|
<themes-github/>
|
|
</template>
|
|
</b-tab>
|
|
<!--Github-theme-settings -->
|
|
<!-- Connect Settings -->
|
|
<!-- Not Prod Ready
|
|
<b-tab :title="$root.getLz('settings.header.connect')">
|
|
<div class="md-option-container">
|
|
<!!!!!-- Cider Connect / Linking Settings -!->
|
|
<div class="md-option-header">
|
|
<span>{{$root.getLz('settings.header.connect')}}</span>
|
|
</div>
|
|
<div class="settings-option-body">
|
|
<div class="md-option-line update-check" v-if="app.cfg.connectUser.auth == null">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connect.link_account')}}
|
|
<small>{{$root.getLz('settings.option.connect.link_account.description')}}</small>
|
|
<br>
|
|
<small>Debug Status: {{ app.cfg.connectUser }}</small>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" id='settings.option.general.updateCider.check' @click="authCC()">
|
|
{{$root.getLz('term.connect')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div v-if="app.cfg.connectUser.auth != null">
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
{{$root.getLz('settings.option.connect.link_account')}}
|
|
<small>{{$root.getLz('settings.option.connect.link_account.description')}}</small>
|
|
<br>
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<button class="md-btn" id='settings.option.general.updateCider.check'
|
|
@click="logoutCC()" style="display: flex;align-items: center;gap: 0.4em;">
|
|
<%- include("../svg/check.svg") %>
|
|
<div v>Connected</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="md-option-header" style="margin-left: -0.55em;">
|
|
<span>{{app.cfg.connectUser.username}}</span>
|
|
<img :src="'https://cdn.discordapp.com/avatars/' + app.cfg.connectUser.id + '/' + app.cfg.connectUser.avatar + '.png?size=32'"
|
|
alt="Discord Avatar"></img>
|
|
</div>
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
Sync Settings
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" a-v-model="app.cfg.connectUser.sync.settings"
|
|
@click="app.cfg.connectUser.sync.settings = !app.cfg.connectUser.sync.settings"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
Sync Themes
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.themes"
|
|
@click="app.cfg.connectUser.sync.themes = !app.cfg.connectUser.sync.themes"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-option-line">
|
|
<div class="md-option-segment">
|
|
Sync Plugins
|
|
</div>
|
|
<div class="md-option-segment md-option-segment_auto">
|
|
<label>
|
|
<input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.plugins"
|
|
@click="app.cfg.connectUser.sync.plugins = !app.cfg.connectUser.sync.plugins"
|
|
switch/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</b-tab>
|
|
-->
|
|
</b-tabs>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script>
|
|
Vue.component("settings-window", {
|
|
template: "#settings-window",
|
|
data: function () {
|
|
return {
|
|
app: this.$root,
|
|
themes: ipcRenderer.sendSync("get-themes"),
|
|
tabIndex: 0,
|
|
canChangeHash: false,
|
|
lastfmConnecting: false
|
|
}
|
|
},
|
|
watch: {
|
|
tabIndex: function (val) {
|
|
if (this.canChangeHash) {
|
|
// window.location.hash = `#settings/${val}`
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
sidebarVis() {
|
|
const tabIndex = app.$store.state.pageState['settings'].currentTabIndex
|
|
if (tabIndex == 3 || tabIndex == 5 || tabIndex == 10) {
|
|
return true;
|
|
}
|
|
return false
|
|
},
|
|
close() {
|
|
this.$root.modals.settings = false
|
|
},
|
|
windowBgStyleChange() {
|
|
this.$root.getNowPlayingArtworkBG(undefined, true)
|
|
if (this.$root.cfg.visual.window_background_style === "mica") {
|
|
this.$root.spawnMica()
|
|
}
|
|
},
|
|
reinstallWidevineCDM() {
|
|
app.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
|
|
if (ok) {
|
|
ipcRenderer.invoke("reinstall-widevine-cdm");
|
|
}
|
|
})
|
|
},
|
|
gitHubExplore() {
|
|
app.openSettingsPage("github-themes")
|
|
},
|
|
copyLogs() {
|
|
ipcRenderer.send('fetch-log')
|
|
notyf.success(app.getLz('term.share.success'));
|
|
},
|
|
openAppData() {
|
|
ipcRenderer.send('open-appdata')
|
|
},
|
|
getLanguages: function () {
|
|
let langs = this.$root.lzListing
|
|
let categories = {
|
|
"main": [],
|
|
"fun": [],
|
|
"unsorted": []
|
|
}
|
|
// sort by category if category is undefined or empty put it in "unsorted"
|
|
for (let i = 0; i < langs.length; i++) {
|
|
if (langs[i].category === undefined || langs[i].category === "") {
|
|
categories.unsorted.push(langs[i])
|
|
} else {
|
|
categories[langs[i].category].push(langs[i])
|
|
}
|
|
}
|
|
// return
|
|
return categories
|
|
},
|
|
addExperiment(flag) {
|
|
app.cfg.advanced.experiments.push(flag);
|
|
},
|
|
removeExperiment(flag) {
|
|
app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
|
|
},
|
|
toggleAudioContext: function () {
|
|
if (app.cfg.advanced.AudioContext === true) {
|
|
if (navigator.hardwareConcurrency < 6) {
|
|
app.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
|
|
if (result) {
|
|
CiderAudio.init();
|
|
if (app.cfg.audio.normalization === true) {
|
|
CiderAudio.normalizerOn()
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
CiderAudio.init();
|
|
if (app.cfg.audio.normalization === true) {
|
|
CiderAudio.normalizerOn()
|
|
}
|
|
}
|
|
} else {
|
|
CiderAudio.off();
|
|
}
|
|
},
|
|
toggleNormalization: function () {
|
|
if (app.cfg.audio.normalization) {
|
|
CiderAudio.normalizerOn()
|
|
} else {
|
|
CiderAudio.normalizerOff()
|
|
}
|
|
},
|
|
changeAudioQuality: function () {
|
|
app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
|
|
},
|
|
toggleUserInfo: function () {
|
|
app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
|
|
},
|
|
sendDataToMTT: function () {
|
|
ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
|
|
// setStoreValue does not change plugin store values somehow
|
|
ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
|
|
},
|
|
checkIfUpdateDisabled() {
|
|
if (app.cfg.main.UPDATABLE) return;
|
|
|
|
let updateFields = document.getElementsByClassName('update-check');
|
|
for (let i = 0; i < updateFields.length; i++) {
|
|
updateFields[i].style = "opacity: 0.5; pointer-events: none;";
|
|
updateFields[i].title = "Not available on this type of build";
|
|
}
|
|
|
|
},
|
|
promptForRelaunch() {
|
|
app.confirm(app.getLz('action.relaunch.confirm'), function (result) {
|
|
if (result) {
|
|
ipcRenderer.send('relaunchApp', '');
|
|
}
|
|
});
|
|
},
|
|
authCC() {
|
|
ipcRenderer.send('cc-auth')
|
|
},
|
|
logoutCC() {
|
|
ipcRenderer.send('cc-logout')
|
|
},
|
|
reloadDiscordRPC() {
|
|
ipcRenderer.send('reloadRPC')
|
|
},
|
|
lfmDisconnect() {
|
|
this.$root.cfg.connectivity.lastfm.enabled = false;
|
|
this.$root.cfg.connectivity.lastfm.secrets.username = "";
|
|
this.$root.cfg.connectivity.lastfm.secrets.key = "";
|
|
ipcRenderer.send('lastfm:disconnect');
|
|
},
|
|
async lfmAuthorize() {
|
|
this.lastfmConnecting = true;
|
|
window.open(await ipcRenderer.invoke('lastfm:url'));
|
|
app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connecting'));
|
|
|
|
/* Just a timeout for the button */
|
|
setTimeout(() => {
|
|
if (!this.$root.cfg.connectivity.lastfm.enabled) {
|
|
app.notyf.error(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectError'));
|
|
console.warn('[lastfm:authorize] Last.fm authorization timed out.');
|
|
this.lastfmConnecting = false;
|
|
}
|
|
}, 20000);
|
|
|
|
ipcRenderer.once('lastfm:authenticated', (_e, session) => {
|
|
this.$root.cfg.connectivity.lastfm.secrets.username = session.username
|
|
this.$root.cfg.connectivity.lastfm.secrets.key = session.key
|
|
this.$root.cfg.connectivity.lastfm.enabled = true
|
|
this.lastfmConnecting = false;
|
|
app.notyf.success(app.getLz('settings.notyf.connectivity.lastfmScrobble.connectSuccess'));
|
|
})
|
|
},
|
|
filterChange(e) {
|
|
this.$root.cfg.connectivity.lastfm.filter_types[e.target.value] = e.target.checked;
|
|
},
|
|
submitToken() {
|
|
const token = document.getElementById('lfmToken').value;
|
|
ipcRenderer.send('lastfm:auth', token);
|
|
},
|
|
openLocalSongsPathMenu() {
|
|
app.modals.pathMenu = true
|
|
}
|
|
}
|
|
})
|
|
</script> |