new progress slider

resources/cider-ui-tests/index.js

@@ -288,6 +288,15 @@ const app = new Vue({
             this.artistPage.data = artistData.data[0]
             this.page = "artist-page"
         },
+        progressBarStyle () {
+            let val = this.playerLCD.playbackDuration
+            let min = 0
+            let max = this.mk.currentPlaybackDuration
+            let value = (val-min)/(max-min)*100
+            return {
+                'background': ('linear-gradient(to right, var(--keyColor) 0%, var(--keyColor) ' + value + '%, #333 ' + value + '%, #333 100%)')
+            }
+        },
         hashCode(str) {
             var hash = 0, i, chr;
             if (str.length === 0) return hash;

resources/cider-ui-tests/style.less

@@ -621,12 +621,47 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .app-chrome .app-chrome-item>.app-playback-controls .song-progress {
-  height: 16px;
+  @bgColor: transparent;
+  //height: 16px;
   position: absolute;
   bottom: 0px;
   left: 0px;
-  overflow: hidden;
+  background: @bgColor;
+  &:hover {
+    >input[type=range] {
+      &::-webkit-slider-thumb {
+        opacity: 1;
+        z-index: 1;
+      }
+    }
+  }
+  >input[type=range] {
+    appearance: none;
+    width: 100%;
+    height: 4px;
+    background-color: rgb(200 200 200 / 10%);
+    border-radius: 2px;
 
+    &::-webkit-slider-thumb {
+      opacity: 0;
+      -webkit-appearance: none;
+      appearance: none;
+      width: 12px;
+      height: 12px;
+      border-radius: 100%;
+      background: var(--keyColor);
+      cursor: ew-resize;
+      transition: opacity .10s var(--appleEase);
+    }
+
+    &::-moz-range-thumb {
+      width: 8px;
+      height: 8px;
+      border-radius: 100%;
+      background: var(--keyColor);
+      cursor: pointer;
+    }
+  }
 }
 
 @keyframes marquee {
@@ -639,31 +674,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   }
 }
 
-.app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range] {
-  appearance: none;
-  width: 100%;
-  height: 4px;
-  background-color: rgb(200 200 200 / 10%);
-}
-
-.app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 4px;
-  height: 12px;
-  border-radius: 2px;
-  background: var(--keyColor);
-  cursor: ew-resize;
-}
-
-.app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range]::-moz-range-thumb {
-  width: 8px;
-  height: 8px;
-  border-radius: 100%;
-  background: var(--keyColor);
-  cursor: pointer;
-}
-
 .app-chrome .app-chrome-item>.app-playback-controls .artwork {
   width: 42px;
   height: 42px;

resources/cider-ui-tests/views/main.ejs

@@ -72,7 +72,7 @@
                                     mk.nowPlayingItem["attributes"]["albumName"] }}
                                     </div>
                                     <div class="song-progress">
-                                        <input type="range" step="0.01" min="0"
+                                        <input type="range" step="0.01" min="0" :style="progressBarStyle()"
                                             @change="mk.seekToTime($event.target.value)"
                                             :max="mk.currentPlaybackDuration" :value="playerLCD.playbackDuration">
                                     </div>