diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js index 09c3a28c..7e481ab7 100644 --- a/resources/cider-ui-tests/index.js +++ b/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; diff --git a/resources/cider-ui-tests/style.less b/resources/cider-ui-tests/style.less index 4149a391..8a252b37 100644 --- a/resources/cider-ui-tests/style.less +++ b/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%) diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs index 32187eb2..1bfbecad 100644 --- a/resources/cider-ui-tests/views/main.ejs +++ b/resources/cider-ui-tests/views/main.ejs @@ -2,20 +2,20 @@ - - - - - - - - - + + + + + + + + + Cider - + @@ -25,334 +25,341 @@ -
-
-
-
-
-
-
-
-
- - -
-
- -
-
- - -
-
- -
-
- +
+
+ + +
+
+ +
+
+ - - -
-
-
-
- - -
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- Apple Music -
- - - -
- Library -
- - - - - -
- Playlists -
- -
- -
- - - - - -
- -
- -