improvements for small windows

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 {

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;
+  }
+}

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()"

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"
+                        <div class="app-playback-controls display--small"  v-if="mkReady()"
-                               v-if="typeof mk.volume != 'undefined'">
+                             @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)"