306 lines
16 KiB
Text
306 lines
16 KiB
Text
<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.appRoute('search');"
|
|
@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.appRoute('search');"
|
|
@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 -->
|
|
<div v-show="$root.getThemeDirective('windowLayout') != 'twopanel'" class="sidebarCatalogSection">
|
|
<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>
|
|
</div>
|
|
|
|
<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.cfg.libraryPrefs.localPaths.length != 0">
|
|
<div class="app-sidebar-header-text"
|
|
@click="$root.cfg.general.sidebarCollapsed.localLibrary = !$root.cfg.general.sidebarCollapsed.localLibrary"
|
|
:class="{collapsed: $root.cfg.general.sidebarCollapsed.localLibrary}">
|
|
Local Library
|
|
</div>
|
|
<template v-if="!$root.cfg.general.sidebarCollapsed.localLibrary">
|
|
<sidebar-playlist :item="{attributes: { name:'Songs'} , id:'ciderlocal'}"></sidebar-playlist>
|
|
</template>
|
|
</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" @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>
|