From 70f02d38e0e9ede9261e311b888db60e428890d2 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 12 Jan 2022 06:01:39 -0800
Subject: [PATCH 1/6] improvements to library-songs

---
 index.js                                      |   7 ++
 src/renderer/index.js                         |  47 +++++++-
 src/renderer/style.less                       | 107 ++++++++++++-----
 .../views/components/mediaitem-list-item.ejs  |  20 +++-
 src/renderer/views/main.ejs                   |  17 ++-
 src/renderer/views/pages/library-songs.ejs    | 112 ++++++++++++------
 src/renderer/views/svg/in-library.svg         |  13 ++
 7 files changed, 235 insertions(+), 88 deletions(-)
 create mode 100644 src/renderer/views/svg/in-library.svg

diff --git a/index.js b/index.js
index 1a8a4bab..ad570d3a 100644
--- a/index.js
+++ b/index.js
@@ -22,6 +22,13 @@ const configDefaults = {
         "followedArtists": [],
         "favoriteItems": []
     },
+    "libraryPrefs": {
+        "songs": {
+            "sort": "name",
+            "sortOrder": "asc",
+            "size": "normal"
+        }
+    },
     "audio": {
         "quality": "990",
         "seamless_audio": true,
diff --git a/src/renderer/index.js b/src/renderer/index.js
index e7ca0999..8d134733 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -658,7 +658,7 @@ const app = new Vue({
             })
         },
         select_hasMediaItem(id) {
-            let found = this.selectedMediaItems.find(item => item.guid == id)
+            let found = this.selectedMediaItems.find(item => item.id == id)
             if (found) {
                 return true
             } else {
@@ -1306,13 +1306,14 @@ const app = new Vue({
         },
         searchLibrarySongs() {
             let self = this
+            let prefs = this.cfg.libraryPrefs.songs
 
             function sortSongs() {
                 // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending or ascending order based on alphabetical order and numeric order
                 // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
                 self.library.songs.displayListing.sort((a, b) => {
-                    let aa = a.attributes[self.library.songs.sorting]
-                    let bb = b.attributes[self.library.songs.sorting]
+                    let aa = a.attributes[prefs.sort]
+                    let bb = b.attributes[prefs.sort]
                     if (self.library.songs.sorting == "genre") {
                         aa = a.attributes.genreNames[0]
                         bb = b.attributes.genreNames[0]
@@ -1323,13 +1324,13 @@ const app = new Vue({
                     if (bb == null) {
                         bb = ""
                     }
-                    if (self.library.songs.sortOrder == "asc") {
+                    if (prefs.sortOrder == "asc") {
                         if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
                             return aa - bb
                         } else {
                             return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
                         }
-                    } else if (self.library.songs.sortOrder == "desc") {
+                    } else if (prefs.sortOrder == "desc") {
                         if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
                             return bb - aa
                         } else {
@@ -1551,7 +1552,6 @@ const app = new Vue({
             this.library.songs.downloadState = 1
             this.library.downloadNotification.show = true
             this.library.downloadNotification.message = "Updating library songs..."
-
             function downloadChunk() {
                 const params = {
                     "include[library-songs]": "catalog,artists,albums",
@@ -3077,6 +3077,41 @@ const app = new Vue({
     }
 })
 
+Vue.component('animated-number', {
+
+    template:"<div style='display: inline-block;'>{{ displayNumber }}</div>",
+    props: {'number': { default:0 }},
+
+    data () {
+        return {
+            displayNumber:0,
+            interval:false
+        }
+    },
+
+    ready () {
+        this.displayNumber = this.number ? this.number : 0;
+    },
+
+    watch: {
+        number () {
+            clearInterval(this.interval);
+
+            if(this.number == this.displayNumber) {
+                return;
+            }
+
+            this.interval = window.setInterval(() => {
+                if(this.displayNumber != this.number) {
+                    var change = (this.number - this.displayNumber) / 10;
+                    change = change >= 0 ? Math.ceil(change) : Math.floor(change);
+                    this.displayNumber = this.displayNumber + change;
+                }
+            }, 20);
+        }
+    }
+})
+
 Vue.component('sidebar-library-item', {
     template: '#sidebar-library-item',
     props: {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 1a278f0c..aea78420 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -496,6 +496,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   background: rgb(0 0 0 / 15%);
   flex-direction: column;
   padding: 20px 0px;
+
+  &.libraryNotification {
+    flex-direction: row;
+    padding: 0px;
+    .message {
+      flex-grow: 1;
+    }
+    .spinner {
+      width: 46px;
+      height: 30px;
+      margin-left: 1em;
+    }
+  }
 }
 
 .app-sidebar-content {
@@ -1843,24 +1856,29 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .md-select {
-  padding: 5px 10px;
-  font-size: 1em;
+  width: 100%;
+  padding: 6px;
+  border-radius: 6px;
+  border: 1px solid rgba(200, 200, 200, 0.1);
   font-family: inherit;
-  border-radius: 4px;
-  border: 1px solid rgb(100 100 100 / 35%);
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
-  background: #363636;
-  color: #eee;
-}
+  font-size: 14px;
+  background: rgba(100, 100, 100, 0.25);
+  color: #c8c8c8;
+  font-weight: 500;
 
-.md-select:focus {
-  outline: none;
-}
+  option {
+    font-size: 1em;
+    font-family: inherit;
+    padding: 8px 16px;
+  }
 
-.md-select > option {
-  font-size: 1em;
-  font-family: inherit;
-  padding: 8px 16px;
+  optgroup {
+    background: #2c2c2c;
+  }
+
+  &:focus {
+    outline: solid 1px var(--selected);
+  }
 }
 
 .sidebar-playlist {
@@ -2238,6 +2256,27 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+// Library - Songs page
+.library-page {
+  padding: 0px;
+  .library-header {
+    position: sticky;
+    top: 0;
+    left: 0;
+    border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+    z-index: 6;
+    background: black;
+    padding: 0px 2em;
+    backdrop-filter: blur(32px);
+    background: rgba(24, 24, 24, 0.15);
+    top: var(--navigationBarHeight);
+  }
+
+  .well {
+    margin: 2em;
+  }
+}
+
 /* Album / Playlist Page */
 .playlist-page {
   --bgColor: transparent;
@@ -2835,11 +2874,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   .info-rect {
-    width: 100%;
     height: 100%;
     display: flex;
     flex-flow: column;
     justify-content: center;
+    flex-grow: 1;
   }
 
   .title {
@@ -2848,7 +2887,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   .subtitle {
     width: 90%;
-    font-size: 12px;
+    font-size: .8em;
     opacity: 0.7;
   }
 
@@ -2870,21 +2909,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     justify-content: center;
   }
 
-  .content-rating {
-    text-transform: uppercase;
-    font-size: 10px;
-    border-radius: 3px;
-    background: rgb(200 200 200 / 15%);
-    width: 60px;
-    text-align: center;
-    padding: 5px;
-    margin-right: 12px;
-    flex: 0 0 auto;
-    font-weight: 500;
-    color: #ccc;
+  .explicit-icon {
+    background-image: url("./assets/explicit.svg");
+    height: 12px;
+    width: 36px;
+    filter: contrast(0);
+    background-repeat: no-repeat;
   }
 
   .isLibrary {
+    flex: 0 0 auto;
+    width: 40px;
+    text-align: center;
     button {
       appearance: none;
       border: 0px;
@@ -2913,6 +2949,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     box-shadow: var(--mediaItemShadow);
     color: #eee;
   }
+
+//  list item compact
+  &.compact {
+    height: 40px;
+    font-size: 12px;
+    .artwork {
+      display: none;
+    }
+
+    .info-rect {
+      padding-left: 1em;
+    }
+  }
 }
 
 /* mediaitem-hrect */
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index bd6f27fb..16764e82 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -8,7 +8,7 @@
          :data-guid="guid"
          :data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
          class="cd-mediaitem-list-item"
-         :class="{'mediaitem-selected': app.select_hasMediaItem(guid)}">
+         :class="[{'mediaitem-selected': app.select_hasMediaItem(item.id)}, addClasses]">
         <template v-if="isVisible">
             <div class="isLibrary" v-if="showLibraryStatus == true">
                 <button @click="addToLibrary()"
@@ -44,9 +44,7 @@
                     </template>
                 </div>
             </div>
-            <div class="content-rating" v-if="item.attributes.contentRating" @dblclick="app.routeView(item)">
-                {{ item.attributes.contentRating }}
-            </div>
+            <div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"></div>
             <template v-if="showMetaData == true" @dblclick="app.routeView(item)">
                 <div class="metainfo">
                     {{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString()
@@ -72,7 +70,8 @@
                 addedToLibrary: false,
                 guid: this.uuidv4(),
                 app: this.$root,
-                displayDuration: true
+                displayDuration: true,
+                addClasses: {}
             }
         },
         props: {
@@ -84,14 +83,25 @@
             'show-meta-data': {type: Boolean, default: false},
             'show-duration': {type: Boolean, default: true},
             'contextExt': {type: Object, required: false},
+            'class-list': {type: String, required: false, default: ""},
         },
         mounted() {
             let duration = this.item.attributes.durationInMillis ?? 0
             if (duration == 0 || !this.showDuration) {
                 this.displayDuration = false
             }
+            this.getClasses()
         },
         methods: {
+            getClasses() {
+                if(this.classList) {
+                    this.addClasses = {}
+                    let classList = this.classList.split(' ')
+                    for(let i = 0; i < classList.length; i++) {
+                        this.addClasses[classList[i]] = true
+                    }
+                }
+            },
             dragStart(evt) {
                 evt.dataTransfer.setData('text/plain', JSON.stringify({
                     type: this.item.attributes.playParams.kind ?? this.item.type,
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 8dc07f00..4b711529 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -269,14 +269,8 @@
                             </div>
                         </button>
                     </div>
-                    <div class="app-sidebar-notification" v-if="library.downloadNotification.show">
-                        <div>{{ library.downloadNotification.message }}</div>
-                        <div>{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }}
-                        </div>
-                        <div style="width: 100%">
-                            <progress style="width: 80%;" :value="library.downloadNotification.progress"
-                                      :max="library.downloadNotification.total"></progress>
-                        </div>
+                    <div class="app-sidebar-notification libraryNotification" v-if="library.downloadNotification.show">
+                        <div class="message">{{ library.downloadNotification.message }} ({{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }})</div>
                     </div>
                 </div>
                 <div id="app-content">
@@ -427,7 +421,9 @@
                     </transition>
                     <!-- Library - Songs -->
                     <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
-                        <%- include('pages/library-songs') %>
+                        <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);">
@@ -528,6 +524,9 @@
     </div>
 </div>
 
+<!-- Library - Songs -->
+<%- include('pages/library-songs') %>
+
 <!-- Media Item Artwork-->
 <%- include("components/mediaitem-artwork"); %>
 <!-- Browse -->
diff --git a/src/renderer/views/pages/library-songs.ejs b/src/renderer/views/pages/library-songs.ejs
index cb2501ab..76d891d2 100644
--- a/src/renderer/views/pages/library-songs.ejs
+++ b/src/renderer/views/pages/library-songs.ejs
@@ -1,46 +1,80 @@
-<template v-if="page == 'library-songs'">
-    <div class="content-inner">
-        <div class="row">
-            <div class="col" style="padding:0;">
-                <h1 class="header-text">Songs</h1>
-            </div>
-            <div class="col-auto">
-                <button v-if="library.songs.downloadState == 2" @click="getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col" style="padding:0;">
-                <div class="search-input-container" style="width:100%;margin: 16px 0;">
-                    <div class="search-input--icon"></div>
-                    <input type="search"
-                           style="width:100%;"
-                           spellcheck="false"
-                           placeholder="Search..."
-                           @input="searchLibrarySongs"
-                           v-model="library.songs.search" class="search-input">
+
+
+<script type="text/x-template" id="cider-library-songs">
+    <div class="content-inner library-page">
+        <div class="library-header">
+            <div class="row">
+                <div class="col" style="padding:0;">
+                    <div class="search-input-container" style="width:100%;margin: 16px 0;">
+                        <div class="search-input--icon"></div>
+                        <input type="search"
+                               style="width:100%;"
+                               spellcheck="false"
+                               placeholder="Search..."
+                               @input="$root.searchLibrarySongs"
+                               v-model="library.songs.search" class="search-input">
+                    </div>
                 </div>
-            </div>
-            <div class="col-auto flex-center">
-                <div class="row">
-                    <div class="col">
-                        <select class="md-select" v-model="library.songs.sorting" @change="searchLibrarySongs()">
-                            <optgroup label="Sort By">
-                                <option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option>
-                            </optgroup>
-                        </select>
-                    </div>
-                    <div class="col">
-                        <select class="md-select" v-model="library.songs.sortOrder" @change="searchLibrarySongs()">
-                            <optgroup label="Sort Order">
-                                <option value="asc">Ascending</option>
-                                <option value="desc">Descending</option>
-                            </optgroup>
-                        </select>
+                <div class="col-auto flex-center">
+                    <div class="row">
+                        <div class="col">
+                            <select class="md-select" v-model="prefs.sort" @change="$root.searchLibrarySongs()">
+                                <optgroup label="Sort By">
+                                    <option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option>
+                                </optgroup>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <select class="md-select" v-model="prefs.sortOrder" @change="$root.searchLibrarySongs()">
+                                <optgroup label="Sort Order">
+                                    <option value="asc">Ascending</option>
+                                    <option value="desc">Descending</option>
+                                </optgroup>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <select class="md-select" v-model="prefs.size" @change="$root.searchLibrarySongs()">
+                                <optgroup label="Size">
+                                    <option value="normal">Normal</option>
+                                    <option value="compact">Compact</option>
+                                </optgroup>
+                            </select>
+                        </div>
                     </div>
                 </div>
+                <div class="col-auto flex-center">
+                    <button v-if="library.songs.downloadState == 2" @click="$root.getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+                    <button v-else class="reload-btn" style="opacity: 0.8;pointer-events: none">
+                        <div class="spinner"></div>
+                    </button>
+                </div>
             </div>
         </div>
+
         <div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
-        <mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
+        <div class="well" :key="1" v-if="prefs.size == 'compact'">
+            <mediaitem-list-item class-list="compact" :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
+        </div>
+        <div class="well" :key="2" v-else>
+            <mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
+        </div>
     </div>
-</template>
\ No newline at end of file
+</script>
+
+<script>
+    Vue.component('cider-library-songs', {
+        template: '#cider-library-songs',
+        data: function () {
+            return {
+                library: this.$root.library,
+                mediaItemSize: "compact",
+                prefs: this.$root.cfg.libraryPrefs.songs
+            }
+        },
+        methods: {
+            sayHello: function () {
+                alert('Hello world!');
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/svg/in-library.svg b/src/renderer/views/svg/in-library.svg
new file mode 100644
index 00000000..d5806ea9
--- /dev/null
+++ b/src/renderer/views/svg/in-library.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 214 214" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-79.4309,9.53659)">
+        <path d="M250.163,76.146C250.163,52.589 231.037,33.463 207.48,33.463L122.114,33.463C98.556,33.463 79.431,52.589 79.431,76.146L79.431,161.512C79.431,185.07 98.556,204.195 122.114,204.195L207.48,204.195C231.037,204.195 250.163,185.07 250.163,161.512L250.163,76.146ZM235.163,83.646C235.163,64.228 219.398,48.463 199.98,48.463L129.614,48.463C110.196,48.463 94.431,64.228 94.431,83.646L94.431,154.012C94.431,173.43 110.196,189.195 129.614,189.195L199.98,189.195C219.398,189.195 235.163,173.43 235.163,154.012L235.163,83.646Z" style="fill:currentColor;"/>
+    </g>
+    <g transform="matrix(0.906286,0,0,0.906286,-20.9871,-22.3274)">
+        <path d="M250.163,76.146C250.163,52.589 231.037,33.463 207.48,33.463L122.114,33.463C98.556,33.463 79.431,52.589 79.431,76.146L79.431,161.512C79.431,185.07 98.556,204.195 122.114,204.195L207.48,204.195C231.037,204.195 250.163,185.07 250.163,161.512L250.163,76.146Z" style="fill:white;"/>
+    </g>
+    <g transform="matrix(0.333526,0,0,0.333526,43.0167,0)">
+        <path d="M511.8,130.7C511.8,115 510.5,99.3 506.7,84C500,56 484,34.7 460.2,19C448,11 434.5,6.1 420.1,3.5C409.1,1.5 397.9,0.6 386.8,0.3L384.1,0L127.6,0C124.4,0.3 121.1,0.4 117.9,0.6C102,1.5 86.2,3.2 71.1,9.2C42.7,20.4 22.1,40.1 10.1,68.4C5.9,78 3.8,88.2 2.3,98.5C1.1,106.8 0.4,115.3 0.1,123.7L-0.1,125.7L-0.1,386.4C0.1,389.4 0.2,392.4 0.4,395.4C1.5,412.8 3.7,430.1 11.1,446.1C24.9,476.4 48.2,496.3 80.1,505.8C89,508.6 98.3,509.8 107.7,510.6C119.5,511.8 131.4,511.9 143.2,511.9L378.5,511.9C389.7,511.9 400.8,511.2 412,509.7C429.6,507.5 446.1,502.3 461,492.5C478.9,480.7 492.4,465 501.1,445.4C505.1,436.4 507.3,426.8 509,417.2C511.4,402.8 511.9,388.2 511.9,373.6C511.8,292.6 511.9,211.6 511.8,130.6L511.8,130.7ZM374.8,93.4L374.8,337.6C374.8,346.5 373.6,355.3 369.6,363.3C363.4,375.9 353.4,383.8 340,387.6C332.6,389.8 324.9,390.9 317.2,391.3C297,392.3 279.4,378.6 275.8,358.6C272.7,342.1 280.6,323.9 298,315.4C304.8,312.1 312.2,310.1 319.7,308.6C327.8,306.9 335.9,305.3 343.9,303.4C349.8,302.1 353.6,298.5 354.8,292.4L355.2,288.3L355.2,172.1L354.6,168.2C353.8,165 351.4,163 348.1,163.2C344.7,163.4 341.4,163.9 338,164.6C321.7,167.8 305.5,171 289.3,174.3L210.4,190.2L209.3,190.5C203.4,192.2 201.3,194.8 201,201L201,203.7C200.9,259.2 201,314.7 200.9,370.2C200.9,379.2 199.9,388 196.3,396.4C190.4,410.1 179.9,418.7 165.7,422.7C158.2,424.9 150.5,426.1 142.7,426.4C122.3,427.2 105.3,413.6 101.8,393.5C98.8,376.2 106.7,357.5 126.4,349.2C134.1,346 142,344.3 150.1,342.6C156.2,341.4 162.4,340.1 168.4,338.9C176.6,337.2 180.8,332 181.2,323.7L181.2,131C181.2,128.3 181.5,125.7 182.1,123.1C183.6,117 187.9,113.5 193.8,112.1C199.2,110.7 204.8,109.7 210.3,108.5C226,105.3 241.5,102.2 257.2,99.1L305.6,89.3C319.9,86.5 334.2,83.6 348.5,80.7C353.2,79.8 357.9,78.8 362.7,78.4C369.3,77.8 373.9,82 374.5,88.7C374.7,90.3 374.8,91.9 374.8,93.4Z" style="fill:currentColor;fill-rule:nonzero;"/>
+    </g>
+</svg>

From 320a90e4b24dc5bf7182383449dc79a01e3c3059 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Wed, 12 Jan 2022 21:13:59 +0700
Subject: [PATCH 2/6] make fs bg more vivid

---
 src/main/lastfm.js      | 1 -
 src/renderer/style.less | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/main/lastfm.js b/src/main/lastfm.js
index 0c453797..92f47817 100644
--- a/src/main/lastfm.js
+++ b/src/main/lastfm.js
@@ -61,7 +61,6 @@ const lfm = {
     },
 
     scrobbleSong: async function (attributes) {
-        console.log((app.cfg.get('lastfm.scrobble_after') / 100))
         await new Promise(resolve => setTimeout(resolve, Math.round(attributes.durationInMillis * (app.cfg.get('lastfm.scrobble_after') / 100))));
         const currentAttributes = app.media;
         
diff --git a/src/renderer/style.less b/src/renderer/style.less
index aea78420..11c45675 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -3697,7 +3697,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       }
       
       .bg-artwork-container .bg-artwork {
-        filter: brightness(80%) saturate(69%) blur(180px) contrast(0.8) opacity(0.8);
+        filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
       }
 
       .no-animation{

From fab2e1ba3361968a2c4412261e4c123462bc2860 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 12 Jan 2022 07:16:29 -0800
Subject: [PATCH 3/6] improvements for small windows

---
 src/renderer/index.js                         |   2 +-
 src/renderer/less/compact.less                |  50 +
 src/renderer/style.less                       | 859 +++++++++---------
 .../views/components/mediaitem-list-item.ejs  |   3 +-
 src/renderer/views/main.ejs                   |  50 +-
 5 files changed, 532 insertions(+), 432 deletions(-)
 create mode 100644 src/renderer/less/compact.less

diff --git a/src/renderer/index.js b/src/renderer/index.js
index 8d134733..1ef1f225 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -658,7 +658,7 @@ const app = new Vue({
             })
         },
         select_hasMediaItem(id) {
-            let found = this.selectedMediaItems.find(item => item.id == id)
+            let found = this.selectedMediaItems.find(item => item.guid == id)
             if (found) {
                 return true
             } else {
diff --git a/src/renderer/less/compact.less b/src/renderer/less/compact.less
new file mode 100644
index 00000000..5e90b63d
--- /dev/null
+++ b/src/renderer/less/compact.less
@@ -0,0 +1,50 @@
+.app-sidebar-content.compact {
+  padding:0px;
+
+
+
+  .app-sidebar-header-text {
+    padding: 6px 10px;
+    margin: 0px;
+  }
+  .app-sidebar-item {
+    display: flex;
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 13px;
+    margin: 0px;
+    border: 1px solid transparent;
+    border-radius: 0px;
+    transition: unset;
+    transform: unset;
+
+    &:active {
+      background: var(--selected-click);
+    }
+
+    &::after {
+      display: none;
+    }
+
+    &.active {
+      background: var(--keyColor-disabled);
+    }
+  }
+  .sidebar-icon {
+    width: 14px;
+    height: 16px;
+    margin-right: 8px;
+  }
+
+  .folder-body {
+    border-radius: 0px;
+    padding: 0px;
+  }
+}
+
+// if page width is less than 951px
+@media (max-width: 951px) {
+  .content-inner {
+    zoom: 0.8;
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 11c45675..1ce5f974 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -332,650 +332,663 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   left: 0;
   padding: 32px;
   width: 100%;
+  transition: zoom 1s;
+  zoom: 1;
 }
 
 .content-inner.centered {
-  height: 100%;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
+height: 100%;
+display: flex;
+flex-flow: column;
+justify-content: center;
+align-items: center;
 }
 
 .app-drawer {
-  width: 300px;
-  flex: 0 0 auto;
+width: 300px;
+flex: 0 0 auto;
+position: absolute;
+right: 16px;
+top: 3%;
+background: #1c1c1c8f;
+border-radius: 12px;
+z-index: 9;
+height: 94%;
+backdrop-filter: blur(40px) saturate(180%);
+box-shadow: var(--ciderShadow-Generic);
+overflow: hidden;
+
+.bgArtworkMaterial {
+  display: none;
   position: absolute;
-  right: 16px;
-  top: 3%;
-  background: #1c1c1c8f;
-  border-radius: 12px;
-  z-index: 9;
-  height: 94%;
-  backdrop-filter: blur(40px) saturate(180%);
-  box-shadow: var(--ciderShadow-Generic);
-  overflow: hidden;
+  width: 100%;
+  height: 100%;
 
-  .bgArtworkMaterial {
-    display: none;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-
-    .bg-artwork-container .bg-artwork {
-      filter: brightness(80%) blur(180px) saturate(180%) contrast(1);
-    }
+  .bg-artwork-container .bg-artwork {
+    filter: brightness(80%) blur(180px) saturate(180%) contrast(1);
   }
 }
+}
 
 .search-input-container {
-  position: relative;
+position: relative;
 }
 
 .search-input {
-  width: 100%;
-  padding: 6px;
-  border-radius: 6px;
-  border: 1px solid rgb(200 200 200 / 10%);
-  font-family: inherit;
-  font-size: 14px;
-  background: rgb(100 100 100 / 25%);
-  color: rgb(200 200 200);
-  font-weight: 500;
-  padding-left: 32px;
-  position: relative;
-  filter: contrast(0.1);
+width: 100%;
+padding: 6px;
+border-radius: 6px;
+border: 1px solid rgb(200 200 200 / 10%);
+font-family: inherit;
+font-size: 14px;
+background: rgb(100 100 100 / 25%);
+color: rgb(200 200 200);
+font-weight: 500;
+padding-left: 32px;
+position: relative;
+filter: contrast(0.1);
 }
 
 .search-input:focus {
-  outline: none;
-  border-bottom: 1px solid var(--keyColor);
+outline: none;
+border-bottom: 1px solid var(--keyColor);
 }
 
 .search-input--icon {
-  content: '';
-  width: 100%;
-  height: 100%;
-  display: block;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  background-image: url('assets/search.svg');
-  background-position: 10px;
-  background-repeat: no-repeat;
-  background-size: 12px;
-  pointer-events: none;
-  opacity: 0.55;
+content: '';
+width: 100%;
+height: 100%;
+display: block;
+position: absolute;
+top: 0px;
+left: 0px;
+background-image: url('assets/search.svg');
+background-position: 10px;
+background-repeat: no-repeat;
+background-size: 12px;
+pointer-events: none;
+opacity: 0.55;
 }
 
 .app-sidebar-header {
-  font-size: 14px;
-  padding: 11px;
-  font-weight: 600;
+font-size: 14px;
+padding: 11px;
+font-weight: 600;
 }
 
 .app-sidebar-header-text {
-  font-size: 11px;
-  margin: 6px 3px;
-  font-weight: 600;
-  opacity: 0.50;
+font-size: 11px;
+margin: 6px 3px;
+font-weight: 600;
+opacity: 0.50;
 }
 
 .app-sidebar-footer {
-  padding: 11px;
+padding: 11px;
+
+  .app-playback-controls {
+    .control-buttons {
+      display: flex;
+      justify-content: center;
+      align-content: center;
+    }
+    .volume {
+      display: flex;
+    }
+  }
 }
 
 .app-sidebar-button {
-  width: 100%;
-  padding: 0px;
-  font-family: inherit;
-  display: flex;
-  border-radius: 6px;
-  border: 1px solid rgb(200 200 200 / 5%);
-  background: rgb(100 100 100 / 25%);
-  color: #eee;
-  font-weight: 500;
-  align-items: center;
+width: 100%;
+padding: 0px;
+font-family: inherit;
+display: flex;
+border-radius: 6px;
+border: 1px solid rgb(200 200 200 / 5%);
+background: rgb(100 100 100 / 25%);
+color: #eee;
+font-weight: 500;
+align-items: center;
 
-  &.active {
-    background: rgb(200 200 200 / 15%);
-    animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
-  }
+&.active {
+  background: rgb(200 200 200 / 15%);
+  animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
+}
 }
 
 @keyframes usermenuBtnClick {
-  0% {
-    transform: translateY(0px);
-  }
+0% {
+  transform: translateY(0px);
+}
 
-  50% {
-    transform: translateY(-6px);
-  }
+50% {
+  transform: translateY(-6px);
+}
 
-  100% {
-    transform: translateY(0px);
-  }
+100% {
+  transform: translateY(0px);
+}
 }
 
 .app-sidebar-button > .sidebar-user-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 100%;
-  background-image: var(--artwork);
-  margin: 10px;
-  flex: 0 0 auto;
-  box-shadow: var(--mediaItemShadow);
-  background-size: contain;
+width: 32px;
+height: 32px;
+border-radius: 100%;
+background-image: var(--artwork);
+margin: 10px;
+flex: 0 0 auto;
+box-shadow: var(--mediaItemShadow);
+background-size: contain;
 }
 
 .app-sidebar-button > .sidebar-user-text {
-  width: 100%;
-  display: flex;
-  font-size: 14px;
-  flex-direction: column;
+width: 100%;
+display: flex;
+font-size: 14px;
+flex-direction: column;
 }
 
 .app-sidebar-button > .sidebar-user-text .fullname {
-  text-align: left;
+text-align: left;
 }
 
 .app-sidebar-button > .sidebar-user-text .handle-text {
-  font-size: 12px;
-  opacity: 0.7;
-  text-align: left;
+font-size: 12px;
+opacity: 0.7;
+text-align: left;
 }
 
 .app-sidebar-notification {
-  text-align: center;
-  font-size: 12px;
-  min-height: 60px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid rgb(200 200 200 / 15%);
-  background: rgb(0 0 0 / 15%);
-  flex-direction: column;
-  padding: 20px 0px;
+text-align: center;
+font-size: 12px;
+min-height: 60px;
+display: flex;
+justify-content: center;
+align-items: center;
+border-top: 1px solid rgb(200 200 200 / 15%);
+background: rgb(0 0 0 / 15%);
+flex-direction: column;
+padding: 20px 0px;
 
-  &.libraryNotification {
-    flex-direction: row;
-    padding: 0px;
-    .message {
-      flex-grow: 1;
-    }
-    .spinner {
-      width: 46px;
-      height: 30px;
-      margin-left: 1em;
-    }
+&.libraryNotification {
+  flex-direction: row;
+  padding: 0px;
+  .message {
+    flex-grow: 1;
   }
+  .spinner {
+    width: 46px;
+    height: 30px;
+    margin-left: 1em;
+  }
+}
 }
 
 .app-sidebar-content {
-  padding: 8px;
-  overflow-y: scroll;
-  overflow-y: overlay;
-  height: 100%;
+padding: 8px;
+overflow-y: scroll;
+overflow-y: overlay;
+height: 100%;
 }
 
 #cmenu() {
-  .container {
-    position: absolute;
-    width: 100%;
-    padding: 10px;
-    z-index: 1;
-  }
+.container {
+  position: absolute;
+  width: 100%;
+  padding: 10px;
+  z-index: 1;
+}
 
-  .body {
-    background: #242424;
-    padding: 6px;
-    border-radius: 6px;
-    width: 100%;
-    box-shadow: var(--ciderShadow-Generic);
-  }
+.body {
+  background: #242424;
+  padding: 6px;
+  border-radius: 6px;
+  width: 100%;
+  box-shadow: var(--ciderShadow-Generic);
+}
 
-  .item {
-    background: transparent;
-    display: block;
-    width: 100%;
-    text-align: left;
-    color: #eee;
-    font-family: inherit;
-    font-size: 15px;
-    padding: 8px 12px;
-    border: 0px;
-    appearance: none;
-    border-radius: 6px;
-    margin: 2px 0px;
+.item {
+  background: transparent;
+  display: block;
+  width: 100%;
+  text-align: left;
+  color: #eee;
+  font-family: inherit;
+  font-size: 15px;
+  padding: 8px 12px;
+  border: 0px;
+  appearance: none;
+  border-radius: 6px;
+  margin: 2px 0px;
 
-    &:hover {
-      background: var(--keyColor);
-    }
+  &:hover {
+    background: var(--keyColor);
   }
 }
+}
 
 .search-hints-container {
-  top: 44px;
-  #cmenu.container();
+top: 44px;
+#cmenu.container();
 
-  .search-hints {
-    #cmenu.body();
+.search-hints {
+  #cmenu.body();
 
-    .search-hint {
-      #cmenu.item();
-    }
+  .search-hint {
+    #cmenu.item();
   }
 }
+}
 
 .usermenu-container {
-  bottom: 66px;
-  #cmenu.container();
+bottom: 66px;
+#cmenu.container();
 
-  .usermenu-body {
-    #cmenu.body();
+.usermenu-body {
+  #cmenu.body();
 
-    .usermenu-item {
-      #cmenu.item();
-    }
+  .usermenu-item {
+    #cmenu.item();
   }
 }
+}
 
 .context-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+background: rgba(0, 0, 0, 0.0);
+z-index: 100;
+
+.context-menu-item {
+  background: transparent;
+  display: flex;
   width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.0);
-  z-index: 100;
+  text-align: left;
+  color: #eee;
+  font-family: inherit;
+  font-size: 14px;
+  padding: 6px 12px;
+  border: 0px;
+  appearance: none;
+  border-radius: 6px;
+  margin: 2px 0px;
 
-  .context-menu-item {
-    background: transparent;
-    display: flex;
-    width: 100%;
-    text-align: left;
-    color: #eee;
-    font-family: inherit;
-    font-size: 14px;
-    padding: 6px 12px;
-    border: 0px;
-    appearance: none;
-    border-radius: 6px;
-    margin: 2px 0px;
-
-    &:hover {
-      background: var(--selected);
-      cursor: pointer;
-    }
-
-    &:active {
-      background: var(--selected-click);
-    }
+  &:hover {
+    background: var(--selected);
+    cursor: pointer;
   }
 
-  .context-menu-body {
-    background: #242424;
-    padding: 6px;
-    border-radius: 6px;
-    box-shadow: var(--ciderShadow-Generic);
-
-    &.context-menu-open {
-      animation-duration: .10s;
-      animation-name: contextMenuIn;
-      animation-iteration-count: 1;
-      animation-easings: var(--appleEase);
-    }
-
-    &.context-menu-close {
-      animation-duration: .10s;
-      animation-name: contextMenuOut;
-      animation-iteration-count: 1;
-      animation-easings: var(--appleEase);
-    }
+  &:active {
+    background: var(--selected-click);
   }
 }
 
+.context-menu-body {
+  background: #242424;
+  padding: 6px;
+  border-radius: 6px;
+  box-shadow: var(--ciderShadow-Generic);
+
+  &.context-menu-open {
+    animation-duration: .10s;
+    animation-name: contextMenuIn;
+    animation-iteration-count: 1;
+    animation-easings: var(--appleEase);
+  }
+
+  &.context-menu-close {
+    animation-duration: .10s;
+    animation-name: contextMenuOut;
+    animation-iteration-count: 1;
+    animation-easings: var(--appleEase);
+  }
+}
+}
+
 @keyframes contextMenuIn {
-  0% {
-    transform: scale(0.9);
-    opacity: 0;
-  }
+0% {
+  transform: scale(0.9);
+  opacity: 0;
+}
 
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
+100% {
+  transform: scale(1);
+  opacity: 1;
+}
 }
 
 @keyframes contextMenuOut {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
+0% {
+  transform: scale(1);
+  opacity: 1;
+}
 
-  100% {
-    transform: scale(0.9);
-    opacity: 0;
-  }
+100% {
+  transform: scale(0.9);
+  opacity: 0;
+}
 }
 
 .hidden-opacity {
-  opacity: 0;
-  height: 0px;
-  width: 0px;
-  margin: 0px;
+opacity: 0;
+height: 0px;
+width: 0px;
+margin: 0px;
 }
 
 .spinner {
-  background-image: url("assets/spinner.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  width: 50px;
-  height: 50px;
-  display: inline-block;
+background-image: url("assets/spinner.svg");
+background-position: center;
+background-repeat: no-repeat;
+background-size: contain;
+width: 50px;
+height: 50px;
+display: inline-block;
 }
 
 .app-sidebar-content::-webkit-scrollbar {
-  display: none;
+display: none;
 }
 
 .app-sidebar-content:hover::-webkit-scrollbar {
-  display: initial;
+display: initial;
 }
 
 .app-sidebar-item {
-  display: flex;
-  width: 100%;
-  padding: 8px 12px;
-  font-weight: 400;
-  font-family: inherit;
-  font-size: 14px;
-  margin: 6px 0px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: transparent;
-  color: #eee;
-  transition: transform .1s;
-  text-align: left;
+display: flex;
+width: 100%;
+padding: 8px 12px;
+font-weight: 400;
+font-family: inherit;
+font-size: 14px;
+margin: 6px 0px;
+border: 1px solid transparent;
+border-radius: 6px;
+background: transparent;
+color: #eee;
+transition: transform .1s;
+text-align: left;
 
-  &.app-sidebar-item-playlist {
-    -webkit-user-drag: element;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+&.app-sidebar-item-playlist {
+  -webkit-user-drag: element;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 }
 
 .app-sidebar-item:hover {
-  border: 1px solid rgb(200 200 200 / 5%);
-  background: rgb(200 200 200 / 15%);
+border: 1px solid rgb(200 200 200 / 5%);
+background: rgb(200 200 200 / 15%);
 }
 
 .app-sidebar-item:active {
-  border: 1px solid rgb(200 200 200 / 5%);
-  background: rgb(200 200 200 / 15%);
-  transform: scale(0.98);
-  transition: transform 0s;
+border: 1px solid rgb(200 200 200 / 5%);
+background: rgb(200 200 200 / 15%);
+transform: scale(0.98);
+transition: transform 0s;
 }
 
 .app-sidebar-item.active {
-  border: 1px solid rgb(200 200 200 / 5%);
-  background: rgb(200 200 200 / 15%);
-  transform: scale(1);
-  transition: transform 0s;
+border: 1px solid rgb(200 200 200 / 5%);
+background: rgb(200 200 200 / 15%);
+transform: scale(1);
+transition: transform 0s;
 }
 
 .app-sidebar-item.active::after {
-  content: '';
-  width: 4px;
-  height: 16px;
-  display: block;
-  position: absolute;
-  top: calc(100% - 72%);
-  border-radius: 10px;
-  left: 0px;
-  background: var(--keyColor);
+content: '';
+width: 4px;
+height: 16px;
+display: block;
+position: absolute;
+top: calc(100% - 72%);
+border-radius: 10px;
+left: 0px;
+background: var(--keyColor);
 }
 
 .app-chrome {
-  background: var(--color1);
-  width: 100%;
-  height: var(--chromeHeight);
-  display: flex;
-  flex-direction: row;
-  -webkit-app-region: drag;
+background: var(--color1);
+width: 100%;
+height: var(--chromeHeight);
+display: flex;
+flex-direction: row;
+-webkit-app-region: drag;
 }
 
 .mv-chrome {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 90%;
-  height: 55px;
-  -webkit-app-region: drag;
+position: absolute;
+top: 0;
+right: 0;
+width: 90%;
+height: 55px;
+-webkit-app-region: drag;
 }
 
 .app-chrome .app-chrome--left,
 .app-chrome .app-chrome--center,
 .app-chrome .app-chrome--right {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+height: 100%;
+width: 100%;
+display: flex;
+justify-content: center;
+align-items: center;
 }
 
 .app-chrome .app-chrome--left {
-  width: 30%;
-  justify-content: left;
+width: 30%;
+justify-content: left;
 }
 
 .app-chrome .app-chrome--center {
-  width: 100%;
+width: 100%;
 }
 
 .app-chrome .app-chrome--right {
-  width: 30%;
-  justify-content: right;
+width: 30%;
+justify-content: right;
 }
 
 .app-chrome .app-chrome-item {
-  height: 100%;
-  width: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  -webkit-app-region: no-drag;
-  height: auto;
+height: 100%;
+width: auto;
+display: flex;
+justify-content: center;
+align-items: center;
+-webkit-app-region: no-drag;
+height: auto;
 }
 
 .app-chrome .app-chrome-item.generic {
-  width: 50px;
-  opacity: 0.70;
+width: 50px;
+opacity: 0.70;
 }
 
 .app-chrome .app-chrome-item.volume {
-  width: 100px;
-  margin-right: 6px;
+width: 100px;
+margin-right: 6px;
 }
 
 .app-chrome-item.volume-icon {
-  opacity: 0.7;
-  background-image: url(http://localhost:9000/assets/volume-up.svg);
-  height: 15px;
-  width: 30px;
-  background-repeat: no-repeat;
+opacity: 0.7;
+background-image: url(http://localhost:9000/assets/volume-up.svg);
+height: 15px;
+width: 30px;
+background-repeat: no-repeat;
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-  transition: all var(--appleTransition);
+transition: all var(--appleTransition);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
-  background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
-  transform: scale(1.2);
+background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
+transform: scale(1.2);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
-  background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
-  transform: scale(1);
+background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
+transform: scale(1);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range] {
-  width: 100%;
+width: 100%;
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range] {
-  -webkit-appearance: none;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.4);
-  border-radius: 5px;
-  background-size: 70% 100%;
-  background-repeat: no-repeat;
+-webkit-appearance: none;
+height: 4px;
+background: rgba(255, 255, 255, 0.4);
+border-radius: 5px;
+background-size: 70% 100%;
+background-repeat: no-repeat;
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  height: 14px;
-  width: 14px;
-  border-radius: 50%;
-  background: rgb(50 50 50);
-  cursor: default;
-  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+-webkit-appearance: none;
+height: 14px;
+width: 14px;
+border-radius: 50%;
+background: rgb(50 50 50);
+cursor: default;
+box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
-  -webkit-appearance: none;
-  box-shadow: none;
-  border: none;
-  background: transparent;
+-webkit-appearance: none;
+box-shadow: none;
+border: none;
+background: transparent;
 }
 
 .app-chrome .back-button {
-  height: 100%;
-  width: 60px;
+height: 100%;
+width: 60px;
 }
 
 .app-chrome .app-chrome-item.full-height {
-  height: 100%;
+height: 100%;
 }
 
 .app-chrome .app-chrome-item > .app-title {
-  width: 100px;
-  font-size: 13px;
-  background: url("./logotmp.svg");
-  background-size: 90px;
-  background-repeat: no-repeat;
-  background-position: center;
-  height: 100%;
-  margin-right: 16px;
-  margin-left: 16px;
-  image-rendering: -webkit-optimize-contrast;
-  -webkit-app-region: drag;
+width: 100px;
+font-size: 13px;
+background: url("./logotmp.svg");
+background-size: 90px;
+background-repeat: no-repeat;
+background-position: center;
+height: 100%;
+margin-right: 16px;
+margin-left: 16px;
+image-rendering: -webkit-optimize-contrast;
+-webkit-app-region: drag;
 }
 
 .app-chrome .app-chrome-item > .window-controls {
-  width: 138px;
-  font-size: 13px;
-  height: 100%;
-  display: flex;
+width: 138px;
+font-size: 13px;
+height: 100%;
+display: flex;
 }
 
 .app-chrome .app-chrome-item > .window-controls > div {
-  height: 100%;
-  width: 32px;
+height: 100%;
+width: 32px;
 }
 
 .app-chrome .app-chrome-item > .window-controls > div:hover {
-  background: rgb(200 200 200 / 10%);
+background: rgb(200 200 200 / 10%);
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.close {
-  width: 100%;
-  height: 100%;
-  background-image: var(--gfx-closeBtn);
-  background-position: center;
-  background-repeat: no-repeat;
-  -webkit-app-region: no-drag;
+width: 100%;
+height: 100%;
+background-image: var(--gfx-closeBtn);
+background-position: center;
+background-repeat: no-repeat;
+-webkit-app-region: no-drag;
 
-  &:hover {
-    background-color: rgb(196, 43, 28)
-  }
+&:hover {
+  background-color: rgb(196, 43, 28)
+}
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.minmax {
-  background-image: var(--gfx-maxBtn);
-  background-position: center;
-  background-repeat: no-repeat;
-  -webkit-app-region: no-drag;
-  width: 100%;
-  height: 100%;
+background-image: var(--gfx-maxBtn);
+background-position: center;
+background-repeat: no-repeat;
+-webkit-app-region: no-drag;
+width: 100%;
+height: 100%;
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
-  background-image: var(--gfx-restoreBtn);
+background-image: var(--gfx-restoreBtn);
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.minimize {
-  background-image: var(--gfx-minBtn);
-  background-position: center;
-  background-repeat: no-repeat;
-  -webkit-app-region: no-drag;
-  width: 100%;
-  height: 100%;
+background-image: var(--gfx-minBtn);
+background-position: center;
+background-repeat: no-repeat;
+-webkit-app-region: no-drag;
+width: 100%;
+height: 100%;
 }
 
 .app-chrome .app-chrome-item.playback-controls {
-  width: 80%;
-  height: 90%;
-  display: flex;
-  max-width: 500px;
-  border-left: 1px solid rgb(200 200 200 / 8%);
-  border-right: 1px solid rgb(200 200 200 / 8%);
+width: 80%;
+height: 90%;
+display: flex;
+max-width: 500px;
+border-left: 1px solid rgb(200 200 200 / 8%);
+border-right: 1px solid rgb(200 200 200 / 8%);
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls {
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  width: 100%;
+display: flex;
+justify-content: center;
+align-content: center;
+width: 100%;
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-name {
-  font-weight: 600;
-  text-align: center;
-  font-size: 13px;
-  height: 1.3em;
-  line-height: 1.3em;
-  overflow: hidden;
-  max-width: 360px;
+font-weight: 600;
+text-align: center;
+font-size: 13px;
+height: 1.3em;
+line-height: 1.3em;
+overflow: hidden;
+max-width: 360px;
 
-  .song-name-normal {
-    height: inherit;
-  }
+.song-name-normal {
+  height: inherit;
+}
 
-  &.song-artist-marquee {
-    > marquee {
-      //margin-bottom: -3px;
-    }
+&.song-artist-marquee {
+  > marquee {
+    //margin-bottom: -3px;
   }
 }
+}
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
-  font-weight: 400;
-  font-size: 10px;
-  height: 1.2em;
-  line-height: 1.3em;
-  overflow: hidden;
-  margin: 0 0 0.5em;
+font-weight: 400;
+font-size: 10px;
+height: 1.2em;
+line-height: 1.3em;
+overflow: hidden;
+margin: 0 0 0.5em;
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-artist {
-  font-weight: 400;
-  font-size: 12px;
-  text-align: center;
-  /*height: 1.2em;
-  line-height: 1.2em;*/
+font-weight: 400;
+font-size: 12px;
+text-align: center;
+/*height: 1.2em;
+line-height: 1.2em;*/
   overflow: hidden;
   z-index: 1;
   max-width: 360px;
@@ -2953,7 +2966,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 //  list item compact
   &.compact {
     height: 40px;
-    font-size: 12px;
+    font-size: 13px;
     .artwork {
       display: none;
     }
@@ -4363,4 +4376,6 @@ body.no-gpu {
   .drawertransition-leave-to {
     right: -300px;
   }
-}
\ No newline at end of file
+}
+
+@import url("less/compact.less");
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index 16764e82..5308226c 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -7,8 +7,9 @@
          :data-index="index"
          :data-guid="guid"
          :data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
+         :key="item.attributes.playParams.id ?? item.id"
          class="cd-mediaitem-list-item"
-         :class="[{'mediaitem-selected': app.select_hasMediaItem(item.id)}, addClasses]">
+         :class="[{'mediaitem-selected': app.select_hasMediaItem(item.attributes.playParams.id ?? item.id)}, addClasses]">
         <template v-if="isVisible">
             <div class="isLibrary" v-if="showLibraryStatus == true">
                 <button @click="addToLibrary()"
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 4b711529..64ac3734 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -48,23 +48,23 @@
                     <div class="app-chrome-item full-height" v-else>
                         <div class="app-title"></div>
                     </div>
-                    <div class="app-chrome-item">
+                    <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">
+                    <div class="app-chrome-item display--large">
                         <button class="playback-button previous" @click="prevButton()"></button>
                     </div>
-                    <div class="app-chrome-item">
+                    <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">
+                    <div class="app-chrome-item display--large">
                         <button class="playback-button next" @click="mk.skipToNextItem()"></button>
                     </div>
-                    <div class="app-chrome-item">
+                    <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 active" @click="mk.repeatMode = 2"
@@ -239,9 +239,43 @@
                         </div>
                     </transition>
                     <div class="app-sidebar-footer">
-                        <input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
-                               v-model="mk.volume" @wheel="volumeWheel"
-                               v-if="typeof mk.volume != 'undefined'">
+
+                        <div class="app-playback-controls display--small"  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 active" @click="mk.repeatMode = 2"
+                                            v-else-if="mk.repeatMode == 1"></button>
+                                    <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
+                                            v-else-if="mk.repeatMode == 2"></button>
+                                </div>
+                            </div>
+                            <div class="app-chrome-item volume">
+                                <div class="app-chrome-item volume-icon"></div>
+                                <div class="input-container">
+                                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" v-model="mk.volume"
+                                           v-if="typeof mk.volume != 'undefined'">
+                                </div>
+                            </div>
+                        </div>
                         <button class="app-sidebar-button" style="width:100%"
                                 :class="{active: chrome.menuOpened}"
                                 @blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"

From e579ed8a99cebc61be18419c77a419d7254395cc Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 12 Jan 2022 07:36:20 -0800
Subject: [PATCH 4/6] added experimental flags and section in settings for
 temporary config settings, added compact ui experiment

---
 index.js                              |   1 +
 src/renderer/index.js                 |   5 +
 src/renderer/less/compact.less        |  74 +++++++-------
 src/renderer/style.less               |   1 +
 src/renderer/views/main.ejs           |   2 +-
 src/renderer/views/pages/settings.ejs | 139 +++++++++++++++-----------
 6 files changed, 127 insertions(+), 95 deletions(-)

diff --git a/index.js b/index.js
index ad570d3a..ed66de11 100644
--- a/index.js
+++ b/index.js
@@ -80,6 +80,7 @@ const configDefaults = {
     },
     "advanced": {
         "AudioContext": false,
+        "experiments": []
     }
 }
 
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 1ef1f225..bb67dc27 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -635,6 +635,11 @@ const app = new Vue({
                 this.$forceUpdate()
             }, 500)
         },
+        getAppClasses() {
+            if(this.cfg.advanced.experiments.includes('compactui')) {
+                return {compact: true}
+            }
+        },
         invokeDrawer(panel) {
             if (this.drawer.panel == panel && this.drawer.open) {
                 if (panel == "lyrics") {
diff --git a/src/renderer/less/compact.less b/src/renderer/less/compact.less
index 5e90b63d..21470df3 100644
--- a/src/renderer/less/compact.less
+++ b/src/renderer/less/compact.less
@@ -1,45 +1,49 @@
-.app-sidebar-content.compact {
-  padding:0px;
-
-
-
-  .app-sidebar-header-text {
-    padding: 6px 10px;
-    margin: 0px;
+#app.compact {
+  .content-inner {
+    zoom: 0.95;
   }
-  .app-sidebar-item {
-    display: flex;
-    width: 100%;
-    padding: 8px 12px;
-    font-size: 13px;
-    margin: 0px;
-    border: 1px solid transparent;
-    border-radius: 0px;
-    transition: unset;
-    transform: unset;
+  .app-sidebar-content {
+    padding:0px;
 
-    &:active {
-      background: var(--selected-click);
+    .app-sidebar-header-text {
+      padding: 6px 10px;
+      margin: 0px;
+    }
+    .app-sidebar-item {
+      display: flex;
+      width: 100%;
+      padding: 8px 12px;
+      font-size: 13px;
+      margin: 0px;
+      border: 1px solid transparent;
+      border-radius: 0px;
+      transition: unset;
+      transform: unset;
+
+      &:active {
+        background: var(--selected-click);
+      }
+
+      &::after {
+        display: none;
+      }
+
+      &.active {
+        background: var(--keyColor-disabled);
+      }
+    }
+    .sidebar-icon {
+      width: 14px;
+      height: 16px;
+      margin-right: 8px;
     }
 
-    &::after {
-      display: none;
-    }
-
-    &.active {
-      background: var(--keyColor-disabled);
+    .folder-body {
+      border-radius: 0px;
+      padding: 0px;
     }
   }
-  .sidebar-icon {
-    width: 14px;
-    height: 16px;
-    margin-right: 8px;
-  }
 
-  .folder-body {
-    border-radius: 0px;
-    padding: 0px;
-  }
 }
 
 // if page width is less than 951px
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 1ce5f974..e838b37f 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1883,6 +1883,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     font-size: 1em;
     font-family: inherit;
     padding: 8px 16px;
+    background: #404040;
   }
 
   optgroup {
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 64ac3734..0017746b 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -30,7 +30,7 @@
 </head>
 
 <body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
-<div id="app">
+<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>
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 99156ca3..304ffd3b 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -477,77 +477,92 @@
                 </div>
             </div>
             <div class="md-option-header">
-                <span>Unfinished / Non Functional</span>
+                <span>Experimental</span>
             </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
-                    Theme
+                    Compact UI
                 </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
-                        <option value="0">Cider</option>
-                    </select>
+                <div class="md-option-segment md-option-segment_auto" >
+                    <button class="md-btn" :class="{'md-btn-primary': app.cfg.advanced.experiments.includes('compactui')}" @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')">
+                        {{app.cfg.advanced.experiments.includes('compactui') ? 'Enabled' : 'Disabled'}}
+                    </button>
                 </div>
             </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Theme Options
+            <div style="opacity: 0.5; pointer-events: none">
+                <div class="md-option-header">
+                    <span>Unfinished / Non Functional</span>
                 </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <button class="btn">Theme Options</button>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Theme
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select">
+                            <option value="0">Cider</option>
+                        </select>
+                    </div>
                 </div>
-            </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Scrollbars
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Theme Options
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <button class="btn">Theme Options</button>
+                    </div>
                 </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
-                        <option value="0">Show on hover</option>
-                        <option value="1">Always show</option>
-                        <option value="2">Hidden</option>
-                    </select>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Scrollbars
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select">
+                            <option value="0">Show on hover</option>
+                            <option value="1">Always show</option>
+                            <option value="2">Hidden</option>
+                        </select>
+                    </div>
                 </div>
-            </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Refresh Rate
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Refresh Rate
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select">
+                            <option value='0'>Automatic</option>
+                            <option value='30'>30</option>
+                            <option value='60'>60</option>
+                            <option value='144'>144</option>
+                            <option value='175'>175</option>
+                            <option value='240'>240</option>
+                            <option value='360'>30</option>
+                        </select>
+                    </div>
                 </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
-                        <option value='0'>Automatic</option>
-                        <option value='30'>30</option>
-                        <option value='60'>60</option>
-                        <option value='144'>144</option>
-                        <option value='175'>175</option>
-                        <option value='240'>240</option>
-                        <option value='360'>30</option>
-                    </select>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Close Button Behavior
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select">
+                            <option value='0'>Minimize to system tray</option>
+                            <option value='1'>Minimize to taskbar ? dock</option>
+                            <option value='2'>Quit Cider</option>
+                        </select>
+                    </div>
                 </div>
-            </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Close Button Behavior
-                </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
-                        <option value='0'>Minimize to system tray</option>
-                        <option value='1'>Minimize to taskbar ? dock</option>
-                        <option value='2'>Quit Cider</option>
-                    </select>
-                </div>
-            </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Open Cider on Startup
-                </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
-                        <option value='0'>Never</option>
-                        <option value='1'>Always</option>
-                        <option value='2'>Always, minimized</option>
-                        <option value='2'>Always, hidden in tray</option>
-                    </select>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Open Cider on Startup
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select">
+                            <option value='0'>Never</option>
+                            <option value='1'>Always</option>
+                            <option value='2'>Always, minimized</option>
+                            <option value='2'>Always, hidden in tray</option>
+                        </select>
+                    </div>
                 </div>
             </div>
         </div>
@@ -573,6 +588,12 @@
             }
         },
         methods: {
+            addExperiment(flag) {
+                app.cfg.advanced.experiments.push(flag);
+            },
+            removeExperiment(flag) {
+                app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
+            },
             toggleAudioContext: function(){
                 if (app.cfg.advanced.AudioContext){
                     CiderAudio.init();

From 97fbd1c1f7b6e7b00ea0b069caf766420730a021 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 12 Jan 2022 07:37:45 -0800
Subject: [PATCH 5/6] fix for item selection not working

---
 src/renderer/views/components/mediaitem-list-item.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index 5308226c..c120bbfa 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -9,7 +9,7 @@
          :data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
          :key="item.attributes.playParams.id ?? item.id"
          class="cd-mediaitem-list-item"
-         :class="[{'mediaitem-selected': app.select_hasMediaItem(item.attributes.playParams.id ?? item.id)}, addClasses]">
+         :class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
         <template v-if="isVisible">
             <div class="isLibrary" v-if="showLibraryStatus == true">
                 <button @click="addToLibrary()"

From 47f8312b2baf3062d2e8e6a8474c4755a3f3d69a Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 12 Jan 2022 07:39:39 -0800
Subject: [PATCH 6/6] added missing css property

---
 src/renderer/less/compact.less | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/renderer/less/compact.less b/src/renderer/less/compact.less
index 21470df3..23f5e47f 100644
--- a/src/renderer/less/compact.less
+++ b/src/renderer/less/compact.less
@@ -44,6 +44,11 @@
     }
   }
 
+  @media (max-width: 951px) {
+    .content-inner {
+      zoom: 0.8;
+    }
+  }
 }
 
 // if page width is less than 951px