less jank song-progress bar

resources/cider-ui-tests/index.js

@@ -65,7 +65,9 @@ const app = new Vue({
             limit: 10
         },
         playerLCD: {
-            playbackDuration: 0
+            playbackDuration: 0,
+            desiredDuration: 0,
+            userInteraction: false
         },
         listennow: [],
         radio: {
@@ -290,6 +292,9 @@ const app = new Vue({
         },
         progressBarStyle () {
             let val = this.playerLCD.playbackDuration
+            if(this.playerLCD.desiredDuration > 0) {
+                val = this.playerLCD.desiredDuration
+            }
             let min = 0
             let max = this.mk.currentPlaybackDuration
             let value = (val-min)/(max-min)*100
@@ -297,6 +302,13 @@ const app = new Vue({
                 'background': ('linear-gradient(to right, var(--keyColor) 0%, var(--keyColor) ' + value + '%, #333 ' + value + '%, #333 100%)')
             }
         },
+        getSongProgress() {
+            if(this.playerLCD.userInteraction) {
+                return this.playerLCD.desiredDuration
+            }  else{
+                return this.playerLCD.playbackDuration
+            }
+        },
         hashCode(str) {
             var hash = 0, i, chr;
             if (str.length === 0) return hash;

resources/cider-ui-tests/style.less

@@ -631,6 +631,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     >input[type=range] {
       &::-webkit-slider-thumb {
         opacity: 1;
+        transform: scale(1);
         z-index: 1;
       }
     }
@@ -644,6 +645,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
     &::-webkit-slider-thumb {
       opacity: 0;
+      transform: scale(0.5);
       -webkit-appearance: none;
       appearance: none;
       width: 12px;
@@ -651,7 +653,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
       border-radius: 100%;
       background: var(--keyColor);
       cursor: ew-resize;
-      transition: opacity .10s var(--appleEase);
+      transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
     }
 
     &::-moz-range-thumb {
@@ -2051,10 +2053,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   border: 0px;
   color: var(--keyColor);
   font-family: inherit;
+  font-weight: 500;
   font-size: 16px;
   border-radius: 4px;
   padding: 6px;
-
   &:hover {
     cursor: pointer;
     background: rgb(200 200 200 / 10%)

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

@@ -73,12 +73,15 @@
                                 </div>
                                 <div class="song-progress">
                                     <input type="range" step="0.01" min="0" :style="progressBarStyle()"
-                                            @change="mk.seekToTime($event.target.value)"
+                                           @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
-                                            :max="mk.currentPlaybackDuration" :value="playerLCD.playbackDuration">
+                                           @mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
+                                           :max="mk.currentPlaybackDuration" :value="getSongProgress()">
                                 </div>
                             </div>
                             <template v-if="mk.nowPlayingItem['attributes']['playParams']">
-                                    <div class="actions" v-if="isInLibrary(mk.nowPlayingItem['attributes']['playParams'])">❤️</div>
+                                <div class="actions" v-if="isInLibrary(mk.nowPlayingItem['attributes']['playParams'])">
+                                    ❤️
+                                </div>
                                 <div class="actions" v-else>🖤</div>
                             </template>
 
@@ -169,7 +172,8 @@
                     </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"
+                    <input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
+                           v-model="mk.volume"
                            v-if="typeof mk.volume != 'undefined'">
                     <button class="app-sidebar-button" style="width:100%"
                             @click="chrome.menuOpened = !chrome.menuOpened">
@@ -308,7 +312,8 @@
                 </transition>
                 <!-- Library - Albums -->
                 <transition name="wpfade" v-on:enter="getLibraryAlbumsFull()">
-                        <%- include('pages/library-albums') %>'); %>
+                    <%- include('pages/library-albums') %>');
+                    %>
                 </transition>
             </div>
             <transition name="drawertransition">
@@ -336,7 +341,9 @@
                             fill-rule="nonzero"/>
                 </svg>
             </div>
-                <div id="captions">{{(lyricon) ? ((lyrics.length > 0 ) ? lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : ''}}</div>
+            <div id="captions">{{(lyricon) ? ((lyrics.length > 0 ) ?
+                lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : ''}}
+            </div>
             <div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()"
                  title="Picture-in-Picture">
                 <%- include("svg/fullscreen.svg") %>
@@ -442,7 +449,8 @@
                 </h3>
             </template>
             <template v-else>
-                <h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)" :start="lyric.startTime"
+                <h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
+                    :start="lyric.startTime"
                     :end="lyric.endTime" v-bind:line-index="index.toString()">
                     <div class="lyricWaiting">
                         <div class='WaitingDot1'></div>