Improve 'Now playing' screen for other resolutions as well#1548
Merged
Improve 'Now playing' screen for other resolutions as well#1548
Conversation
SimeonAT
added a commit
to SimeonAT/music-assistant-frontend
that referenced
this pull request
Mar 10, 2026
Remove whitespace that appears when song is not explicit. Remove Vuetify tooltip Add Shadcn checkbox Shadcn checkbox can now modify list item Remove Vuetify checkbox Align checkbox with subtitle Make the enqueue options in the contextmenu more clear Temporary fix so the user doesnt get stuck on the players menu (music-assistant#1515) Remove redundant speaker button from floating player lint playerfullscreen Always show play button on listitem, move track duration fix floating player z-index Rounded style for overlayed menus (music-assistant#1525) Change username min required characters to 2 instead of 3 (music-assistant#1526) Adapt the column counts when the player menu is open or closed (music-assistant#1514) Chore(deps): Bump vue from 3.5.28 to 3.5.29 (music-assistant#1524) Bumps [vue](https://github.com/vuejs/core) from 3.5.28 to 3.5.29. - [Release notes](https://github.com/vuejs/core/releases) - [Changelog](https://github.com/vuejs/core/blob/main/CHANGELOG.md) - [Commits](vuejs/core@v3.5.28...v3.5.29) --- updated-dependencies: - dependency-name: vue dependency-version: 3.5.29 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Chore(deps): Bump happy-dom from 20.5.3 to 20.7.0 (music-assistant#1523) Bumps [happy-dom](https://github.com/capricorn86/happy-dom) from 20.5.3 to 20.7.0. - [Release notes](https://github.com/capricorn86/happy-dom/releases) - [Commits](capricorn86/happy-dom@v20.5.3...v20.7.0) --- updated-dependencies: - dependency-name: happy-dom dependency-version: 20.7.0 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Chore(deps-dev): Bump @types/node from 25.2.3 to 25.3.3 (music-assistant#1522) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 25.2.3 to 25.3.3. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-version: 25.3.3 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Chore(deps): Bump vue-router from 5.0.2 to 5.0.3 (music-assistant#1521) Bumps [vue-router](https://github.com/vuejs/router) from 5.0.2 to 5.0.3. - [Release notes](https://github.com/vuejs/router/releases) - [Commits](vuejs/router@v5.0.2...v5.0.3) --- updated-dependencies: - dependency-name: vue-router dependency-version: 5.0.3 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Chore(deps): Bump @tailwindcss/vite from 4.2.0 to 4.2.1 (music-assistant#1520) Bumps [@tailwindcss/vite](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-vite) from 4.2.0 to 4.2.1. - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/commits/v4.2.1/packages/@tailwindcss-vite) --- updated-dependencies: - dependency-name: "@tailwindcss/vite" dependency-version: 4.2.1 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Chore(deps): Bump reka-ui from 2.8.0 to 2.8.2 (music-assistant#1518) Bumps [reka-ui](https://github.com/unovue/reka-ui) from 2.8.0 to 2.8.2. - [Release notes](https://github.com/unovue/reka-ui/releases) - [Commits](unovue/reka-ui@v2.8.0...v2.8.2) --- updated-dependencies: - dependency-name: reka-ui dependency-version: 2.8.2 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Chore(deps): Bump @tabler/icons-vue from 3.37.1 to 3.38.0 (music-assistant#1516) Bumps [@tabler/icons-vue](https://github.com/tabler/tabler-icons/tree/HEAD/packages/icons-vue) from 3.37.1 to 3.38.0. - [Release notes](https://github.com/tabler/tabler-icons/releases) - [Commits](https://github.com/tabler/tabler-icons/commits/v3.38.0/packages/icons-vue) --- updated-dependencies: - dependency-name: "@tabler/icons-vue" dependency-version: 3.38.0 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Make PlayerCard a bit more dense hide scrollbars Properly align the widget rows to the side of the screen Make the homescreen widgets more compact Add support for multiple media types in playlist (music-assistant#1504) * adapt playlist create dialog * add to playlist * ui updates * Small improvements --------- Co-authored-by: stvncode <steven.travers20@gmail.com> Lokalise translations update (music-assistant#1527) Translations update Co-authored-by: OzGav <OzGav@users.noreply.github.com> Revert work on the reload toast for chunks (music-assistant#1528) * Revert work on the reload toast for chunks * review Align the players controls so they are in more consistent positions (music-assistant#1529) Few UI scale fixes + fix 1 thumb shown on large screens (music-assistant#1530) Chore(deps): Bump colorthief from 2.6.0 to 2.7.0 (music-assistant#1517) * Chore(deps): Bump colorthief from 2.6.0 to 2.7.0 Bumps [colorthief](https://github.com/lokesh/color-thief) from 2.6.0 to 2.7.0. - [Release notes](https://github.com/lokesh/color-thief/releases) - [Commits](lokesh/color-thief@v2.6.0...v2.7.0) --- updated-dependencies: - dependency-name: colorthief dependency-version: 2.7.0 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * fix build --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: stvncode <steven.travers20@gmail.com> Do not inline the PlayerMenu on desktop (music-assistant#1531) Map each checkbox label to the correspond item of the media item. Adjust spacing between explicit icon and song name. Remove global checkbox CSS class Add back whitespace to keep all global.css exactly the same as in main branch. Replace explicit `any` types with proper TypeScript types across code… (music-assistant#1533) * Replace explicit `any` types with proper TypeScript types across codebase Remove ~55 `any` occurrences across 29 files, replacing them with proper types (`unknown`, specific interfaces, union types, generics) to prepare for enabling the `@typescript-eslint/no-explicit-any` ESLint rule. 9 remaining `any` usages are guarded with eslint-disable-next-line comments for known limitations (TanStack/Zod schema casts, contravariant event handler Maps, SVG icon component record, Promise command Map). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix TypeScript build errors from `any` type removal - Cast evt.data to Record<string, unknown> in HomeWidgetRows.vue - Replace null with undefined in RepeatBtn.vue color sources - Add ?? fallback for RepeatMode in RepeatBtn.vue click handler --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Gray out protocol badges when protocol is unavailable. Improve removal of any (music-assistant#1535) fix: Optimize NowPlaying badge animation to minimize CPU usage Update src/components/ListviewItemTitle.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update src/components/ListviewItemTitle.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Added is-playing class to List View Item Title component Add margin bottom to align checkbox and song name with song subtitle when checkboxes are shown. Set default values for all props except for media item Add back is-playing class to the necessary <span/> elements Replace transition: all with specific properties for GPU offload Narrows all 14 transition: all declarations to only the properties actually being animated, allowing the browser to skip layout recalculation and composite on the GPU where possible. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Apply eslint auto-formatting to transition declarations Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Use requestAnimationFrame for smooth 60fps progress bar updates Replace setInterval(500ms) with rAF loop so the player timeline slider moves smoothly instead of in visible half-second jumps. A 1s fallback interval keeps text labels current when the tab is backgrounded. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Add missing color transition to LyricsViewer, throttle rAF to ~15fps, use strict null checks - Add color to LyricsViewer transition list to prevent visual snap on active lyric - Throttle PlayerTimeline rAF loop to ~15fps (64ms) to reduce unnecessary reactivity - Normalize null checks to strict equality (=== / !==) in PlayerTimeline Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Fix bottom player bottom not showing on phones now playing feat: add party mode guest interface with server API integration Add guest view and party mode features: - GuestView for guests to search and add songs - PartyView for hosts to show QR code - PartyModeQR component for QR code display - Rate limiting composable for client-side token management - Guest search with relevance scoring - Auth plugin updates for party mode guest detection Key change: Guest queue operations now use party_mode/add_to_queue and party_mode/skip API endpoints instead of generic queue commands. This gives the server full control over guest queue behavior. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> fix: Use new extra-attribute names fix: update extra_attributes to use new party mode keys Update PlayerFullscreen.vue, GuestView.vue, and interfaces.ts to use the new party_mode_guest and party_mode_boosted attribute names instead of the old added_by_user_role and queue_option keys. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> chore: Merge conflict cleanup fix: auth/join_code/exchange api refactor: Simplify PartyModeQR to handle string | null response The party_mode/url API now returns a plain string or null instead of a dict with url/code/expires_at fields. Simplify the frontend accordingly. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> fix: Wait for API init before checking party route access The party route's beforeEnter guard was checking store.enabledPlugins before the API had initialized, causing a redirect to home on page refresh. Now waits for ConnectionState.INITIALIZED first, matching the pattern used by the admin route guard. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> fix: Fix performance issue with background blur Add some tests Update src/layouts/default/Footer.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update src/plugins/router.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update src/views/Login.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update src/views/PartyView.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update src/views/PartyView.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update src/views/Login.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update src/App.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Update src/plugins/auth.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> copilot reviews fix ci fix: add guest role to display dialog options feat: Some shadcn updates fix: Fix invalid command party_mode/config chore: Refactor guest view and rename files chore: formatting fix: Fix player controls fix: Revert bottom nav changes fix: Use User in favor of provider_name fix: Update party mode username fix: Revert party user name fix: Use ?? for consistancy fix: Remove duplicate EventType import in App.vue Consolidated the duplicate EventType import (imported once as EventType and again as ApiEventType) into a single import. Removed unused UserRole import. fix: Deduplicate party_mode/config API calls Created usePartyModeConfig composable to centralize config fetching with request deduplication and caching. Previously Footer, SidebarFooter, PartyModeDisplayView, PartyModeGuestView, PartyModeQR, and PlayerFullscreen all independently fetched party_mode/config. Also added missing qr_* fields to PartyModeConfig interface. fix: Remove unused frameless property from store The frameless mode support was removed from Default.vue but the store property was left behind. No other code references it. fix: Use clearAuth() instead of setToken("") on guest code failure setToken("") would store an empty string and attempt to decode it as JWT. clearAuth() properly nulls out the token, claims, and removes the stored token from localStorage. Revert "fix: Remove unused frameless property from store" This reverts commit 7966b08. fix: Restore frameless mode support in Default.vue The party mode changes inadvertently removed the existing frameless query parameter support used by external integrations. This restores the v-if/v-else template logic and the route.query.frameless watcher. fix: Prevent footer flash on /party entry Don't hide footer/remove bottom padding until party config has actually loaded. Previously config starting as null caused a brief flash where the footer would disappear then reappear. fix: Replace custom snackbar with vue-sonner toast in guest view Use the same toast system as the rest of the app instead of a custom v-snackbar implementation. Removes the showSnackbar callback pattern from useGuestSearch in favor of direct toast calls. fix: Wire height prop in BottomNavigation component The height was hardcoded to 60 ignoring the prop passed by Footer.vue. Now accepts a height prop (default 60) so PWA mode correctly uses 70. chore: formatting fix: Add missing PartyModeConfig fields in rate limiting test feat: Add back arrow to guest search bar Shows a back arrow to the left of the search input when viewing search results or artist tracks. Tapping it returns to the queue view. Browser and mobile back buttons already provided this behavior; this adds a visible in-page control. fix: scroll when going back to queue Fix album art and playing animation not always properly scaling Fix mobile search bar width and remove search button Fix party mode page not reloading after settings have changed. fix: Align back button with search bar chore: Reorganize translations fix: Update PlayerViewFullscreen badge styling fix: More string fixes chore: formatting chore: Reorder and remove unused translation items Apply suggestion from @stvncode Co-authored-by: Steven Travers <steven.travers20@gmail.com> chore: Merge conflicts fix: Make countdown color match tokens left fix: Remove NowPlaying badge on current track due to poor performance chore: revert bottomnav changes fix: Re-add now playing animation (optimized) Open Party mode in a new tab Change now playing colour to MA blue and QR code to white Make 'search result (25) fit on oneline Move skip button in guest view so that titles are visible when a badge is applied Change skip button to MA blue Make the badges scale to screensize Make QR code and song title scale to screensize Test commit Revert "Test commit" This reverts commit 54e0553. Fix guest view now-playing state and queue item badge visibility - Set store.activePlayerId from party mode player in guest view (guests use PartyModeGuestLayout which skips Default layout's player selection) - Fix NowPlayingBadge v-if to properly include isPlaying in condition - Remove bogus zod/v4/locales import from PartyModeQueueItem - Add debug logging for isPlaying state (temporary, for ongoing debugging) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Tweak design of search result actions and item Fix translation issue with token badges + tweak styling Tweak queue item styling Initial search bar styling tweaks fix: Revert to solid boost button color style: Button styling style: Try out text only buttons with balanced layout Revert "style: Try out text only buttons with balanced layout" This reverts commit 1d35f9c. style: fix boost button Revert "Merge branch 'jukebox-view' of https://github.com/apophisnow/ma-frontend into jukebox-view" This reverts commit b9774c2, reversing changes made to 0370e65. fix: Disable webplayer for dashboard page Chore(deps): Bump svgo from 3.3.2 to 3.3.3 (music-assistant#1538) Bumps [svgo](https://github.com/svg/svgo) from 3.3.2 to 3.3.3. - [Release notes](https://github.com/svg/svgo/releases) - [Commits](svg/svgo@v3.3.2...v3.3.3) --- updated-dependencies: - dependency-name: svgo dependency-version: 3.3.3 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Stop sidebar showing when mobile layout forced (music-assistant#1545) Chore(deps): Bump immutable from 5.0.3 to 5.1.5 (music-assistant#1537) Bumps [immutable](https://github.com/immutable-js/immutable-js) from 5.0.3 to 5.1.5. - [Release notes](https://github.com/immutable-js/immutable-js/releases) - [Changelog](https://github.com/immutable-js/immutable-js/blob/main/CHANGELOG.md) - [Commits](immutable-js/immutable-js@v5.0.3...v5.1.5) --- updated-dependencies: - dependency-name: immutable dependency-version: 5.1.5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Fix issue scrolling on the add to playlist dialog Add all fixes stated in code review, and adjusted CSS to align checkbox & title with subtitle when checkboxes are shown. Improve now playing screen phone (music-assistant#1543) * optimize album art and font size * Center text vertically * Tweak cutoff values for album title and player button for Galaxy S8+ screens * Give quality icon a bit more breathing room * Feedback * Slightly increase the font-size * Gradient + tiny bump fontsize * Gradient from -25% till +25% * Fix queue overlap and add padding to art Improve 'Now playing' screen for other resolutions as well (music-assistant#1548) * Rounded corners on other resolutions * Vertically center text a bit more * Feedback * Feedback Fix scrollbar in PWA now playing. Float artist and songtile up. Fix fonts for queue and artist/title. Fix padding for quality icon. Fix song title overflowing and not scrolling on mobile. Fix overlap of quality icon. Feedback.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow up to this PR. Now also apply the same design changes to other resolutions as well.
Some old vs new for ipad air / desktop with queue opened: