From b7ce7429c1babf6e59ba5c45b578ab459a3f294e Mon Sep 17 00:00:00 2001 From: saseungmin Date: Sun, 9 Nov 2025 18:11:09 +0900 Subject: [PATCH 1/2] feat: add fullscreen control methods (requestFullscreen, exitFullscreen, getFullscreen) 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. --- .changeset/cyan-lights-wait.md | 34 +++++++++++++ .gitignore | 3 ++ example/src/App.tsx | 57 +++++++++++++++++++++- src/VimeoView.tsx | 3 ++ src/module/VimeoPlayer.ts | 12 +++++ src/module/WebVimeoPlayerController.ts | 12 +++++ src/module/WebviewVimeoPlayerController.ts | 12 +++++ 7 files changed, 131 insertions(+), 2 deletions(-) create mode 100644 .changeset/cyan-lights-wait.md diff --git a/.changeset/cyan-lights-wait.md b/.changeset/cyan-lights-wait.md new file mode 100644 index 0000000..afcbbdc --- /dev/null +++ b/.changeset/cyan-lights-wait.md @@ -0,0 +1,34 @@ +--- +"react-native-vimeo-bridge": minor +--- + +feat: add fullscreen control methods (requestFullscreen, exitFullscreen, getFullscreen) + +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. + +Example usage: + +```tsx +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(); +}; +``` diff --git a/.gitignore b/.gitignore index beb52da..7d7f349 100644 --- a/.gitignore +++ b/.gitignore @@ -86,3 +86,6 @@ android/generated nitrogen/ dist/ + +# vimeo-js +vimeo-js.md diff --git a/example/src/App.tsx b/example/src/App.tsx index 49f6284..282a228 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -35,6 +35,7 @@ function App() { const progress = useVimeoEvent(player, 'progress'); const volumeStatus = useVimeoEvent(player, 'volumechange'); const playbackRate = useVimeoEvent(player, 'playbackratechange'); + const fullscreen = useVimeoEvent(player, 'fullscreenchange'); const volume = safeNumber(volumeStatus?.volume); const currentTime = safeNumber(timeupdate?.seconds); @@ -124,7 +125,7 @@ function App() { return ( - + Vimeo Player Video ID: {videoId} @@ -225,6 +226,35 @@ function App() { + + {`Fullscreen control (${fullscreen?.fullscreen ? 'fullscreen' : 'not fullscreen'})`} + + { + await player.requestFullscreen(); + + setTimeout(async () => { + await player.exitFullscreen(); + }, 3000); + }} + > + {'Enter fullscreen (auto-exit in 3s)'} + + + { + await player.exitFullscreen(); + }} + > + {'Exit fullscreen'} + + + + 📊 Player info @@ -239,6 +269,10 @@ const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', + paddingBottom: 50, + }, + contentContainer: { + flexGrow: 1, }, header: { padding: 16, @@ -348,7 +382,7 @@ const styles = StyleSheet.create({ volumeButton: { paddingHorizontal: 12, paddingVertical: 8, - backgroundColor: '#9E9E9E', + backgroundColor: '#607D8B', borderRadius: 6, minWidth: 60, }, @@ -378,6 +412,25 @@ const styles = StyleSheet.create({ marginBottom: 8, minWidth: 50, }, + fullscreenSection: { + margin: 16, + marginBottom: 8, + padding: 16, + backgroundColor: '#fff', + borderRadius: 8, + }, + fullscreenButton: { + paddingHorizontal: 12, + paddingVertical: 8, + backgroundColor: '#607D8B', + borderRadius: 6, + minWidth: 60, + }, + fullscreenControls: { + flexDirection: 'row', + justifyContent: 'space-around', + flexWrap: 'wrap', + }, activeButton: { backgroundColor: '#FF5722', }, diff --git a/src/VimeoView.tsx b/src/VimeoView.tsx index 27ec852..bfc0f96 100644 --- a/src/VimeoView.tsx +++ b/src/VimeoView.tsx @@ -173,6 +173,9 @@ function VimeoView({ player, height = 200, width = screenWidth, style, webViewPr getVideoWidth: () => player.getVideoWidth(), getVideoHeight: () => player.getVideoHeight(), getVideoUrl: () => player.getVideoUrl(), + requestFullscreen: () => player.requestFullscreen(), + exitFullscreen: () => player.exitFullscreen(), + getFullscreen: () => player.getFullscreen(), destroy: () => { player.off('play'); player.off('playing'); diff --git a/src/module/VimeoPlayer.ts b/src/module/VimeoPlayer.ts index 2ccf7b3..f256302 100644 --- a/src/module/VimeoPlayer.ts +++ b/src/module/VimeoPlayer.ts @@ -129,6 +129,18 @@ class VimeoPlayer { async getVideoUrl(): Promise { return this.controller?.getVideoUrl() ?? ''; } + + async requestFullscreen(): Promise { + await this.controller?.requestFullscreen(); + } + + async exitFullscreen(): Promise { + await this.controller?.exitFullscreen(); + } + + async getFullscreen(): Promise { + return this.controller?.getFullscreen() ?? false; + } } export default VimeoPlayer; diff --git a/src/module/WebVimeoPlayerController.ts b/src/module/WebVimeoPlayerController.ts index fc2fe0f..7d8d883 100644 --- a/src/module/WebVimeoPlayerController.ts +++ b/src/module/WebVimeoPlayerController.ts @@ -147,6 +147,18 @@ class WebVimeoPlayerController { return this.player?.getVideoUrl() ?? ''; } + async requestFullscreen(): Promise { + await this.player?.requestFullscreen(); + } + + async exitFullscreen(): Promise { + await this.player?.exitFullscreen(); + } + + async getFullscreen(): Promise { + return this.player?.getFullscreen() ?? false; + } + off(event: string, callback?: EventCallback): void { this.player?.off(event, callback); } diff --git a/src/module/WebviewVimeoPlayerController.ts b/src/module/WebviewVimeoPlayerController.ts index 6fdea5d..7893ccb 100644 --- a/src/module/WebviewVimeoPlayerController.ts +++ b/src/module/WebviewVimeoPlayerController.ts @@ -86,6 +86,18 @@ class WebviewVimeoPlayerController { return this.executeCommand('getVideoUrl', [], true); } + async requestFullscreen(): Promise { + await this.executeCommand('requestFullscreen'); + } + + async exitFullscreen(): Promise { + await this.executeCommand('exitFullscreen'); + } + + async getFullscreen(): Promise { + return this.executeCommand('getFullscreen', [], false); + } + async destroy(): Promise { await this.executeCommand('destroy'); } From 37a79e34575ea6e459d20481eb0697e22515c265 Mon Sep 17 00:00:00 2001 From: saseungmin Date: Sun, 9 Nov 2025 18:18:05 +0900 Subject: [PATCH 2/2] fix: set need result fullscreen value to true in Vimeo player controller --- src/module/WebviewVimeoPlayerController.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/module/WebviewVimeoPlayerController.ts b/src/module/WebviewVimeoPlayerController.ts index 7893ccb..e7e05d5 100644 --- a/src/module/WebviewVimeoPlayerController.ts +++ b/src/module/WebviewVimeoPlayerController.ts @@ -95,7 +95,7 @@ class WebviewVimeoPlayerController { } async getFullscreen(): Promise { - return this.executeCommand('getFullscreen', [], false); + return this.executeCommand('getFullscreen', [], true); } async destroy(): Promise {