feat: add fullscreen control methods (requestFullscreen, exitFullscreen, getFullscreen)

[saseungmin]

Added three new methods to VimeoPlayer for fullscreen control:

• requestFullscreen(): Enter fullscreen mode
• exitFullscreen(): Exit fullscreen mode
• getFullscreen(): Get current fullscreen state

Updated example app to demonstrate fullscreen functionality with auto-exit demo.

const player = useVimeoPlayer(vimeoUrl, {
  autoplay: true,
  controls: true,
  fullscreen: true, // default: true
});

const onFullscreenChange = async () => {
  const isFullscreen = await player.getFullscreen();

  if (isFullscreen) {
    await player.exitFullscreen();
    return;
  }

  await player.requestFullscreen();
};

Related discussion:

• Expose `requestFullscreen` method from Vimeo Player via `useVimeoPlayer` #33

Summary by CodeRabbit

• New Features
  • Added fullscreen controls for the Vimeo player: enter, exit, and query fullscreen state.
  • Example app updated with fullscreen toggle buttons, an auto-exit demo, and a realtime fullscreen status display.
  • UI styling adjusted to accommodate the new fullscreen controls and spacing.

[changeset-bot]

🦋 Changeset detected

Latest commit: 37a79e3

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

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]

Walkthrough

Adds fullscreen control to the Vimeo player by introducing three public methods—requestFullscreen(), exitFullscreen(), and getFullscreen()—implemented across VimeoPlayer, WebVimeoPlayerController, WebviewVimeoPlayerController, exposed to the WebView, and demonstrated in the example app UI.

Changes

Cohort / File(s)	Change Summary
Core fullscreen API layer src/module/VimeoPlayer.ts, src/module/WebVimeoPlayerController.ts, src/module/WebviewVimeoPlayerController.ts	Added async public methods requestFullscreen(), exitFullscreen(), and getFullscreen() that delegate through the controller hierarchy (direct calls or via executeCommand) to the underlying player.
WebView integration src/VimeoView.tsx	Exposed requestFullscreen, exitFullscreen, and getFullscreen command handlers on window.playerCommands for WebView-based control.
Example app example/src/App.tsx	Added useVimeoEvent(player, 'fullscreenchange'), fullscreen control UI with enter/exit buttons (including auto-exit demo), new styles and layout adjustments, and fullscreen status display.
Infrastructure .gitignore	Added dist/vimeo-js.md to ignore rules with a comment header.
Changeset .changeset/cyan-lights-wait.md	Documented the new fullscreen capability and public API additions.

Sequence Diagram

sequenceDiagram
    participant App
    participant VimeoPlayer
    participant Controller
    participant WebView
    participant PlayerAPI

    App->>VimeoPlayer: requestFullscreen()
    VimeoPlayer->>Controller: requestFullscreen()
    alt Native/Web controller
        Controller->>PlayerAPI: requestFullscreen()
        PlayerAPI-->>Controller: void
    else WebView controller
        Controller->>WebView: executeCommand('requestFullscreen')
        WebView->>PlayerAPI: request fullscreen
        PlayerAPI-->>WebView: ✓
        WebView-->>Controller: void
    end
    Controller-->>VimeoPlayer: Promise<void>
    VimeoPlayer-->>App: Promise<void>

    App->>VimeoPlayer: getFullscreen()
    VimeoPlayer->>Controller: getFullscreen()
    Controller->>PlayerAPI: getFullscreen()
    PlayerAPI-->>Controller: boolean
    Controller-->>VimeoPlayer: Promise<boolean>
    VimeoPlayer-->>App: Promise<boolean>

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Areas to inspect closely:
  • Consistency of method signatures, return types, and error propagation across VimeoPlayer → WebVimeoPlayerController → WebviewVimeoPlayerController.
  • executeCommand usage for getFullscreen (ensure boolean return handling and default fallback).
  • WebView window.playerCommands wiring and any message serialization/typing.
  • Example app: event wiring for fullscreenchange, UI state updates, and the auto-exit timeout behavior.

Possibly related PRs

• feat: v1.0.0 #17 — Modifies the same VimeoPlayer/VimeoView/controller files; likely shares refactors this change builds on.
• feat: vimeo player controller #4 — Introduced executeCommand-style controller APIs that fullscreen methods delegate to.

Poem

🐰 I hopped into code where the video can grow,
Request, exit, and ask — now the screen can glow.
A button, a watcher, a three-second flight,
Fullscreen for viewers — snug, comfy, and bright! 🎥✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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 (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: adding three new fullscreen control methods to VimeoPlayer.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/fullscreen-control

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b7ce742 and 37a79e3.

📒 Files selected for processing (1)

• src/module/WebviewVimeoPlayerController.ts (1 hunks)

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

• src/module/WebviewVimeoPlayerController.ts

⏰ 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). (1)

• GitHub Check: Cloudflare Pages

---

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-vimeo-bridge-example with    Cloudflare Pages

Latest commit:	37a79e3
Status:	✅  Deploy successful!
Preview URL:	https://e1de1a01.react-native-vimeo-bridge-example.pages.dev
Branch Preview URL:	https://feat-fullscreen-control.react-native-vimeo-bridge-example.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

example/src/App.tsx (1)

236-242: Consider cleanup for setTimeout to follow best practices.

The auto-exit timeout is not cleaned up if the component unmounts during the 3-second delay. While this is unlikely to cause issues since it only calls player methods (not state updates), adding cleanup would be more robust.

Apply this pattern:

  <TouchableOpacity
    style={[styles.button, styles.fullscreenButton]}
    onPress={async () => {
      await player.requestFullscreen();

-     setTimeout(async () => {
+     const timeoutId = setTimeout(async () => {
        await player.exitFullscreen();
      }, 3000);
+     
+     // Optional: store timeoutId in a ref and clear on unmount
    }}
  >

Or use a useRef to store the timeout ID and clear it in a useEffect cleanup function.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 629e85d and b7ce742.

📒 Files selected for processing (7)

• .changeset/cyan-lights-wait.md (1 hunks)
• .gitignore (1 hunks)
• example/src/App.tsx (6 hunks)
• src/VimeoView.tsx (1 hunks)
• src/module/VimeoPlayer.ts (1 hunks)
• src/module/WebVimeoPlayerController.ts (1 hunks)
• src/module/WebviewVimeoPlayerController.ts (1 hunks)

⏰ 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). (1)

• GitHub Check: Cloudflare Pages

🔇 Additional comments (7)

src/VimeoView.tsx (1)

176-178: LGTM! Fullscreen commands properly integrated.

The three new fullscreen commands follow the established pattern for player commands and correctly delegate to the underlying Vimeo Player API methods.

src/module/WebVimeoPlayerController.ts (1)

150-160: LGTM! Fullscreen methods follow established patterns.

The implementation correctly:

• Uses optional chaining for safe delegation to the player instance
• Provides appropriate fallback value (false) for getFullscreen()
• Maintains consistency with existing getter/setter methods like getMuted() and setMuted()

.changeset/cyan-lights-wait.md (1)

1-34: LGTM! Clear and accurate documentation.

The changeset appropriately documents the new fullscreen control methods with a practical example demonstrating the usage pattern.

src/module/VimeoPlayer.ts (1)

133-143: LGTM! Fullscreen API properly exposed.

The three new methods correctly delegate to the controller with:

• Appropriate optional chaining for null-safe access
• Proper return types and fallback values
• Consistency with the existing API pattern

example/src/App.tsx (2)

38-38: LGTM! Fullscreen event properly subscribed.

The fullscreen event watcher follows the same pattern as other event subscriptions in the component.

---

128-128: LGTM! UI layout and styles properly configured.

The ScrollView configuration and new fullscreen section styles are consistent with the existing component patterns and properly accommodate the new fullscreen controls.

Also applies to: 272-276, 415-433

src/module/WebviewVimeoPlayerController.ts (1)

89-95: LGTM! Fullscreen action methods correctly implemented.

Both requestFullscreen() and exitFullscreen() properly delegate to executeCommand without waiting for a result, consistent with other action methods like play() and pause().