fix: preserve muted preference when replay starts after video end (#82)

[saseungmin]

fix: #82

Summary by CodeRabbit

• Bug Fixes

  • Fixed muted preference not being preserved when replaying a video after playback ends. Playback now resumes with the correct mute state across all implementations.
  • Mute state now properly synchronizes with explicit mute/unmute toggle actions.

• Improvements

  • Updated mute parameter configuration to ensure consistent behavior across web and native platforms.

[changeset-bot]

🦋 Changeset detected

Latest commit: 37c3b51

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
react-native-youtube-bridge	Patch
@react-native-youtube-bridge/react	Patch
@react-native-youtube-bridge/core	Patch
@react-native-youtube-bridge/web	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b1ad6da8-4e35-48ff-9275-245cf336d2fb

📥 Commits

Reviewing files that changed from the base of the PR and between fd60a82 and 37c3b51.

📒 Files selected for processing (5)

• .changeset/some-places-matter.md
• packages/core/src/WebYoutubePlayerController.ts
• packages/core/src/types/iframe.ts
• packages/react-native-youtube-bridge/src/hooks/useCreateLocalPlayerHtml.ts
• packages/react-native-youtube-bridge/src/hooks/youtubeIframeScripts.ts

---

📝 Walkthrough

Walkthrough

This PR introduces a muted state preservation mechanism across the YouTube bridge packages to fix an issue where video mute preferences are lost when replay starts after video playback ends. The fix tracks the desired muted state and reapplies it during ENDED-to-PLAYING state transitions in both the core controller and React Native implementations.

Changes

Cohort / File(s)	Summary
Muted State Type Definition packages/core/src/types/iframe.ts	Added optional mute field to playerVars for iframe player configuration alignment.
Core Player Controller packages/core/src/WebYoutubePlayerController.ts	Introduced desiredMuted field to track muted preference. Extended handleStateChange signature to accept muted state, added applyDesiredMutedState() method to reapply mute, and updated mute/unMute methods to synchronize desired state.
React Native Local Player packages/react-native-youtube-bridge/src/hooks/useCreateLocalPlayerHtml.ts, packages/react-native-youtube-bridge/src/hooks/youtubeIframeScripts.ts	Introduced desiredMuted state tracking with syncDesiredMutedState() and applyDesiredMutedState() functions. Modified onPlayerStateChange to synchronize mute state on non-playing states and reapply on playback start. Extended window.playerCommands mute/unmute API to track preference changes.
Release Notes .changeset/some-places-matter.md	Added patch release changelog documenting muted state preservation fix across four packages.

Sequence Diagram

sequenceDiagram
    participant User
    participant YouTubeAPI as YouTube API
    participant StateHandler as State Handler
    participant Controller as Player Controller
    
    User->>YouTubeAPI: Video plays, user mutes (muted=true)
    YouTubeAPI->>StateHandler: onStateChange(ENDED)
    StateHandler->>Controller: syncDesiredMutedState()
    Controller->>Controller: Read actual mute state from API
    User->>YouTubeAPI: Click replay button
    YouTubeAPI->>StateHandler: onStateChange(PLAYING)
    StateHandler->>Controller: applyDesiredMutedState()
    Controller->>YouTubeAPI: Reapply mute to player
    YouTubeAPI->>User: Video resumes with mute preserved

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• PR #2: Modifies iframe player state handling and mute synchronization in onReady/onPlayerStateChange—directly overlaps with muted state preservation logic.
• PR #1: Updates YouTube iframe/web player integration including useCreateLocalPlayerHtml—related player behavior and control changes.
• PR #66: Modifies useCreateLocalPlayerHtml.ts for videoId parameter handling—touches the same hook implementation area.

Poem

🐰 When videos end and replays start,
This bunny guards the muted part!
No sneaky sounds will break the spell—
Desired mute? Preserved quite well! 🔇✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title directly matches the main issue being fixed: preserving muted state when replay starts after video ends. The title is clear, specific, and accurately summarizes the primary change across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/preserve-muted-state-on-replay

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

[cloudflare-workers-and-pages]

Deploying react-native-youtube-bridge-example with    Cloudflare Pages

Latest commit:	37c3b51
Status:	✅  Deploy successful!
Preview URL:	https://4156720d.react-native-youtube-bridge-example.pages.dev
Branch Preview URL:	https://fix-preserve-muted-state-on.react-native-youtube-bridge-example.pages.dev

View logs