refactor: debounce media controls

Author: kissu

src/composables/playActionInProgress.ts

@@ -0,0 +1,36 @@
+import { onUnmounted, ref, watch, type Ref } from "vue";
+import type { PlayerQueue } from "@/plugins/api/interfaces";
+
+// `play_action_in_progress` blips true for ~50ms during a seek (the stream
+// restarts at the new position). Debouncing it means the dependent UI — the
+// play-button spinner and the disabled state of the transport controls — only
+// reacts to genuinely slow actions instead of flickering on every seek.
+export function usePlayActionInProgress(
+  playerQueue: Ref<PlayerQueue | undefined>,
+  delay = 200,
+) {
+  const isLoading = ref(false);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  watch(
+    () => playerQueue.value?.extra_attributes?.play_action_in_progress === true,
+    (inProgress) => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      if (inProgress) {
+        timer = setTimeout(() => (isLoading.value = true), delay);
+      } else {
+        isLoading.value = false;
+      }
+    },
+    { immediate: true },
+  );
+
+  onUnmounted(() => {
+    if (timer) clearTimeout(timer);
+  });
+
+  return { isLoading };
+}

src/layouts/default/PlayerOSD/PlayerControlBtn/NextBtn.vue

@@ -18,6 +18,7 @@ import api from "@/plugins/api";
 import { Player, PlayerFeature, PlayerQueue } from "@/plugins/api/interfaces";
 import { useActiveAudioSource } from "@/composables/activeAudioSource";
 import { useActiveSource } from "@/composables/activeSource";
+import { usePlayActionInProgress } from "@/composables/playActionInProgress";
 import { computed, toRef } from "vue";
 import { SkipForward } from "lucide-vue-next";
 
@@ -74,10 +75,5 @@ const canNext = computed(() => {
   return queueHasNext.value || playerHasNext.value;
 });
 
-const isLoading = computed(() => {
-  if (!compProps.player) return false;
-  return (
-    compProps.playerQueue?.extra_attributes?.play_action_in_progress === true
-  );
-});
+const { isLoading } = usePlayActionInProgress(toRef(compProps, "playerQueue"));
 </script>

src/layouts/default/PlayerOSD/PlayerControlBtn/PlayBtn.vue

@@ -36,6 +36,7 @@ defineOptions({ inheritAttrs: false });
 import Icon, { IconProps } from "@/components/Icon.vue";
 import { useActiveAudioSource } from "@/composables/activeAudioSource";
 import { useActiveSource } from "@/composables/activeSource";
+import { usePlayActionInProgress } from "@/composables/playActionInProgress";
 import api from "@/plugins/api";
 import {
   MediaType,
@@ -109,12 +110,7 @@ const isPlaying = computed(() => {
   return compProps.player?.playback_state == PlaybackState.PLAYING;
 });
 
-const isLoading = computed(() => {
-  if (!compProps.player) return false;
-  return (
-    compProps.playerQueue?.extra_attributes?.play_action_in_progress === true
-  );
-});
+const { isLoading } = usePlayActionInProgress(toRef(compProps, "playerQueue"));
 
 const isDisabled = computed(() => {
   if (isLoading.value) return true;

src/layouts/default/PlayerOSD/PlayerControlBtn/PreviousBtn.vue

@@ -18,6 +18,7 @@ import api from "@/plugins/api";
 import { Player, PlayerFeature, PlayerQueue } from "@/plugins/api/interfaces";
 import { useActiveAudioSource } from "@/composables/activeAudioSource";
 import { useActiveSource } from "@/composables/activeSource";
+import { usePlayActionInProgress } from "@/composables/playActionInProgress";
 import { computed, toRef } from "vue";
 import { SkipBack } from "lucide-vue-next";
 
@@ -74,10 +75,5 @@ const canPrevious = computed(() => {
   return queueHasPrevious.value || playerHasPrevious.value;
 });
 
-const isLoading = computed(() => {
-  if (!compProps.player) return false;
-  return (
-    compProps.playerQueue?.extra_attributes?.play_action_in_progress === true
-  );
-});
+const { isLoading } = usePlayActionInProgress(toRef(compProps, "playerQueue"));
 </script>

src/layouts/default/PlayerOSD/PlayerControlBtn/RepeatBtn.vue

@@ -51,7 +51,8 @@ import {
   isQueueDynamicPlaylist,
   isQueueInfiniteStream,
 } from "@/plugins/api/helpers";
-import { computed } from "vue";
+import { usePlayActionInProgress } from "@/composables/playActionInProgress";
+import { computed, toRef } from "vue";
 import { IconRepeat, IconRepeatOff, IconRepeatOnce } from "@tabler/icons-vue";
 
 // properties
@@ -67,11 +68,7 @@ const compProps = withDefaults(defineProps<Props>(), {
   size: 20,
 });
 
-const isLoading = computed(() => {
-  return (
-    compProps.playerQueue?.extra_attributes?.play_action_in_progress === true
-  );
-});
+const { isLoading } = usePlayActionInProgress(toRef(compProps, "playerQueue"));
 
 const isSingleDynamicPlaylist = computed(() =>
   isQueueDynamicPlaylist(compProps.playerQueue),

src/layouts/default/PlayerOSD/PlayerControlBtn/ShuffleBtn.vue

@@ -38,9 +38,10 @@ import {
   isQueueDynamicPlaylist,
   isQueueInfiniteStream,
 } from "@/plugins/api/helpers";
+import { usePlayActionInProgress } from "@/composables/playActionInProgress";
 import { IconArrowsRight } from "@tabler/icons-vue";
 import { Shuffle } from "lucide-vue-next";
-import { computed } from "vue";
+import { computed, toRef } from "vue";
 
 // properties
 export interface Props {
@@ -55,11 +56,7 @@ const compProps = withDefaults(defineProps<Props>(), {
   size: 20,
 });
 
-const isLoading = computed(() => {
-  return (
-    compProps.playerQueue?.extra_attributes?.play_action_in_progress === true
-  );
-});
+const { isLoading } = usePlayActionInProgress(toRef(compProps, "playerQueue"));
 
 const isSingleDynamicPlaylist = computed(() =>
   isQueueDynamicPlaylist(compProps.playerQueue),