Skip to content

feat(player): make desktop playback controls resizable - #557

Open
michaelmoskie wants to merge 3 commits into
henriquesebastiao:mainfrom
michaelmoskie:adjustable-UI
Open

michaelmoskie wants to merge 3 commits into
henriquesebastiao:mainfrom
michaelmoskie:adjustable-UI

Conversation

@michaelmoskie

Copy link
Copy Markdown
Contributor

This pull request introduces a new adjustable layout for the mini player component, allowing users to resize and customize the player sections when the player is wide. The changes include a new composable for managing layout state, a new divider component for resizing, UI updates to support adjustable sections, and localization updates for new controls.

Adjustable Mini Player Layout:

  • Added a new composable useMiniPlayerLayout to manage the adjustable grid layout, handle resize logic, and persist user preferences. This enables users to unlock, drag, and reset the layout of the mini player sections. (frontend/src/components/shell/miniPlayerLayout.js [1] [2]
  • Integrated the adjustable layout into the mini player UI: sections are now organized in a grid when wide, with draggable dividers (PlayerDivider) between them. New controls allow unlocking/locking and resetting the layout. (frontend/src/components/shell/MiniPlayer.vue [1] [2] [3] [4] [5] [6] [7] [8] [9]
  • Updated styles to support the adjustable grid and responsive resizing of controls and sections. (frontend/src/components/shell/MiniPlayer.vue frontend/src/components/shell/MiniPlayer.vueR416-R483)

UI and Icon Enhancements:

Localization:

  • Added new translation strings for layout controls (unlock, lock, reset, resize sections) in all supported languages. (frontend/src/i18n/locales/en.js [1] frontend/src/i18n/locales/bg.js [2] frontend/src/i18n/locales/de.js [3] frontend/src/i18n/locales/el.js [4] frontend/src/i18n/locales/es.js [5] frontend/src/i18n/locales/fr.js [6] frontend/src/i18n/locales/hu.js [7]Add lockable pointer and keyboard dividers to the bottom player bar. Scale the controls within usable bounds and remember the layout in the browser.

Add lockable pointer and keyboard dividers to the bottom player bar. Scale the controls within usable bounds and remember the layout in the browser.
@github-actions github-actions Bot added the tests label Nov 9, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

1 participant