From 31af264c7ab81f462e4baa502ec853360957610d Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 30 Jun 2022 00:17:20 -0700
Subject: [PATCH] moved sidebar into component

---
 src/main/base/browserwindow.ts            |   1 +
 src/renderer/style.css                    | 143 ++++++++++
 src/renderer/views/app/app-navigation.ejs |   2 +-
 src/renderer/views/app/sidebar.ejs        | 300 ---------------------
 src/renderer/views/components/sidebar.ejs | 307 ++++++++++++++++++++++
 5 files changed, 452 insertions(+), 301 deletions(-)
 delete mode 100644 src/renderer/views/app/sidebar.ejs
 create mode 100644 src/renderer/views/components/sidebar.ejs

diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index d16eaeee..747eb46d 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -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",
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 8fbc9118..782a157e 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -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%;
diff --git a/src/renderer/views/app/app-navigation.ejs b/src/renderer/views/app/app-navigation.ejs
index 382dab2a..307ee0e4 100644
--- a/src/renderer/views/app/app-navigation.ejs
+++ b/src/renderer/views/app/app-navigation.ejs
@@ -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">
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
deleted file mode 100644
index 7b14d181..00000000
--- a/src/renderer/views/app/sidebar.ejs
+++ /dev/null
@@ -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>
diff --git a/src/renderer/views/components/sidebar.ejs b/src/renderer/views/components/sidebar.ejs
new file mode 100644
index 00000000..d642b7c0
--- /dev/null
+++ b/src/renderer/views/components/sidebar.ejs
@@ -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>
\ No newline at end of file