Sync notification volume with video player

[bluewojack]

Summary

• track the ReactPlayer volume in VideoPlaybackContext
• apply the current video volume to background notification sounds

Fixes CaptainFact/captain-fact#93

Test plan

• npx eslint app/contexts/VideoPlaybackContext.jsx app/components/VideoDebate/VideoDebatePlayer.jsx app/components/App/BackgroundNotifier.jsx
• git diff --check
• npm test -- --passWithNoTests --runTestsByPath app/contexts/VideoPlaybackContext.jsx app/components/VideoDebate/VideoDebatePlayer.jsx app/components/App/BackgroundNotifier.jsx --watchAll=false

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• In VideoDebatePlayer, ReactPlayer’s onVolumeChange callback receives the volume value (and sometimes other args), not a DOM event, so event.target.volume will be undefined; update this to use the numeric volume argument directly (e.g., onVolumeChange={volume => setVolume(volume)}).

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `VideoDebatePlayer`, `ReactPlayer`’s `onVolumeChange` callback receives the volume value (and sometimes other args), not a DOM event, so `event.target.volume` will be undefined; update this to use the numeric volume argument directly (e.g., `onVolumeChange={volume => setVolume(volume)}`).

## Individual Comments

### Comment 1
<location path="app/components/VideoDebate/VideoDebatePlayer.jsx" line_range="36" />
<code_context>
       onPlay={() => setPlaying(true)}
       onPause={() => setPlaying(false)}
       onProgress={({ playedSeconds }) => setPosition(playedSeconds)}
+      onVolumeChange={(event) => setVolume(event.target.volume)}
       width=""
       height=""
</code_context>
<issue_to_address>
**issue (bug_risk):** Use the onVolumeChange callback value directly instead of assuming a DOM event shape

This handler assumes a DOM event (`event.target.volume`), but players like ReactPlayer pass the volume directly as a number. In that case `event.target` will be undefined and you’ll propagate an invalid volume to the context. Use the callback argument directly instead, e.g. `onVolumeChange={(volume) => setVolume(volume)}` or `onVolumeChange={setVolume}`, to avoid depending on a DOM event shape.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[bluewojack]

Updated after Sourcery's review: removed the unsupported ReactPlayer onVolumeChange handler, sync volume from the internal player, clamp invalid volume values, and added unit coverage for volume normalization.