From 3102db4fa0ebf6102036caf8b1fa6ffef22a6c6d Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 26 May 2022 21:21:38 -0700
Subject: [PATCH] redesign episode 2

---
 src/renderer/less/directives.less     |  56 ++-
 src/renderer/less/elements.less       |   9 +-
 src/renderer/style.less               |   4 +-
 src/renderer/views/app/chrome-top.ejs | 675 +++++++++++++++++---------
 src/renderer/views/app/sidebar.ejs    |  48 +-
 5 files changed, 542 insertions(+), 250 deletions(-)

diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
index b8de2888..c2b97fba 100644
--- a/src/renderer/less/directives.less
+++ b/src/renderer/less/directives.less
@@ -1,3 +1,13 @@
+@colorMixRate: 1%;
+@transparencyRate: 50%;
+
+@keyColor  : #fc3c44;
+@ciderColor: #ff2654;
+@baseColor: #1e1e1e;
+@baseColorMix: mix(@baseColor, transparent, @transparencyRate);
+@sidebarColor: #2e2e2e;
+@sidebarColorMix: mix(@sidebarColor, transparent, @transparencyRate);
+
 #app.navbar {
   --navigationBarHeight: 38px;
 }
@@ -8,13 +18,57 @@
   --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
 
   .app-chrome {
+
+    &:not(.chrome-bottom) {
+      .app-chrome--center {
+        flex: 1;
+        .top-nav-group {
+          background: @baseColor;
+          border: 1px solid lighten(@baseColor, 8);
+          border-radius: 10px;
+          display: flex;
+          height: 32px;
+  
+          .app-sidebar-item {
+              background-color: @baseColor;
+              border-radius: 10px!important;
+              border:0px;
+              min-width: 120px;
+              padding:6px;
+              justify-content: center;
+              align-items: center;
+              margin: 0px;
+              height: 100%;
+
+              &:after {
+                display: none;
+              }
+  
+              &:hover {
+                  background-color: lighten(@baseColor, @colorMixRate * 5);
+              }
+  
+              &.active {
+                  background-color: lighten(@baseColor, @colorMixRate * 5);
+              }
+      
+              &.md-btn-primary {
+                  box-shadow: 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
+                  background-color: lighten(@baseColor, @colorMixRate * 5);
+                  z-index: 1;
+              }
+          }
+      }
+      }
+    }
+
     .app-mainmenu {
       width: 30px;
       height: 30px;
     }
 
     .search-input {
-      width: 300px;
+      width: 180px;
     }
 
     height: var(--chromeHeight1);
diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 513c119b..e5aca0d1 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -570,6 +570,7 @@
 
   &:hover {
     background: rgb(200 200 200 / 10%);
+    box-shadow: var(--mediaItemShadow);
 
     .overlay-play {
       opacity: 1;
@@ -578,10 +579,13 @@
 
   &.mediaitem-selected {
     background: var(--selected);
+    box-shadow: var(--mediaItemShadow);
   }
 
 
   &:active {
+    background: var(--selected-click);
+    box-shadow: var(--mediaItemShadow);
     color: #eee;
   }
 
@@ -1089,11 +1093,12 @@
   &.mediaitem-card {
     background: #ccc;
     background: var(--spcolor);
-    height: 272px;
+    height: 298px;
     width: 230px;
     overflow: hidden;
     position: relative;
     border-radius: calc(var(--mediaItemRadius) * 2);
+    box-shadow: var(--mediaItemShadow-ShadowSubtle);
 
     .artwork {
       width: 230px;
@@ -1158,10 +1163,10 @@
       overflow: hidden;
       max-height: 3.8em;
       z-index: 1;
-      padding-top: 6px;
     }
 
     &::after {
+      box-shadow: var(--mediaItemShadow);
       content: "";
       width: 100%;
       height: 100%;
diff --git a/src/renderer/style.less b/src/renderer/style.less
index ef6c2046..a51642ac 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1917,6 +1917,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     display: flex;
     flex-flow: wrap;
     justify-content: center;
+    .cd-mediaitem-square-container{
+      align-items: center;
+    }
     .cd-mediaitem-square {
       width: 220px;
       height: 260px;
@@ -1951,7 +1954,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
 }
 
 .reasonSP{
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index adbd9d0a..5bc3e11e 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -1,239 +1,466 @@
-<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' && !chrome.nativeControls">
-            <div class="window-controls-macos">
-                <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}"
-                    :aria-label="$root.getLz('term.quickNav')"></button>
-        </div>
-        <template v-if="getThemeDirective('appNavigation') != 'seperate'">
-            <div class="vdiv display--large" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
-            <div class="app-chrome-item">
-                <button class="playback-button navigation" @click="navigateBack()"
-                        :title="$root.getLz('term.navigateBack')" v-b-tooltip.hover>
-                    <%- include('../svg/chevron-left.svg') %>
+<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' && !chrome.nativeControls"
+    >
+      <div class="window-controls-macos">
+        <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}"
+        :aria-label="$root.getLz('term.quickNav')"
+      ></button>
+    </div>
+    <template v-if="getThemeDirective('appNavigation') != 'seperate'">
+      <div
+        class="vdiv display--large"
+        v-if="getThemeDirective('windowLayout') == 'twopanel'"
+      ></div>
+      <div class="app-chrome-item">
+        <button
+          class="playback-button navigation"
+          @click="navigateBack()"
+          :title="$root.getLz('term.navigateBack')"
+          v-b-tooltip.hover
+        >
+          <%- include('../svg/chevron-left.svg') %>
+        </button>
+      </div>
+      <div class="app-chrome-item">
+        <button
+          class="playback-button navigation"
+          @click="navigateForward()"
+          :title="$root.getLz('term.navigateForward')"
+          v-b-tooltip.hover
+        >
+          <%- include('../svg/chevron-right.svg') %>
+        </button>
+      </div>
+      <div
+        class="vdiv display--large"
+        v-if="getThemeDirective('windowLayout') != 'twopanel'"
+      ></div>
+    </template>
+    <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
+      <div class="app-chrome-item display--large">
+        <button
+          class="playback-button--small shuffle"
+          v-if="mk.shuffleMode == 0"
+          :class="isDisabled() && 'disabled'"
+          @click="mk.shuffleMode = 1"
+          :title="$root.getLz('term.enableShuffle')"
+          v-b-tooltip.hover
+        ></button>
+        <button
+          class="playback-button--small shuffle active"
+          v-else
+          :class="isDisabled() && 'disabled'"
+          @click="mk.shuffleMode = 0"
+          :title="$root.getLz('term.disableShuffle')"
+          v-b-tooltip.hover
+        ></button>
+      </div>
+      <div class="app-chrome-item display--large">
+        <button
+          class="playback-button previous"
+          @click="prevButton()"
+          :class="isPrevDisabled() && 'disabled'"
+          :title="$root.getLz('term.previous')"
+          v-b-tooltip.hover
+        ></button>
+      </div>
+      <div class="app-chrome-item display--large">
+        <button
+          class="playback-button stop"
+          @click="mk.stop()"
+          v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
+          :title="$root.getLz('term.stop')"
+          v-b-tooltip.hover
+        ></button>
+        <button
+          class="playback-button pause"
+          @click="mk.pause()"
+          v-else-if="mk.isPlaying"
+          :title="$root.getLz('term.pause')"
+          v-b-tooltip.hover
+        ></button>
+        <button
+          class="playback-button play"
+          @click="mk.play()"
+          v-else
+          :title="$root.getLz('term.play')"
+          v-b-tooltip.hover
+        ></button>
+      </div>
+      <div class="app-chrome-item display--large">
+        <button
+          class="playback-button next"
+          @click="skipToNextItem()"
+          :class="isNextDisabled() && 'disabled'"
+          :title="$root.getLz('term.next')"
+          v-b-tooltip.hover
+        ></button>
+      </div>
+      <div class="app-chrome-item display--large">
+        <button
+          class="playback-button--small repeat"
+          v-if="mk.repeatMode == 0"
+          :class="isDisabled() && 'disabled'"
+          @click="mk.repeatMode = 1"
+          :title="$root.getLz('term.enableRepeatOne')"
+          v-b-tooltip.hover
+        ></button>
+        <button
+          class="playback-button--small repeat repeatOne"
+          @click="mk.repeatMode = 2"
+          :class="isDisabled() && 'disabled'"
+          v-else-if="mk.repeatMode == 1"
+          :title="$root.getLz('term.disableRepeatOne')"
+          v-b-tooltip.hover
+        ></button>
+        <button
+          class="playback-button--small repeat active"
+          @click="mk.repeatMode = 0"
+          :class="isDisabled() && 'disabled'"
+          v-else-if="mk.repeatMode == 2"
+          :title="$root.getLz('term.disableRepeat')"
+          v-b-tooltip.hover
+        ></button>
+      </div>
+    </template>
+  </div>
+  <div class="app-chrome--center">
+    <div
+      class="app-chrome-item playback-controls"
+      v-if="getThemeDirective('windowLayout') != 'twopanel'"
+    >
+      <template v-if="mkReady()">
+        <div
+          class="app-playback-controls"
+          @mouseover="chrome.progresshover = true"
+          @mouseleave="chrome.progresshover = false"
+          @contextmenu="nowPlayingContextMenu"
+        >
+          <div class="artwork" id="artworkLCD">
+            <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
+          </div>
+          <b-popover
+            custom-class="mediainfo-popover"
+            target="artworkLCD"
+            triggers="hover"
+            placement="bottom"
+          >
+            <div class="content">
+              <div class="shadow-artwork">
+                <mediaitem-artwork
+                  :url="currentArtUrl"
+                  :url="currentArtUrlRaw"
+                ></mediaitem-artwork>
+              </div>
+              <div class="popover-artwork">
+                <mediaitem-artwork
+                  :size="210"
+                  :url="currentArtUrlRaw"
+                ></mediaitem-artwork>
+              </div>
+              <div class="song-name">
+                {{ mk.nowPlayingItem["attributes"]["name"] }}
+              </div>
+              <div
+                class="song-artist"
+                @click="getNowPlayingItemDetailed(`artist`)"
+              >
+                {{ mk.nowPlayingItem["attributes"]["artistName"] }}
+              </div>
+              <div
+                class="song-album"
+                @click="getNowPlayingItemDetailed(`album`)"
+              >
+                {{
+                  mk.nowPlayingItem["attributes"]["albumName"]
+                    ? mk.nowPlayingItem["attributes"]["albumName"]
+                    : ""
+                }}
+              </div>
+              <hr />
+              <div class="btn-group" style="width: 100%">
+                <button
+                  class="md-btn md-btn-small"
+                  style="width: 100%"
+                  @click="drawer.open = false; miniPlayer(true)"
+                >
+                  {{ $root.getLz("term.miniplayer") }}
                 </button>
-            </div>
-            <div class="app-chrome-item">
-                <button class="playback-button navigation" @click="navigateForward()"
-                        :title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
-                    <%- include('../svg/chevron-right.svg') %>
+                <button
+                  class="md-btn md-btn-small"
+                  style="width: 100%"
+                  @click="drawer.open = false; fullscreen(true)"
+                >
+                  {{ $root.getLz("term.fullscreenView") }}
                 </button>
+              </div>
             </div>
-            <div class="vdiv display--large" v-if="getThemeDirective('windowLayout') != 'twopanel'"></div>
-        </template>
-        <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
-            <div class="app-chrome-item display--large">
-                <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
-                        @click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
-                        v-b-tooltip.hover></button>
-                <button class="playback-button--small shuffle active" v-else :class="isDisabled() && 'disabled'"
-                        @click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
-                        v-b-tooltip.hover></button>
+          </b-popover>
+          <div class="playback-info">
+            <div class="chrome-icon-container">
+              <div
+                class="audio-type private-icon"
+                v-if="cfg.general.privateEnabled === true"
+              ></div>
+              <div
+                class="audio-type ppe-icon"
+                v-if="cfg.audio.maikiwiAudio.ciderPPE === true"
+              ></div>
             </div>
-            <div class="app-chrome-item display--large">
-                <button class="playback-button previous" @click="prevButton()" :class="isPrevDisabled() && 'disabled'"
-                        :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
+            <div
+              class="song-name"
+              :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
+            >
+              {{ mk.nowPlayingItem["attributes"]["name"] }}
+              <div
+                class="explicit-icon"
+                v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
+                style="display: inline-block"
+              ></div>
             </div>
-            <div class="app-chrome-item display--large">
-                <button class="playback-button stop" @click="mk.stop()" v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
-                        :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
-                <button class="playback-button pause" @click="mk.pause()" v-else-if="mk.isPlaying"
-                        :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
-                <button class="playback-button play" @click="mk.play()" v-else
-                        :title="$root.getLz('term.play')" v-b-tooltip.hover></button>
-            </div>
-            <div class="app-chrome-item display--large">
-                <button class="playback-button next" @click="skipToNextItem()" :class="isNextDisabled() && 'disabled'"
-                        :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
-            </div>
-            <div class="app-chrome-item display--large">
-                <button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :class="isDisabled() && 'disabled'"
-                        @click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
-                        v-b-tooltip.hover></button>
-                <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2" :class="isDisabled() && 'disabled'"
-                        v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
-                        v-b-tooltip.hover></button>
-                <button class="playback-button--small repeat active" @click="mk.repeatMode = 0" :class="isDisabled() && 'disabled'"
-                        v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
-                        v-b-tooltip.hover></button>
-            </div>
-        </template>
-    </div>
-    <div class="app-chrome--center">
-        <div class="app-chrome-item playback-controls" v-if="getThemeDirective('windowLayout') != 'twopanel'">
-            <template v-if="mkReady()">
-                <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
-                     @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
-                    <div class="artwork" id="artworkLCD">
-                        <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
-                    </div>
-                    <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="bottom">
-                        <div class="content">
-                            <div class="shadow-artwork">
-                                <mediaitem-artwork :url="currentArtUrl" :url="currentArtUrlRaw"></mediaitem-artwork>
-                            </div>
-                            <div class="popover-artwork">
-                                <mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
-                            </div>
-                            <div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
-                            <div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div>
-                            <div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
-                                {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
-                                (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
-                            </div>
-                            <hr>
-                            <div class="btn-group" style="width:100%;">
-                                <button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer") }}</button>
-                                <button class="md-btn md-btn-small" style="width: 100%;" @click="drawer.open = false; fullscreen(true)">{{ $root.getLz("term.fullscreenView") }}</button>
-                            </div>
-                        </div>
-                    </b-popover>
-                    <div class="playback-info">
-                        <div class="chrome-icon-container">
-                            <div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
-                            <div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
-                        </div>
-                        <div class="song-name"
-                             :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
-                            {{ 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">{{ convertTime(getSongProgress()) }}</p>
-                                <p style="width: auto">{{ convertTime(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);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
-                                   @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
-                                   :max="mk.currentPlaybackDuration" :value="getSongProgress()">
-                        </div>
-                    </div>
-                    <template v-if="mk.nowPlayingItem['attributes']['playParams']">
-                        <div class="actions">
-                            <button class="lcdMenu" @click="nowPlayingContextMenu"
-                                    :title="$root.getLz('term.more')" v-b-tooltip.hover>
-                                <div class="svg-icon"></div>
-                            </button>
-                        </div>
-                    </template>
-
+            <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>
-            </template>
-
-        </div>
-        <div class="app-chrome-item" v-else>
-            <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
+                  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">{{ convertTime(getSongProgress()) }}</p>
+                <p style="width: auto">
+                  {{ convertTime(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);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
+                @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
+                :max="mk.currentPlaybackDuration"
+                :value="getSongProgress()"
+              />
+            </div>
+          </div>
+          <template v-if="mk.nowPlayingItem['attributes']['playParams']">
+            <div class="actions">
+              <button
+                class="lcdMenu"
+                @click="nowPlayingContextMenu"
+                :title="$root.getLz('term.more')"
+                v-b-tooltip.hover
+              >
+                <div class="svg-icon"></div>
+              </button>
+            </div>
+          </template>
         </div>
+      </template>
     </div>
-    <div class="app-chrome--right">
-        <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
-            <div class="app-chrome-item volume display--large">
-                <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" @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 class="app-chrome-item generic">
-                <button class="playback-button--small cast"
-                        :title="$root.getLz('term.cast')"
-                        @click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
-                        v-b-tooltip.hover
-                        ></button>
-            </div>
-            <div class="app-chrome-item generic">
-                <button class="playback-button--small queue"
-                        :title="$root.getLz('term.queue')"
-                        v-b-tooltip.hover
-                        :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"
-                            :title="$root.getLz('term.lyrics')"
-                            v-b-tooltip.hover
-                            :class="{'active': drawer.panel == 'lyrics'}"
-                            @click="invokeDrawer('lyrics')"></button>
-                </template>
-                <template v-else>
-                    <button class="playback-button--small lyrics"
-                            :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
-                </template>
-            </div>
+    <div class="app-chrome-item" v-else>
+      <div class="top-nav-group">
+        <sidebar-library-item
+          :name="$root.getLz('home.title')"
+          svg-icon="./assets/feather/home.svg"
+          page="home"
+        >
+        </sidebar-library-item>
+        <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>
+    </div>
+  </div>
+  <div class="app-chrome--right">
+    <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
+      <div class="app-chrome-item volume display--large">
+        <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"
+          @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 class="app-chrome-item generic">
+        <button
+          class="playback-button--small cast"
+          :title="$root.getLz('term.cast')"
+          @click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
+          v-b-tooltip.hover
+        ></button>
+      </div>
+      <div class="app-chrome-item generic">
+        <button
+          class="playback-button--small queue"
+          :title="$root.getLz('term.queue')"
+          v-b-tooltip.hover
+          :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"
+            :title="$root.getLz('term.lyrics')"
+            v-b-tooltip.hover
+            :class="{'active': drawer.panel == 'lyrics'}"
+            @click="invokeDrawer('lyrics')"
+          ></button>
         </template>
-        <div class="app-chrome-item full-height" id="window-controls-container"
-             v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls">
-            <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>
+        <template v-else>
+          <button
+            class="playback-button--small lyrics"
+            :style="{'opacity': 0.3, 'pointer-events': 'none'}"
+          ></button>
+        </template>
+      </div>
+    </template>
+    <template v-else>
+      <div class="app-chrome-item">
+        <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 class="app-chrome-item full-height" v-else-if="platform != 'darwin' && !chrome.nativeControls">
-            <button class="app-mainmenu"
-                    @blur="mainMenuVisibility(false)"
-                    @click="mainMenuVisibility(true)"
-                    :class="{active: chrome.menuOpened}"></button>
-        </div>
+      </div>
+    </template>
+    <div
+      class="app-chrome-item full-height"
+      id="window-controls-container"
+      v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls"
+    >
+      <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
+      class="app-chrome-item full-height"
+      v-else-if="platform != 'darwin' && !chrome.nativeControls"
+    >
+      <button
+        class="app-mainmenu"
+        @blur="mainMenuVisibility(false)"
+        @click="mainMenuVisibility(true)"
+        :class="{active: chrome.menuOpened}"
+      ></button>
+    </div>
+  </div>
 </div>
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
index 2f7d013d..73973581 100644
--- a/src/renderer/views/app/sidebar.ejs
+++ b/src/renderer/views/app/sidebar.ejs
@@ -22,30 +22,34 @@
     </template>
 
     <div class="app-sidebar-content" scrollaxis="y">
-        <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" page="home">
-            </sidebar-library-item>
+        <!-- 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" 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"
+                    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>
+            </template>
         </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"
-                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>
-        </template>
 
         <div class="app-sidebar-header-text"
         @click="cfg.general.sidebarCollapsed.library = !cfg.general.sidebarCollapsed.library"