Lots of small tweaks regarding player(groups)

music-assistant-frontend.code-workspace

@@ -1,7 +1,10 @@
 {
-	"folders": [
-		{
-			"path": "."
-		}
-	]
+  "folders": [
+    {
+      "path": ".",
+    },
+  ],
+"settings": {
+	,
+  },
 }

src/components/InfoHeader.vue

@@ -173,7 +173,7 @@
               icon="mdi-play-circle-outline"
               :text="truncateString($t('play'), 14)"
               :disabled="!item"
-              :open-menu-on-click="!store.activePlayerQueue"
+              :open-menu-on-click="!store.activePlayer"
               @click="api.playMedia(item!)"
             >
               <template #menu>
@@ -190,8 +190,7 @@
                           variant="text"
                           :title="$t('play_on')"
                           :subtitle="
-                            store.activePlayerQueue?.display_name ||
-                            $t('no_player')
+                            store.activePlayer?.display_name || $t('no_player')
                           "
                           @click.stop="store.showPlayersMenu = true"
                         />
@@ -203,7 +202,7 @@
                     density="compact"
                     slim
                     tile
-                    :disabled="!store.activePlayerQueue"
+                    :disabled="!store.activePlayer"
                   >
                     <div
                       v-for="menuItem of getPlayMenuItems([item], item)"

src/components/PlayerCard.vue

@@ -13,15 +13,18 @@
     <v-list-item class="panel-item-details" flat :ripple="false">
       <!-- prepend: media thumb -->
       <template #prepend>
-        <div v-if="player.powered" class="player-media-thumb">
+        <div class="player-media-thumb">
           <MediaItemThumb
-            v-if="curQueueItem?.media_item || curQueueItem?.image"
+            v-if="
+              (player.powered && curQueueItem?.media_item) ||
+              curQueueItem?.image
+            "
             class="media-thumb"
             size="55"
             :item="curQueueItem?.media_item || curQueueItem"
             :fallback="imgCoverDark"
           />
-          <div v-else-if="player.current_media?.image_url">
+          <div v-else-if="player.powered && player.current_media?.image_url">
             <v-img
               class="media-thumb"
               size="55"
@@ -127,7 +130,10 @@
           v-if="!player.powered"
           variant="icon"
           class="player-command-btn"
-          @click.stop="api.playerCommandPowerToggle(player.player_id)"
+          @click="
+            api.playerCommandPowerToggle(player.player_id);
+            store.activePlayerId = player.player_id;
+          "
           ><v-icon
             :size="getBreakpointValue({ breakpoint: 'phone' }) ? '30' : '32'"
             >mdi-power</v-icon
@@ -141,6 +147,10 @@
           class="player-command-btn"
           style="height: 50px"
           icon-style="circle-outline"
+          @click.stop="
+            if (player.state != PlayerState.PLAYING)
+              store.activePlayerId = player.player_id;
+          "
         />
         <!-- menu button -->
         <Button

src/components/VolumeControl.vue

@@ -358,7 +358,7 @@ const syncCheckBoxChange = async function (
           playersToSync.value = [];
         });
     }
-  }, 2000);
+  }, 1000);
 };
 </script>
 

src/components/mods/ResponsiveIcon.vue

@@ -14,7 +14,7 @@
       minHeight: staticHeight ? staticHeight : minHeight,
       minWidth: staticWidth ? staticWidth : minWidth,
     }"
-    @click.stop="disabled ? $event.preventDefault() : $emit('clicked')"
+    @click="disabled ? $event.preventDefault() : $emit('click', $event)"
   >
     <v-badge :model-value="badge == true" color="error" dot>
       <v-icon
@@ -87,7 +87,7 @@ withDefaults(defineProps<ResponsiveIconProps>(), {
 });
 
 const emit = defineEmits<{
-  (e: "clicked"): void;
+  (e: "click", evt: MouseEvent): void;
 }>();
 
 const adjustIconSize = () => {

src/layouts/default/ItemContextMenu.vue

@@ -182,7 +182,7 @@ export const getPlayMenuItems = function (
   if (items.length == 0 || !itemIsAvailable(items[0])) {
     return playMenuItems;
   }
-  if (!store.activePlayerId) return playMenuItems;
+  if (!store.activePlayer) return playMenuItems;
   if (items[0].media_type == MediaType.FOLDER) return playMenuItems;
 
   // Play from here...

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

@@ -6,7 +6,7 @@
     :icon="item?.favorite ? 'mdi-heart' : 'mdi-heart-outline'"
     :title="$t('tooltip.favorite')"
     :type="'btn'"
-    @clicked="onClick"
+    @click="onClick"
   />
 </template>
 

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

@@ -1,33 +1,48 @@
 <template>
   <!-- next button -->
   <ResponsiveIcon
-    v-if="isVisible"
+    v-if="isVisible && player"
     v-bind="icon"
-    :disabled="
-      !store.activePlayerQueue ||
-      !store.activePlayerQueue?.active ||
-      store.activePlayerQueue?.items <= 1
-    "
+    :disabled="!queueHasNext && !playerHasNext"
     icon="mdi-skip-next-outline"
     :type="'btn'"
-    @clicked="api.queueCommandNext(store.activePlayerQueue!.queue_id)"
+    @click="api.playerCommandNext(player.player_id)"
   />
 </template>
 
 <script setup lang="ts">
 import api from "@/plugins/api";
-import { store } from "@/plugins/store";
+import { Player, PlayerFeature, PlayerQueue } from "@/plugins/api/interfaces";
 import ResponsiveIcon, {
   ResponsiveIconProps,
 } from "@/components/mods/ResponsiveIcon.vue";
+import { computed } from "vue";
 
 // properties
 export interface Props {
+  player: Player | undefined;
+  playerQueue?: PlayerQueue;
   isVisible?: boolean;
   icon?: ResponsiveIconProps;
 }
-withDefaults(defineProps<Props>(), {
+const compProps = withDefaults(defineProps<Props>(), {
+  playerQueue: undefined,
   isVisible: true,
   icon: undefined,
 });
+
+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;
+  if (!compProps.player.current_media) return false;
+  return compProps.player.supported_features.includes(
+    PlayerFeature.NEXT_PREVIOUS,
+  );
+});
 </script>

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

@@ -1,29 +1,12 @@
 <template>
-  <!-- play/pause button: only when MA queue is active -->
+  <!-- play/pause button: disabled if no content -->
   <ResponsiveIcon
-    v-if="isVisible && playerQueue"
+    v-if="isVisible && player"
     v-bind="icon"
-    :disabled="playerQueue.items == 0"
+    :disabled="!queueCanPlay && !playerCanPlay"
     :icon="iconStyle ? `${baseIcon}-${iconStyle}` : baseIcon"
     :type="'btn'"
-    @clicked="api.queueCommandPlayPause(playerQueue!.queue_id)"
-  />
-  <!-- stop button: player is playing other source (not MA)-->
-  <ResponsiveIcon
-    v-else-if="isVisible && player?.state == PlayerState.PLAYING"
-    v-bind="icon"
-    icon="mdi-stop"
-    :type="'btn'"
-    @click="api.queueCommandStop(player!.player_id)"
-  />
-  <!-- play button: all other situations-->
-  <ResponsiveIcon
-    v-else-if="isVisible"
-    v-bind="icon"
-    :disabled="!player?.active_source"
-    :icon="`mdi-play-${iconStyle}`"
-    :type="'btn'"
-    @clicked="api.playerCommandPlay(player?.player_id!)"
+    @click="api.playerCommandPlayPause(player.player_id)"
   />
 </template>
 
@@ -51,7 +34,16 @@ const compProps = withDefaults(defineProps<Props>(), {
   icon: undefined,
   iconStyle: "circle",
 });
-
+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 baseIcon = computed(() => {
   if (compProps.player?.state == PlayerState.PLAYING) {
     return "mdi-pause";