Some very small fixes and tweaks after beta testing (#1164)

* Only show now playing label on desktop layout

* Show Now playing badge only when player is playing

* Add option to show the mobile layout even on desktop

* Update store.ts

Author: marcelveldt

src/App.vue

@@ -64,6 +64,10 @@ onMounted(() => {
   const allowBuiltinPlayer =
     localStorage.getItem("frontend.settings.enable_builtin_player") != "false";
 
+  const forceMobileLayout =
+    localStorage.getItem("frontend.settings.force_mobile_layout") == "true";
+  store.forceMobileLayout = forceMobileLayout;
+
   // set color theme (and listen for color scheme changes from browser)
   setTheme();
   window

src/components/ItemsListing.vue

@@ -196,6 +196,7 @@ import {
   ItemMapping,
   MediaItemTypeOrItemMapping,
   MediaType,
+  PlaybackState,
   PodcastEpisode,
   Radio,
   type Album,
@@ -388,6 +389,7 @@ const isSelected = function (item: MediaItemTypeOrItemMapping) {
 };
 
 const isPlaying = function (item: MediaItemType, itemtype: string): boolean {
+  if (store.activePlayer?.playback_state != PlaybackState.PLAYING) return false;
   const current = store.curQueueItem?.media_item as
     | Track
     | Radio

src/components/ListviewItem.vue

@@ -153,7 +153,10 @@
     <!-- actions -->
     <template #append>
       <!-- Now Playing Badge -->
-      <NowPlayingBadge v-if="isPlaying" />
+      <NowPlayingBadge
+        v-if="isPlaying"
+        :show-badge="getBreakpointValue('bp7')"
+      />
       <!-- hi res icon -->
       <v-img
         v-if="HiResDetails"

src/components/LyricsViewer.vue

@@ -150,7 +150,7 @@ const hasTimestamps = computed(() => {
   const plainLyrics = props.mediaItem?.metadata?.lyrics;
 
   // Check lrc_lyrics field
-  if (syncedLyrics && syncedLyrics.includes('[')) {
+  if (syncedLyrics && syncedLyrics.includes("[")) {
     return true;
   }
 
@@ -229,7 +229,9 @@ const fetchLyrics = () => {
       logSync(`Loaded ${lyrics.value.length} synchronized lyrics lines`, false);
     } else if (lyricsToProcess) {
       // For plain text lyrics without timestamps
-      const lyricsLines = lyricsToProcess.split("\n").filter((line) => line.trim());
+      const lyricsLines = lyricsToProcess
+        .split("\n")
+        .filter((line) => line.trim());
 
       lyrics.value = lyricsLines
         .map((line) => ({

src/components/Toolbar.vue

@@ -17,7 +17,7 @@
 
     <template #title>
       <slot name="title">
-        <div v-if="!getBreakpointValue('bp3') && home" class="mobile-brand">
+        <div v-if="store.mobileLayout && home" class="mobile-brand">
           <img
             src="@/assets/icon.svg"
             alt="Music Assistant"
@@ -194,6 +194,7 @@
 import { ContextMenuItem } from "@/layouts/default/ItemContextMenu.vue";
 import { api } from "@/plugins/api";
 import { getBreakpointValue } from "../plugins/breakpoint";
+import { store } from "@/plugins/store";
 
 // properties
 export interface Props {
@@ -268,22 +269,18 @@ export interface ToolBarMenuItem extends ContextMenuItem {
 }
 
 /* Mobile branding on the left */
-@media (max-width: 575px) {
-  .mobile-brand {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .mobile-brand-logo {
-    height: 30px;
-    width: 30px;
-  }
-
-  .mobile-brand-text {
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    margin-top: 4px;
-  }
+.mobile-brand {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.mobile-brand-logo {
+  height: 30px;
+  width: 30px;
+}
+.mobile-brand-text {
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  margin-top: 4px;
 }
 </style>

src/layouts/default/Footer.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- gradient background panel to make the footer player more elevated (and hide content behind it)-->
   <div
-    v-if="getBreakpointValue({ breakpoint: 'tablet' })"
+    v-if="store.mobileLayout"
     :class="$vuetify.theme.current.dark ? 'gradient-dark' : 'gradient-light'"
     :style="`
       position: fixed;
@@ -11,22 +11,17 @@
       z-index: 999;
     `"
   ></div>
-  <BottomNavigation
-    v-if="getBreakpointValue({ breakpoint: 'tablet' })"
-    :height="bottomNavHeight"
-  />
+  <BottomNavigation v-if="store.mobileLayout" :height="bottomNavHeight" />
   <v-footer
     app
     color="default"
     :class="`py-0 px-0 ${
-      getBreakpointValue({ breakpoint: 'tablet' })
+      store.mobileLayout
         ? 'mediacontrols-player-float'
         : 'mediacontrols-player-default'
     }`"
   >
-    <Player
-      :use-floating-player="getBreakpointValue({ breakpoint: 'tablet' })"
-    />
+    <Player :use-floating-player="store.mobileLayout" />
   </v-footer>
 </template>
 
@@ -36,6 +31,7 @@ import Player from "./PlayerOSD/Player.vue";
 import { store } from "@/plugins/store";
 import { computed } from "vue";
 import BottomNavigation from "@/components/navigation/BottomNavigation.vue";
+import { parseBool } from "@/helpers/utils";
 
 const bottomNavHeight = computed(() => {
   if (store.isInStandaloneMode) {

src/layouts/default/PlayerOSD/PlayerFullscreen.vue

@@ -398,8 +398,11 @@
                       <NowPlayingBadge
                         v-if="
                           item.queue_item_id ===
-                          store.curQueueItem?.queue_item_id
+                            store.curQueueItem?.queue_item_id &&
+                          store.activePlayer?.playback_state !=
+                            PlaybackState.IDLE
                         "
+                        :show-badge="getBreakpointValue('bp4')"
                       />
                       <v-icon v-if="!item.available">mdi-alert</v-icon>
                     </template>
@@ -622,6 +625,7 @@ import {
   QueueOption,
   Track,
   PLAYER_CONTROL_NONE,
+  PlaybackState,
 } from "@/plugins/api/interfaces";
 import { getBreakpointValue } from "@/plugins/breakpoint";
 import { eventbus } from "@/plugins/eventbus";

src/layouts/default/View.vue

@@ -1,9 +1,6 @@
 <template>
   <v-main id="cont" class="main-layout">
-    <Navigation
-      v-if="!getBreakpointValue({ breakpoint: 'tablet' })"
-      class="nav-section"
-    />
+    <Navigation v-if="!store.mobileLayout" class="nav-section" />
     <div class="content-section">
       <router-view v-slot="{ Component }">
         <component :is="Component" />

src/plugins/store.ts

@@ -3,9 +3,10 @@ import { MediaType, Player, PlayerQueue, QueueItem } from "./api/interfaces";
 
 import api from "./api";
 import { StoredState } from "@/components/ItemsListing.vue";
-import { isTouchscreenDevice } from "@/helpers/utils";
+import { isTouchscreenDevice, parseBool } from "@/helpers/utils";
 
 import MobileDetect from "mobile-detect";
+import { getBreakpointValue } from "./breakpoint";
 
 type DeviceType = "desktop" | "phone" | "tablet";
 const md = new MobileDetect(window.navigator.userAgent);
@@ -59,6 +60,8 @@ interface Store {
   playMenuShown: boolean;
   playActionInProgress: boolean;
   deviceType: DeviceType;
+  forceMobileLayout?: boolean;
+  mobileLayout: boolean;
 }
 
 export const store: Store = reactive({
@@ -114,4 +117,10 @@ export const store: Store = reactive({
   playMenuShown: false,
   playActionInProgress: false,
   deviceType: DEVICE_TYPE,
+  mobileLayout: computed(() => {
+    return (
+      getBreakpointValue({ breakpoint: "tablet" }) ||
+      parseBool(store.forceMobileLayout)
+    );
+  }),
 });

src/translations/en.json

@@ -369,6 +369,10 @@
                 "el_GR": "Greek"
             }
         },
+        "force_mobile_layout": {
+            "label": "Force mobile layout",
+            "description": "Force the mobile layout (with the menu-navigation at the bottom), even on larger screens."
+        },
         "no_music_providers": "No Music Providers configured",
         "no_music_providers_detail": "Start your Music Assistant experience by adding your Music providers.",
         "no_player_providers": "No Player Providers configured",
@@ -751,4 +755,4 @@
     "radiobrowser_by_votes": "By votes",
     "radiobrowser_by_clicks": "By clicks",
     "radiobrowser_by_language": "By language"
-}
+}