Experimenting with the player sidebar

music-assistant · Jan 24, 2025 · 5630e65 · 5630e65
1 parent 1658d39
commit 5630e65
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 70 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -29,6 +29,7 @@ module.exports = {
     ],
     'vue/multi-word-component-names': 'off',
     'vue/no-v-text-v-html-on-component': 'off',
+    'vue/no-v-html': 'off',
     'vue/attribute-hyphenation': ['error', 'always', {ignore: ['onLoad']}],
     'no-unused-vars': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',

diff --git a/src/components/PlayerCard.vue b/src/components/PlayerCard.vue
@@ -131,6 +131,20 @@
 
       <!-- power/play/pause + menu button -->
       <template #append>
+        <!-- power button -->
+        <Button
+          v-if="player.supported_features.includes(PlayerFeature.POWER)"
+          variant="icon"
+          class="player-command-btn"
+          @click.stop="
+            api.playerCommandPowerToggle(player.player_id);
+            store.activePlayerId = player.player_id;
+          "
+          ><v-icon
+            :size="getBreakpointValue({ breakpoint: 'phone' }) ? '30' : '32'"
+            >mdi-power</v-icon
+          ></Button
+        >
         <!-- play/pause button -->
         <Button
           v-if="
@@ -140,7 +154,7 @@
           "
           variant="icon"
           class="player-command-btn"
-          @click="
+          @click.stop="
             api.playerCommandPlayPause(player.player_id);
             store.activePlayerId = player.player_id;
           "
@@ -150,20 +164,7 @@
               player.state == PlayerState.PLAYING ? 'mdi-pause' : 'mdi-play'
             "
         /></Button>
-        <!-- power button -->
-        <Button
-          v-else
-          variant="icon"
-          class="player-command-btn"
-          @click="
-            api.playerCommandPowerToggle(player.player_id);
-            store.activePlayerId = player.player_id;
-          "
-          ><v-icon
-            :size="getBreakpointValue({ breakpoint: 'phone' }) ? '30' : '32'"
-            >mdi-power</v-icon
-          ></Button
-        >
+
         <!-- menu button -->
         <Button
           v-if="showMenuButton"
@@ -180,11 +181,12 @@
       </template>
     </v-list-item>
     <VolumeControl
-      v-if="showVolumeControl && player.powered"
+      v-if="showVolumeControl"
       :player="player"
       :show-sync-controls="showSyncControls"
-      :hide-heading-row="true"
+      :show-heading-row="false"
       :show-sub-players="showSubPlayers"
+      :show-volume-control="player.powered"
       :allow-wheel="false"
     />
   </v-card>
@@ -197,6 +199,7 @@ import {
   Player,
   PlayerState,
   PlayerType,
+  PlayerFeature,
 } from "@/plugins/api/interfaces";
 import { store } from "@/plugins/store";
 import MediaItemThumb from "@/components/MediaItemThumb.vue";

diff --git a/src/components/VolumeControl.vue b/src/components/VolumeControl.vue
@@ -3,7 +3,7 @@
     <!-- main (or group) volume/power -->
     <!-- mute btn + player name + optional sync checkbox-->
     <v-list-item
-      v-if="!hideHeadingRow"
+      v-if="showHeadingRow"
       class="volumesliderrow heading"
       :link="false"
       :style="player.powered ? 'opacity: 1' : 'opacity: 0.6'"
@@ -31,6 +31,7 @@
     </v-list-item>
     <!-- mute btn + volume slider + volume level text (or collapse btn)-->
     <v-list-item
+      v-if="showVolumeControl"
       class="volumesliderrow"
       :link="false"
       :style="player.powered ? 'opacity: 0.75' : 'opacity: 0.35'"
@@ -60,7 +61,6 @@
           :is-powered="player.powered"
           :disabled="
             !player.available ||
-            !player.powered ||
             (!player.supported_features.includes(PlayerFeature.VOLUME_SET) &&
               !player.group_childs.length)
           "
@@ -98,9 +98,7 @@
     <!-- (child) volume player rows -->
     <div
       v-if="
-        showSubPlayers &&
-        player.powered &&
-        (player.group_childs.length > 0 || showSyncControls)
+        showSubPlayers && (player.group_childs.length > 0 || showSyncControls)
       "
       @click.stop
     >
@@ -230,7 +228,8 @@ export interface Props {
   player: Player;
   showSyncControls?: boolean;
   showSubPlayers?: boolean;
-  hideHeadingRow?: boolean;
+  showHeadingRow?: boolean;
+  showVolumeControl?: boolean;
   allowWheel?: boolean;
 }
 const compProps = defineProps<Props>();

diff --git a/src/helpers/useMediaBrowserMetaData.ts b/src/helpers/useMediaBrowserMetaData.ts
@@ -7,10 +7,10 @@ function playerMediaToMetadata(item: QueueItem) {
   let album: string | undefined;
 
   //here we cast to Track to access properties that are only available on Track
-  if (item.media_item!.media_type === MediaType.TRACK) {
+  if (item.media_item?.media_type === MediaType.TRACK) {
     const currentMedia = item.media_item as Track;
     artist = currentMedia.artists.map((a) => a.name).join(", ");
-    album = currentMedia.album.name;
+    album = currentMedia.album?.name;
   }
 
   return new MediaMetadata({
@@ -29,7 +29,7 @@ export function useMediaBrowserMetaData() {
     () => store.curQueueItem,
     (newMedia) => {
       if (!newMedia || !newMedia.media_item) return;
-      //Lets make sure that the new media isnt spammed
+      //Lets make sure that the new media isn't spammed
       if (newMedia.media_item.uri === currentMediaUri) return;
       const newMediaMetaData = playerMediaToMetadata(newMedia);
       currentMediaUri = newMedia.media_item.uri;

diff --git a/src/layouts/default/PlayerOSD/PlayerControlBtn/VolumeBtn.vue b/src/layouts/default/PlayerOSD/PlayerControlBtn/VolumeBtn.vue
@@ -89,7 +89,8 @@
           :player="store.activePlayer"
           :show-sub-players="true"
           :show-sync-controls="false"
-          :hide-heading-row="false"
+          :show-heading-row="true"
+          :show-volume-control="true"
           :allow-wheel="true"
           style="margin-left: 18px"
         />

diff --git a/src/layouts/default/PlayerSelect.vue b/src/layouts/default/PlayerSelect.vue
@@ -34,52 +34,35 @@
 
       <v-divider />
 
+      <v-list flat style="margin: 10px 5px 15px 5px">
+        <PlayerCard
+          v-for="player in sortedPlayers.filter(
+            (x) =>
+              [PlayerState.PLAYING, PlayerState.PAUSED].includes(x.state) ||
+              (api.queues[x.player_id]?.items > 0 && x.powered) ||
+              x.player_id == store.activePlayerId,
+          )"
+          :id="player.player_id"
+          :key="player.player_id"
+          :player="player"
+          :show-volume-control="true"
+          :show-menu-button="true"
+          :show-sub-players="
+            showSubPlayers && player.player_id == store.activePlayerId
+          "
+          :show-sync-controls="
+            player.supported_features.includes(PlayerFeature.SET_MEMBERS)
+          "
+          @click="playerClicked(player)"
+        />
+      </v-list>
+
       <v-expansion-panels
+        v-model="selectedPanel"
         variant="accordion"
         flat
         class="expansion"
-        :model-value="0"
       >
-        <v-expansion-panel style="padding: 0">
-          <v-expansion-panel-title
-            ><h3>
-              {{ $t("currently_playing_players") }}
-            </h3></v-expansion-panel-title
-          >
-          <v-expansion-panel-text style="padding: 0">
-            <v-list flat style="margin: -20px 3px 5px 3px">
-              <PlayerCard
-                v-for="player in sortedPlayers.filter(
-                  (x) =>
-                    [PlayerState.PLAYING, PlayerState.PAUSED].includes(
-                      x.state,
-                    ) ||
-                    (x.player_id == store.activePlayerId && x.powered),
-                )"
-                :id="player.player_id"
-                :key="player.player_id"
-                :player="player"
-                :show-volume-control="true"
-                :show-menu-button="true"
-                :show-sub-players="
-                  showSubPlayers && player.player_id == store.activePlayerId
-                "
-                :show-sync-controls="
-                  player.supported_features.includes(PlayerFeature.SET_MEMBERS)
-                "
-                @click="playerClicked(player)"
-              />
-              <v-alert
-                v-if="
-                  sortedPlayers.filter((x) =>
-                    [PlayerState.PLAYING, PlayerState.PAUSED].includes(x.state),
-                  ).length == 0
-                "
-                >{{ $t("no_player_playing") }}</v-alert
-              >
-            </v-list>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
         <v-expansion-panel style="padding: 0">
           <v-expansion-panel-title
             ><h3>
@@ -95,10 +78,12 @@
                 :id="player.player_id"
                 :key="player.player_id"
                 :player="player"
-                :show-volume-control="false"
+                :show-volume-control="true"
                 :show-menu-button="true"
                 :show-sub-players="
-                  showSubPlayers && player.player_id == store.activePlayerId
+                  showSubPlayers &&
+                  player.player_id == store.activePlayerId &&
+                  player.group_childs.length > 0
                 "
                 :show-sync-controls="
                   player.supported_features.includes(PlayerFeature.SET_MEMBERS)
@@ -155,6 +140,7 @@ import PlayerCard from "@/components/PlayerCard.vue";
 import Button from "@/components/mods/Button.vue";
 
 const showSubPlayers = ref(false);
+const selectedPanel = ref<number | null>(null);
 
 // computed properties
 const sortedPlayers = computed(() => {