feat: use sexier audio waveform #265

2026-06-11T16:55:49Z

talksik commented

2026-06-11 16:55:49 +00:00

(Migrated from github.com)

Closes #261

Summary by CodeRabbit

New Features
- Replaced old level-bar meter with a centered live waveform visualization across recording overlays, playback review, media particles, and audio settings for richer frequency detail and smoother animations.
Refactor
- Unified audio visualizer usage throughout the app.
Chores
- Removed the legacy recording-mode hook and the prior simple level-bars component.

Closes #261  ## Summary by CodeRabbit * **New Features** * Replaced old level-bar meter with a centered live waveform visualization across recording overlays, playback review, media particles, and audio settings for richer frequency detail and smoother animations. * **Refactor** * Unified audio visualizer usage throughout the app. * **Chores** * Removed the legacy recording-mode hook and the prior simple level-bars component.

coderabbitai[bot] commented

2026-06-11 16:56:03 +00:00

(Migrated from github.com)

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 70e916ef-44db-464c-9305-3122b1f98244

📥 Commits

Reviewing files that changed from the base of the PR and between 8ed8e2cccb and ba82729f27.

📒 Files selected for processing (1)

js/desktop/src/components/audio/centered-waveform.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

js/desktop/src/components/audio/centered-waveform.tsx

📝 Walkthrough

Walkthrough

This PR replaces the three-bar AudioLevelBars visualizer with a new canvas-based CenteredWaveform (frequency-domain, log-spaced bars, asymmetric smoothing, DPR-aware). It also removes the local useRecordingMode hook and imports RecordingMode from the media-settings store; UI consumers are updated to the new component.

Changes

Audio Waveform Visualization Replacement

Layer / File(s)	Summary
CenteredWaveform component implementation `js/desktop/src/components/audio/centered-waveform.tsx`	New canvas-based waveform visualizer with log-spaced symmetric frequency-bin mapping, analyser attachment via silent-gain routing, asymmetric attack/release smoothing with cosine envelope, cached `currentColor` rendering, and DPR-aware backing store updates.
RecordingMode state management migration `js/desktop/src/hooks/use-recording-mode.ts`, `js/desktop/src/features/compose/use-recorder.ts`	`RecordingMode` type and `useRecordingMode` hook removed from `use-recording-mode.ts`; import source updated to `@/stores/media-settings-store` in `use-recorder.ts`.
Recording overlay component migration `js/desktop/src/features/compose/recording-overlay.tsx`	Imports `RecordingMode` from media-settings store; replaces `AudioLevelBars` with `CenteredWaveform` in review playback and live recording paths. Refactors `ReviewPlayback` audio element from `useRef` to `useState`-backed setter pattern.
Other UI components migration `js/desktop/src/features/particles/media-particle-view.tsx`, `js/desktop/src/features/settings/audio-video-settings-page.tsx`	Both files import and render `CenteredWaveform` instead of `AudioLevelBars`. Settings page reworks `InlineLevelMeter` to show a muted placeholder when no audio, or centered waveform with fixed dimensions when available; small comment tweak in particle view.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related issues

#261: Sexier audio waveform — This PR implements the new centered waveform visualization and replaces all instances of the old audio level bars, aligning with the requested UI enhancement.

Poem

🐇 I hopped in to trade bars for waves so fair,
Canvas brushed soft with frequency in air,
Log-spaced peaks wiggle, smoothing with a hum,
DPR-aware strokes make the small screens hum,
A rabbit cheers — new waveform, fresh and rare!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 60.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The pull request addresses issue `#261` by implementing a new audio waveform visualization component, but linked issue lacks detailed requirements to fully validate implementation completeness.	Review the linked issue `#261` to verify that all specified requirements for the audio waveform are met by the CenteredWaveform implementation.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'use sexier audio waveform' clearly describes the main change: replacing the AudioLevelBars component with a new CenteredWaveform component for improved visual presentation.
Out of Scope Changes check	✅ Passed	All changes are within scope: removing old AudioLevelBars component, adding new CenteredWaveform, updating imports, and moving RecordingMode type to media-settings-store.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch worktree-starry-gliding-hennessy

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/flowy-live/llink/pull/265?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)  No actionable comments were generated in the recent review. 🎉 <details> <summary>ℹ️ Recent review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: defaults **Review profile**: CHILL **Plan**: Pro Plus **Run ID**: `70e916ef-44db-464c-9305-3122b1f98244` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 8ed8e2cccb5eba45f0f23d0d00a93adbdb0d19b4 and ba82729f270039e04fe6124797b29131daffd201. </details> <details> <summary>📒 Files selected for processing (1)</summary> * `js/desktop/src/components/audio/centered-waveform.tsx` </details> <details> <summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary> * js/desktop/src/components/audio/centered-waveform.tsx </details> </details> ---  <details> <summary>📝 Walkthrough</summary> ## Walkthrough This PR replaces the three-bar AudioLevelBars visualizer with a new canvas-based CenteredWaveform (frequency-domain, log-spaced bars, asymmetric smoothing, DPR-aware). It also removes the local useRecordingMode hook and imports RecordingMode from the media-settings store; UI consumers are updated to the new component. ## Changes **Audio Waveform Visualization Replacement** |Layer / File(s)|Summary| |---|---| |**CenteredWaveform component implementation** `js/desktop/src/components/audio/centered-waveform.tsx`|New canvas-based waveform visualizer with log-spaced symmetric frequency-bin mapping, analyser attachment via silent-gain routing, asymmetric attack/release smoothing with cosine envelope, cached `currentColor` rendering, and DPR-aware backing store updates.| |**RecordingMode state management migration** `js/desktop/src/hooks/use-recording-mode.ts`, `js/desktop/src/features/compose/use-recorder.ts`|`RecordingMode` type and `useRecordingMode` hook removed from `use-recording-mode.ts`; import source updated to `@/stores/media-settings-store` in `use-recorder.ts`.| |**Recording overlay component migration** `js/desktop/src/features/compose/recording-overlay.tsx`|Imports `RecordingMode` from media-settings store; replaces `AudioLevelBars` with `CenteredWaveform` in review playback and live recording paths. Refactors `ReviewPlayback` audio element from `useRef` to `useState`-backed setter pattern.| |**Other UI components migration** `js/desktop/src/features/particles/media-particle-view.tsx`, `js/desktop/src/features/settings/audio-video-settings-page.tsx`|Both files import and render `CenteredWaveform` instead of `AudioLevelBars`. Settings page reworks `InlineLevelMeter` to show a muted placeholder when no audio, or centered waveform with fixed dimensions when available; small comment tweak in particle view.| ## Estimated code review effort 🎯 3 (Moderate) | ⏱️ ~22 minutes ## Possibly related issues - [`#261`: Sexier audio waveform](https://github.com/flowy-live/llink/issues/261) — This PR implements the new centered waveform visualization and replaces all instances of the old audio level bars, aligning with the requested UI enhancement. ## Poem > 🐇 I hopped in to trade bars for waves so fair, > Canvas brushed soft with frequency in air, > Log-spaced peaks wiggle, smoothing with a hum, > DPR-aware strokes make the small screens hum, > A rabbit cheers — new waveform, fresh and rare! </details>   <details> <summary>🚥 Pre-merge checks | ✅ 3 | ❌ 2</summary> ### ❌ Failed checks (1 warning, 1 inconclusive) | Check name | Status | Explanation | Resolution | | :-----------------: | :------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- | | Docstring Coverage | ⚠️ Warning | Docstring coverage is 60.00% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. | | Linked Issues check | ❓ Inconclusive | The pull request addresses issue `#261` by implementing a new audio waveform visualization component, but linked issue lacks detailed requirements to fully validate implementation completeness. | Review the linked issue `#261` to verify that all specified requirements for the audio waveform are met by the CenteredWaveform implementation. | <details> <summary>✅ Passed checks (3 passed)</summary> | Check name | Status | Explanation | | :------------------------: | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. | | Title check | ✅ Passed | The title 'use sexier audio waveform' clearly describes the main change: replacing the AudioLevelBars component with a new CenteredWaveform component for improved visual presentation. | | Out of Scope Changes check | ✅ Passed | All changes are within scope: removing old AudioLevelBars component, adding new CenteredWaveform, updating imports, and moving RecordingMode type to media-settings-store. | </details> ✏️ Tip: You can configure your own custom pre-merge checks in the settings. </details>   <details> <summary>✨ Finishing Touches</summary> <details> <summary>📝 Generate docstrings</summary> - [ ]  Create stacked PR - [ ]  Commit on current branch </details> <details> <summary>🧪 Generate unit tests (beta)</summary> - [ ]  Create PR with unit tests - [ ]  Commit unit tests in branch `worktree-starry-gliding-hennessy` </details> </details>   --- Comment `@coderabbitai help` to get the list of available commands and usage tips.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: FlowyLabs/llink#265