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

.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();
+};
+```

.gitignore

@@ -86,3 +86,6 @@ android/generated
 nitrogen/
 
 dist/
+
+# vimeo-js
+vimeo-js.md

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 (
     <SafeAreaView style={styles.container}>
-      <ScrollView showsVerticalScrollIndicator={false}>
+      <ScrollView contentContainerStyle={styles.contentContainer} showsVerticalScrollIndicator={false}>
         <View style={styles.header}>
           <Text style={styles.title}>Vimeo Player</Text>
           <Text style={styles.subtitle}>Video ID: {videoId}</Text>
@@ -225,6 +226,35 @@ function App() {
           </View>
         </View>
 
+        <View style={styles.fullscreenSection}>
+          <Text
+            style={styles.sectionTitle}
+          >{`Fullscreen control (${fullscreen?.fullscreen ? 'fullscreen' : 'not fullscreen'})`}</Text>
+          <View style={styles.fullscreenControls}>
+            <TouchableOpacity
+              style={[styles.button, styles.fullscreenButton]}
+              onPress={async () => {
+                await player.requestFullscreen();
+
+                setTimeout(async () => {
+                  await player.exitFullscreen();
+                }, 3000);
+              }}
+            >
+              <Text style={styles.buttonText}>{'Enter fullscreen (auto-exit in 3s)'}</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[styles.button, styles.fullscreenButton]}
+              onPress={async () => {
+                await player.exitFullscreen();
+              }}
+            >
+              <Text style={styles.buttonText}>{'Exit fullscreen'}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
         <View style={styles.infoSection}>
           <TouchableOpacity style={[styles.button, styles.infoButton]} onPress={getPlayerInfo}>
             <Text style={styles.buttonText}>📊 Player info</Text>
@@ -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',
   },

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');

src/module/VimeoPlayer.ts

@@ -129,6 +129,18 @@ class VimeoPlayer {
   async getVideoUrl(): Promise<string> {
     return this.controller?.getVideoUrl() ?? '';
   }
+
+  async requestFullscreen(): Promise<void> {
+    await this.controller?.requestFullscreen();
+  }
+
+  async exitFullscreen(): Promise<void> {
+    await this.controller?.exitFullscreen();
+  }
+
+  async getFullscreen(): Promise<boolean> {
+    return this.controller?.getFullscreen() ?? false;
+  }
 }
 
 export default VimeoPlayer;

src/module/WebVimeoPlayerController.ts

@@ -147,6 +147,18 @@ class WebVimeoPlayerController {
     return this.player?.getVideoUrl() ?? '';
   }
 
+  async requestFullscreen(): Promise<void> {
+    await this.player?.requestFullscreen();
+  }
+
+  async exitFullscreen(): Promise<void> {
+    await this.player?.exitFullscreen();
+  }
+
+  async getFullscreen(): Promise<boolean> {
+    return this.player?.getFullscreen() ?? false;
+  }
+
   off(event: string, callback?: EventCallback): void {
     this.player?.off(event, callback);
   }

src/module/WebviewVimeoPlayerController.ts

@@ -86,6 +86,18 @@ class WebviewVimeoPlayerController {
     return this.executeCommand('getVideoUrl', [], true);
   }
 
+  async requestFullscreen(): Promise<void> {
+    await this.executeCommand('requestFullscreen');
+  }
+
+  async exitFullscreen(): Promise<void> {
+    await this.executeCommand('exitFullscreen');
+  }
+
+  async getFullscreen(): Promise<boolean> {
+    return this.executeCommand('getFullscreen', [], true);
+  }
+
   async destroy(): Promise<void> {
     await this.executeCommand('destroy');
   }