From 7920561ba33fc40704a2404ec4c8a308bcd448be Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 3 Feb 2022 20:59:45 -0800
Subject: [PATCH] split up main.ejs, different sections moved to views/app/

---
 src/renderer/views/app/app-content.ejs    | 158 ++++++
 src/renderer/views/app/app-navigation.ejs |  27 +
 src/renderer/views/app/chrome-top.ejs     | 141 +++++
 src/renderer/views/app/panels.ejs         |  71 +++
 src/renderer/views/app/sidebar.ejs        | 173 ++++++
 src/renderer/views/main.ejs               | 626 +---------------------
 6 files changed, 573 insertions(+), 623 deletions(-)
 create mode 100644 src/renderer/views/app/app-content.ejs
 create mode 100644 src/renderer/views/app/app-navigation.ejs
 create mode 100644 src/renderer/views/app/chrome-top.ejs
 create mode 100644 src/renderer/views/app/panels.ejs
 create mode 100644 src/renderer/views/app/sidebar.ejs

diff --git a/src/renderer/views/app/app-content.ejs b/src/renderer/views/app/app-content.ejs
new file mode 100644
index 00000000..a5781532
--- /dev/null
+++ b/src/renderer/views/app/app-content.ejs
@@ -0,0 +1,158 @@
+<div id="app-content">
+    <div id="navigation-bar">
+        <button class="nav-item" @click="navigateBack()">
+            <%- include('../svg/chevron-left.svg') %>
+        </button>
+        <button class="nav-item" @click="navigateForward()">
+            <%- include('../svg/chevron-right.svg') %>
+        </button>
+    </div>
+
+    <!--                    Podcasts -->
+    <transition name="wpfade">
+        <template v-if="page == 'podcasts'">
+            <apple-podcasts></apple-podcasts>
+        </template>
+    </transition>
+    <!-- Library - Library Videos -->
+    <transition name="wpfade">
+        <template v-if="page == 'library-videos'">
+            <cider-library-videos></cider-library-videos>
+        </template>
+    </transition>
+
+    <!-- Apple Setings Page -->
+    <transition name="wpfade">
+        <template v-if="page == 'apple-account-settings'">
+            <apple-account-settings></apple-account-settings>
+        </template>
+    </transition>
+    <!-- About -->
+    <transition name="wpfade">
+        <template v-if="page == 'about'">
+            <about-page></about-page>
+        </template>
+    </transition>
+    <!-- Artist Page -->
+    <transition name="wpfade">
+        <template v-if="page == 'artist-page' && artistPage.data.attributes">
+            <cider-artist :data="artistPage.data"></cider-artist>
+        </template>
+    </transition>
+    <transition name="wpfade">
+        <%- include('../pages/zoo') %>
+    </transition>
+    <transition name="wpfade">
+        <%- include('../pages/webview') %>
+    </transition>
+    <!-- Collection List -->
+    <transition name="wpfade">
+        <template v-if="page == 'collection-list'">
+            <cider-collection-list :data="collectionList.response" :type="collectionList.type"
+                                   :title="collectionList.title"></cider-collection-list>
+        </template>
+    </transition>
+    <!-- Home -->
+    <transition name="wpfade">
+        <template v-if="page == 'home'">
+            <cider-home></cider-home>
+        </template>
+    </transition>
+    <!-- Home -->
+    <transition name="wpfade">
+        <template v-if="page == 'artist-feed'">
+            <cider-artist-feed></cider-artist-feed>
+        </template>
+    </transition>
+    <!-- Playlist / Album page-->
+    <transition name="wpfade">
+        <template v-if="page.includes('playlist_')">
+            <cider-playlist :data="showingPlaylist"></cider-playlist>
+        </template>
+    </transition>
+    <transition name="wpfade">
+        <template v-if="page.includes('album_')">
+            <cider-playlist :data="showingPlaylist"></cider-playlist>
+        </template>
+    </transition>
+    <transition name="wpfade">
+        <template v-if="page.includes('recordLabel_')">
+            <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
+        </template>
+    </transition>
+
+    <transition name="wpfade">
+        <template v-if="page.includes('curator_')">
+            <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
+        </template>
+    </transition>
+    <!-- Browse -->
+    <transition v-on:enter="getBrowsePage(); console.log('browse')" name="wpfade">
+        <template v-if="page == 'browse'">
+            <cider-browse :data="browsepage"></cider-browse>
+        </template>
+    </transition>
+    <!-- Listen Now -->
+    <transition v-on:enter="getListenNow()" name="wpfade">
+        <template v-if="page == 'listen_now'" @created="console.log('listennow')">
+            <cider-listen-now :data="listennow"></cider-listen-now>
+        </template>
+    </transition>
+    <!-- Radio -->
+    <transition v-on:enter="getRadioStations()" name="wpfade">
+        <template v-if="page == 'radio'" @created="console.log('radio')">
+            <div class="content-inner">
+                <h1 class="header-text">{{$root.getLz('term.radio')}}</h1>
+                <h3>{{$root.getLz('term.recentStations')}}</h3>
+                <mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
+            </div>
+        </template>
+    </transition>
+    <!-- Settings -->
+    <transition name="wpfade">
+        <template v-if="page == 'settings'">
+            <cider-settings></cider-settings>
+        </template>
+    </transition>
+    <!-- Search -->
+    <transition name="wpfade">
+        <template v-if="page == 'search'">
+            <cider-search :search="search"></cider-search>
+        </template>
+    </transition>
+    <!-- Library - Recently Added -->
+    <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
+        <%- include('../pages/library-recentlyadded') %>');
+    </transition>
+    <!-- Library - Songs -->
+    <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
+        <template v-if="page == 'library-songs'">
+            <cider-library-songs :data="library.songs"></cider-library-songs>
+        </template>
+    </transition>
+    <!-- Library - Albums -->
+    <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
+        <%- include('../pages/library-albums') %>');
+        %>
+    </transition>
+    <!-- Library - Made For You -->
+    <transition name="wpfade" v-on:enter="getMadeForYou()">
+        <template v-if="page == 'library-madeforyou'">
+            <%- include('../pages/madeforyou') %>');
+            %>
+        </template>
+    </transition>
+    <!-- Library - Artists-->
+    <transition name="wpfade" v-on:enter="getLibraryArtistsFull(null, 0);">
+        <template v-if="page == 'library-artists'">
+            <%- include('../pages/library-artists') %>');
+            %>
+        </template>
+    </transition>
+    <transition name="wpfade">
+        <template v-if="page.includes('appleCurator')">
+            <cider-applecurator :data="appleCurator"></cider-applecurator>
+        </template>
+    </transition>
+
+</div>
\ No newline at end of file
diff --git a/src/renderer/views/app/app-navigation.ejs b/src/renderer/views/app/app-navigation.ejs
new file mode 100644
index 00000000..b7d7f654
--- /dev/null
+++ b/src/renderer/views/app/app-navigation.ejs
@@ -0,0 +1,27 @@
+<div class="app-navigation" v-cloak>
+    <%- include("sidebar") %>
+    <%- include("app-content") %>
+    <transition name="drawertransition">
+        <div class="app-drawer"
+             v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
+            <div class="bgArtworkMaterial">
+                <div class="bg-artwork-container">
+                    <img class="bg-artwork a" :src="$store.state.artwork.playerLCD">
+                    <img class="bg-artwork b" :src="$store.state.artwork.playerLCD">
+                </div>
+            </div>
+            <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
+                         :richlyrics="richlyrics"></lyrics-view>
+            <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
+                <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
+                    $root.getLz('term.defaultView'): $root.getLz('term.fullscreenView')}}
+                </button>
+            </div>
+        </div>
+    </transition>
+    <transition name="drawertransition">
+        <div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'">
+            <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
+        </div>
+    </transition>
+</div>
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
new file mode 100644
index 00000000..751ff3f0
--- /dev/null
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -0,0 +1,141 @@
+<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
+    <div class="app-chrome--left">
+        <div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'left'">
+            <div class="window-controls">
+                <div class="close" @click="ipcRenderer.send('close')"></div>
+                <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
+                <div class="minmax restore" v-if="chrome.maximized"
+                     @click="ipcRenderer.send('maximize')">
+                </div>
+                <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
+            </div>
+        </div>
+        <div class="app-chrome-item full-height" v-else>
+            <button class="app-mainmenu"
+                    @blur="mainMenuVisibility(false)"
+                    @click="mainMenuVisibility(true)"
+                    :class="{active: chrome.menuOpened}"></button>
+        </div>
+        <div class="app-chrome-item display--large">
+            <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
+                    @click="mk.shuffleMode = 1"></button>
+            <button class="playback-button--small shuffle active" v-else
+                    @click="mk.shuffleMode = 0"></button>
+        </div>
+        <div class="app-chrome-item display--large">
+            <button class="playback-button previous" @click="prevButton()"></button>
+        </div>
+        <div class="app-chrome-item display--large">
+            <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
+            <button class="playback-button play" @click="mk.play()" v-else></button>
+        </div>
+        <div class="app-chrome-item display--large">
+            <button class="playback-button next" @click="mk.skipToNextItem()"></button>
+        </div>
+        <div class="app-chrome-item display--large">
+            <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
+                    @click="mk.repeatMode = 1"></button>
+            <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
+                    v-else-if="mk.repeatMode == 1"></button>
+            <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
+                    v-else-if="mk.repeatMode == 2"></button>
+        </div>
+    </div>
+    <div class="app-chrome--center">
+        <div class="app-chrome-item playback-controls">
+            <template v-if="mkReady()">
+                <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
+                     @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
+                    <div class="artwork" @click="drawer.open = false; fullscreen(true)">
+                        <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
+                    </div>
+                    <div class="playback-info">
+                        <div class="song-name" style="-webkit-box-orient: horizontal;"
+                             :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
+                             :style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]">
+                            {{ mk.nowPlayingItem["attributes"]["name"] }}
+                            <div class="explicit-icon"
+                                 v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
+                                 style="display: inline-block"></div>
+                        </div>
+                        <div class="song-artist-album">
+                            <div class="song-artist-album-content"
+                                 :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
+                                 style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
+                                <div class="item-navigate song-artist" style="display: inline-block"
+                                     @click="getNowPlayingItemDetailed(`artist`)">
+                                    {{ mk.nowPlayingItem["attributes"]["artistName"] }}
+                                </div>
+                                <div class="song-artist item-navigate" style="display: inline-block"
+                                     @click="getNowPlayingItemDetailed('album')"
+                                     v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
+                                    <div class="separator" style="display: inline-block;">{{"—"}}</div>
+                                    {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
+                                    (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="song-progress">
+                            <div class="song-duration"
+                                 style="justify-content: space-between; height: 1px;"
+                                 :style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
+                                <p style="width: auto">{{ convertToMins(getSongProgress()) }}</p>
+                                <p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}
+                                </p>
+                            </div>
+
+                            <input type="range" step="0.01" min="0" :style="progressBarStyle()"
+                                   @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
+                                   @mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
+                                   :max="mk.currentPlaybackDuration" :value="getSongProgress()">
+                        </div>
+                    </div>
+                    <template v-if="mk.nowPlayingItem['attributes']['playParams']">
+                        <div class="actions">
+                            <button class="lcdMenu" @click="nowPlayingContextMenu">
+                                <div class="svg-icon"></div>
+                            </button>
+                        </div>
+                    </template>
+
+                </div>
+            </template>
+
+        </div>
+    </div>
+    <div class="app-chrome--right">
+        <div class="app-chrome-item volume display--large">
+            <button class="volume-button--small volume" @click="muteButtonPressed()"
+                    :class="{'active': this.cfg.audio.volume == 0}"></button>
+            <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" :max="cfg.audio.maxVolume"
+                   v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
+        </div>
+        <div class="app-chrome-item generic">
+            <button class="playback-button--small miniplayer"
+                    @click="drawer.open = false; miniPlayer(true)"></button>
+        </div>
+        <div class="app-chrome-item generic">
+            <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
+                    @click="invokeDrawer('queue')"></button>
+        </div>
+        <div class="app-chrome-item generic">
+            <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
+                <button class="playback-button--small lyrics"
+                        :class="{'active': drawer.panel == 'lyrics'}"
+                        @click="invokeDrawer('lyrics')"></button>
+            </template>
+
+        </div>
+        <div class="app-chrome-item full-height" id="window-controls-container" v-if="chrome.windowControlPosition == 'right'">
+            <div class="window-controls">
+                <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
+                <div class="minmax restore" v-if="chrome.maximized"
+                     @click="ipcRenderer.send('maximize')">
+                </div>
+                <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
+                <div class="close" @click="ipcRenderer.send('close')"></div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/renderer/views/app/panels.ejs b/src/renderer/views/app/panels.ejs
new file mode 100644
index 00000000..bb8a4008
--- /dev/null
+++ b/src/renderer/views/app/panels.ejs
@@ -0,0 +1,71 @@
+<cider-menu-panel v-if="menuPanel.visible">
+</cider-menu-panel>
+<transition name="fsModeSwitch">
+    <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
+        <fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
+                         :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
+    </div>
+</transition>
+<transition name="fsModeSwitch">
+    <div class="fullscreen-view-container" v-if="appMode == 'mini'">
+        <mini-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
+                   :lyrics="lyrics" :richlyrics="richlyrics"></mini-view>
+    </div>
+</transition>
+<transition name="wpfade">
+    <div class="bg-artwork-container" v-if="cfg.visual.window_background_style == 'artwork'"
+         :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
+        <img @load="chrome.artworkReady = true" class="bg-artwork a ">
+        <img class="bg-artwork b">
+    </div>
+</transition>
+<transition name="wpfade">
+    <div class="bg-artwork--placeholder"></div>
+</transition>
+<transition name="modal">
+    <add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist>
+</transition>
+<transition name="modal">
+    <spatial-properties v-if="modals.spatialProperties"></spatial-properties>
+</transition>
+<transition name="modal">
+    <audio-settings v-if="modals.audioSettings"></audio-settings>
+</transition>
+<transition name="modal">
+    <eq-view v-if="modals.equalizer"></eq-view>
+</transition>
+<transition name="modal">
+    <qrcode-modal v-if="modals.qrcode" :src="webremoteqr" :url="webremoteurl"></qrcode-modal>
+</transition>
+<div id="apple-music-video-container">
+    <div id="apple-music-video-player-controls">
+        <div id="player-exit" title="Close" @click="exitMV()">
+            <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
+                 aria-role="presentation" focusable="false">
+                <path
+                        d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
+                        fill-rule="nonzero"/>
+            </svg>
+        </div>
+        <div id="captions">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] &&
+            lyrics[currentLyricsLine].line ) ?
+            lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ?
+            ((lyrics.length
+            > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ?
+            (lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "")
+            :
+            '')}}
+        </div>
+        <div id="player-pip"
+             @click="document.querySelector('video#apple-music-video-player').requestPictureInPicture()"
+             title="Picture-in-Picture">
+            <%- include("../svg/pip.svg") %>
+        </div>
+        <div id="player-fullscreen"
+             @click="document.querySelector('video#apple-music-video-player').requestFullscreen()"
+             title="Fullscreen">
+            <%- include("../svg/fullscreen.svg") %>
+        </div>
+    </div>
+    <div id="apple-music-video-player"></div>
+</div>
\ No newline at end of file
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
new file mode 100644
index 00000000..ba0ba6b2
--- /dev/null
+++ b/src/renderer/views/app/sidebar.ejs
@@ -0,0 +1,173 @@
+<div id="app-sidebar">
+    <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>
+    </div>
+    <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
+        <div class="search-hints">
+            <button class="search-hint" v-for="hint in search.hints"
+                    @click="search.term = hint;search.showHints = false;searchQuery(hint)">
+                {{ hint }}
+            </button>
+        </div>
+    </div>
+    <div class="app-sidebar-content">
+        <div class="app-sidebar-header-text">
+            Cider
+        </div>
+        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg"
+                              page="home">
+        </sidebar-library-item>
+        <div class="app-sidebar-header-text">
+            {{$root.getLz('term.appleMusic')}}
+        </div>
+        <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>
+        <div class="app-sidebar-header-text">
+            {{$root.getLz('term.library')}}
+        </div>
+        <sidebar-library-item :name="$root.getLz('term.recentlyAdded')"
+                              svg-icon="./assets/feather/plus-circle.svg"
+                              page="library-recentlyadded"></sidebar-library-item>
+        <sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
+                              page="library-songs"></sidebar-library-item>
+        <sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg"
+                              page="library-albums"></sidebar-library-item>
+        <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
+                              page="library-artists"></sidebar-library-item>
+        <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg"
+                              page="library-videos"></sidebar-library-item>
+        <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg"
+                              page="podcasts">
+        </sidebar-library-item>
+        <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
+            {{ $root.getLz('term.playlists') }}
+        </div>
+        <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
+        </sidebar-playlist>
+    </div>
+    <transition name="wpfade">
+        <div class="usermenu-container" v-if="chrome.menuOpened">
+            <div class="usermenu-body">
+                <button class="app-sidebar-button" style="width:100%">
+
+                    <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()">
+                                Sign In
+                            </div>
+                        </template>
+                    </div>
+                    <div class="sidebar-user-text" v-else>
+                        Cider
+                    </div>
+                </button>
+                <button class="usermenu-item" @click="showWebRemoteQR()">
+                    <div class="row nopadding">
+                        <div class="col nopadding">
+                            <span class="usermenu-item-icon"><%- include("../svg/smartphone.svg") %></span>
+                            <span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
+                        </div>
+                    </div>
+                </button>
+                <button class="usermenu-item" v-if="cfg.advanced.AudioContext"
+                        @click="modals.audioSettings = true">
+                    <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" @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 display--small">
+
+        <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"></button>
+                    <button class="playback-button--small shuffle active" v-else
+                            @click="mk.shuffleMode = 0"></button>
+                </div>
+                <div class="app-chrome-item">
+                    <button class="playback-button previous" @click="prevButton()"></button>
+                </div>
+                <div class="app-chrome-item">
+                    <button class="playback-button pause" @click="mk.pause()"
+                            v-if="mk.isPlaying"></button>
+                    <button class="playback-button play" @click="mk.play()" v-else></button>
+                </div>
+                <div class="app-chrome-item">
+                    <button class="playback-button next" @click="mk.skipToNextItem()"></button>
+                </div>
+                <div class="app-chrome-item">
+                    <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
+                            @click="mk.repeatMode = 1"></button>
+                    <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
+                            v-else-if="mk.repeatMode == 1"></button>
+                    <button class="playback-button--small repeat active"
+                            @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></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}"></button>
+                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0"
+                           :max="cfg.audio.maxVolume"
+                           v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
+                           @change="checkMuteChange()">
+                </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>
+</div>
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 44258400..1ba8628e 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -37,631 +37,11 @@
 <div id="app" :class="getAppClasses()">
     <transition name="fsModeSwitch">
         <div id="app-main" v-show="appMode == 'player'">
-            <div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
-            <div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
-                <div class="app-chrome--left">
-                    <div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'left'">
-                        <div class="window-controls">
-                            <div class="close" @click="ipcRenderer.send('close')"></div>
-                            <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
-                            <div class="minmax restore" v-if="chrome.maximized"
-                                 @click="ipcRenderer.send('maximize')">
-                            </div>
-                            <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
-                        </div>
-                    </div>
-                    <div class="app-chrome-item full-height" v-else>
-                        <button class="app-mainmenu"
-                                @blur="mainMenuVisibility(false)"
-                                @click="mainMenuVisibility(true)"
-                                :class="{active: chrome.menuOpened}"></button>
-                    </div>
-                    <div class="app-chrome-item display--large">
-                        <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
-                                @click="mk.shuffleMode = 1"></button>
-                        <button class="playback-button--small shuffle active" v-else
-                                @click="mk.shuffleMode = 0"></button>
-                    </div>
-                    <div class="app-chrome-item display--large">
-                        <button class="playback-button previous" @click="prevButton()"></button>
-                    </div>
-                    <div class="app-chrome-item display--large">
-                        <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
-                        <button class="playback-button play" @click="mk.play()" v-else></button>
-                    </div>
-                    <div class="app-chrome-item display--large">
-                        <button class="playback-button next" @click="mk.skipToNextItem()"></button>
-                    </div>
-                    <div class="app-chrome-item display--large">
-                        <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
-                                @click="mk.repeatMode = 1"></button>
-                        <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
-                                v-else-if="mk.repeatMode == 1"></button>
-                        <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
-                                v-else-if="mk.repeatMode == 2"></button>
-                    </div>
-                </div>
-                <div class="app-chrome--center">
-                    <div class="app-chrome-item playback-controls">
-                        <template v-if="mkReady()">
-                            <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
-                                 @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
-                                <div class="artwork" @click="drawer.open = false; fullscreen(true)">
-                                    <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
-                                </div>
-                                <div class="playback-info">
-                                    <div class="song-name" style="-webkit-box-orient: horizontal;"
-                                         :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
-                                         :style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]">
-                                        {{ mk.nowPlayingItem["attributes"]["name"] }}
-                                        <div class="explicit-icon"
-                                             v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
-                                             style="display: inline-block"></div>
-                                    </div>
-                                    <div class="song-artist-album">
-                                        <div class="song-artist-album-content"
-                                             :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
-                                             style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
-                                            <div class="item-navigate song-artist" style="display: inline-block"
-                                                 @click="getNowPlayingItemDetailed(`artist`)">
-                                                {{ mk.nowPlayingItem["attributes"]["artistName"] }}
-                                            </div>
-                                            <div class="song-artist item-navigate" style="display: inline-block"
-                                                 @click="getNowPlayingItemDetailed('album')"
-                                                 v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
-                                                <div class="separator" style="display: inline-block;">{{"—"}}</div>
-                                                {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
-                                                (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div class="song-progress">
-                                        <div class="song-duration"
-                                             style="justify-content: space-between; height: 1px;"
-                                             :style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
-                                            <p style="width: auto">{{ convertToMins(getSongProgress()) }}</p>
-                                            <p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}
-                                            </p>
-                                        </div>
-
-                                        <input type="range" step="0.01" min="0" :style="progressBarStyle()"
-                                               @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
-                                               @mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
-                                               :max="mk.currentPlaybackDuration" :value="getSongProgress()">
-                                    </div>
-                                </div>
-                                <template v-if="mk.nowPlayingItem['attributes']['playParams']">
-                                    <div class="actions">
-                                        <button class="lcdMenu" @click="nowPlayingContextMenu">
-                                            <div class="svg-icon"></div>
-                                        </button>
-                                    </div>
-                                </template>
-
-                            </div>
-                        </template>
-
-                    </div>
-                </div>
-                <div class="app-chrome--right">
-                    <div class="app-chrome-item volume display--large">
-                        <button class="volume-button--small volume" @click="muteButtonPressed()"
-                                :class="{'active': this.cfg.audio.volume == 0}"></button>
-                        <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" :max="cfg.audio.maxVolume"
-                               v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
-                    </div>
-                    <div class="app-chrome-item generic" v-if="false">
-                        <button class="playback-button--small">
-                            <%- include("svg/cast.svg") %>
-                        </button>
-                    </div>
-                    <div class="app-chrome-item generic">
-                        <button class="playback-button--small miniplayer"
-                                @click="drawer.open = false; miniPlayer(true)"></button>
-                    </div>
-                    <div class="app-chrome-item generic">
-                        <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
-                                @click="invokeDrawer('queue')"></button>
-                    </div>
-                    <div class="app-chrome-item generic">
-                        <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
-                            <button class="playback-button--small lyrics"
-                                    :class="{'active': drawer.panel == 'lyrics'}"
-                                    @click="invokeDrawer('lyrics')"></button>
-                        </template>
-
-                    </div>
-                    <div class="app-chrome-item full-height" id="window-controls-container" v-if="chrome.windowControlPosition == 'right'">
-                        <div class="window-controls">
-                            <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
-                            <div class="minmax restore" v-if="chrome.maximized"
-                                 @click="ipcRenderer.send('maximize')">
-                            </div>
-                            <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
-                            <div class="close" @click="ipcRenderer.send('close')"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="app-navigation" v-cloak>
-                <div id="app-sidebar">
-                    <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>
-                    </div>
-                    <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
-                        <div class="search-hints">
-                            <button class="search-hint" v-for="hint in search.hints"
-                                    @click="search.term = hint;search.showHints = false;searchQuery(hint)">
-                                {{ hint }}
-                            </button>
-                        </div>
-                    </div>
-                    <div class="app-sidebar-content">
-                        <div class="app-sidebar-header-text">
-                            Cider
-                        </div>
-                        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg"
-                                              page="home">
-                        </sidebar-library-item>
-                        <div class="app-sidebar-header-text">
-                            {{$root.getLz('term.appleMusic')}}
-                        </div>
-                        <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>
-                        <div class="app-sidebar-header-text">
-                            {{$root.getLz('term.library')}}
-                        </div>
-                        <sidebar-library-item :name="$root.getLz('term.recentlyAdded')"
-                                              svg-icon="./assets/feather/plus-circle.svg"
-                                              page="library-recentlyadded"></sidebar-library-item>
-                        <sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
-                                              page="library-songs"></sidebar-library-item>
-                        <sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg"
-                                              page="library-albums"></sidebar-library-item>
-                        <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
-                                              page="library-artists"></sidebar-library-item>
-                        <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg"
-                                              page="library-videos"></sidebar-library-item>
-                        <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg"
-                                              page="podcasts">
-                        </sidebar-library-item>
-                        <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
-                            {{ $root.getLz('term.playlists') }}
-                        </div>
-                        <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
-                        </sidebar-playlist>
-                    </div>
-                    <transition name="wpfade">
-                        <div class="usermenu-container" v-if="chrome.menuOpened">
-                            <div class="usermenu-body">
-                                <button class="app-sidebar-button" style="width:100%">
-
-                                    <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()">
-                                                Sign In
-                                            </div>
-                                        </template>
-                                    </div>
-                                    <div class="sidebar-user-text" v-else>
-                                        Cider
-                                    </div>
-                                </button>
-                                <button class="usermenu-item" @click="showWebRemoteQR()">
-                                    <div class="row nopadding">
-                                        <div class="col nopadding">
-                                            <span class="usermenu-item-icon"><%- include("./svg/smartphone.svg") %></span>
-                                            <span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
-                                        </div>
-                                    </div>
-                                </button>
-                                <button class="usermenu-item" v-if="cfg.advanced.AudioContext"
-                                        @click="modals.audioSettings = true">
-                                    <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" @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 display--small">
-
-                        <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"></button>
-                                    <button class="playback-button--small shuffle active" v-else
-                                            @click="mk.shuffleMode = 0"></button>
-                                </div>
-                                <div class="app-chrome-item">
-                                    <button class="playback-button previous" @click="prevButton()"></button>
-                                </div>
-                                <div class="app-chrome-item">
-                                    <button class="playback-button pause" @click="mk.pause()"
-                                            v-if="mk.isPlaying"></button>
-                                    <button class="playback-button play" @click="mk.play()" v-else></button>
-                                </div>
-                                <div class="app-chrome-item">
-                                    <button class="playback-button next" @click="mk.skipToNextItem()"></button>
-                                </div>
-                                <div class="app-chrome-item">
-                                    <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
-                                            @click="mk.repeatMode = 1"></button>
-                                    <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
-                                            v-else-if="mk.repeatMode == 1"></button>
-                                    <button class="playback-button--small repeat active"
-                                            @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></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}"></button>
-                                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0"
-                                           :max="cfg.audio.maxVolume"
-                                           v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
-                                           @change="checkMuteChange()">
-                                </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>
-                </div>
-                <div id="app-content">
-                    <div id="navigation-bar">
-                        <button class="nav-item" @click="navigateBack()">
-                            <%- include('svg/chevron-left.svg') %>
-                        </button>
-                        <button class="nav-item" @click="navigateForward()">
-                            <%- include('svg/chevron-right.svg') %>
-                        </button>
-                    </div>
-
-                    <!--                    Podcasts -->
-                    <transition name="wpfade">
-                        <template v-if="page == 'podcasts'">
-                            <apple-podcasts></apple-podcasts>
-                        </template>
-                    </transition>
-                    <!-- Library - Library Videos -->
-                    <transition name="wpfade">
-                        <template v-if="page == 'library-videos'">
-                            <cider-library-videos></cider-library-videos>
-                        </template>
-                    </transition>
-
-                    <!-- Apple Setings Page -->
-                    <transition name="wpfade">
-                        <template v-if="page == 'apple-account-settings'">
-                            <apple-account-settings></apple-account-settings>
-                        </template>
-                    </transition>
-                    <!-- About -->
-                    <transition name="wpfade">
-                        <template v-if="page == 'about'">
-                            <about-page></about-page>
-                        </template>
-                    </transition>
-                    <!-- Artist Page -->
-                    <transition name="wpfade">
-                        <template v-if="page == 'artist-page' && artistPage.data.attributes">
-                            <cider-artist :data="artistPage.data"></cider-artist>
-                        </template>
-                    </transition>
-                    <transition name="wpfade">
-                        <%- include('pages/zoo') %>
-                    </transition>
-                    <transition name="wpfade">
-                        <%- include('pages/webview') %>
-                    </transition>
-                    <!-- Collection List -->
-                    <transition name="wpfade">
-                        <template v-if="page == 'collection-list'">
-                            <cider-collection-list :data="collectionList.response" :type="collectionList.type"
-                                                   :title="collectionList.title"></cider-collection-list>
-                        </template>
-                    </transition>
-                    <!-- Home -->
-                    <transition name="wpfade">
-                        <template v-if="page == 'home'">
-                            <cider-home></cider-home>
-                        </template>
-                    </transition>
-                    <!-- Home -->
-                    <transition name="wpfade">
-                        <template v-if="page == 'artist-feed'">
-                            <cider-artist-feed></cider-artist-feed>
-                        </template>
-                    </transition>
-                    <!-- Playlist / Album page-->
-                    <transition name="wpfade">
-                        <template v-if="page.includes('playlist_')">
-                            <cider-playlist :data="showingPlaylist"></cider-playlist>
-                        </template>
-                    </transition>
-                    <transition name="wpfade">
-                        <template v-if="page.includes('album_')">
-                            <cider-playlist :data="showingPlaylist"></cider-playlist>
-                        </template>
-                    </transition>
-                    <transition name="wpfade">
-                        <template v-if="page.includes('recordLabel_')">
-                            <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
-                        </template>
-                    </transition>
-
-                    <transition name="wpfade">
-                        <template v-if="page.includes('curator_')">
-                            <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
-                        </template>
-                    </transition>
-                    <!-- Browse -->
-                    <transition v-on:enter="getBrowsePage(); console.log('browse')" name="wpfade">
-                        <template v-if="page == 'browse'">
-                            <!-- <div class="content-inner">
-
-                            <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
-                                MusicKit
-                            </button>
-                            <button id="apple-music-unauthorize" class="md-btn md-btn-primary"
-                                    @click="unauthorize()">
-                                Stop
-                                MusicKit
-                            </button>
-                            <br>
-                            <template v-if="mk.nowPlayingItem">
-                                currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
-                                <br>
-                                currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
-                            </template>
-                            <div><input type="text" v-model="quickPlayQuery">
-                                <button @click="quickPlay(quickPlayQuery)">Play</button>
-                            </div>
-                            <h1 class="header-text">{{$root.getLz('term.browse')}}</h1>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu
-                                tincidunt
-                                consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
-                            </p>
-                            <div class="media-item--small">
-                                <div class="artwork">
-
-                                </div>
-                                <div class="text">
-                                    Text
-                                </div>
-                                <div class="subtext">
-                                    Subtext
-                                </div>
-                            </div>
-                            <br>
-                            <br>
-                            <h1 class="header-text">{{$root.getLz('term.listenNow')}}</h1>
-                            <div class="winbox">
-                                <div class="fancy">990kbps</div>
-                                <div class="">
-                                    <button class="md-btn md-btn-primary">Audio Quality Settings</button>
-                                </div>
-                            </div>
-                            <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
-                            <button class="md-btn">Button</button>
-                            <button class="md-btn md-btn-primary">Button</button>
-                        </div> -->
-                            <cider-browse :data="browsepage"></cider-browse>
-                        </template>
-                    </transition>
-                    <!-- Listen Now -->
-                    <transition v-on:enter="getListenNow()" name="wpfade">
-                        <template v-if="page == 'listen_now'" @created="console.log('listennow')">
-                            <cider-listen-now :data="listennow"></cider-listen-now>
-                        </template>
-                    </transition>
-                    <!-- Radio -->
-                    <transition v-on:enter="getRadioStations()" name="wpfade">
-                        <template v-if="page == 'radio'" @created="console.log('radio')">
-                            <div class="content-inner">
-                                <h1 class="header-text">{{$root.getLz('term.radio')}}</h1>
-                                <h3>{{$root.getLz('term.recentStations')}}</h3>
-                                <mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
-                            </div>
-                        </template>
-                    </transition>
-                    <!-- Settings -->
-                    <transition name="wpfade">
-                        <template v-if="page == 'settings'">
-                            <cider-settings></cider-settings>
-                        </template>
-                    </transition>
-                    <!-- Search -->
-                    <transition name="wpfade">
-                        <template v-if="page == 'search'">
-                            <cider-search :search="search"></cider-search>
-                        </template>
-                    </transition>
-                    <!-- Library - Recently Added -->
-                    <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
-                        <%- include('pages/library-recentlyadded') %>');
-                    </transition>
-                    <!-- Library - Songs -->
-                    <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
-                        <template v-if="page == 'library-songs'">
-                            <cider-library-songs :data="library.songs"></cider-library-songs>
-                        </template>
-                    </transition>
-                    <!-- Library - Albums -->
-                    <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
-                        <%- include('pages/library-albums') %>');
-                        %>
-                    </transition>
-                    <!-- Library - Made For You -->
-                    <transition name="wpfade" v-on:enter="getMadeForYou()">
-                        <template v-if="page == 'library-madeforyou'">
-                            <%- include('pages/madeforyou') %>');
-                            %>
-                        </template>
-                    </transition>
-                    <!-- Library - Artists-->
-                    <transition name="wpfade" v-on:enter="getLibraryArtistsFull(null, 0);">
-                        <template v-if="page == 'library-artists'">
-                            <%- include('pages/library-artists') %>');
-                            %>
-                        </template>
-                    </transition>
-                    <transition name="wpfade">
-                        <template v-if="page.includes('appleCurator')">
-                            <cider-applecurator :data="appleCurator"></cider-applecurator>
-                        </template>
-                    </transition>
-
-                </div>
-                <transition name="drawertransition">
-                    <div class="app-drawer"
-                         v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
-                        <div class="bgArtworkMaterial">
-                            <div class="bg-artwork-container">
-                                <img class="bg-artwork a" :src="$store.state.artwork.playerLCD">
-                                <img class="bg-artwork b" :src="$store.state.artwork.playerLCD">
-                            </div>
-                        </div>
-                        <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
-                                     :richlyrics="richlyrics"></lyrics-view>
-                        <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
-                            <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
-                                $root.getLz('term.defaultView'): $root.getLz('term.fullscreenView')}}
-                            </button>
-                        </div>
-                    </div>
-                </transition>
-                <transition name="drawertransition">
-                    <div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'">
-                        <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
-                    </div>
-                </transition>
-            </div>
+            <%- include('app/chrome-top'); %>
+            <%- include('app/app-navigation'); %>
         </div>
     </transition>
-    <cider-menu-panel v-if="menuPanel.visible">
-    </cider-menu-panel>
-    <transition name="fsModeSwitch">
-        <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
-            <fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
-                             :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
-        </div>
-    </transition>
-    <transition name="fsModeSwitch">
-        <div class="fullscreen-view-container" v-if="appMode == 'mini'">
-            <mini-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
-                       :lyrics="lyrics" :richlyrics="richlyrics"></mini-view>
-        </div>
-    </transition>
-    <transition name="wpfade">
-        <div class="bg-artwork-container" v-if="cfg.visual.window_background_style == 'artwork'"
-             :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
-            <img @load="chrome.artworkReady = true" class="bg-artwork a ">
-            <img class="bg-artwork b">
-        </div>
-    </transition>
-    <transition name="wpfade">
-        <div class="bg-artwork--placeholder"></div>
-    </transition>
-    <transition name="modal">
-        <add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist>
-    </transition>
-    <transition name="modal">
-        <spatial-properties v-if="modals.spatialProperties"></spatial-properties>
-    </transition>
-    <transition name="modal">
-        <audio-settings v-if="modals.audioSettings"></audio-settings>
-    </transition>
-    <transition name="modal">
-        <eq-view v-if="modals.equalizer"></eq-view>
-    </transition>
-    <transition name="modal">
-        <qrcode-modal v-if="modals.qrcode" :src="webremoteqr" :url="webremoteurl"></qrcode-modal>
-    </transition>
-    <div id="apple-music-video-container">
-        <div id="apple-music-video-player-controls">
-            <div id="player-exit" title="Close" @click="exitMV()">
-                <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
-                     aria-role="presentation" focusable="false">
-                    <path
-                            d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
-                            fill-rule="nonzero"/>
-                </svg>
-            </div>
-            <div id="captions">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] &&
-                lyrics[currentLyricsLine].line ) ?
-                lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ?
-                ((lyrics.length
-                > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ?
-                (lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "")
-                :
-                '')}}
-            </div>
-            <div id="player-pip"
-                 @click="document.querySelector('video#apple-music-video-player').requestPictureInPicture()"
-                 title="Picture-in-Picture">
-                <%- include("svg/pip.svg") %>
-            </div>
-            <div id="player-fullscreen"
-                 @click="document.querySelector('video#apple-music-video-player').requestFullscreen()"
-                 title="Fullscreen">
-                <%- include("svg/fullscreen.svg") %>
-            </div>
-        </div>
-        <div id="apple-music-video-player"></div>
-    </div>
+    <%- include('app/panels'); %>
 </div>