Audio Player initial design

[yujonglee]

No description provided.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Adds an AudioPlayer context/provider using WaveSurfer, refactors AudioPlayer to consume that context, wraps the sessions editor UI with AudioPlayerProvider, and renames prop isAudioPlayerVisible → isPlayerVisible across header/recording components.

Changes

Cohort / File(s)	Summary
Audio context & provider apps/desktop2/src/contexts/audio-player.tsx	New AudioPlayerProvider and useAudioPlayerContext hook; manages WaveSurfer lifecycle, container registration, playback state (isPlaying, currentTime, duration), and controls (play/pause/toggle).
Sessions page integration apps/desktop2/src/components/main/body/sessions/index.tsx	Wraps editor and related UI with AudioPlayerProvider; reorganizes layout containers (gap, flex-1), moves TitleInput/InnerHeader/NoteEditor inside provider area, adds FloatingRegenerateButton, and conditionally renders AudioPlayer from provider state. Prop passed to OuterHeader renamed to isPlayerVisible.
Outer header prop rename apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx	Prop isAudioPlayerVisible → isPlayerVisible; wires RecordingButton with isPlayerVisible and onToggleAudioPlayer as handleClick.
Recording button refactor apps/desktop2/src/components/main/body/sessions/outer-header/recording.tsx	Replaces SessionRow-driven API with { isPlayerVisible, handleClick }; adds ClickToPlay and WhilePlaying subcomponents; consumes useAudioPlayerContext for playback state; adds formatTime helper and cn usage.
Audio player refactor apps/desktop2/src/components/main/body/sessions/player.tsx	AudioPlayer no longer accepts url; consumes context (registerContainer, isPlaying, currentTime, duration, togglePlay), removes local WaveSurfer setup/cleanup, and updates layout/styles and class utility usage.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor U as User
    participant S as Sessions Page
    participant A as AudioPlayerProvider (context)
    participant H as OuterHeader / RecordingButton
    participant P as AudioPlayer (UI)
    participant W as WaveSurfer

    rect #f5f8ff
    note right of S: Mount sessions wrapped by AudioPlayerProvider
    S->>A: Render Provider(url)
    A->>W: init WaveSurfer(container?, url), bind events
    A-->>A: expose context {registerContainer, play, pause, toggle, isPlaying, currentTime, duration}
    end

    U->>H: click play/pause
    H->>A: togglePlay()
    alt start playing
        A->>W: play()
        W-->>A: play event → isPlaying = true
    else pause
        A->>W: pause()
        W-->>A: pause event → isPlaying = false
    end

    par playback progress
        W-->>A: audioprocess(currentTime)
        A-->>P: provide currentTime, duration, isPlaying
        P-->>U: update time and icon
    and visibility
        U->>S: toggle player visibility
        S-->>H: isPlayerVisible flag
        S-->>P: conditional render when visible
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• Audio Player initial design #1563 — Implements the same AudioPlayer context/provider and related component updates (prop rename and AudioPlayer consumer changes).
• Audio player initial impl #1552 — Earlier audio-player implementation that this change refactors into a provider-based approach.

Suggested reviewers

• duckduckhero

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	No description was provided, leaving the pull request without any summary or explanation of its changes. This absence makes it difficult for reviewers to quickly grasp the purpose and scope of the introduced audio player features.	Please add a descriptive summary of the changes outlining the addition of the audio player provider, context, and related UI updates to help reviewers understand the intent and scope of the pull request.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly communicates the introduction of an initial audio player design, matching the core changes around the new provider, context, and UI components. It is concise and focuses on the main feature without extraneous details.

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6614a74 and bd9afcc.

📒 Files selected for processing (1)

• apps/desktop2/src/contexts/audio-player.tsx (1 hunks)

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7ca6c46 and 6614a74.

⛔ Files ignored due to path filters (1)

• apps/desktop2/public/assets/audio.wav is excluded by !**/*.wav

📒 Files selected for processing (5)

• apps/desktop2/src/components/main/body/sessions/index.tsx (2 hunks)
• apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx (2 hunks)
• apps/desktop2/src/components/main/body/sessions/outer-header/recording.tsx (1 hunks)
• apps/desktop2/src/components/main/body/sessions/player.tsx (1 hunks)
• apps/desktop2/src/contexts/audio-player.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

apps/desktop2/**/*.{tsx,jsx}

📄 CodeRabbit inference engine (apps/desktop2/.cursor/rules/style.mdc)

apps/desktop2/**/*.{tsx,jsx}: When there are many Tailwind classNames with conditional logic, use the cn utility imported as import { cn } from "@hypr/ui/lib/utils"
Always pass an array to cn when composing Tailwind classNames
Split cn array entries by logical grouping when composing Tailwind classNames

Files:

• apps/desktop2/src/contexts/audio-player.tsx
• apps/desktop2/src/components/main/body/sessions/player.tsx
• apps/desktop2/src/components/main/body/sessions/outer-header/recording.tsx
• apps/desktop2/src/components/main/body/sessions/index.tsx
• apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx

**/*.{js,ts,tsx,rs}

⚙️ CodeRabbit configuration file

**/*.{js,ts,tsx,rs}: 1. Do not add any error handling. Keep the existing one.
2. No unused imports, variables, or functions.
3. For comments, keep it minimal. It should be about "Why", not "What".

Files:

• apps/desktop2/src/contexts/audio-player.tsx
• apps/desktop2/src/components/main/body/sessions/player.tsx
• apps/desktop2/src/components/main/body/sessions/outer-header/recording.tsx
• apps/desktop2/src/components/main/body/sessions/index.tsx
• apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx

🧬 Code graph analysis (3)

apps/desktop2/src/components/main/body/sessions/player.tsx (2)

apps/desktop2/src/contexts/audio-player.tsx (1)

• useAudioPlayerContext (17-23)

packages/ui/src/lib/utils.ts (1)

• cn (4-6)

apps/desktop2/src/components/main/body/sessions/outer-header/recording.tsx (2)

packages/ui/src/lib/utils.ts (1)

• cn (4-6)

apps/desktop2/src/contexts/audio-player.tsx (1)

• useAudioPlayerContext (17-23)

apps/desktop2/src/components/main/body/sessions/index.tsx (3)

apps/desktop2/src/contexts/audio-player.tsx (1)

• AudioPlayerProvider (30-124)

apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx (1)

• OuterHeader (12-57)

apps/desktop2/src/components/main/body/sessions/player.tsx (1)

• AudioPlayer (6-37)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: ci (windows, windows-latest)
• GitHub Check: ci (macos, macos-14)