Fix expo-video

Author: adimiz1

package-lock.json

@@ -13,28 +13,148 @@ export class ExpoVideoAdapter implements VideoPlayerAdapter {
 
   private loadExpoVideo(): void {
     try {
+      console.log('ExpoVideoAdapter - Attempting to load expo-video...');
       this.expoVideoModule = require('expo-video');
+      console.log('ExpoVideoAdapter - expo-video loaded successfully:', {
+        hasVideoView: !!this.expoVideoModule?.VideoView,
+        hasCreateVideoPlayer: !!this.expoVideoModule?.createVideoPlayer,
+        exports: Object.keys(this.expoVideoModule || {})
+      });
     } catch (error) {
+      console.log('ExpoVideoAdapter - Failed to load expo-video:', error);
       this.expoVideoModule = null;
     }
   }
 
   isAvailable(): boolean {
-    // TODO: expo-video support requires architectural changes to support hooks
-    // The current class-based adapter system is incompatible with expo-video's hook-based API
-    // For now, return false to allow clean fallback to expo-av
-    // This maintains the correct priority: try expo-video first, fall back to expo-av
-    return false;
+    // Check if expo-video module loaded successfully and has Video component
+    const available = !!(this.expoVideoModule && this.expoVideoModule.VideoView);
+    console.log('ExpoVideoAdapter - isAvailable():', {
+      hasModule: !!this.expoVideoModule,
+      hasVideoView: !!this.expoVideoModule?.VideoView,
+      result: available
+    });
+    return available;
   }
 
   getAdapterName(): string {
     return VideoPlayerType.EXPO_VIDEO;
   }
 
-  renderVideo(_props: VideoPlayerProps, _ref: RefObject<VideoPlayerRef | null>): ReactElement {
-    // This method should never be called since isAvailable() returns false
-    // expo-video support requires architectural changes for hooks compatibility
-    throw new Error('expo-video is not available - requires architectural redesign for hooks support');
+  renderVideo(props: VideoPlayerProps, ref: RefObject<VideoPlayerRef | null>): ReactElement {
+    console.log('ExpoVideoAdapter - renderVideo() called with:', {
+      videoUri: props.videoUri,
+      hasStyle: !!props.style,
+      useNativeControls: props.useNativeControls
+    });
+
+    if (!this.isAvailable()) {
+      console.log('ExpoVideoAdapter - renderVideo() failed: not available');
+      throw new Error('expo-video is not available');
+    }
+
+    const { VideoView, createVideoPlayer } = this.expoVideoModule;
+    console.log('ExpoVideoAdapter - Using expo-video components:', {
+      hasVideoView: !!VideoView,
+      hasCreateVideoPlayer: !!createVideoPlayer
+    });
+    
+    // Create VideoPlayer instance for expo-video
+    const player = createVideoPlayer({ uri: props.videoUri });
+    
+    // Configure player properties
+    player.loop = false;
+    player.muted = false;
+    
+    // Set up event listeners for status updates
+    if (props.onPlaybackStatusUpdate) {
+      // Listen to various player events and map them to status updates
+      player.addListener('playingChange', (isPlaying: boolean) => {
+        const status = {
+          uri: props.videoUri,
+          isLoaded: true,
+          shouldPlay: isPlaying,
+          isPlaying: isPlaying,
+          positionMillis: player.currentTime * 1000,
+          durationMillis: player.duration * 1000,
+          isMuted: player.muted,
+          rate: 1.0,
+          volume: player.muted ? 0 : 1.0
+        };
+        props.onPlaybackStatusUpdate!(status);
+      });
+      
+      player.addListener('timeUpdate', () => {
+        const status = {
+          uri: props.videoUri,
+          isLoaded: true,
+          shouldPlay: player.playing,
+          isPlaying: player.playing,
+          positionMillis: player.currentTime * 1000,
+          durationMillis: player.duration * 1000,
+          isMuted: player.muted,
+          rate: 1.0,
+          volume: player.muted ? 0 : 1.0
+        };
+        props.onPlaybackStatusUpdate!(status);
+      });
+    }
+    
+    // Handle errors
+    if (props.onError) {
+      player.addListener('error', (error: any) => {
+        props.onError!(error);
+      });
+    }
+    
+    return React.createElement(VideoView, {
+      ref: (videoInstance: any) => {
+        if (ref && typeof ref === 'object' && 'current' in ref) {
+          // Store the player reference for compatibility with existing code
+          ref.current = {
+            ...videoInstance,
+            // Add expo-av compatible methods for backward compatibility
+            setStatusAsync: async (status: any) => {
+              if (status.shouldPlay !== undefined) {
+                if (status.shouldPlay) {
+                  player.play();
+                } else {
+                  player.pause();
+                }
+              }
+              if (status.positionMillis !== undefined) {
+                player.currentTime = status.positionMillis / 1000;
+              }
+              if (status.isMuted !== undefined) {
+                player.muted = status.isMuted;
+              }
+            },
+            _currentStatus: {
+              uri: props.videoUri,
+              isLoaded: true,
+              shouldPlay: player.playing,
+              positionMillis: player.currentTime * 1000,
+              durationMillis: player.duration * 1000,
+              isMuted: player.muted
+            }
+          };
+        }
+      },
+      player: player,
+      style: props.style,
+      nativeControls: props.useNativeControls || false,
+      contentFit: 'contain',
+      onLoad: (data: any) => {
+        if (props.onLoad) {
+          props.onLoad(data);
+        }
+      },
+      onLoadStart: (data: any) => {
+        if (props.onLoadStart) {
+          props.onLoadStart(data);
+        }
+      },
+    });
   }
 
   private processExpoVideoEvents(videoRef: VideoPlayerRef | null, eventType: string, data: any): void {

src/adapters/ExpoVideoAdapter.tsx

@@ -27,16 +27,24 @@ export class VideoPlayerFactory {
   static getAvailableAdapter(): VideoPlayerAdapter {
     this.initializeAdapters();
 
+    console.log('VideoPlayerFactory - Finding available adapter...');
+
     // Find the first available adapter
     for (const adapter of this.adapters) {
       const isAvailable = adapter.isAvailable();
+      console.log('VideoPlayerFactory - Checking adapter:', {
+        name: adapter.getAdapterName(),
+        isAvailable: isAvailable
+      });
 
       if (isAvailable) {
+        console.log('VideoPlayerFactory - Selected adapter:', adapter.getAdapterName());
         return adapter;
       }
     }
 
     // If no adapter is available, return fallback
+    console.log('VideoPlayerFactory - No adapters available, using fallback');
     return new FallbackVideoAdapter('No video player library found. Install expo-video or expo-av.');
   }