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

moved sidebar into component

Browse source
This commit is contained in:
booploops 2022-06-30 00:17:20 -07:00
parent b6a730e202
commit 31af264c7a
5 changed files with 452 additions and 301 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -90,6 +90,7 @@ export class BrowserWindow {
"pages/keybinds",
"pages/oobe",
"components/app-content",
"components/sidebar",
"components/mediaitem-artwork",
"components/artwork-material",
"components/menu-panel",

143
src/renderer/style.css
View file

@ -16420,6 +16420,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
display: flex;
justify-content: center;
align-items: center;
--chromeHeight1: 60px;
}
.fullscreen-view .app-content-container {
width: 100%;
@ -16429,6 +16430,86 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 100%;
height: 100%;
}
.fullscreen-view .app-content-container #app-content .fs-search .search-input--icon {
width: 4em;
background-size: 40%;
background-position: center;
}
.fullscreen-view .app-content-container #app-content .fs-search input {
padding-left: 2em;
font-size: 2em;
border-radius: var(--mediaItemRadius);
}
.fullscreen-view .fs-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--chromeHeight1);
background: var(--color1);
backdrop-filter: var(--glassFilter);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.fullscreen-view .fs-header .top-nav-group {
background: #1e1e1e99;
border: 1px solid #323232;
border-radius: 12px;
display: flex;
height: 42px;
width: 90%;
}
.fullscreen-view .fs-header .top-nav-group .app-sidebar-item {
background-color: #1e1e1e00;
border-radius: 10px !important;
border: 0px;
min-width: 120px;
padding: 6px;
justify-content: center;
align-items: center;
margin: 0px;
height: 100%;
position: relative;
}
.fullscreen-view .fs-header .top-nav-group .app-sidebar-item:before {
--dist: 1px;
content: '';
position: absolute;
top: var(--dist);
left: var(--dist);
right: var(--dist);
bottom: var(--dist);
background-color: #fff;
opacity: 0;
border-radius: 10px;
transform: scale(0.5);
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.fullscreen-view .fs-header .top-nav-group .app-sidebar-item:after {
display: none;
}
.fullscreen-view .fs-header .top-nav-group .app-sidebar-item:hover {
background-color: transparent;
}
.fullscreen-view .fs-header .top-nav-group .app-sidebar-item:hover:before {
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
opacity: 0.1;
transform: scale(1);
}
.fullscreen-view .fs-header .top-nav-group .app-sidebar-item.active {
background-color: transparent;
}
.fullscreen-view .fs-header .top-nav-group .app-sidebar-item.active:before {
opacity: 0.2;
transform: scale(1);
}
.fullscreen-view .fs-header .top-nav-group .app-sidebar-item.md-btn-primary {
box-shadow: 0px 0px 0px 1px #323232;
background-color: #2b2b2b;
z-index: 1;
}
.fullscreen-view .fs-row {
flex-grow: 0.5;
}
@ -16713,6 +16794,68 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 100%;
justify-content: center;
}
.fullscreen-view .cd-mediaitem-square {
font-size: 17px;
font-weight: 500;
}
.fullscreen-view .cd-mediaitem-square .artwork-container .artwork {
box-shadow: var(--mediaItemShadow-Shadow);
}
.fullscreen-view .cd-mediaitem-list-item {
height: 80px;
}
.fullscreen-view .cd-mediaitem-list-item .title {
font-size: 1.2em;
font-weight: 450;
}
.fullscreen-view .cd-mediaitem-list-item .subtitle {
font-size: 1.1em;
font-weight: 380;
}
.fullscreen-view .cd-mediaitem-list-item .artwork {
width: 50px;
height: 50px;
}
.fullscreen-view .header-text {
font-size: 3em;
height: 3em;
padding-left: 0.2em;
}
.fullscreen-view .grouping-container .grouping-btn {
font-size: 1.3em;
color: var(--textColor);
background-color: var(--sidebarColor);
font-weight: 600;
padding: 32px;
}
.fullscreen-view .content-inner.playlist-page {
display: flex;
flex-direction: row;
}
.fullscreen-view .playlist-page .playlist-display {
width: 100%;
max-width: 500px;
flex: 1;
text-align: center;
}
.fullscreen-view .playlist-page .playlist-display .playlistInfo > .row {
justify-content: center;
}
.fullscreen-view .playlist-page .playlist-display .playlist-controls div {
width: 100%;
}
.fullscreen-view .playlist-page .mediaContainer {
width: 30vh;
height: 30vh;
aspect-ratio: 1;
}
.fullscreen-view .playlist-page .playlist-display .playlistInfo .playlist-info {
gap: 16px;
margin-top: 40px;
}
.fullscreen-view .playlist-page .playlist-body {
flex: 1;
}
.mini-view {
width: 100%;
height: 100%;

2
src/renderer/views/app/app-navigation.ejs
View file

@ -133,7 +133,7 @@
</div>
</transition>
<transition name="sidebartransition">
<%- include("sidebar") %>
<cider-app-sidebar v-if="!chrome.sidebarCollapsed"></cider-app-sidebar>
</transition>
<app-content-area></app-content-area>
<transition name="drawertransition">

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

@ -1,300 +0,0 @@
<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="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"
svg-icon-name="home"
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"
svg-icon-name="listenNow"
page="listen_now"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.browse')"
svg-icon="./assets/feather/globe.svg"
svg-icon-name="browse"
page="browse"
>
</sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.radio')"
svg-icon="./assets/feather/radio.svg"
svg-icon-name="radio"
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>
<template v-if="!cfg.general.sidebarCollapsed.library">
<sidebar-library-item
:name="$root.getLz('term.recentlyAdded')"
svg-icon="./assets/feather/plus-circle.svg"
svg-icon-name="recentlyAdded"
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"
svg-icon-name="songs"
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"
svg-icon-name="albums"
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"
svg-icon-name="artists"
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"
svg-icon-name="videos"
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"
svg-icon-name="podcasts"
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">
<svg-icon url="./assets/feather/plus.svg"></svg-icon>
<div class="sidebar-item-text">
{{ getLz("action.createNew") }}
</div>
</button>
<sidebar-playlist
v-for="item in getPlaylistFolderChildren('p.playlistsroot')"
:item="item"
>
</sidebar-playlist>
</template>
</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')"
:class="$root.isDisabled() && 'disabled'"
v-b-tooltip.hover.righttop
></button>
<button
class="playback-button--small shuffle active"
v-else
@click="mk.shuffleMode = 0"
:title="$root.getLz('term.disableShuffle')"
:class="$root.isDisabled() && 'disabled'"
v-b-tooltip.hover.righttop
></button>
</div>
<div class="app-chrome-item">
<button
class="playback-button previous"
@click="prevButton()"
:class="$root.isPrevDisabled() && 'disabled'"
:title="$root.getLz('term.previous')"
v-b-tooltip.hover
></button>
</div>
<div class="app-chrome-item">
<button class="playback-button stop" @click="$root.mk.stop()"
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
<button class="playback-button pause" @click="$root.mk.pause()" v-else-if="$root.mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="$root.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')"
:class="$root.isNextDisabled() && 'disabled'"
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"
:class="$root.isDisabled() && 'disabled'"
: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')"
:class="$root.isDisabled() && 'disabled'"
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')"
:class="$root.isDisabled() && 'disabled'"
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>
</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>

307
src/renderer/views/components/sidebar.ejs Normal file
View file

@ -0,0 +1,307 @@
<script type="text/x-template" id="cider-app-sidebar">
<div id="app-sidebar">
<template v-if="$root.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="$root.showSearch()"
@focus="$root.search.showHints = true"
@blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false"
@change="$root.showSearch();"
@input="$root.getSearchHints()"
:placeholder="$root.getLz('term.search') + '...'"
v-model="$root.search.term"
ref="searchInput"
class="search-input"
/>
<div
class="search-hints-container"
v-if="$root.search.showHints && $root.search.hints.length != 0"
>
<div class="search-hints">
<button
class="search-hint text-overflow-elipsis"
v-for="hint in $root.search.hints"
@click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint)"
>
{{ hint }}
</button>
</div>
</div>
</div>
</div>
</template>
<div class="app-sidebar-content" scrollaxis="y">
<!-- AM Navigation -->
<template v-if="$root.getThemeDirective('windowLayout') != 'twopanel'">
<div
class="app-sidebar-header-text"
@click="$root.cfg.general.sidebarCollapsed.cider = !$root.cfg.general.sidebarCollapsed.cider"
:class="{collapsed: $root.cfg.general.sidebarCollapsed.cider}"
>
{{ $root.getLz("app.name") }}
</div>
<template v-if="!$root.cfg.general.sidebarCollapsed.cider">
<sidebar-library-item
:name="$root.getLz('home.title')"
svg-icon="./assets/feather/home.svg"
svg-icon-name="home"
page="home"
>
</sidebar-library-item>
</template>
<div
class="app-sidebar-header-text"
@click="$root.cfg.general.sidebarCollapsed.applemusic = !$root.cfg.general.sidebarCollapsed.applemusic"
:class="{collapsed: $root.cfg.general.sidebarCollapsed.applemusic}"
>
{{ $root.getLz("term.appleMusic") }}
</div>
<template v-if="!$root.cfg.general.sidebarCollapsed.applemusic">
<sidebar-library-item
:name="$root.getLz('term.listenNow')"
svg-icon="./assets/feather/play-circle.svg"
svg-icon-name="listenNow"
page="listen_now"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.browse')"
svg-icon="./assets/feather/globe.svg"
svg-icon-name="browse"
page="browse"
>
</sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.radio')"
svg-icon="./assets/feather/radio.svg"
svg-icon-name="radio"
page="radio"
></sidebar-library-item>
</template>
</template>
<div
class="app-sidebar-header-text"
@click="$root.cfg.general.sidebarCollapsed.library = !$root.cfg.general.sidebarCollapsed.library"
:class="{collapsed: $root.cfg.general.sidebarCollapsed.library}"
>
{{ $root.getLz("term.library") }}
</div>
<template v-if="!$root.cfg.general.sidebarCollapsed.library">
<sidebar-library-item
:name="$root.getLz('term.recentlyAdded')"
svg-icon="./assets/feather/plus-circle.svg"
svg-icon-name="recentlyAdded"
v-if="$root.cfg.general.sidebarItems.recentlyAdded"
page="library-recentlyadded"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.songs')"
svg-icon="./assets/feather/music.svg"
svg-icon-name="songs"
v-if="$root.cfg.general.sidebarItems.songs"
page="library-songs"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.albums')"
svg-icon="./assets/feather/disc.svg"
svg-icon-name="albums"
v-if="$root.cfg.general.sidebarItems.albums"
page="library-albums"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.artists')"
svg-icon="./assets/feather/user.svg"
svg-icon-name="artists"
v-if="$root.cfg.general.sidebarItems.artists"
page="library-artists"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.videos')"
svg-icon="./assets/feather/video.svg"
svg-icon-name="videos"
v-if="$root.cfg.general.sidebarItems.videos"
page="library-videos"
></sidebar-library-item>
<sidebar-library-item
:name="$root.getLz('term.podcasts')"
svg-icon="./assets/feather/mic.svg"
svg-icon-name="podcasts"
v-if="$root.cfg.general.sidebarItems.podcasts"
page="podcasts"
>
</sidebar-library-item>
</template>
<template v-if="$root.getPlaylistFolderChildren('p.applemusic').length != 0">
<div
class="app-sidebar-header-text"
@click="$root.cfg.general.sidebarCollapsed.amplaylists = !$root.cfg.general.sidebarCollapsed.amplaylists"
@contextmenu="$root.playlistHeaderContextMenu"
:class="{collapsed: $root.cfg.general.sidebarCollapsed.amplaylists}"
>
{{ $root.getLz("term.appleMusic") }}
{{ $root.getLz("term.playlists") }}
</div>
<template v-if="!$root.cfg.general.sidebarCollapsed.amplaylists">
<sidebar-playlist
v-for="item in $root.getPlaylistFolderChildren('p.applemusic')"
:item="item"
>
</sidebar-playlist>
</template>
</template>
<div
class="app-sidebar-header-text"
@click="$root.cfg.general.sidebarCollapsed.playlists = !$root.cfg.general.sidebarCollapsed.playlists"
@contextmenu="$root.playlistHeaderContextMenu"
:class="{collapsed: $root.cfg.general.sidebarCollapsed.playlists}"
>
{{ $root.getLz("term.playlists") }}
</div>
<template v-if="!$root.cfg.general.sidebarCollapsed.playlists">
<button class="app-sidebar-item" @click="$root.playlistHeaderContextMenu">
<svg-icon url="./assets/feather/plus.svg"></svg-icon>
<div class="sidebar-item-text">
{{ $root.getLz("action.createNew") }}
</div>
</button>
<sidebar-playlist
v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')"
:item="item"
>
</sidebar-playlist>
</template>
</div>
<div class="app-sidebar-footer display--small app-sidebar-footer--controls">
<div
class="app-playback-controls"
v-if="$root.mkReady()"
@contextmenu="$root.nowPlayingContextMenu"
>
<div class="control-buttons">
<div class="app-chrome-item">
<button
class="playback-button--small shuffle"
v-if="$root.mk.shuffleMode == 0"
@click="$root.mk.shuffleMode = 1"
:title="$root.getLz('term.enableShuffle')"
:class="$root.isDisabled() && 'disabled'"
v-b-tooltip.hover.righttop
></button>
<button
class="playback-button--small shuffle active"
v-else
@click="$root.mk.shuffleMode = 0"
:title="$root.getLz('term.disableShuffle')"
:class="$root.isDisabled() && 'disabled'"
v-b-tooltip.hover.righttop
></button>
</div>
<div class="app-chrome-item">
<button
class="playback-button previous"
@click="$root.prevButton()"
:class="$root.isPrevDisabled() && 'disabled'"
:title="$root.getLz('term.previous')"
v-b-tooltip.hover
></button>
</div>
<div class="app-chrome-item">
<button class="playback-button stop" @click="$root.mk.stop()"
v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
:title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
<button class="playback-button pause" @click="$root.mk.pause()"
v-else-if="$root.mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="$root.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="$root.skipToNextItem()"
:title="$root.getLz('term.next')"
:class="$root.isNextDisabled() && 'disabled'"
v-b-tooltip.hover
></button>
</div>
<div class="app-chrome-item">
<button
class="playback-button--small repeat"
v-if="$root.mk.repeatMode == 0"
@click="$root.mk.repeatMode = 1"
:class="$root.isDisabled() && 'disabled'"
:title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover
></button>
<button
class="playback-button--small repeat repeatOne"
@click="$root.mk.repeatMode = 2"
v-else-if="$root.mk.repeatMode == 1"
:title="$root.getLz('term.disableRepeatOne')"
:class="$root.isDisabled() && 'disabled'"
v-b-tooltip.hover
></button>
<button
class="playback-button--small repeat active"
@click="$root.mk.repeatMode = 0"
v-else-if="$root.mk.repeatMode == 2"
:title="$root.getLz('term.disableRepeat')"
:class="$root.isDisabled() && 'disabled'"
v-b-tooltip.hover
></button>
</div>
</div>
<div class="app-chrome-item volume">
<div class="input-container">
<button
class="volume-button--small volume"
@click="$root.muteButtonPressed()"
:class="{'active': $root.cfg.audio.volume == 0}"
:title="$root.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover
></button>
<input
type="range"
class=""
@wheel="$root.volumeWheel"
:step="$root.cfg.audio.volumeStep"
min="0"
:max="$root.cfg.audio.maxVolume"
v-model="$root.mk.volume"
v-if="typeof $root.mk.volume != 'undefined'"
@change="$root.checkMuteChange()"
v-b-tooltip.hover
:title="$root.formatVolumeTooltip()"
/>
</div>
</div>
</div>
</div>
<div
class="app-sidebar-notification backgroundNotification"
v-if="$root.library.backgroundNotification.show"
>
<div class="message">
{{ $root.library.backgroundNotification.message }} ({{
$root.library.backgroundNotification.progress
}}
/ {{ $root.library.backgroundNotification.total }})
</div>
</div>
</div>
</script>
<script>
Vue.component("cider-app-sidebar", {
template: "#cider-app-sidebar"
})
</script>