Modify the way volume controls work (#1173)

Author: stvncode

src/components/VolumeControl.vue

@@ -161,7 +161,10 @@
         </v-list-item>
         <!-- mute btn + volume slider + volume level text-->
         <v-list-item
-          v-if="childPlayer.volume_control != PLAYER_CONTROL_NONE"
+          v-if="
+            childPlayer.volume_control != PLAYER_CONTROL_NONE &&
+            player.group_members.includes(childPlayer.player_id)
+          "
           class="volumesliderrow"
           :link="false"
           :style="
@@ -224,10 +227,10 @@ import { getPlayerName, truncateString } from "@/helpers/utils";
 import PlayerVolume from "@/layouts/default/PlayerOSD/PlayerVolume.vue";
 import { api } from "@/plugins/api";
 import {
+  PlaybackState,
   Player,
   PLAYER_CONTROL_NONE,
   PlayerFeature,
-  PlaybackState,
   PlayerType,
 } from "@/plugins/api/interfaces";
 import { computed, ref } from "vue";
@@ -301,7 +304,13 @@ const getVolumePlayers = function (player: Player) {
       }
     }
   }
-  items.sort((a, b) => (a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1));
+  // Sort: selected (in group) first, then by name
+  items.sort((a, b) => {
+    const aSelected = player.group_members.includes(a.player_id);
+    const bSelected = player.group_members.includes(b.player_id);
+    if (aSelected !== bSelected) return aSelected ? -1 : 1;
+    return a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1;
+  });
   return items;
 };
 

src/layouts/default/PlayerOSD/PlayerVolume.vue

@@ -1,12 +1,13 @@
 <template>
   <v-slider
+    ref="sliderRef"
     v-bind="playerVolumeProps"
-    @touchstart="isThumbHidden = false"
-    @touchend="isThumbHidden = true"
-    @mouseenter="isThumbHidden = false"
-    @mouseleave="isThumbHidden = true"
+    :model-value="displayValue"
     @wheel.prevent="onWheel"
-    @end="(value) => $emit('update:model-value', value)"
+    @click.stop
+    @start="onDragStart"
+    @update:model-value="onUpdateModelValue"
+    @end="onDragEnd"
   >
     <!-- Dynamically inherit slots from parent -->
     <!-- @vue-ignore -->
@@ -17,9 +18,10 @@
 </template>
 
 <script lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 export default {
+  inheritAttrs: false,
   props: {
     // eslint-disable-next-line vue/require-default-prop
     width: String,
@@ -31,34 +33,110 @@ export default {
   },
   emits: ["update:model-value"],
   setup(props, ctx) {
-    const isThumbHidden = ref(true);
+    const sliderRef = ref(null);
+    const startValue = ref(0);
+    const updateCount = ref(0);
+    const lastEnd = ref(0);
+    const displayValue = ref<number>(
+      typeof ctx.attrs["model-value"] === "number"
+        ? (ctx.attrs["model-value"] as number)
+        : 0,
+    );
 
     const playerVolumeDefaults = computed(() => ({
       class: "player-volume",
       hideDetails: true,
       trackSize: 2,
-      thumbSize: isThumbHidden.value ? 0 : 10,
+      thumbSize: 12,
       step: 2,
       elevation: 0,
       style: `width: ${props.width}; height:${props.height}; display: inline-grid; ${props.style}`,
     }));
 
+    const sliderAttrs = computed(() => {
+      const attrs = ctx.attrs as Record<string, unknown>;
+      const { "model-value": _mv, modelValue: _mv2, ...rest } = attrs || {};
+
+      return rest;
+    });
+
     const playerVolumeProps = computed(() => ({
       ...playerVolumeDefaults.value,
-      ...ctx,
+      ...sliderAttrs.value,
     }));
 
     const onWheel = ({ deltaY }: WheelEvent) => {
       if (!props.allowWheel) return;
       const step = playerVolumeProps.value.step;
 
-      const volumeValue = ctx.attrs["model-value"] as number;
+      const volumeValue =
+        (ctx.attrs["model-value"] as number) ?? displayValue.value;
       const volumeDelta = deltaY < 0 ? step : -step;
 
-      ctx.emit("update:model-value", volumeValue + volumeDelta);
+      const newValue = Math.max(0, Math.min(100, volumeValue + volumeDelta));
+      displayValue.value = newValue;
+      ctx.emit("update:model-value", newValue);
+    };
+
+    const onDragStart = (value: number) => {
+      startValue.value = value;
+      updateCount.value = 0;
+      displayValue.value = value;
     };
 
-    return { isThumbHidden, playerVolumeProps, onWheel };
+    const onUpdateModelValue = (newValue: number) => {
+      updateCount.value++;
+
+      if (updateCount.value > 2) {
+        displayValue.value = newValue;
+      }
+    };
+
+    const onDragEnd = (endValue: number) => {
+      // Cooldown to avoid duplicate emits only for moible click (otherwise it fires 2 be calls)
+      const now = Date.now();
+      if (now - lastEnd.value < 250) {
+        return;
+      }
+      lastEnd.value = now;
+
+      const step = playerVolumeProps.value.step;
+
+      // If we had many updates, that means it was a drag so we emit only the final value
+      if (updateCount.value > 3) {
+        displayValue.value = endValue;
+        ctx.emit("update:model-value", endValue);
+      } else {
+        const volumeDelta = endValue > startValue.value ? step : -step;
+        const newVolume = Math.max(
+          0,
+          Math.min(100, startValue.value + volumeDelta),
+        );
+        displayValue.value = newVolume;
+        ctx.emit("update:model-value", newVolume);
+      }
+
+      updateCount.value = 0;
+    };
+
+    watch(
+      () => ctx.attrs["model-value"] as number,
+      (val) => {
+        if (typeof val === "number" && updateCount.value === 0) {
+          displayValue.value = val;
+        }
+      },
+    );
+
+    return {
+      playerVolumeProps,
+      onWheel,
+      sliderRef,
+      onDragStart,
+      onUpdateModelValue,
+      onDragEnd,
+      displayValue,
+    };
   },
 };
 </script>