Skip to content

Improve now playing screen phone#1543

Merged
stvncode merged 10 commits intomainfrom
improve_now_playing_screen_phone
Mar 8, 2026
Merged

Improve now playing screen phone#1543
stvncode merged 10 commits intomainfrom
improve_now_playing_screen_phone

Conversation

@MarvinSchenkel
Copy link
Contributor

@MarvinSchenkel MarvinSchenkel commented Mar 6, 2026

Just thought it was fun to play a bit with the now playing screen on the phone to leverage the unused space a bit more, without changing functionality. Here are some before / after screens. Also now hide the album title and player button on really small screens (iphone SE / Galaxy S8+ like).

image image image image image image image image

Example of album title and player bar hidden on the Galaxy S8+:
image

stvncode
stvncode previously approved these changes Mar 7, 2026
Copy link
Contributor

@stvncode stvncode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good improvement, thanks @MarvinSchenkel (needs a rebase tho)

Copy link
Contributor

@stvncode stvncode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

@stvncode stvncode merged commit d251b94 into main Mar 8, 2026
8 checks passed
@stvncode stvncode deleted the improve_now_playing_screen_phone branch March 8, 2026 08:45
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants