@stepincto/expo-video 1.0.0

package/ios/VideoSourceLoaderListener.swift

@@ -0,0 +1,34 @@
+import Foundation
+
+protocol VideoSourceLoaderListener: AnyObject {
+  func onLoadingStarted(loader: VideoSourceLoader, videoSource: VideoSource?)
+  func onLoadingFinished(loader: VideoSourceLoader, videoSource: VideoSource?, result: VideoPlayerItem?)
+  func onLoadingCancelled(loader: VideoSourceLoader, videoSource: VideoSource?)
+}
+
+extension VideoSourceLoaderListener {
+  func onLoadingStarted(loader: VideoSourceLoader, videoSource: VideoSource?) {}
+  func onLoadingFinished(loader: VideoSourceLoader, videoSource: VideoSource?, result: VideoPlayerItem?) {}
+  func onLoadingCancelled(loader: VideoSourceLoader, videoSource: VideoSource?) {}
+}
+
+final class WeakVideoSourceLoaderListener: Hashable {
+  private(set) weak var value: VideoSourceLoaderListener?
+
+  init(value: VideoSourceLoaderListener? = nil) {
+    self.value = value
+  }
+
+  static func == (lhs: WeakVideoSourceLoaderListener, rhs: WeakVideoSourceLoaderListener) -> Bool {
+    guard let lhsValue = lhs.value, let rhsValue = rhs.value else {
+      return lhs.value == nil && rhs.value == nil
+    }
+    return ObjectIdentifier(lhsValue) == ObjectIdentifier(rhsValue)
+  }
+
+  func hash(into hasher: inout Hasher) {
+    if let value {
+      hasher.combine(ObjectIdentifier(value))
+    }
+  }
+}

package/ios/VideoView.swift

@@ -0,0 +1,224 @@
+// Copyright 2023-present 650 Industries. All rights reserved.
+
+import AVKit
+import ExpoModulesCore
+
+public final class VideoView: ExpoView, AVPlayerViewControllerDelegate {
+  lazy var playerViewController = AVPlayerViewController()
+
+  weak var player: VideoPlayer? {
+    didSet {
+      playerViewController.player = player?.ref
+    }
+  }
+
+  #if os(tvOS)
+  var wasPlaying: Bool = false
+  #endif
+  var isFullscreen: Bool = false
+  var isInPictureInPicture = false
+  #if os(tvOS)
+  let startPictureInPictureAutomatically = false
+  #else
+  var startPictureInPictureAutomatically = false {
+    didSet {
+      playerViewController.canStartPictureInPictureAutomaticallyFromInline = startPictureInPictureAutomatically
+    }
+  }
+  #endif
+
+  var allowPictureInPicture: Bool = false {
+    didSet {
+      // PiP requires `.playback` audio session category in `.moviePlayback` mode
+      VideoManager.shared.setAppropriateAudioSessionOrWarn()
+      playerViewController.allowsPictureInPicturePlayback = allowPictureInPicture
+    }
+  }
+
+  let onPictureInPictureStart = EventDispatcher()
+  let onPictureInPictureStop = EventDispatcher()
+  let onFullscreenEnter = EventDispatcher()
+  let onFullscreenExit = EventDispatcher()
+  let onFirstFrameRender = EventDispatcher()
+
+  var firstFrameObserver: NSKeyValueObservation?
+
+  public override var bounds: CGRect {
+    didSet {
+      playerViewController.view.frame = self.bounds
+    }
+  }
+
+  public required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+
+    VideoManager.shared.register(videoView: self)
+
+    clipsToBounds = true
+    playerViewController.delegate = self
+    playerViewController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+    playerViewController.view.backgroundColor = .clear
+    // Now playing is managed by the `NowPlayingManager`
+    #if !os(tvOS)
+    playerViewController.updatesNowPlayingInfoCenter = false
+    #endif
+
+    addFirstFrameObserver()
+    addSubview(playerViewController.view)
+  }
+
+  deinit {
+    VideoManager.shared.unregister(videoView: self)
+    removeFirstFrameObserver()
+  }
+
+  func enterFullscreen() {
+    if isFullscreen {
+      return
+    }
+    let selectorName = "enterFullScreenAnimated:completionHandler:"
+    let selectorToForceFullScreenMode = NSSelectorFromString(selectorName)
+
+    if playerViewController.responds(to: selectorToForceFullScreenMode) {
+      playerViewController.perform(selectorToForceFullScreenMode, with: true, with: nil)
+    } else {
+      #if os(tvOS)
+      // For TV, save the currently playing state,
+      // remove the view controller from its superview,
+      // and present the view controller normally
+      wasPlaying = player?.isPlaying == true
+      self.playerViewController.view.removeFromSuperview()
+      self.reactViewController().present(self.playerViewController, animated: true)
+      onFullscreenEnter()
+      isFullscreen = true
+      #endif
+    }
+  }
+
+  func exitFullscreen() {
+    if !isFullscreen {
+      return
+    }
+    let selectorName = "exitFullScreenAnimated:completionHandler:"
+    let selectorToExitFullScreenMode = NSSelectorFromString(selectorName)
+
+    if playerViewController.responds(to: selectorToExitFullScreenMode) {
+      playerViewController.perform(selectorToExitFullScreenMode, with: true, with: nil)
+    }
+  }
+
+  func startPictureInPicture() throws {
+    if !AVPictureInPictureController.isPictureInPictureSupported() {
+      throw PictureInPictureUnsupportedException()
+    }
+
+    let selectorName = "startPictureInPicture"
+    let selectorToStartPictureInPicture = NSSelectorFromString(selectorName)
+
+    if playerViewController.responds(to: selectorToStartPictureInPicture) {
+      playerViewController.perform(selectorToStartPictureInPicture)
+    }
+  }
+
+  func stopPictureInPicture() {
+    let selectorName = "stopPictureInPicture"
+    let selectorToStopPictureInPicture = NSSelectorFromString(selectorName)
+
+    if playerViewController.responds(to: selectorToStopPictureInPicture) {
+      playerViewController.perform(selectorToStopPictureInPicture)
+    }
+  }
+
+  // MARK: - AVPlayerViewControllerDelegate
+
+  #if os(tvOS)
+  // TV actually presents the playerViewController, so it implements the view controller
+  // dismissal delegate methods
+  public func playerViewControllerWillBeginDismissalTransition(_ playerViewController: AVPlayerViewController) {
+    // Start an appearance transition
+    self.playerViewController.beginAppearanceTransition(true, animated: true)
+  }
+
+  public func playerViewControllerDidEndDismissalTransition(_ playerViewController: AVPlayerViewController) {
+    self.onFullscreenExit()
+    self.isFullscreen = false
+    // Reset the bounds of the view controller and add it back to our view
+    self.playerViewController.view.frame = self.bounds
+    addSubview(self.playerViewController.view)
+    // End the appearance transition
+    self.playerViewController.endAppearanceTransition()
+    // Ensure playing state is preserved
+    if wasPlaying {
+      self.player?.ref.play()
+    } else {
+      self.player?.ref.pause()
+    }
+  }
+  #endif
+
+  #if !os(tvOS)
+  public func playerViewController(
+    _ playerViewController: AVPlayerViewController,
+    willBeginFullScreenPresentationWithAnimationCoordinator coordinator: UIViewControllerTransitionCoordinator
+  ) {
+    onFullscreenEnter()
+    isFullscreen = true
+  }
+
+  public func playerViewController(
+    _ playerViewController: AVPlayerViewController,
+    willEndFullScreenPresentationWithAnimationCoordinator coordinator: UIViewControllerTransitionCoordinator
+  ) {
+    // Platform's behavior is to pause the player when exiting the fullscreen mode.
+    // It seems better to continue playing, so we resume the player once the dismissing animation finishes.
+    let wasPlaying = player?.ref.timeControlStatus == .playing
+
+    coordinator.animate(alongsideTransition: nil) { context in
+      if !context.isCancelled {
+        if wasPlaying {
+          self.player?.ref.play()
+        }
+        self.onFullscreenExit()
+        self.isFullscreen = false
+      }
+    }
+  }
+  #endif
+
+  public func playerViewControllerDidStartPictureInPicture(_ playerViewController: AVPlayerViewController) {
+    isInPictureInPicture = true
+    onPictureInPictureStart()
+  }
+
+  public func playerViewControllerDidStopPictureInPicture(_ playerViewController: AVPlayerViewController) {
+    isInPictureInPicture = false
+    onPictureInPictureStop()
+  }
+
+  public override func didMoveToWindow() {
+    // TV is doing a normal view controller present, so we should not execute
+    // this code
+    #if !os(tvOS)
+    playerViewController.beginAppearanceTransition(self.window != nil, animated: true)
+    #endif
+  }
+
+  public override func safeAreaInsetsDidChange() {
+    super.safeAreaInsetsDidChange()
+    // This is the only way that I (@behenate) found to force re-calculation of the safe-area insets for native controls
+    playerViewController.view.removeFromSuperview()
+    addSubview(playerViewController.view)
+  }
+
+  private func addFirstFrameObserver() {
+    firstFrameObserver = playerViewController.observe(\.isReadyForDisplay, changeHandler: { [weak self] playerViewController, _ in
+      if playerViewController.isReadyForDisplay {
+        self?.onFirstFrameRender()
+      }
+    })
+  }
+  private func removeFirstFrameObserver() {
+    firstFrameObserver?.invalidate()
+    firstFrameObserver = nil
+  }
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@stepincto/expo-video",
+  "title": "Expo Video",
+  "version": "1.0.0",
+  "originalUpstreamVersion": "2.2.2", 
+  "description": "A cross-platform, performant video component for React Native and Expo with Web support",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "build:lib": "tsc -p tsconfig.json",
+    "build:plugin": "tsc -p plugin/tsconfig.json",
+    "build:once": "npm run build:lib && npm run build:plugin",
+    "pack:local": "npm pack --ignore-scripts"
+  },
+  "homepage": "https://docs.expo.dev/versions/latest/sdk/video/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/expo/expo.git"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "video",
+    "player"
+  ],
+  "author": "650 Industries, Inc.",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "expo-module-scripts": "^4.1.10",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "expo": "^53.0.0",
+    "expo-modules-core": ">=2.4 <2.6",
+    "react": ">=18",
+    "react-native": ">=0.75"
+  },
+  "files": [
+    "build",
+    "ios",
+    "android",
+    "plugin/build",
+    "src",
+    "app.plugin.js",
+    "expo-module.config.json",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/plugin/build/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/withexpovideo.ts"],"version":"5.9.2"}

package/plugin/build/withExpoVideo.d.ts

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

package/plugin/build/withExpoVideo.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_plugins_1 = require("expo/config-plugins");
+const withExpoVideo = (config, { supportsBackgroundPlayback, supportsPictureInPicture } = {}) => {
+    (0, config_plugins_1.withInfoPlist)(config, (config) => {
+        var _a;
+        const currentBackgroundModes = (_a = config.modResults.UIBackgroundModes) !== null && _a !== void 0 ? _a : [];
+        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);
+        // 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;
+};
+exports.default = withExpoVideo;

package/src/NativeVideoModule.ts

@@ -0,0 +1,20 @@
+import { requireNativeModule } from 'expo-modules-core';
+
+import type { VideoPlayer } from './VideoPlayer.types';
+import type { VideoThumbnail } from './VideoThumbnail';
+
+type ExpoVideoModule = {
+  VideoPlayer: typeof VideoPlayer;
+  VideoThumbnail: typeof VideoThumbnail;
+
+  isPictureInPictureSupported(): boolean;
+  setVideoCacheSizeAsync(sizeBytes: number): Promise<void>;
+  clearVideoCacheAsync(): Promise<void>;
+  getCurrentVideoCacheSize(): number;
+
+  preCacheVideoPartialAsync(url: string, chunkSize?: number): Promise<boolean>;
+  preCacheVideoAsync(url: string): Promise<boolean>;
+  isVideoCachedAsync(url: string): Promise<boolean>;
+};
+
+export default requireNativeModule<ExpoVideoModule>('ExpoVideo');

package/src/NativeVideoModule.web.ts

@@ -0,0 +1 @@
+export default () => {};

package/src/NativeVideoView.ts

@@ -0,0 +1,8 @@
+import { requireNativeViewManager } from 'expo-modules-core';
+import { Platform } from 'react-native';
+
+const defaultViewName = Platform.OS === 'android' ? 'SurfaceVideoView' : 'VideoView';
+
+export default requireNativeViewManager('ExpoVideo', defaultViewName);
+export const NativeTextureVideoView =
+  Platform.OS === 'android' ? requireNativeViewManager('ExpoVideo', 'TextureVideoView') : null;

package/src/VideoModule.ts

@@ -0,0 +1,59 @@
+import NativeVideoModule from './NativeVideoModule';
+
+/**
+ * Returns whether the current device supports Picture in Picture (PiP) mode.
+ *
+ * @returns A `boolean` which is `true` if the device supports PiP mode, and `false` otherwise.
+ * @platform android
+ * @platform ios
+ */
+export function isPictureInPictureSupported(): boolean {
+  return NativeVideoModule.isPictureInPictureSupported();
+}
+
+/**
+ * Clears all video cache.
+ * > This function can be called only if there are no existing `VideoPlayer` instances.
+ *
+ * @returns A promise that fulfills after the cache has been cleaned.
+ * @platform android
+ * @platform ios
+ */
+export function clearVideoCacheAsync(): Promise<void> {
+  return NativeVideoModule.clearVideoCacheAsync();
+}
+
+/**
+ * Sets desired video cache size in bytes. The default video cache size is 1GB. Value set by this function is persistent.
+ * The cache size is not guaranteed to be exact and the actual cache size may be slightly larger. The cache is evicted on a least-recently-used basis.
+ * > This function can be called only if there are no existing `VideoPlayer` instances.
+ *
+ * @returns A promise that fulfills after the cache size has been set.
+ * @platform android
+ * @platform ios
+ */
+export function setVideoCacheSizeAsync(sizeBytes: number): Promise<void> {
+  return NativeVideoModule.setVideoCacheSizeAsync(sizeBytes);
+}
+
+/**
+ * Returns the space currently occupied by the video cache in bytes.
+ *
+ * @platform android
+ * @platform ios
+ */
+export function getCurrentVideoCacheSize(): number {
+  return NativeVideoModule.getCurrentVideoCacheSize();
+}
+
+export async function preCacheVideoAsync(url: string): Promise<boolean> {
+  return NativeVideoModule.preCacheVideoAsync(url);
+}
+
+export async function preCacheVideoPartialAsync(url: string, chunkSize?: number): Promise<boolean> {
+  return NativeVideoModule.preCacheVideoPartialAsync(url, chunkSize);
+}
+
+export function isVideoCachedAsync(url: string): Promise<boolean> {
+  return NativeVideoModule.isVideoCachedAsync(url);
+}

package/src/VideoPlayer.tsx

@@ -0,0 +1,67 @@
+import { useReleasingSharedObject } from 'expo-modules-core';
+
+import NativeVideoModule from './NativeVideoModule';
+import { VideoSource, VideoPlayer } from './VideoPlayer.types';
+import resolveAssetSource from './resolveAssetSource';
+
+// TODO: Temporary solution until we develop a way of overriding prototypes that won't break the lazy loading of the module.
+const replace = NativeVideoModule.VideoPlayer.prototype.replace;
+NativeVideoModule.VideoPlayer.prototype.replace = function (
+  source: VideoSource,
+  disableWarning: boolean = false
+) {
+  if (!disableWarning) {
+    console.warn(
+      'On iOS `VideoPlayer.replace` loads the asset data synchronously on the main thread, which can lead to UI freezes and will be deprecated in a future release. Switch to `replaceAsync` for better user experience.'
+    );
+  }
+
+  return replace.call(this, parseSource(source));
+};
+
+const replaceAsync = NativeVideoModule.VideoPlayer.prototype.replaceAsync;
+NativeVideoModule.VideoPlayer.prototype.replaceAsync = function (source: VideoSource) {
+  return replaceAsync.call(this, parseSource(source));
+};
+/**
+ * Creates a direct instance of `VideoPlayer` that doesn't release automatically.
+ *
+ * > **info** For most use cases you should use the [`useVideoPlayer`](#usevideoplayer) hook instead. See the [Using the VideoPlayer Directly](#using-the-videoplayer-directly) section for more details.
+ * @param source
+ */
+export function createVideoPlayer(source: VideoSource): VideoPlayer {
+  return new NativeVideoModule.VideoPlayer(parseSource(source));
+}
+
+/**
+ * Creates a `VideoPlayer`, which will be automatically cleaned up when the component is unmounted.
+ * @param source - A video source that is used to initialize the player.
+ * @param setup - A function that allows setting up the player. It will run after the player is created.
+ */
+export function useVideoPlayer(
+  source: VideoSource,
+  setup?: (player: VideoPlayer) => void
+): VideoPlayer {
+  const parsedSource = parseSource(source);
+
+  return useReleasingSharedObject(() => {
+    const player = new NativeVideoModule.VideoPlayer(parsedSource);
+    setup?.(player);
+    return player;
+  }, [JSON.stringify(parsedSource)]);
+}
+
+function parseSource(source: VideoSource): VideoSource {
+  if (typeof source === 'number') {
+    // TODO(@kitten): This seems to not handle the `null` case. Is this correct?
+    return { uri: resolveAssetSource(source)!.uri };
+  } else if (typeof source === 'string') {
+    return { uri: source };
+  }
+
+  if (typeof source?.assetId === 'number' && !source.uri) {
+    // TODO(@kitten): This seems to not handle the `null` case. Is this correct?
+    return { ...source, uri: resolveAssetSource(source.assetId)!.uri };
+  }
+  return source;
+}