Skip to content

feat: Display lyrics on closed notch state under music activity#1048

Open
EdwinASalcedo wants to merge 2 commits intoTheBoredTeam:devfrom
EdwinASalcedo:feature/closed-notch-lyrics
Open

feat: Display lyrics on closed notch state under music activity#1048
EdwinASalcedo wants to merge 2 commits intoTheBoredTeam:devfrom
EdwinASalcedo:feature/closed-notch-lyrics

Conversation

@EdwinASalcedo
Copy link

@EdwinASalcedo EdwinASalcedo commented Feb 19, 2026 •
edited
Loading

Displays lyrics under the MusicActivity while the notch is in the closed state.

boringNotch_closedNotchLyrics

What was changed and why

  • Added a new Default key "enableLyricsOnClosedNotch"
  • Added a toggle within media settings
  • In ContentView I modified MusicLiveActivity to be inside a VStack so that I could display the lyrics under

Considerations

  • Looks a little weird since it dips below context menu bar
  • Transitioning from open to closed state looks off since lyrics appear instantly
  • Possibly center the lyrics?

@EdwinASalcedo EdwinASalcedo changed the title Display lyrics on closed notch state under music activity Feat: Display lyrics on closed notch state under music activity Feb 19, 2026
@EdwinASalcedo EdwinASalcedo changed the title Feat: Display lyrics on closed notch state under music activity feat: Display lyrics on closed notch state under music activity Feb 19, 2026
@theboringhumane theboringhumane force-pushed the feature/closed-notch-lyrics branch from da73f79 to e20c9d3 Compare February 27, 2026 09:25
@theboringhumane
Copy link
Member

theboringhumane commented Feb 27, 2026

image

Try to make this consistent

HarshJa1n pushed a commit to HarshJa1n/boring.notch that referenced this pull request Mar 5, 2026
@harsh-zen @EdwinASalcedo
fix(lyrics): constrain closed-notch lyrics width to center section
968366e 
Approach 1: Horizontal marquee lyrics below closed notch.

Fixes width consistency issue from PR TheBoredTeam#1048 where lyrics
spanned the full notch width (album art + center + spectrum).
Now lyrics are constrained to the center section width only,
matching the dark notch body.

Changes from original PR:
- Lyrics width matches center notch section (not full width)
- Use .caption2 font for compact closed state
- Hide lyrics when paused or during sneakPeek/expandingView
- Hide entirely when no lyrics available (no placeholder)
- Smooth height animation on appear/disappear
- Fix coordinator.sneakPeek API for current dev branch

Co-Authored-By: EdwinASalcedo <92866752+EdwinASalcedo@users.noreply.github.com>
HarshJa1n pushed a commit to HarshJa1n/boring.notch that referenced this pull request Mar 5, 2026
@EdwinASalcedo @harsh-zen
fix(lyrics): constrain closed-notch lyrics width to center section
475d14a 
Approach 1: Horizontal marquee lyrics below closed notch.

Fixes width consistency issue from PR TheBoredTeam#1048 where lyrics
spanned the full notch width (album art + center + spectrum).
Now lyrics are constrained to the center section width only,
matching the dark notch body.

Changes from original PR:
- Lyrics width matches center notch section (not full width)
- Use .caption2 font for compact closed state
- Hide lyrics when paused or during sneakPeek/expandingView
- Hide entirely when no lyrics available (no placeholder)
- Smooth height animation on appear/disappear
- Fix coordinator.sneakPeek API for current dev branch

Co-Authored-By: EdwinASalcedo <92866752+EdwinASalcedo@users.noreply.github.com>
HarshJa1n added a commit to HarshJa1n/boring.notch that referenced this pull request Mar 5, 2026
@HarshJa1n @EdwinASalcedo @harsh-zen
fix(lyrics): constrain closed-notch lyrics width to center section
d4a7eba 
Approach 1: Horizontal marquee lyrics below closed notch.

Fixes width consistency issue from PR TheBoredTeam#1048 where lyrics
spanned the full notch width (album art + center + spectrum).
Now lyrics are constrained to the center section width only,
matching the dark notch body.

Changes from original PR:
- Lyrics width matches center notch section (not full width)
- Use .caption2 font for compact closed state
- Hide lyrics when paused or during sneakPeek/expandingView
- Hide entirely when no lyrics available (no placeholder)
- Smooth height animation on appear/disappear
- Fix coordinator.sneakPeek API for current dev branch

Co-Authored-By: EdwinASalcedo <92866752+EdwinASalcedo@users.noreply.github.com>
HarshJa1n added a commit to HarshJa1n/boring.notch that referenced this pull request Mar 5, 2026
@HarshJa1n @EdwinASalcedo
fix(lyrics): constrain closed-notch lyrics width to center section
0b1d1ee 
Approach 1: Horizontal marquee lyrics below closed notch.

Fixes width consistency issue from PR TheBoredTeam#1048 where lyrics
spanned the full notch width (album art + center + spectrum).
Now lyrics are constrained to the center section width only,
matching the dark notch body.

Changes from original PR:
- Lyrics width matches center notch section (not full width)
- Use .caption2 font for compact closed state
- Hide lyrics when paused or during sneakPeek/expandingView
- Hide entirely when no lyrics available (no placeholder)
- Smooth height animation on appear/disappear
- Fix coordinator.sneakPeek API for current dev branch

Co-Authored-By: EdwinASalcedo <92866752+EdwinASalcedo@users.noreply.github.com>
@HarshJa1n
Copy link

HarshJa1n commented Mar 5, 2026 •
edited
Loading

Hey! I really wanted this feature so I picked it up and went ahead to think about the UX and implement it myself.

I started with Approach 1 — built on top of @EdwinASalcedo's work, fixed the width consistency issue (lyrics now align with the notch center section instead of spanning the full width), centered everything, and cleaned up the animations. But the horizontal marquee scrolling felt a bit off — the constant circular motion was distracting and didn't quite fit with the rest of the notch UI.

So I tried Approach 2 — instead of scrolling text, the lyrics pop down below the notch (same animation style as the song-change sneak peek). Text is centered, wraps to 2 lines max, and truncates if it's still too long. This feels way more consistent with the existing UX.

Approach 1 (Marquee):

  • Horizontal scrolling lyrics, 1 line
  • Constrained to notch center width
  • Pros: Shows full lyrics eventually
  • Cons: Constant motion is distracting
Screen.Recording.2026-03-05.at.17.05.58.mov

Approach 2 (Pop-down):

  • Static centered text, up to 2 lines
  • Same pop-down animation as the existing sneak peek
  • Pros: Consistent with existing UI, cleaner
  • Cons: Very long lines get truncated
Screen.Recording.2026-03-05.at.17.04.12.mov

For now I went with Approach 2. Screen recordings attached.

@theboringhumane Would love to hear what you all think — especially whether the pop-down interaction feels right for this feature, or if you’d prefer the marquee approach.

Happy to open a PR from my fork if you'd like changes are here fix/closed-notch-lyrics-v2 .

@HarshJa1n
Copy link

HarshJa1n commented Mar 5, 2026 •
edited
Loading

I think I finally got it right, no cons.
Approach 3 — Vertical scroll within a 2-line container. Long lyrics (>2 lines) smoothly scroll up line-by-line, timed to the lyric segment's duration. Short lyrics stay vertically centered. No truncation — the full lyric is readable.

Screen.Recording.2026-03-05.at.22.03.33.mov

@EdwinASalcedo
Copy link
Author

EdwinASalcedo commented Mar 5, 2026

image

Try to make this consistent

fixedHeight

@theboringhumane Fixed vertical spacing and also preview of new lyrics transition

CleanShot.2026-03-05.at.15.31.23.mp4

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@EdwinASalcedo @theboringhumane @HarshJa1n