moved sidebar into component
This commit is contained in:
booploops
parent
b6a730e202
commit
31af264c7a
5 changed files with 452 additions and 301 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
307
src/renderer/views/components/sidebar.ejs
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue