collapsable sidebar initial
This commit is contained in:
booploops
parent
8b8823c4d9
commit
6fd3f81861
4 changed files with 464 additions and 226 deletions
|
|
@ -159,6 +159,7 @@ const app = new Vue({
|
|||
tmpVar: [],
|
||||
notification: false,
|
||||
chrome: {
|
||||
sidebarCollapsed: false,
|
||||
nativeControls: false,
|
||||
contentScrollPosY: 0,
|
||||
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'
|
||||
},
|
||||
mainMenuVisibility(val) {
|
||||
if(this.chrome.sidebarCollapsed) {
|
||||
this.chrome.sidebarCollapsed = false
|
||||
return
|
||||
}
|
||||
if (val) {
|
||||
(this.mk.isAuthorized) ? this.chrome.menuOpened = !this.chrome.menuOpened : false;
|
||||
if (!this.mk.isAuthorized) {
|
||||
|
|
|
|||
|
|
@ -527,6 +527,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
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 {
|
||||
|
|
|
|||
|
|
@ -1,249 +1,433 @@
|
|||
<div id="app-sidebar">
|
||||
<div id="app-sidebar" v-if="!chrome.sidebarCollapsed">
|
||||
<template >
|
||||
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
|
||||
<div class="app-sidebar-header">
|
||||
<div class="search-input-container">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search" spellcheck="false" @click="showSearch()" @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="app-sidebar-header">
|
||||
<div class="search-input-container">
|
||||
<div class="search-input--icon"></div>
|
||||
<input
|
||||
type="search"
|
||||
spellcheck="false"
|
||||
@click="showSearch()"
|
||||
@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 class="search-hints">
|
||||
<button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
|
||||
@click="search.term = hint;search.showHints = false;searchQuery(hint)">
|
||||
{{ hint }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="search-hints-container"
|
||||
v-if="search.showHints && search.hints.length != 0"
|
||||
>
|
||||
<div class="search-hints">
|
||||
<button
|
||||
class="search-hint text-overflow-elipsis"
|
||||
v-for="hint in search.hints"
|
||||
@click="search.term = hint;search.showHints = false;searchQuery(hint)"
|
||||
>
|
||||
{{ hint }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="app-sidebar-content" scrollaxis="y">
|
||||
<!-- AM Navigation -->
|
||||
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
|
||||
<div class="app-sidebar-header-text"
|
||||
@click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider"
|
||||
:class="{collapsed: cfg.general.sidebarCollapsed.cider}">
|
||||
{{$root.getLz('app.name')}}
|
||||
</div>
|
||||
<template v-if="!cfg.general.sidebarCollapsed.cider">
|
||||
<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')}}
|
||||
<!-- AM Navigation -->
|
||||
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
|
||||
<div
|
||||
class="app-sidebar-header-text"
|
||||
@click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider"
|
||||
:class="{collapsed: cfg.general.sidebarCollapsed.cider}"
|
||||
>
|
||||
{{ $root.getLz("app.name") }}
|
||||
</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 v-if="!cfg.general.sidebarCollapsed.cider">
|
||||
<sidebar-library-item
|
||||
:name="$root.getLz('home.title')"
|
||||
svg-icon="./assets/feather/home.svg"
|
||||
page="home"
|
||||
>
|
||||
</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>
|
||||
<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>
|
||||
<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"
|
||||
@contextmenu="playlistHeaderContextMenu"
|
||||
:class="{collapsed: cfg.general.sidebarCollapsed.playlists}">
|
||||
{{ $root.getLz('term.playlists') }}
|
||||
</div>
|
||||
<template v-if="!cfg.general.sidebarCollapsed.playlists">
|
||||
<button class="app-sidebar-item" @click="playlistHeaderContextMenu">
|
||||
<div class="sidebar-icon">
|
||||
<svg width="46" height="46" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" 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>
|
||||
|
||||
:class="{collapsed: cfg.general.sidebarCollapsed.playlists}"
|
||||
>
|
||||
{{ $root.getLz("term.playlists") }}
|
||||
</div>
|
||||
<template v-if="!cfg.general.sidebarCollapsed.playlists">
|
||||
<button class="app-sidebar-item" @click="playlistHeaderContextMenu">
|
||||
<div class="sidebar-icon">
|
||||
<svg
|
||||
width="46"
|
||||
height="46"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
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>
|
||||
<transition name="wpfade">
|
||||
<div class="usermenu-container" v-if="chrome.menuOpened">
|
||||
<div class="usermenu-body">
|
||||
<button class="app-sidebar-button" style="width:100%" @click="appRoute('apple-account-settings')">
|
||||
<div class="usermenu-container" v-if="chrome.menuOpened">
|
||||
<div class="usermenu-body">
|
||||
<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"
|
||||
:src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)" />
|
||||
|
||||
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
|
||||
<template v-if="chrome.userinfo.id || mk.isAuthorized">
|
||||
<div class="fullname text-overflow-elipsis">{{ (chrome.userinfo != null &&
|
||||
chrome.userinfo.attributes != null) ? (chrome.userinfo.attributes.name ?? "") :
|
||||
""
|
||||
}}
|
||||
</div>
|
||||
<div class="handle-text text-overflow-elipsis">{{
|
||||
(chrome.userinfo != null && chrome.userinfo.attributes != null) ?
|
||||
(chrome.userinfo.attributes.handle ?? "") : ""
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div @click="mk.authorize()">
|
||||
{{$root.getLz('term.login')}}
|
||||
</div>
|
||||
</template>
|
||||
</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 class="sidebar-user-text" v-if="!chrome.hideUserInfo">
|
||||
<template v-if="chrome.userinfo.id || mk.isAuthorized">
|
||||
<div class="fullname text-overflow-elipsis">
|
||||
{{
|
||||
chrome.userinfo != null &&
|
||||
chrome.userinfo.attributes != null
|
||||
? chrome.userinfo.attributes.name ?? ""
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div class="handle-text text-overflow-elipsis">
|
||||
{{
|
||||
chrome.userinfo != null &&
|
||||
chrome.userinfo.attributes != null
|
||||
? chrome.userinfo.attributes.handle ?? ""
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div @click="mk.authorize()">
|
||||
{{ $root.getLz("term.login") }}
|
||||
</div>
|
||||
</template>
|
||||
</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>
|
||||
</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-playback-controls " v-if="mkReady()" @contextmenu="nowPlayingContextMenu">
|
||||
<div class="control-buttons">
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
|
||||
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
|
||||
v-b-tooltip.hover.righttop></button>
|
||||
<button class="playback-button--small shuffle active" v-else
|
||||
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
|
||||
v-b-tooltip.hover.righttop></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button previous" @click="prevButton()"
|
||||
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
|
||||
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
|
||||
<button class="playback-button play" @click="mk.play()" v-else
|
||||
:title="$root.getLz('term.play')" v-b-tooltip.hover></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button 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 class="app-chrome-item volume">
|
||||
<div class="input-container">
|
||||
<button 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
|
||||
class="app-playback-controls"
|
||||
v-if="mkReady()"
|
||||
@contextmenu="nowPlayingContextMenu"
|
||||
>
|
||||
<div class="control-buttons">
|
||||
<div class="app-chrome-item">
|
||||
<button
|
||||
class="playback-button--small shuffle"
|
||||
v-if="mk.shuffleMode == 0"
|
||||
@click="mk.shuffleMode = 1"
|
||||
:title="$root.getLz('term.enableShuffle')"
|
||||
v-b-tooltip.hover.righttop
|
||||
></button>
|
||||
<button
|
||||
class="playback-button--small shuffle active"
|
||||
v-else
|
||||
@click="mk.shuffleMode = 0"
|
||||
:title="$root.getLz('term.disableShuffle')"
|
||||
v-b-tooltip.hover.righttop
|
||||
></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button
|
||||
class="playback-button previous"
|
||||
@click="prevButton()"
|
||||
:title="$root.getLz('term.previous')"
|
||||
v-b-tooltip.hover
|
||||
></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button
|
||||
class="playback-button pause"
|
||||
@click="mk.pause()"
|
||||
v-if="mk.isPlaying"
|
||||
:title="$root.getLz('term.pause')"
|
||||
v-b-tooltip.hover
|
||||
></button>
|
||||
<button
|
||||
class="playback-button play"
|
||||
@click="mk.play()"
|
||||
v-else
|
||||
:title="$root.getLz('term.play')"
|
||||
v-b-tooltip.hover
|
||||
></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button
|
||||
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 class="app-sidebar-notification backgroundNotification" v-if="library.backgroundNotification.show">
|
||||
<div class="message">{{ library.backgroundNotification.message }} ({{
|
||||
library.backgroundNotification.progress }} / {{ library.backgroundNotification.total }})
|
||||
<div class="app-chrome-item volume">
|
||||
<div class="input-container">
|
||||
<button
|
||||
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
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1138,6 +1138,18 @@
|
|||
</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-segment">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue