expo-video 1.2.2 → 1.2.3

package/build/VideoView.web.js

@@ -20,6 +20,7 @@ function mapStyles(style) {
 export const VideoView = forwardRef((props, ref) => {
     const videoRef = useRef(null);
     const mediaNodeRef = useRef(null);
+    const hasToSetupAudioContext = useRef(false);
     /**
      * Audio context is used to mute all but one video when multiple video views are playing from one player simultaneously.
      * Using audio context nodes allows muting videos without displaying the mute icon in the video player.
@@ -39,42 +40,70 @@ export const VideoView = forwardRef((props, ref) => {
             document.exitFullscreen();
         },
     }));
-    useEffect(() => {
+    // Adds the video view as a candidate for being the audio source for the player (when multiple views play from one
+    // player only one will emit audio).
+    function attachAudioNodes() {
         const audioContext = audioContextRef.current;
         const zeroGainNode = zeroGainNodeRef.current;
         const mediaNode = mediaNodeRef.current;
-        if (videoRef.current) {
-            props.player?.mountVideoView(videoRef.current);
-        }
         if (audioContext && zeroGainNode && mediaNode) {
             props.player.mountAudioNode(audioContext, zeroGainNode, mediaNode);
         }
         else {
             console.warn("Couldn't mount audio node, this might affect the audio playback when using multiple video views with the same player.");
         }
+    }
+    function detachAudioNodes() {
+        const audioContext = audioContextRef.current;
+        const mediaNode = mediaNodeRef.current;
+        if (audioContext && mediaNode && videoRef.current) {
+            props.player.unmountAudioNode(videoRef.current, audioContext, mediaNode);
+        }
+    }
+    function maybeSetupAudioContext() {
+        if (!hasToSetupAudioContext.current ||
+            !navigator.userActivation.hasBeenActive ||
+            !videoRef.current) {
+            return;
+        }
+        const audioContext = createAudioContext();
+        detachAudioNodes();
+        audioContextRef.current = audioContext;
+        zeroGainNodeRef.current = createZeroGainNode(audioContextRef.current);
+        mediaNodeRef.current = audioContext
+            ? audioContext.createMediaElementSource(videoRef.current)
+            : null;
+        attachAudioNodes();
+        hasToSetupAudioContext.current = false;
+    }
+    useEffect(() => {
+        if (videoRef.current) {
+            props.player?.mountVideoView(videoRef.current);
+        }
+        attachAudioNodes();
         return () => {
             if (videoRef.current) {
                 props.player?.unmountVideoView(videoRef.current);
             }
-            if (videoRef.current && audioContext && mediaNode) {
-                props.player?.unmountAudioNode(videoRef.current, audioContext, mediaNode);
-            }
+            detachAudioNodes();
         };
     }, [props.player]);
     return (<video controls={props.nativeControls ?? true} controlsList={props.allowsFullscreen ? undefined : 'nofullscreen'} crossOrigin="anonymous" style={{
             ...mapStyles(props.style),
             objectFit: props.contentFit,
+        }} onPlay={() => {
+            maybeSetupAudioContext();
+        }} 
+    // The player can autoplay when muted, unmuting by a user should create the audio context
+    onVolumeChange={() => {
+            maybeSetupAudioContext();
         }} ref={(newRef) => {
             // This is called with a null value before `player.unmountVideoView` is called,
             // we can't assign null to videoRef if we want to unmount it from the player.
             if (newRef && !newRef.isEqualNode(videoRef.current)) {
                 videoRef.current = newRef;
-                const audioContext = createAudioContext();
-                audioContextRef.current = audioContext;
-                zeroGainNodeRef.current = createZeroGainNode(audioContextRef.current);
-                mediaNodeRef.current = audioContext
-                    ? audioContext.createMediaElementSource(newRef)
-                    : null;
+                hasToSetupAudioContext.current = true;
+                maybeSetupAudioContext();
             }
         }} src={getSourceUri(props.player?.src) ?? ''}/>);
 });

package/build/VideoView.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoView.web.js","sourceRoot":"","sources":["../src/VideoView.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport VideoPlayer, { getSourceUri } from './VideoPlayer.web';\nimport type { VideoViewProps } from './VideoView.types';\n\nfunction createAudioContext(): AudioContext | null {\n  return typeof window !== 'undefined' ? new window.AudioContext() : null;\n}\n\nfunction createZeroGainNode(audioContext: AudioContext | null): GainNode | null {\n  const zeroGainNode = audioContext?.createGain() ?? null;\n\n  if (audioContext && zeroGainNode) {\n    zeroGainNode.gain.value = 0;\n    zeroGainNode.connect(audioContext.destination);\n  }\n  return zeroGainNode;\n}\n\nfunction mapStyles(style: VideoViewProps['style']): React.CSSProperties {\n  const flattenedStyles = StyleSheet.flatten(style);\n  // Looking through react-native-web source code they also just pass styles directly without further conversions, so it's just a cast.\n  return flattenedStyles as React.CSSProperties;\n}\n\nexport const VideoView = forwardRef((props: { player?: VideoPlayer } & VideoViewProps, ref) => {\n  const videoRef = useRef<null | HTMLVideoElement>(null);\n  const mediaNodeRef = useRef<null | MediaElementAudioSourceNode>(null);\n\n  /**\n   * Audio context is used to mute all but one video when multiple video views are playing from one player simultaneously.\n   * Using audio context nodes allows muting videos without displaying the mute icon in the video player.\n   * We have to keep the context that called createMediaElementSource(videoRef), as the method can't be called\n   * for the second time with another context and there is no way to unbind the video and audio context afterward.\n   */\n  const audioContextRef = useRef<null | AudioContext>(null);\n  const zeroGainNodeRef = useRef<null | GainNode>(null);\n\n  useImperativeHandle(ref, () => ({\n    enterFullscreen: () => {\n      if (!props.allowsFullscreen) {\n        return;\n      }\n      videoRef.current?.requestFullscreen();\n    },\n    exitFullscreen: () => {\n      document.exitFullscreen();\n    },\n  }));\n\n  useEffect(() => {\n    const audioContext = audioContextRef.current;\n    const zeroGainNode = zeroGainNodeRef.current;\n    const mediaNode = mediaNodeRef.current;\n\n    if (videoRef.current) {\n      props.player?.mountVideoView(videoRef.current);\n    }\n\n    if (audioContext && zeroGainNode && mediaNode) {\n      props.player.mountAudioNode(audioContext, zeroGainNode, mediaNode);\n    } else {\n      console.warn(\n        \"Couldn't mount audio node, this might affect the audio playback when using multiple video views with the same player.\"\n      );\n    }\n\n    return () => {\n      if (videoRef.current) {\n        props.player?.unmountVideoView(videoRef.current);\n      }\n      if (videoRef.current && audioContext && mediaNode) {\n        props.player?.unmountAudioNode(videoRef.current, audioContext, mediaNode);\n      }\n    };\n  }, [props.player]);\n\n  return (\n    <video\n      controls={props.nativeControls ?? true}\n      controlsList={props.allowsFullscreen ? undefined : 'nofullscreen'}\n      crossOrigin=\"anonymous\"\n      style={{\n        ...mapStyles(props.style),\n        objectFit: props.contentFit,\n      }}\n      ref={(newRef) => {\n        // This is called with a null value before `player.unmountVideoView` is called,\n        // we can't assign null to videoRef if we want to unmount it from the player.\n        if (newRef && !newRef.isEqualNode(videoRef.current)) {\n          videoRef.current = newRef;\n          const audioContext = createAudioContext();\n          audioContextRef.current = audioContext;\n          zeroGainNodeRef.current = createZeroGainNode(audioContextRef.current);\n          mediaNodeRef.current = audioContext\n            ? audioContext.createMediaElementSource(newRef)\n            : null;\n        }\n      }}\n      src={getSourceUri(props.player?.src) ?? ''}\n    />\n  );\n});\n\nexport default VideoView;\n"]}
+{"version":3,"file":"VideoView.web.js","sourceRoot":"","sources":["../src/VideoView.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport VideoPlayer, { getSourceUri } from './VideoPlayer.web';\nimport type { VideoViewProps } from './VideoView.types';\n\nfunction createAudioContext(): AudioContext | null {\n  return typeof window !== 'undefined' ? new window.AudioContext() : null;\n}\n\nfunction createZeroGainNode(audioContext: AudioContext | null): GainNode | null {\n  const zeroGainNode = audioContext?.createGain() ?? null;\n\n  if (audioContext && zeroGainNode) {\n    zeroGainNode.gain.value = 0;\n    zeroGainNode.connect(audioContext.destination);\n  }\n  return zeroGainNode;\n}\n\nfunction mapStyles(style: VideoViewProps['style']): React.CSSProperties {\n  const flattenedStyles = StyleSheet.flatten(style);\n  // Looking through react-native-web source code they also just pass styles directly without further conversions, so it's just a cast.\n  return flattenedStyles as React.CSSProperties;\n}\n\nexport const VideoView = forwardRef((props: { player?: VideoPlayer } & VideoViewProps, ref) => {\n  const videoRef = useRef<null | HTMLVideoElement>(null);\n  const mediaNodeRef = useRef<null | MediaElementAudioSourceNode>(null);\n  const hasToSetupAudioContext = useRef(false);\n\n  /**\n   * Audio context is used to mute all but one video when multiple video views are playing from one player simultaneously.\n   * Using audio context nodes allows muting videos without displaying the mute icon in the video player.\n   * We have to keep the context that called createMediaElementSource(videoRef), as the method can't be called\n   * for the second time with another context and there is no way to unbind the video and audio context afterward.\n   */\n  const audioContextRef = useRef<null | AudioContext>(null);\n  const zeroGainNodeRef = useRef<null | GainNode>(null);\n\n  useImperativeHandle(ref, () => ({\n    enterFullscreen: () => {\n      if (!props.allowsFullscreen) {\n        return;\n      }\n      videoRef.current?.requestFullscreen();\n    },\n    exitFullscreen: () => {\n      document.exitFullscreen();\n    },\n  }));\n\n  // Adds the video view as a candidate for being the audio source for the player (when multiple views play from one\n  // player only one will emit audio).\n  function attachAudioNodes() {\n    const audioContext = audioContextRef.current;\n    const zeroGainNode = zeroGainNodeRef.current;\n    const mediaNode = mediaNodeRef.current;\n\n    if (audioContext && zeroGainNode && mediaNode) {\n      props.player.mountAudioNode(audioContext, zeroGainNode, mediaNode);\n    } else {\n      console.warn(\n        \"Couldn't mount audio node, this might affect the audio playback when using multiple video views with the same player.\"\n      );\n    }\n  }\n\n  function detachAudioNodes() {\n    const audioContext = audioContextRef.current;\n    const mediaNode = mediaNodeRef.current;\n    if (audioContext && mediaNode && videoRef.current) {\n      props.player.unmountAudioNode(videoRef.current, audioContext, mediaNode);\n    }\n  }\n\n  function maybeSetupAudioContext() {\n    if (\n      !hasToSetupAudioContext.current ||\n      !navigator.userActivation.hasBeenActive ||\n      !videoRef.current\n    ) {\n      return;\n    }\n    const audioContext = createAudioContext();\n\n    detachAudioNodes();\n    audioContextRef.current = audioContext;\n    zeroGainNodeRef.current = createZeroGainNode(audioContextRef.current);\n    mediaNodeRef.current = audioContext\n      ? audioContext.createMediaElementSource(videoRef.current)\n      : null;\n    attachAudioNodes();\n    hasToSetupAudioContext.current = false;\n  }\n\n  useEffect(() => {\n    if (videoRef.current) {\n      props.player?.mountVideoView(videoRef.current);\n    }\n    attachAudioNodes();\n\n    return () => {\n      if (videoRef.current) {\n        props.player?.unmountVideoView(videoRef.current);\n      }\n      detachAudioNodes();\n    };\n  }, [props.player]);\n\n  return (\n    <video\n      controls={props.nativeControls ?? true}\n      controlsList={props.allowsFullscreen ? undefined : 'nofullscreen'}\n      crossOrigin=\"anonymous\"\n      style={{\n        ...mapStyles(props.style),\n        objectFit: props.contentFit,\n      }}\n      onPlay={() => {\n        maybeSetupAudioContext();\n      }}\n      // The player can autoplay when muted, unmuting by a user should create the audio context\n      onVolumeChange={() => {\n        maybeSetupAudioContext();\n      }}\n      ref={(newRef) => {\n        // This is called with a null value before `player.unmountVideoView` is called,\n        // we can't assign null to videoRef if we want to unmount it from the player.\n        if (newRef && !newRef.isEqualNode(videoRef.current)) {\n          videoRef.current = newRef;\n          hasToSetupAudioContext.current = true;\n          maybeSetupAudioContext();\n        }\n      }}\n      src={getSourceUri(props.player?.src) ?? ''}\n    />\n  );\n});\n\nexport default VideoView;\n"]}

package/ios/NowPlayingManager.swift

@@ -13,7 +13,6 @@ class NowPlayingManager: VideoPlayerObserverDelegate {
   static var shared = NowPlayingManager()
 
   private let skipTimeInterval = 10.0
-  private let fetchMetadataQueue = DispatchQueue(label: "com.expo.fetchMetadataQueue")
   private var timeObserver: Any?
   private weak var mostRecentInteractionPlayer: AVPlayer?
   private var players = NSHashTable<VideoPlayer>.weakObjects()
@@ -148,17 +147,18 @@ class NowPlayingManager: VideoPlayerObserverDelegate {
     let userMetadata = videoPlayerItem?.videoSource.metadata
 
     Task {
-      let assetMetadata = await try loadMetadata(for: currentItem)
+      // Metadata fetched with the video
+      let assetMetadata = try? await loadMetadata(for: currentItem)
 
-      let title = assetMetadata.first(where: {
+      let title = assetMetadata?.first(where: {
         $0.commonKey == .commonKeyTitle
       })
 
-      let artist = assetMetadata.first(where: {
+      let artist = assetMetadata?.first(where: {
         $0.commonKey == .commonKeyArtist
       })
 
-      let artwork = assetMetadata.first(where: {
+      let artwork = assetMetadata?.first(where: {
         $0.commonKey == .commonKeyArtwork
       })
 
@@ -181,11 +181,7 @@ class NowPlayingManager: VideoPlayerObserverDelegate {
       return try await mediaItem.asset.loadMetadata(for: .iTunesMetadata)
     }
 
-    return await withCheckedContinuation { continuation in
-      fetchMetadataQueue.async {
-        continuation.resume(returning: mediaItem.asset.metadata)
-      }
-    }
+    return mediaItem.asset.metadata
   }
 
   // Updates nowPlaying information that changes dynamically during playback e.g. progress

package/ios/VideoModule.swift

@@ -72,6 +72,25 @@ public final class VideoModule: Module {
         #endif
       }
 
+      Prop("allowsVideoFrameAnalysis") { (view, allowsVideoFrameAnalysis: Bool?) in
+        #if !os(tvOS)
+        if #available(iOS 16.0, macCatalyst 18.0, *) {
+          let newValue = allowsVideoFrameAnalysis ?? true
+
+          view.playerViewController.allowsVideoFrameAnalysis = newValue
+
+          // Setting the `allowsVideoFrameAnalysis` to false after the scanning was already perofrmed doesn't update the UI.
+          // We can force the desired behaviour by quickly toggling the property. Setting it to true clears existing requests,
+          // which updates the UI, hiding the button, then setting it to false before it detects any text keeps it in the desired state.
+          // Tested in iOS 17.5
+          if !newValue {
+            view.playerViewController.allowsVideoFrameAnalysis = true
+            view.playerViewController.allowsVideoFrameAnalysis = false
+          }
+        }
+        #endif
+      }
+
       AsyncFunction("enterFullscreen") { view in
         view.enterFullscreen()
       }

package/ios/VideoPlayer.swift

@@ -86,7 +86,13 @@ internal final class VideoPlayer: SharedRef<AVPlayer>, Hashable, VideoPlayerObse
     observer.cleanup()
     NowPlayingManager.shared.unregisterPlayer(self)
     VideoManager.shared.unregister(videoPlayer: self)
-    pointer.replaceCurrentItem(with: nil)
+
+    // The current item has to be replaced with nil from the main thread. When replacing from the SharedObjectRegistry queue
+    // sometimes the KVOs used by AVPlayerViewController would try to deliver updates about the item being changed to nil after the
+    // player was deallocated, which caused crashes.
+    DispatchQueue.main.async { [pointer] in
+      pointer.replaceCurrentItem(with: nil)
+    }
   }
 
   func replaceCurrentItem(with videoSource: VideoSource?) throws {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-video",
   "title": "Expo Video",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A cross-platform, performant video component for React Native and Expo with Web support",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -36,5 +36,5 @@
   "peerDependencies": {
     "expo": "*"
   },
-  "gitHead": "c37efa4f4ebe6137c34eb5813843df7015f3c22f"
+  "gitHead": "48f1ec9d91c5c38c7684cb98a314e443cbeb2185"
 }

package/plugin/build/withExpoVideo.d.ts

@@ -1,3 +1,7 @@
 import { ConfigPlugin } from '@expo/config-plugins';
-declare const withExpoVideo: ConfigPlugin;
+type WithExpoVideoOptions = {
+    supportsBackgroundPlayback?: boolean;
+    supportsPictureInPicture?: boolean;
+};
+declare const withExpoVideo: ConfigPlugin<WithExpoVideoOptions>;
 export default withExpoVideo;

package/plugin/build/withExpoVideo.js

@@ -1,17 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const config_plugins_1 = require("@expo/config-plugins");
-const withExpoVideo = (config) => {
+const withExpoVideo = (config, { supportsBackgroundPlayback, supportsPictureInPicture } = {}) => {
     (0, config_plugins_1.withInfoPlist)(config, (config) => {
         const currentBackgroundModes = config.modResults.UIBackgroundModes ?? [];
-        if (!currentBackgroundModes.includes('audio')) {
+        const shouldEnableBackgroundAudio = supportsBackgroundPlayback || supportsPictureInPicture;
+        // No-op if the values are not defined
+        if (typeof supportsBackgroundPlayback === 'undefined' &&
+            typeof supportsPictureInPicture === 'undefined') {
+            return config;
+        }
+        if (shouldEnableBackgroundAudio && !currentBackgroundModes.includes('audio')) {
             config.modResults.UIBackgroundModes = [...currentBackgroundModes, 'audio'];
         }
+        else if (!shouldEnableBackgroundAudio) {
+            config.modResults.UIBackgroundModes = currentBackgroundModes.filter((mode) => mode !== 'audio');
+        }
         return config;
     });
     (0, config_plugins_1.withAndroidManifest)(config, (config) => {
         const activity = config_plugins_1.AndroidConfig.Manifest.getMainActivityOrThrow(config.modResults);
-        activity.$['android:supportsPictureInPicture'] = 'true';
+        // No-op if the values are not defined
+        if (typeof supportsPictureInPicture === 'undefined') {
+            return config;
+        }
+        if (supportsPictureInPicture) {
+            activity.$['android:supportsPictureInPicture'] = 'true';
+        }
+        else {
+            delete activity.$['android:supportsPictureInPicture'];
+        }
         return config;
     });
     return config;

package/plugin/src/withExpoVideo.ts

@@ -5,18 +5,50 @@ import {
   withAndroidManifest,
 } from '@expo/config-plugins';
 
-const withExpoVideo: ConfigPlugin = (config) => {
+type WithExpoVideoOptions = {
+  supportsBackgroundPlayback?: boolean;
+  supportsPictureInPicture?: boolean;
+};
+
+const withExpoVideo: ConfigPlugin<WithExpoVideoOptions> = (
+  config,
+  { supportsBackgroundPlayback, supportsPictureInPicture } = {}
+) => {
   withInfoPlist(config, (config) => {
     const currentBackgroundModes = config.modResults.UIBackgroundModes ?? [];
-    if (!currentBackgroundModes.includes('audio')) {
+    const shouldEnableBackgroundAudio = supportsBackgroundPlayback || supportsPictureInPicture;
+
+    // No-op if the values are not defined
+    if (
+      typeof supportsBackgroundPlayback === 'undefined' &&
+      typeof supportsPictureInPicture === 'undefined'
+    ) {
+      return config;
+    }
+
+    if (shouldEnableBackgroundAudio && !currentBackgroundModes.includes('audio')) {
       config.modResults.UIBackgroundModes = [...currentBackgroundModes, 'audio'];
+    } else if (!shouldEnableBackgroundAudio) {
+      config.modResults.UIBackgroundModes = currentBackgroundModes.filter(
+        (mode: string) => mode !== 'audio'
+      );
     }
     return config;
   });
 
   withAndroidManifest(config, (config) => {
     const activity = AndroidConfig.Manifest.getMainActivityOrThrow(config.modResults);
-    activity.$['android:supportsPictureInPicture'] = 'true';
+
+    // No-op if the values are not defined
+    if (typeof supportsPictureInPicture === 'undefined') {
+      return config;
+    }
+
+    if (supportsPictureInPicture) {
+      activity.$['android:supportsPictureInPicture'] = 'true';
+    } else {
+      delete activity.$['android:supportsPictureInPicture'];
+    }
     return config;
   });
   return config;

package/src/VideoPlayer.types.ts

@@ -129,7 +129,7 @@ export type VideoPlayerEvents = {
   statusChange(
     newStatus: VideoPlayerStatus,
     oldStatus: VideoPlayerStatus,
-    error: PlayerError
+    error?: PlayerError
   ): void;
   /**
    * Handler for an event emitted when the player starts or stops playback.

package/src/VideoPlayer.web.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 
 import type {
+  PlayerError,
   VideoPlayer,
   VideoPlayerEvents,
   VideoPlayerStatus,
@@ -37,6 +38,7 @@ export default class VideoPlayerWeb
   }
 
   src: VideoSource = null;
+  previousSrc: VideoSource = null;
   _mountedVideos: Set<HTMLVideoElement> = new Set();
   _audioNodes: Set<MediaElementAudioSourceNode> = new Set();
   playing: boolean = false;
@@ -46,6 +48,7 @@ export default class VideoPlayerWeb
   _playbackRate: number = 1.0;
   _preservesPitch: boolean = true;
   _status: VideoPlayerStatus = 'idle';
+  _error: PlayerError | null = null;
   staysActiveInBackground: boolean = false; // Not supported on web. Dummy to match the interface.
   showNowPlayingNotification: boolean = false; // Not supported on web. Dummy to match the interface.
 
@@ -82,9 +85,6 @@ export default class VideoPlayerWeb
   }
 
   get volume(): number {
-    this._mountedVideos.forEach((video) => {
-      this._volume = video.volume;
-    });
     return this._volume;
   }
 
@@ -130,7 +130,27 @@ export default class VideoPlayerWeb
     return this._status;
   }
 
+  private set status(value: VideoPlayerStatus) {
+    if (this._status === value) return;
+
+    if (value === 'error' && this._error) {
+      this.emit('statusChange', value, this._status, this._error);
+    } else {
+      this.emit('statusChange', value, this._status);
+      this._error = null;
+    }
+    this._status = value;
+  }
+
   mountVideoView(video: HTMLVideoElement) {
+    // The video will be the first video, it should inherit the properties set in the setup() function
+    if (this._mountedVideos.size === 0) {
+      video.preservesPitch = this._preservesPitch;
+      video.loop = this._loop;
+      video.volume = this._volume;
+      video.muted = this._muted;
+      video.playbackRate = this._playbackRate;
+    }
     this._mountedVideos.add(video);
     this._addListeners(video);
     this._synchronizeWithFirstVideo(video);
@@ -178,14 +198,12 @@ export default class VideoPlayerWeb
     this._mountedVideos.forEach((video) => {
       video.play();
     });
-    this.playing = true;
   }
 
   pause(): void {
     this._mountedVideos.forEach((video) => {
       video.pause();
     });
-    this.playing = false;
   }
 
   replace(source: VideoSource): void {
@@ -201,6 +219,9 @@ export default class VideoPlayerWeb
         video.load();
       }
     });
+    // TODO @behenate: this won't work when we add support for playlists
+    this.previousSrc = this.src;
+    this.src = source;
     this.playing = true;
   }
 
@@ -233,8 +254,24 @@ export default class VideoPlayerWeb
     video.playbackRate = firstVideo.playbackRate;
   }
 
+  /**
+   * If there are multiple mounted videos, all of them will emit an event, as they are synchronised.
+   * We want to avoid this, so we only emit the event if it came from the first video.
+   */
+  _emitOnce<EventName extends keyof VideoPlayerEvents>(
+    eventSource: HTMLVideoElement,
+    eventName: EventName,
+    ...args: Parameters<VideoPlayerEvents[EventName]>
+  ): void {
+    const mountedVideos = [...this._mountedVideos];
+    if (mountedVideos[0] === eventSource) {
+      this.emit(eventName, ...args);
+    }
+  }
+
   _addListeners(video: HTMLVideoElement): void {
     video.onplay = () => {
+      this._emitOnce(video, 'playingChange', true, this.playing);
       this.playing = true;
       this._mountedVideos.forEach((mountedVideo) => {
         mountedVideo.play();
@@ -242,6 +279,7 @@ export default class VideoPlayerWeb
     };
 
     video.onpause = () => {
+      this._emitOnce(video, 'playingChange', false, this.playing);
       this.playing = false;
       this._mountedVideos.forEach((mountedVideo) => {
         mountedVideo.pause();
@@ -249,6 +287,12 @@ export default class VideoPlayerWeb
     };
 
     video.onvolumechange = () => {
+      this._emitOnce(
+        video,
+        'volumeChange',
+        { volume: video.volume, isMuted: video.muted },
+        { volume: this.volume, isMuted: this.muted }
+      );
       this.volume = video.volume;
       this.muted = video.muted;
     };
@@ -268,27 +312,42 @@ export default class VideoPlayerWeb
     };
 
     video.onratechange = () => {
+      this._emitOnce(video, 'playbackRateChange', video.playbackRate, this.playbackRate);
       this._mountedVideos.forEach((mountedVideo) => {
-        if (mountedVideo === video || mountedVideo.playbackRate === video.playbackRate) return;
+        if (mountedVideo.playbackRate === video.playbackRate) return;
         this._playbackRate = video.playbackRate;
         mountedVideo.playbackRate = video.playbackRate;
       });
+      this._playbackRate = video.playbackRate;
     };
 
     video.onerror = () => {
-      this._status = 'error';
+      this._error = {
+        message: video.error?.message ?? 'Unknown player error',
+      };
+      this.status = 'error';
     };
 
-    video.onloadeddata = () => {
-      this._status = 'readyToPlay';
+    video.oncanplay = () => {
+      const allCanPlay = [...this._mountedVideos].reduce((previousValue, video) => {
+        return previousValue && video.readyState >= 3;
+      }, true);
+      if (!allCanPlay) return;
 
-      if (this.playing && video.paused) {
-        video.play();
-      }
+      this.status = 'readyToPlay';
     };
 
     video.onwaiting = () => {
-      this._status = 'loading';
+      if (this._status === 'loading') return;
+      this.status = 'loading';
+    };
+
+    video.onended = () => {
+      this._emitOnce(video, 'playToEnd');
+    };
+
+    video.onloadstart = () => {
+      this._emitOnce(video, 'sourceChange', this.src, this.previousSrc);
     };
   }
 }

package/src/VideoView.tsx

@@ -35,6 +35,9 @@ export class VideoView extends PureComponent<VideoViewProps> {
   /**
    * Enters Picture in Picture (PiP) mode. Throws an exception if the device does not support PiP.
    * > **Note:** Only one player can be in Picture in Picture (PiP) mode at a time.
+   *
+   * > **Note:** The `supportsPictureInPicture` property of the [config plugin](#configuration-in-appjsonappconfigjs)
+   * > has to be configured for the PiP to work.
    * @platform android
    * @platform ios 14+
    */

package/src/VideoView.types.ts

@@ -73,6 +73,9 @@ export interface VideoViewProps extends ViewProps {
 
   /**
    * Determines whether the player allows Picture in Picture (PiP) mode.
+   * > **Note:** The `supportsPictureInPicture` property of the [config plugin](#configuration-in-appjsonappconfigjs)
+   * > has to be configured for the PiP to work.
+   *
    * @default false
    * @platform ios 14+
    */
@@ -81,9 +84,20 @@ export interface VideoViewProps extends ViewProps {
   /**
    * Determines whether the player should start Picture in Picture (PiP) automatically when the app is in the background.
    * > **Note:** Only one player can be in Picture in Picture (PiP) mode at a time.
+   *
+   * > **Note:** The `supportsPictureInPicture` property of the [config plugin](#configuration-in-appjsonappconfigjs)
+   * > has to be configured for the PiP to work.
+   *
    * @default false
    * @platform android 12+
    * @platform ios 14.2+
    */
   startsPictureInPictureAutomatically?: boolean;
+
+  /**
+   * Specifies whether to perform video frame analysis (Live Text in videos). Check official [Apple documentation](https://developer.apple.com/documentation/avkit/avplayerviewcontroller/allowsvideoframeanalysis) for more details.
+   * @default true
+   * @platform ios 16.0+
+   */
+  allowsVideoFrameAnalysis?: boolean;
 }