Some basic adjustments for playersources providing playback control

Author: marcelveldt

src/composables/activeSource.ts

@@ -0,0 +1,24 @@
+import { computed, ComputedRef, Ref } from "vue";
+import { Player, PlayerSource } from "@/plugins/api/interfaces";
+
+/**
+ * Composable to get the active source from a player
+ */
+export function useActiveSource(
+  player:
+    | ComputedRef<Player | undefined>
+    | Ref<Player | undefined>
+    | Player
+    | undefined,
+) {
+  const activeSource = computed((): PlayerSource | undefined => {
+    const playerObj =
+      typeof player === "object" && "value" in player ? player.value : player;
+    if (!playerObj?.active_source || !playerObj?.source_list) return undefined;
+    return playerObj.source_list.find(
+      (source) => source.id === playerObj.active_source,
+    );
+  });
+
+  return { activeSource };
+}

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

@@ -3,7 +3,7 @@
   <Icon
     v-if="isVisible && player"
     v-bind="icon"
-    :disabled="!queueHasNext && !playerHasNext"
+    :disabled="!canNext"
     icon="mdi-skip-next-outline"
     variant="button"
     @click="api.playerCommandNext(player.player_id)"
@@ -14,7 +14,8 @@
 import Icon, { IconProps } from "@/components/Icon.vue";
 import api from "@/plugins/api";
 import { Player, PlayerFeature, PlayerQueue } from "@/plugins/api/interfaces";
-import { computed } from "vue";
+import { useActiveSource } from "@/composables/activeSource";
+import { computed, toRef } from "vue";
 
 // properties
 export interface Props {
@@ -29,12 +30,15 @@ const compProps = withDefaults(defineProps<Props>(), {
   icon: undefined,
 });
 
+const { activeSource } = useActiveSource(toRef(compProps, "player"));
+
 const queueHasNext = computed(() => {
   if (!compProps.playerQueue?.active) return false;
   return (
     (compProps.playerQueue.current_index || 0) < compProps.playerQueue.items - 1
   );
 });
+
 const playerHasNext = computed(() => {
   if (!compProps.player) return false;
   if (compProps.playerQueue?.active) return false;
@@ -43,4 +47,13 @@ const playerHasNext = computed(() => {
     PlayerFeature.NEXT_PREVIOUS,
   );
 });
+
+const canNext = computed(() => {
+  // Check if active source can next/previous
+  if (activeSource.value) {
+    return activeSource.value.can_next_previous;
+  }
+  // Fall back to queue or player capabilities
+  return queueHasNext.value || playerHasNext.value;
+});
 </script>

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

@@ -3,7 +3,7 @@
   <Icon
     v-if="isVisible && player"
     v-bind="icon"
-    :disabled="!queueCanPlay && !playerCanPlay"
+    :disabled="!canPlayPause"
     :icon="iconStyle ? `${baseIcon}-${iconStyle}` : baseIcon"
     variant="button"
     @click="api.playerCommandPlayPause(player.player_id)"
@@ -14,7 +14,8 @@
 import Icon, { IconProps } from "@/components/Icon.vue";
 import api from "@/plugins/api";
 import { PlaybackState, Player, PlayerQueue } from "@/plugins/api/interfaces";
-import { computed } from "vue";
+import { useActiveSource } from "@/composables/activeSource";
+import { computed, toRef } from "vue";
 
 // properties
 export interface Props {
@@ -32,16 +33,30 @@ const compProps = withDefaults(defineProps<Props>(), {
   icon: undefined,
   iconStyle: "circle",
 });
+
+const { activeSource } = useActiveSource(toRef(compProps, "player"));
+
 const queueCanPlay = computed(() => {
   if (!compProps.playerQueue) return false;
   return compProps.playerQueue.items > 0;
 });
+
 const playerCanPlay = computed(() => {
   if (!compProps.player) return false;
   if (compProps.playerQueue?.active) return false;
   if (!compProps.player.current_media) return false;
   return true;
 });
+
+const canPlayPause = computed(() => {
+  // Check if active source can play/pause
+  if (activeSource.value) {
+    return activeSource.value.can_play_pause;
+  }
+  // Fall back to queue or player capabilities
+  return queueCanPlay.value || playerCanPlay.value;
+});
+
 const baseIcon = computed(() => {
   if (compProps.player?.playback_state == PlaybackState.PLAYING) {
     return "mdi-pause";

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

@@ -3,7 +3,7 @@
   <Icon
     v-if="isVisible && player"
     v-bind="icon"
-    :disabled="!queueHasPrevious && !playerHasPrevious"
+    :disabled="!canPrevious"
     icon="mdi-skip-previous-outline"
     variant="button"
     @click="api.playerCommandPrevious(player.player_id)"
@@ -14,7 +14,8 @@
 import Icon, { IconProps } from "@/components/Icon.vue";
 import api from "@/plugins/api";
 import { Player, PlayerFeature, PlayerQueue } from "@/plugins/api/interfaces";
-import { computed } from "vue";
+import { useActiveSource } from "@/composables/activeSource";
+import { computed, toRef } from "vue";
 
 // properties
 export interface Props {
@@ -29,12 +30,15 @@ const compProps = withDefaults(defineProps<Props>(), {
   icon: undefined,
 });
 
+const { activeSource } = useActiveSource(toRef(compProps, "player"));
+
 const queueHasPrevious = computed(() => {
   if (!compProps.playerQueue?.active) return false;
   if (!compProps.playerQueue?.items || !compProps.playerQueue.current_index)
     return false;
   return compProps.playerQueue.current_index > 0;
 });
+
 const playerHasPrevious = computed(() => {
   if (!compProps.player) return false;
   if (compProps.playerQueue?.active) return false;
@@ -43,4 +47,13 @@ const playerHasPrevious = computed(() => {
     PlayerFeature.NEXT_PREVIOUS,
   );
 });
+
+const canPrevious = computed(() => {
+  // Check if active source can next/previous
+  if (activeSource.value) {
+    return activeSource.value.can_next_previous;
+  }
+  // Fall back to queue or player capabilities
+  return queueHasPrevious.value || playerHasPrevious.value;
+});
 </script>

src/layouts/default/PlayerOSD/PlayerTimeline.vue

@@ -1,15 +1,9 @@
 <template>
   <div style="width: auto; height: 24px">
-    <div v-if="store.activePlayerQueue" style="width: 100%">
+    <div v-if="store.activePlayer" style="width: 100%">
       <v-slider
         v-model="curTimeValue"
-        :disabled="
-          !store.curQueueItem ||
-          !store.curQueueItem.media_item ||
-          !store.curQueueItem.duration ||
-          store.curQueueItem.media_item.media_type == MediaType.RADIO ||
-          store.activePlayer?.powered == false
-        "
+        :disabled="!canSeek"
         style="width: 100%"
         :min="0"
         :max="store.curQueueItem?.duration"
@@ -67,8 +61,9 @@
 import api from "@/plugins/api";
 import { MediaType } from "@/plugins/api/interfaces";
 import { store } from "@/plugins/store";
+import { useActiveSource } from "@/composables/activeSource";
 import { formatDuration } from "@/helpers/utils";
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, toRef } from "vue";
 
 // properties
 export interface Props {
@@ -81,6 +76,8 @@ withDefaults(defineProps<Props>(), {
   color: undefined,
 });
 
+const { activeSource } = useActiveSource(toRef(store, "activePlayer"));
+
 // local refs
 const showRemainingTime = ref(false);
 const isThumbHidden = ref(true);
@@ -89,6 +86,24 @@ const curTimeValue = ref(0);
 const tempTime = ref(0);
 
 // computed properties
+const canSeek = computed(() => {
+  // Check if active source allows seeking
+  // commented out to fix issue first with actually retrieving the elapsed time of the source
+  // if (activeSource.value) {
+  //   return activeSource.value.can_seek;
+  // }
+
+  if (store.curQueueItem?.media_item?.media_type == MediaType.RADIO)
+    return false;
+  if (store.activePlayer?.powered == false) return false;
+  if (!store.curQueueItem) return false;
+  if (!store.curQueueItem.media_item) return false;
+  if (!store.curQueueItem.duration) return false;
+
+  // Default to true if no active source (queue control)
+  return true;
+});
+
 const playerCurTimeStr = computed(() => {
   if (!store.curQueueItem) return "0:00";
   if (showRemainingTime.value) {
@@ -99,13 +114,15 @@ const playerCurTimeStr = computed(() => {
     return `${formatDuration(curQueueItemTime.value)}`;
   }
 });
+
 const playerTotalTimeStr = computed(() => {
   if (!store.curQueueItem) return "";
   if (!store.curQueueItem.duration) return "";
   if (store.curQueueItem.media_item?.media_type == MediaType.RADIO) return "";
   const totalSecs = store.curQueueItem.duration;
   return formatDuration(totalSecs);
 });
+
 const curQueueItemTime = computed(() => {
   if (isDragging.value) {
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties