[web] Reduce the size of sliders

While keeping the ability to reach easily sliders, their visual size has been reduce to make them less bulky.

web-src/package-lock.json

@@ -1258,9 +1258,9 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.15.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.15.0.tgz",
-      "integrity": "sha512-XYzpK6e2REli100+6iCeBA69v6Sm0D/yK2FZP+fCeNt0yH/m82qZQq+ztseyV0JsKdhFysuSEzeE1yCmSC92BA==",
+      "version": "9.15.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.15.1.tgz",
+      "integrity": "sha512-CJE/oZOslvmAR9hf8SClTdQ9JLweghT6JCBQNrT2Iel1uVw0W0OLJxzvPd6CxmABKCvLrtyDnqGV37O7KQv6+A==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.3.0",
@@ -2409,9 +2409,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
-      "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"

web-src/src/locales/de.json

@@ -367,6 +367,7 @@
     },
     "now-playing": {
       "info": "Tracks durch Auswählen aus der Bibliothek anfügen",
+      "live": "Live",
       "title": "Deine Playliste ist leer."
     },
     "playlist": {

web-src/src/locales/en.json

@@ -367,6 +367,7 @@
     },
     "now-playing": {
       "info": "Add some tracks by browsing your library",
+      "live": "Live",
       "title": "Your play queue is empty"
     },
     "playlist": {

web-src/src/locales/fr.json

@@ -367,6 +367,7 @@
     },
     "now-playing": {
       "info": "Ajoutez des pistes en parcourant votre bibliothèque",
+      "live": "En direct",
       "title": "La file d’attente est vide"
     },
     "playlist": {

web-src/src/mystyles.scss

@@ -240,9 +240,10 @@ hr.fd-navbar-divider {
   -webkit-appearance: none;
   width: var(--th);
   height: var(--th);
+  box-sizing: border-box;
   border-radius: 50%;
-  background: $dark;
-  border: none;
+  background: $light;
+  border: 1px solid $dark;
 }
 
 @mixin track {
@@ -252,15 +253,15 @@ hr.fd-navbar-divider {
 }
 
 input[type='range'].slider {
-  --sh: 0.5rem;
-  --th: calc(var(--sh) * 1.75);
+  --sh: 0.25rem;
+  --th: calc(var(--sh) * 3);
   @include mobile {
-    --th: calc(var(--sh) * 2.5);
+    --th: calc(var(--sh) * 4);
   }
   --sx: calc(var(--th) / 2 + (var(--ratio) * (100% - var(--th))));
   -webkit-appearance: none;
   min-width: 250px;
-  height: calc(var(--sh) * 3);
+  height: calc(var(--sh) * 5);
   width: 100% !important;
   cursor: grab;
   &:active {
@@ -282,7 +283,9 @@ input[type='range'].slider {
   &.is-inactive {
     cursor: not-allowed;
     &::-webkit-slider-thumb {
-      background-color: $grey-light;
+      box-sizing: border-box;
+      background-color: $light;
+      border: 1px $grey-light solid;
     }
     &::-webkit-slider-runnable-track {
       background: linear-gradient(
@@ -292,7 +295,9 @@ input[type='range'].slider {
       );
     }
     &::-moz-range-thumb {
-      background-color: $grey-light;
+      box-sizing: border-box;
+      background-color: $light;
+      border: 1px $grey-light solid;
     }
     &::-moz-range-track {
       background: linear-gradient(

web-src/src/pages/PageNowPlaying.vue

@@ -10,25 +10,20 @@
           @click="open_dialog(track)"
         />
         <input
-          v-model.number="item_progress_ms"
-          :step="INTERVAL"
-          :max="is_live ? INTERVAL : track.length_ms"
+          v-model.number="track_progress"
+          :max="track_progress_max"
           type="range"
           class="slider mt-5"
-          :style="{ '--ratio': progress }"
+          :class="{ 'is-inactive': is_live }"
+          :style="{ '--ratio': track_progress_ratio }"
+          :disabled="is_live"
           @change="seek"
-          @touchstart="start_dragging"
-          @touchend="end_dragging"
+          @mousedown="start_dragging"
+          @mouseup="end_dragging"
         />
         <div class="is-flex is-justify-content-space-between">
-          <p
-            class="subtitle is-7"
-            v-text="$filters.durationInHours(item_progress_ms)"
-          />
-          <p
-            class="subtitle is-7"
-            v-text="$filters.durationInHours(track.length_ms)"
-          />
+          <p class="subtitle is-7" v-text="track_elapsed_time" />
+          <p class="subtitle is-7" v-text="track_total_time" />
         </div>
         <p class="title is-5" v-text="track.title" />
         <p class="title is-6" v-text="track.artist" />
@@ -77,22 +72,29 @@ export default {
   data() {
     return {
       INTERVAL,
-      item_progress_ms: 0,
       interval_id: 0,
       is_dragged: false,
-
       show_details_modal: false,
       selected_item: {}
     }
   },
 
   computed: {
-    progress() {
-      return this.is_live ? 2 : this.item_progress_ms / this.track.length_ms
+    is_live() {
+      return this.track.length_ms === 0
     },
 
-    is_live() {
-      return this.track.length_ms == 0
+    track_progress: {
+      get() {
+        return Math.floor(this.player.item_progress_ms / INTERVAL)
+      },
+      set(value) {
+        this.player.item_progress_ms = value * INTERVAL
+      }
+    },
+
+    track_progress_ratio() {
+      return this.track_progress / this.track_progress_max
     },
 
     player() {
@@ -103,6 +105,20 @@ export default {
       return this.$store.getters.now_playing
     },
 
+    track_progress_max() {
+      return this.is_live ? 1 : Math.floor(this.track.length_ms / INTERVAL)
+    },
+
+    track_elapsed_time() {
+      return this.$filters.durationInHours(this.track_progress * INTERVAL)
+    },
+
+    track_total_time() {
+      return this.is_live
+        ? this.$t('page.now-playing.live')
+        : this.$filters.durationInHours(this.track.length_ms)
+    },
+
     settings_option_show_composer_now_playing() {
       return this.$store.getters.settings_option_show_composer_now_playing
     },
@@ -148,7 +164,6 @@ export default {
         window.clearTimeout(this.interval_id)
         this.interval_id = 0
       }
-      this.item_progress_ms = this.player.item_progress_ms
       if (this.player.state === 'play') {
         this.interval_id = window.setInterval(this.tick, INTERVAL)
       }
@@ -156,7 +171,6 @@ export default {
   },
 
   created() {
-    this.item_progress_ms = this.player.item_progress_ms
     webapi.player_status().then(({ data }) => {
       this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
       if (this.player.state === 'play') {
@@ -175,13 +189,7 @@ export default {
   methods: {
     tick() {
       if (!this.is_dragged) {
-        if (this.is_live) {
-          this.item_progress_ms += INTERVAL
-        } else if (this.item_progress_ms + INTERVAL > this.track.length_ms) {
-          this.item_progress_ms = this.track.length_ms
-        } else {
-          this.item_progress_ms += INTERVAL
-        }
+        this.track_progress += 1
       }
     },
 
@@ -195,9 +203,7 @@ export default {
 
     seek() {
       if (!this.is_live) {
-        webapi.player_seek_to_pos(this.item_progress_ms).catch(() => {
-          this.item_progress_ms = this.player.item_progress_ms
-        })
+        webapi.player_seek_to_pos(this.track_progress * INTERVAL)
       }
     },