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

collapsable sidebar initial

Browse source
This commit is contained in:
booploops 2022-05-27 15:14:39 -07:00
parent 8b8823c4d9
commit 6fd3f81861
4 changed files with 464 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/renderer/main/vueapp.js
View file

@ -159,6 +159,7 @@ const app = new Vue({
tmpVar: [], tmpVar: [],
notification: false, notification: false,
chrome: { chrome: {
sidebarCollapsed: false,
nativeControls: false, nativeControls: false,
contentScrollPosY: 0, contentScrollPosY: 0,
appliedTheme: { appliedTheme: {
@ -299,6 +300,10 @@ const app = new Vue({
return this.cfg.audio.dBSPL ? (Number(this.cfg.audio.dBSPLcalibration) + (Math.log10(this.mk.volume) * 20)).toFixed(2) + ' dB SPL' : (Math.log10(this.mk.volume) * 20).toFixed(2) + ' dBFS' return this.cfg.audio.dBSPL ? (Number(this.cfg.audio.dBSPLcalibration) + (Math.log10(this.mk.volume) * 20)).toFixed(2) + ' dB SPL' : (Math.log10(this.mk.volume) * 20).toFixed(2) + ' dBFS'
}, },
mainMenuVisibility(val) { mainMenuVisibility(val) {
if(this.chrome.sidebarCollapsed) {
this.chrome.sidebarCollapsed = false
return
}
if (val) { if (val) {
(this.mk.isAuthorized) ? this.chrome.menuOpened = !this.chrome.menuOpened : false; (this.mk.isAuthorized) ? this.chrome.menuOpened = !this.chrome.menuOpened : false;
if (!this.mk.isAuthorized) { if (!this.mk.isAuthorized) {

37
src/renderer/style.less
View file

@ -527,6 +527,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
display: flex; display: flex;
} }
} }
&.collapseTab {
display:flex;
padding:0px;
>button {
appearance: none;
border:0px;
width: 100%;
position: relative;
padding: 12px;
padding-left: 32px;
text-align: left;
font-family: inherit;
background-color: var(--color2);
color: var(--textColor);
&:hover {
background-color: var(--selected);
}
&:active {
background-color: var(--selected-click);
}
&:after {
content: '';
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 100%;
position: absolute;
top: 0;
left: 0;
font-weight: bold;
font-size: 1.2em;
font-family: "codicon";
}
}
}
} }
.app-sidebar-button { .app-sidebar-button {

634
src/renderer/views/app/sidebar.ejs
View file

@ -1,249 +1,433 @@
<div id="app-sidebar"> <div id="app-sidebar" v-if="!chrome.sidebarCollapsed">
<template >
<template v-if="getThemeDirective('windowLayout') != 'twopanel'"> <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-sidebar-header"> <div class="app-sidebar-header">
<div class="search-input-container"> <div class="search-input-container">
<div class="search-input--icon"></div> <div class="search-input--icon"></div>
<input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true" <input
@blur="setTimeout(()=>{search.showHints = false}, 300)" type="search"
v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();" spellcheck="false"
@input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term" @click="showSearch()"
ref="searchInput" class="search-input"> @focus="search.showHints = true"
@blur="setTimeout(()=>{search.showHints = false}, 300)"
v-on:keyup.enter="searchQuery();search.showHints = false"
@change="showSearch();"
@input="getSearchHints()"
:placeholder="$root.getLz('term.search') + '...'"
v-model="search.term"
ref="searchInput"
class="search-input"
/>
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0"> <div
<div class="search-hints"> class="search-hints-container"
<button class="search-hint text-overflow-elipsis" v-for="hint in search.hints" v-if="search.showHints && search.hints.length != 0"
@click="search.term = hint;search.showHints = false;searchQuery(hint)"> >
{{ hint }} <div class="search-hints">
</button> <button
</div> class="search-hint text-overflow-elipsis"
</div> v-for="hint in search.hints"
@click="search.term = hint;search.showHints = false;searchQuery(hint)"
>
{{ hint }}
</button>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<div class="app-sidebar-content" scrollaxis="y"> <div class="app-sidebar-content" scrollaxis="y">
<!-- AM Navigation --> <!-- AM Navigation -->
<template v-if="getThemeDirective('windowLayout') != 'twopanel'"> <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-sidebar-header-text" <div
@click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider" class="app-sidebar-header-text"
:class="{collapsed: cfg.general.sidebarCollapsed.cider}"> @click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider"
{{$root.getLz('app.name')}} :class="{collapsed: cfg.general.sidebarCollapsed.cider}"
</div> >
<template v-if="!cfg.general.sidebarCollapsed.cider"> {{ $root.getLz("app.name") }}
<sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home">
</sidebar-library-item>
</template>
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.applemusic = !cfg.general.sidebarCollapsed.applemusic"
:class="{collapsed: cfg.general.sidebarCollapsed.applemusic}">
{{$root.getLz('term.appleMusic')}}
</div>
<template v-if="!cfg.general.sidebarCollapsed.applemusic">
<sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg"
page="listen_now"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg"
page="browse">
</sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg"
page="radio"></sidebar-library-item>
</template>
</template>
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.library = !cfg.general.sidebarCollapsed.library"
:class="{collapsed: cfg.general.sidebarCollapsed.library}">
{{$root.getLz('term.library')}}
</div> </div>
<template v-if="!cfg.general.sidebarCollapsed.library"> <template v-if="!cfg.general.sidebarCollapsed.cider">
<sidebar-library-item :name="$root.getLz('term.recentlyAdded')" svg-icon="./assets/feather/plus-circle.svg" <sidebar-library-item
v-if="cfg.general.sidebarItems.recentlyAdded" page="library-recentlyadded"></sidebar-library-item> :name="$root.getLz('home.title')"
<sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg" svg-icon="./assets/feather/home.svg"
v-if="cfg.general.sidebarItems.songs" page="library-songs"></sidebar-library-item> page="home"
<sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg" >
v-if="cfg.general.sidebarItems.albums" page="library-albums"></sidebar-library-item> </sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
v-if="cfg.general.sidebarItems.artists" page="library-artists"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg"
v-if="cfg.general.sidebarItems.videos" page="library-videos"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg"
v-if="cfg.general.sidebarItems.podcasts" page="podcasts">
</sidebar-library-item>
</template> </template>
<template v-if="getPlaylistFolderChildren('p.applemusic').length != 0"> <div
<div class="app-sidebar-header-text" class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.amplaylists = !cfg.general.sidebarCollapsed.amplaylists" @click="cfg.general.sidebarCollapsed.applemusic = !cfg.general.sidebarCollapsed.applemusic"
@contextmenu="playlistHeaderContextMenu" :class="{collapsed: cfg.general.sidebarCollapsed.applemusic}"
:class="{collapsed: cfg.general.sidebarCollapsed.amplaylists}"> >
{{ $root.getLz('term.appleMusic') }} {{ $root.getLz('term.playlists') }} {{ $root.getLz("term.appleMusic") }}
</div> </div>
<template v-if="!cfg.general.sidebarCollapsed.amplaylists"> <template v-if="!cfg.general.sidebarCollapsed.applemusic">
<sidebar-playlist v-for="item in getPlaylistFolderChildren('p.applemusic')" :item="item"> <sidebar-library-item
</sidebar-playlist> :name="$root.getLz('term.listenNow')"
</template> svg-icon="./assets/feather/play-circle.svg"
page="listen_now"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.browse')"
svg-icon="./assets/feather/globe.svg"
page="browse"
>
</sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.radio')"
svg-icon="./assets/feather/radio.svg"
page="radio"
></sidebar-library-item>
</template> </template>
<div class="app-sidebar-header-text" </template>
<div
class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.library = !cfg.general.sidebarCollapsed.library"
:class="{collapsed: cfg.general.sidebarCollapsed.library}"
>
{{ $root.getLz("term.library") }}
</div>
<template v-if="!cfg.general.sidebarCollapsed.library">
<sidebar-library-item
:name="$root.getLz('term.recentlyAdded')"
svg-icon="./assets/feather/plus-circle.svg"
v-if="cfg.general.sidebarItems.recentlyAdded"
page="library-recentlyadded"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.songs')"
svg-icon="./assets/feather/music.svg"
v-if="cfg.general.sidebarItems.songs"
page="library-songs"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.albums')"
svg-icon="./assets/feather/disc.svg"
v-if="cfg.general.sidebarItems.albums"
page="library-albums"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.artists')"
svg-icon="./assets/feather/user.svg"
v-if="cfg.general.sidebarItems.artists"
page="library-artists"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.videos')"
svg-icon="./assets/feather/video.svg"
v-if="cfg.general.sidebarItems.videos"
page="library-videos"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.podcasts')"
svg-icon="./assets/feather/mic.svg"
v-if="cfg.general.sidebarItems.podcasts"
page="podcasts"
>
</sidebar-library-item>
</template>
<template v-if="getPlaylistFolderChildren('p.applemusic').length != 0">
<div
class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.amplaylists = !cfg.general.sidebarCollapsed.amplaylists"
@contextmenu="playlistHeaderContextMenu"
:class="{collapsed: cfg.general.sidebarCollapsed.amplaylists}"
>
{{ $root.getLz("term.appleMusic") }}
{{ $root.getLz("term.playlists") }}
</div>
<template v-if="!cfg.general.sidebarCollapsed.amplaylists">
<sidebar-playlist
v-for="item in getPlaylistFolderChildren('p.applemusic')"
:item="item"
>
</sidebar-playlist>
</template>
</template>
<div
class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.playlists = !cfg.general.sidebarCollapsed.playlists" @click="cfg.general.sidebarCollapsed.playlists = !cfg.general.sidebarCollapsed.playlists"
@contextmenu="playlistHeaderContextMenu" @contextmenu="playlistHeaderContextMenu"
:class="{collapsed: cfg.general.sidebarCollapsed.playlists}"> :class="{collapsed: cfg.general.sidebarCollapsed.playlists}"
{{ $root.getLz('term.playlists') }} >
</div> {{ $root.getLz("term.playlists") }}
<template v-if="!cfg.general.sidebarCollapsed.playlists"> </div>
<button class="app-sidebar-item" @click="playlistHeaderContextMenu"> <template v-if="!cfg.general.sidebarCollapsed.playlists">
<div class="sidebar-icon"> <button class="app-sidebar-item" @click="playlistHeaderContextMenu">
<svg width="46" height="46" fill="none" stroke="currentColor" stroke-linecap="round" <div class="sidebar-icon">
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg
<path d="M12 5v14"></path> width="46"
<path d="M5 12h14"></path> height="46"
</svg> fill="none"
</div> stroke="currentColor"
{{ getLz('action.createNew') }} stroke-linecap="round"
</button> stroke-linejoin="round"
<sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item"> stroke-width="2"
</sidebar-playlist> viewBox="0 0 24 24"
</template> xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 5v14"></path>
<path d="M5 12h14"></path>
</svg>
</div>
{{ getLz("action.createNew") }}
</button>
<sidebar-playlist
v-for="item in getPlaylistFolderChildren('p.playlistsroot')"
:item="item"
>
</sidebar-playlist>
</template>
</div> </div>
<transition name="wpfade"> <transition name="wpfade">
<div class="usermenu-container" v-if="chrome.menuOpened"> <div class="usermenu-container" v-if="chrome.menuOpened">
<div class="usermenu-body"> <div class="usermenu-body">
<button class="app-sidebar-button" style="width:100%" @click="appRoute('apple-account-settings')"> <button
class="app-sidebar-button"
style="width: 100%"
@click="appRoute('apple-account-settings')"
>
<img
class="sidebar-user-icon"
loading="lazy"
:src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"
/>
<img class="sidebar-user-icon" loading="lazy" <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
:src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)" /> <template v-if="chrome.userinfo.id || mk.isAuthorized">
<div class="fullname text-overflow-elipsis">
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo"> {{
<template v-if="chrome.userinfo.id || mk.isAuthorized"> chrome.userinfo != null &&
<div class="fullname text-overflow-elipsis">{{ (chrome.userinfo != null && chrome.userinfo.attributes != null
chrome.userinfo.attributes != null) ? (chrome.userinfo.attributes.name ?? "") : ? chrome.userinfo.attributes.name ?? ""
"" : ""
}} }}
</div> </div>
<div class="handle-text text-overflow-elipsis">{{ <div class="handle-text text-overflow-elipsis">
(chrome.userinfo != null && chrome.userinfo.attributes != null) ? {{
(chrome.userinfo.attributes.handle ?? "") : "" chrome.userinfo != null &&
}} chrome.userinfo.attributes != null
</div> ? chrome.userinfo.attributes.handle ?? ""
</template> : ""
<template v-else> }}
<div @click="mk.authorize()"> </div>
{{$root.getLz('term.login')}} </template>
</div> <template v-else>
</template> <div @click="mk.authorize()">
</div> {{ $root.getLz("term.login") }}
<div class="sidebar-user-text" v-else> </div>
{{$root.getLz('app.name')}} </template>
</div>
</button>
<!-- Use 20px SVG for usermenu icon -->
<button class="usermenu-item" v-if="cfg.general.privateEnabled" @click="cfg.general.privateEnabled = false">
<span class="usermenu-item-icon">
<%- include("../svg/x.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.disablePrivateSession')}}</span>
</button>
<button class="usermenu-item" @click="appRoute('remote-pair')">
<span class="usermenu-item-icon">
<%- include("../svg/smartphone.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
</button>
<button class="usermenu-item" @click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))">
<span class="usermenu-item-icon">
<%- include("../svg/cast.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.cast')}}</span>
</button>
<button class="usermenu-item" @click="cfg.advanced.AudioContext ? modals.audioSettings = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))">
<span class="usermenu-item-icon">
<%- include("../svg/headphones.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.audioSettings')}}</span>
</button>
<button class="usermenu-item" v-if="pluginInstalled" @click="modals.pluginMenu = true">
<span class="usermenu-item-icon">
<%- include("../svg/grid.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.plugin')}}</span>
</button>
<button class="usermenu-item" @click="appRoute('about')">
<span class="usermenu-item-icon">
<%- include("../svg/info.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.about')}}</span>
</button>
<button class="usermenu-item" @click="appRoute('settings')">
<span class="usermenu-item-icon">
<%- include("../svg/settings.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.settings')}}</span>
</button>
<button class="usermenu-item" @click="unauthorize()">
<span class="usermenu-item-icon" style="right:2.5px;">
<%- include("../svg/log-out.svg") %>
</span>
<span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
</button>
</div> </div>
<div class="sidebar-user-text" v-else>
{{ $root.getLz("app.name") }}
</div>
</button>
<!-- Use 20px SVG for usermenu icon -->
<button
class="usermenu-item"
v-if="cfg.general.privateEnabled"
@click="cfg.general.privateEnabled = false"
>
<span class="usermenu-item-icon">
<%- include("../svg/x.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.disablePrivateSession")
}}</span>
</button>
<button class="usermenu-item" @click="appRoute('remote-pair')">
<span class="usermenu-item-icon">
<%- include("../svg/smartphone.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("action.showWebRemoteQR")
}}</span>
</button>
<button
class="usermenu-item"
@click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
>
<span class="usermenu-item-icon">
<%- include("../svg/cast.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.cast")
}}</span>
</button>
<button
class="usermenu-item"
@click="cfg.advanced.AudioContext ? modals.audioSettings = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
>
<span class="usermenu-item-icon">
<%- include("../svg/headphones.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.audioSettings")
}}</span>
</button>
<button
class="usermenu-item"
v-if="pluginInstalled"
@click="modals.pluginMenu = true"
>
<span class="usermenu-item-icon">
<%- include("../svg/grid.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.plugin")
}}</span>
</button>
<button class="usermenu-item" @click="appRoute('about')">
<span class="usermenu-item-icon">
<%- include("../svg/info.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.about")
}}</span>
</button>
<button class="usermenu-item" @click="appRoute('settings')">
<span class="usermenu-item-icon">
<%- include("../svg/settings.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.settings")
}}</span>
</button>
<button class="usermenu-item" @click="unauthorize()">
<span class="usermenu-item-icon" style="right: 2.5px">
<%- include("../svg/log-out.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.logout")
}}</span>
</button>
</div> </div>
</div>
</transition> </transition>
<div class="app-sidebar-footer collapseTab" v-if="cfg.advanced.experiments.includes('collapseSidebar')">
<button @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
Collapse
</button>
</div>
<div class="app-sidebar-footer display--small app-sidebar-footer--controls"> <div class="app-sidebar-footer display--small app-sidebar-footer--controls">
<div
<div class="app-playback-controls " v-if="mkReady()" @contextmenu="nowPlayingContextMenu"> class="app-playback-controls"
<div class="control-buttons"> v-if="mkReady()"
<div class="app-chrome-item"> @contextmenu="nowPlayingContextMenu"
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" >
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" <div class="control-buttons">
v-b-tooltip.hover.righttop></button> <div class="app-chrome-item">
<button class="playback-button--small shuffle active" v-else <button
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" class="playback-button--small shuffle"
v-b-tooltip.hover.righttop></button> v-if="mk.shuffleMode == 0"
</div> @click="mk.shuffleMode = 1"
<div class="app-chrome-item"> :title="$root.getLz('term.enableShuffle')"
<button class="playback-button previous" @click="prevButton()" v-b-tooltip.hover.righttop
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button> ></button>
</div> <button
<div class="app-chrome-item"> class="playback-button--small shuffle active"
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying" v-else
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button> @click="mk.shuffleMode = 0"
<button class="playback-button play" @click="mk.play()" v-else :title="$root.getLz('term.disableShuffle')"
:title="$root.getLz('term.play')" v-b-tooltip.hover></button> v-b-tooltip.hover.righttop
</div> ></button>
<div class="app-chrome-item"> </div>
<button class="playback-button next" @click="skipToNextItem()" <div class="app-chrome-item">
:title="$root.getLz('term.next')" v-b-tooltip.hover></button> <button
</div> class="playback-button previous"
<div class="app-chrome-item"> @click="prevButton()"
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :title="$root.getLz('term.previous')"
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover
v-b-tooltip.hover></button> ></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2" </div>
v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')" <div class="app-chrome-item">
v-b-tooltip.hover></button> <button
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0" class="playback-button pause"
v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')" @click="mk.pause()"
v-b-tooltip.hover></button> v-if="mk.isPlaying"
</div> :title="$root.getLz('term.pause')"
</div> v-b-tooltip.hover
<div class="app-chrome-item volume"> ></button>
<div class="input-container"> <button
<button class="volume-button--small volume" @click="muteButtonPressed()" class="playback-button play"
:class="{'active': this.cfg.audio.volume == 0}" @click="mk.play()"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')" v-else
v-b-tooltip.hover></button> :title="$root.getLz('term.play')"
<input type="range" class="" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" v-b-tooltip.hover
:max="cfg.audio.maxVolume" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" ></button>
@change="checkMuteChange()" v-b-tooltip.hover </div>
:title="formatVolumeTooltip()"> <div class="app-chrome-item">
</div> <button
</div> class="playback-button next"
@click="skipToNextItem()"
:title="$root.getLz('term.next')"
v-b-tooltip.hover
></button>
</div>
<div class="app-chrome-item">
<button
class="playback-button--small repeat"
v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"
:title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover
></button>
<button
class="playback-button--small repeat repeatOne"
@click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"
:title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover
></button>
<button
class="playback-button--small repeat active"
@click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"
:title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover
></button>
</div>
</div> </div>
</div> <div class="app-chrome-item volume">
<div class="app-sidebar-notification backgroundNotification" v-if="library.backgroundNotification.show"> <div class="input-container">
<div class="message">{{ library.backgroundNotification.message }} ({{ <button
library.backgroundNotification.progress }} / {{ library.backgroundNotification.total }}) class="volume-button--small volume"
@click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover
></button>
<input
type="range"
class=""
@wheel="volumeWheel"
:step="cfg.audio.volumeStep"
min="0"
:max="cfg.audio.maxVolume"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'"
@change="checkMuteChange()"
v-b-tooltip.hover
:title="formatVolumeTooltip()"
/>
</div>
</div> </div>
</div>
</div> </div>
<div
class="app-sidebar-notification backgroundNotification"
v-if="library.backgroundNotification.show"
>
<div class="message">
{{ library.backgroundNotification.message }} ({{
library.backgroundNotification.progress
}}
/ {{ library.backgroundNotification.total }})
</div>
</div>
</template>
</div> </div>

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

@ -1138,6 +1138,18 @@
</div> </div>
</div> </div>
<div class="md-option-line">
<div class="md-option-segment">
Collapsable Sidebar
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.advanced.experiments.includes('collapseSidebar')"
@click="app.cfg.advanced.experiments.includes('collapseSidebar') ? removeExperiment('collapseSidebar') : addExperiment('collapseSidebar')"
switch/>
</label>
</div>
</div>
<div class="md-option-line"> <div class="md-option-line">
<div class="md-option-segment"> <div class="md-option-segment">