fix(player): tighten player-bar density to spotify/lokal levels#80
Merged
Conversation
The player bar was ~120 px tall (h-24 + h-6 footer), noticeably chunkier than comparable apps (lokal sits at 80 px, Spotify around 90 px). The issue was raised on small-screen feedback — 1080p users lose meaningful vertical real estate to the player. Compact pass that preserves every existing affordance: - PlayerBar: h-24 -> h-20, px-6 -> px-4, artwork w-14 -> w-12 (iconSize 24 -> 20), space-x-4 -> space-x-3 on the track-info column, right cluster space-x-3 -> space-x-2 with p-2 -> p-1.5 and icon size 20 -> 18 on every action button (lyrics, queue, devices, mini-player, fullscreen). - PlaybackControls: play button w-10 -> w-9 (icons 20 -> 18), skip / shuffle / repeat icons aligned at 18, space-x-6 -> space-x-5, mb-3 -> mb-1.5 between transport row and progress bar. - AudioQualityFooter: h-6 -> h-5, px-6 -> px-4, text-[11px] -> [10px]. Info stays permanently visible — the kHz/kbps strip is part of the app's identity, just slimmer. Net: ~120 px -> ~100 px, gaining ~20 px back to library / detail views at every viewport.
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (23)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
scope: frontend
Not up to standards ⛔🔴 Issues
|
| Category | Results |
|---|---|
| BestPractice | 9 medium |
🟢 Metrics 15 complexity · 0 duplication
Metric Results Complexity 15 Duplication 0
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
The kHz / kbps / codec / bit-depth strip under the player bar permanently took ~24 px of vertical real estate, which adds up on 1080p displays (issue #54 territory). Audiophiles love it, casual listeners mostly don't notice it. Make it opt-in like the existing sleep-timer / A-B loop pins. - New per-profile setting `ui.show_audio_quality_footer` (default off). PlayerBar reads it via the same `getProfileSetting` + window event pattern used by the other UI toggles, so the bandeau pops in and out without a reload when the user flips the switch. - SettingsView gets a matching ToggleSwitch entry next to the A-B loop / sleep-timer toggles, with an `Activity` icon and copy explaining the trade-off. - New i18n keys `settings.showAudioQualityFooter.{title,subtitle}` propagated to all 17 locales (fr/en hand-written, the rest a best-effort translation following the existing tone).
github-actions
Bot
added
scope: i18n
InstaZDLL
force-pushed
the
fix/player-bar-compact-density
branch
from
0073f67 to
b3ac8a2
Compare
Now that the audio quality footer is opt-in, the bar's vertical breathing room exposed how undersized the 48 px artwork looked against the bar's 80 px height (16 px top + 16 px bottom whitespace). Bump to 56 px (w-14) — 12 px margin top/bottom, balanced presence without crowding the title/controls. iconSize follows at 24 so the placeholder disc stays proportional.
InstaZDLL
force-pushed
the
fix/player-bar-compact-density
branch
from
b3ac8a2 to
cd42f41
Compare
The previous compact pass took the bar to h-20 (80 px); with the follow-up controls bump (icons 18 -> 20-22, play button w-9 -> w-11, heart p-1.5 -> p-2) the elements ended up cramped — the bar felt like a small jar with oversized contents. Bump back to h-24 (96 px) so everything breathes again. Net vs main: 96 px without the audio quality strip vs the historical 120 px (h-24 + h-6 footer). Strip is now opt-in via Settings, so users who want the old density still get it for free.
The previous bump took the play button to w-11 + icons size 22 while keeping skip prev/next at 22 too — but the play button's green disc background makes it visually heavier than the bare-icon siblings, so the disparity read as 'huge play button vs thin everything else'. Pull every transport control to size 20 and the play button back to w-10 (40 px). Row reads as one coherent cluster: shuffle 20, prev 20, play (w-10) 20, next 20, repeat 20.
github-actions
Bot
added
scope: backend
…bump either version to 1.16.0
InstaZDLL
force-pushed
the
fix/player-bar-compact-density
branch
from
e5f8f72 to
5ea8dca
Compare
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
1 participant
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.
Summary
The player bar was ~120 px tall (
h-24main bar +h-6audio quality footer), noticeably chunkier than comparable apps (lokal sits at 80 px, Spotify around 90 px). Surfaced in the 1080p feedback from issue #54 — users on smaller screens lose meaningful vertical real estate.Compact pass that preserves every existing affordance, including the audio-quality strip that's part of the app's identity. Just slimmer.
Changes
PlayerBar.tsxh-24→h-20,px-6→px-4w-14 h-14 / iconSize 24→w-12 h-12 / iconSize 20space-x-4→space-x-3space-x-3→space-x-2p-2→p-1.5, iconssize={20}→size={18}PlaybackControls.tsxw-10 h-10→w-9 h-9, inner icons20→1818space-x-6→space-x-5,mb-3→mb-1.5AudioQualityFooter.tsxh-6→h-5,px-6→px-4,text-[11px]→text-[10px]Net result
~120 px → ~100 px, ~20 px reclaimed for the library / detail views at every viewport.
Test plan
Maximize2button.