react-native-alpha-video-gpu 0.0.0-stage → 1.0.1

package/react-native/ios/RNAlphaVideoGpuViewManager.mm

@@ -0,0 +1,175 @@
+//
+//  RNAlphaVideoGpuViewManager.mm
+//  React Native view manager for AlphaVideoGpuView (old architecture; the new one uses
+//  RNAlphaVideoGpuViewComponentView.mm)
+//
+
+#ifndef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTUIManager.h>
+#import <React/RCTViewManager.h>
+#import "AlphaVideoGPU.h"
+
+#pragma mark - RNAlphaVideoGpuView
+
+/** AlphaVideoGpuView with the React Native props and events. */
+@interface RNAlphaVideoGpuView : AlphaVideoGpuView
+
+// `source` prop: { uri, cacheKey, headers?: [name, value, ...], dataSource? }
+@property (nonatomic, copy) NSDictionary *reactSource;
+
+@property (nonatomic, copy) RCTDirectEventBlock reactOnLoad;
+@property (nonatomic, copy) RCTDirectEventBlock reactOnFrameUpdate;
+@property (nonatomic, copy) RCTDirectEventBlock reactOnStateChange;
+@property (nonatomic, copy) RCTDirectEventBlock reactOnFinished;
+@property (nonatomic, copy) RCTDirectEventBlock reactOnError;
+
+@end
+
+@implementation RNAlphaVideoGpuView
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  self = [super initWithFrame:frame];
+  if (self) {
+    [self forwardEvents];
+  }
+  return self;
+}
+
+static NSString *RNAVGString(id value)
+{
+  return [value isKindOfClass:[NSString class]] && [value length] > 0 ? value : nil;
+}
+
+- (void)setReactSource:(NSDictionary *)reactSource
+{
+  _reactSource = [reactSource copy];
+  // Adopt a cacheKey inside `source` before loading: React gives no ordering guarantee against
+  // the separate `cacheKey` prop, and the load reads the key to name what it stores.
+  NSString *cacheKey = RNAVGString(reactSource[@"cacheKey"]);
+  if (cacheKey) {
+    self.cacheKey = cacheKey;
+  }
+  NSArray *flat = [reactSource[@"headers"] isKindOfClass:[NSArray class]] ? reactSource[@"headers"] : @[];
+  NSMutableDictionary<NSString *, NSString *> *headers = [NSMutableDictionary dictionary];
+  for (NSUInteger i = 0; i + 1 < flat.count; i += 2) {
+    if ([flat[i] isKindOfClass:[NSString class]] && [flat[i + 1] isKindOfClass:[NSString class]]) {
+      headers[flat[i]] = flat[i + 1];
+    }
+  }
+  self.headers = headers;
+  self.dataSource = RNAVGString(reactSource[@"dataSource"]);
+  self.source = RNAVGString(reactSource[@"uri"]);
+}
+
+- (void)forwardEvents
+{
+  __weak RNAlphaVideoGpuView *weakSelf = self;
+  self.onLoad = ^(NSInteger width, NSInteger height, NSInteger frameCount, CGFloat frameRate) {
+    RCTDirectEventBlock block = weakSelf.reactOnLoad;
+    if (!block) return;
+    block(@{
+      @"width": @(width),
+      @"height": @(height),
+      @"frameCount": @(frameCount),
+      @"frameRate": @(frameRate),
+      @"duration": @(frameCount > 0 && frameRate > 0 ? frameCount / frameRate : 0)
+    });
+  };
+  self.onFrameUpdate = ^(NSInteger frame, NSInteger totalFrames) {
+    RCTDirectEventBlock block = weakSelf.reactOnFrameUpdate;
+    if (block) block(@{@"frame": @(frame), @"totalFrames": @(totalFrames)});
+  };
+  self.onStateChange = ^(NSString *state) {
+    RCTDirectEventBlock block = weakSelf.reactOnStateChange;
+    if (block) block(@{@"state": state});
+  };
+  self.onFinished = ^{
+    RCTDirectEventBlock block = weakSelf.reactOnFinished;
+    if (block) block(@{});
+  };
+  self.onError = ^(NSString *error, NSString *code) {
+    RCTDirectEventBlock block = weakSelf.reactOnError;
+    if (block) block(code ? @{@"error": error, @"code": code} : @{@"error": error});
+  };
+}
+
+@end
+
+#pragma mark - RNAlphaVideoGpuViewManager
+
+@interface RNAlphaVideoGpuViewManager : RCTViewManager
+@end
+
+@implementation RNAlphaVideoGpuViewManager
+
+RCT_EXPORT_MODULE(AlphaVideoGpuView)
+
++ (BOOL)requiresMainQueueSetup
+{
+  return YES;
+}
+
+- (UIView *)view
+{
+  return [[RNAlphaVideoGpuView alloc] initWithFrame:CGRectZero];
+}
+
+RCT_REMAP_VIEW_PROPERTY(source, reactSource, NSDictionary)
+RCT_REMAP_VIEW_PROPERTY(paused, playbackPaused, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(cacheKey, NSString)
+RCT_EXPORT_VIEW_PROPERTY(storage, NSString)
+RCT_EXPORT_VIEW_PROPERTY(maxStorageBytes, int64_t)
+RCT_EXPORT_VIEW_PROPERTY(autoPlay, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(loop, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(playbackSpeed, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(enableFrameEvents, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(streamingPrefetchAhead, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(memoryStrategy, NSString)
+RCT_EXPORT_VIEW_PROPERTY(stream, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(verbose, BOOL)
+RCT_REMAP_VIEW_PROPERTY(onLoad, reactOnLoad, RCTDirectEventBlock)
+RCT_REMAP_VIEW_PROPERTY(onFrameUpdate, reactOnFrameUpdate, RCTDirectEventBlock)
+RCT_REMAP_VIEW_PROPERTY(onStateChange, reactOnStateChange, RCTDirectEventBlock)
+RCT_REMAP_VIEW_PROPERTY(onFinished, reactOnFinished, RCTDirectEventBlock)
+RCT_REMAP_VIEW_PROPERTY(onError, reactOnError, RCTDirectEventBlock)
+
+// The block's view registry is empty under the new architecture's interop layer, so look the
+// view up by tag instead.
+- (void)withView:(NSNumber *)reactTag run:(void (^)(AlphaVideoGpuView *view))body
+{
+  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    UIView *view = [uiManager viewForReactTag:reactTag];
+    if ([view isKindOfClass:[AlphaVideoGpuView class]]) body((AlphaVideoGpuView *)view);
+  }];
+}
+
+RCT_EXPORT_METHOD(play:(nonnull NSNumber *)reactTag)
+{
+  [self withView:reactTag run:^(AlphaVideoGpuView *view) { [view play]; }];
+}
+
+RCT_EXPORT_METHOD(pause:(nonnull NSNumber *)reactTag)
+{
+  [self withView:reactTag run:^(AlphaVideoGpuView *view) { [view pause]; }];
+}
+
+RCT_EXPORT_METHOD(stop:(nonnull NSNumber *)reactTag)
+{
+  [self withView:reactTag run:^(AlphaVideoGpuView *view) { [view stop]; }];
+}
+
+RCT_EXPORT_METHOD(seekToFrame:(nonnull NSNumber *)reactTag frame:(nonnull NSNumber *)frame)
+{
+  [self withView:reactTag run:^(AlphaVideoGpuView *view) { [view seekToFrame:frame.integerValue]; }];
+}
+
+RCT_EXPORT_METHOD(seekToTime:(nonnull NSNumber *)reactTag seconds:(nonnull NSNumber *)seconds)
+{
+  [self withView:reactTag run:^(AlphaVideoGpuView *view) { [view seekToTime:seconds.doubleValue]; }];
+}
+
+@end
+
+#endif

package/react-native/src/AlphaVideoGpuView.js

@@ -0,0 +1,2 @@
+// Native platforms resolve here instead of AlphaVideoGpuView.web.tsx, so alpha-video-gpu-web stays out of native bundles.
+export default null;

package/react-native/src/AlphaVideoGpuView.web.tsx

@@ -0,0 +1,296 @@
+/**
+ * AlphaVideoGpuView - React Native Web Implementation
+ *
+ * GPU-accelerated transparent alpha video player.
+ * Thin wrapper around AlphaVideoGpuCore (alpha-video-gpu-web) for React Native Web.
+ * Same API as native iOS/Android implementations.
+ *
+ * The zstd decoder (JS + WASM) comes bundled in alpha-video-gpu-web.
+ */
+
+import React, { forwardRef, useImperativeHandle, useRef, useEffect, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import {
+  AlphaVideoGpuCore,
+  ZSTDDecoder,
+  type AlphaVideoGpuError,
+  type AlphaVideoGpuErrorCode,
+  type AlphaVideoGpuLoadEvent,
+  type ByteSource,
+} from 'alpha-video-gpu-web';
+
+export type { AlphaVideoGpuErrorCode, AlphaVideoGpuLoadEvent, PlayerState, ByteSource } from 'alpha-video-gpu-web';
+
+/**
+ * Where to load from (on web, `asset://` and http(s) URLs apply):
+ * - `https://…` / `http://…`: read by range as it plays, and kept as `storage` says (on web in the
+ *   browser's storage, OPFS, else IndexedDB)
+ * - `file:///abs/path` or `/abs/path`: read in place
+ * - `asset://relative/path`: Android APK `assets/`, the iOS app bundle, or the site root on web
+ * - Android only: `content://…`, or a res/raw name (what `require()` resolves to in a release build)
+ *
+ * On web, `source` can also be a Blob or File, or a ByteSource that reads by offset.
+ */
+export interface SourceType {
+  uri?: string;
+  /** What the store keeps the source under, for URLs that change while the file doesn't (presigned URLs) */
+  cacheKey?: string;
+  /** Sent with every request for the URL, e.g. Authorization; given to a `dataSource` too */
+  headers?: Record<string, string>;
+  /**
+   * Read the file through the data source registered under this name: range-source's
+   * `RangeDataSources` on Android and iOS, and range-source-web's on the web. MediaCache
+   * registers as `'mediacache'` with `cache.registerRangeDataSource()`.
+   */
+  dataSource?: string;
+}
+
+type DataSourceFactory = (uri: string, init?: { headers?: Record<string, string> }) => ByteSource;
+
+/** range-source-web's `RangeDataSources`, read from its global symbol so this package needn't depend on it. */
+function registeredDataSource(name: string): DataSourceFactory | undefined {
+  const scope = globalThis as { [key: symbol]: Map<string, DataSourceFactory> | undefined };
+  return scope[Symbol.for('range-source.dataSources')]?.get(name);
+}
+
+export interface AlphaVideoGpuViewProps {
+  source?: SourceType | string | Blob | ByteSource | null;
+  autoPlay?: boolean;
+  loop?: boolean;
+  playbackSpeed?: number;
+  /** Pause playback and decompression (useful for screen focus/blur) */
+  paused?: boolean;
+  cacheKey?: string;
+  /** Where a URL's bytes are kept between plays; on web 'disk' is the browser's storage. Read on mount */
+  storage?: 'auto' | 'disk' | 'memory' | 'none';
+  /** The store's cap in bytes (default 512 MB). Read on mount */
+  maxStorageBytes?: number;
+  style?: any;
+  testID?: string;
+  // Events have the native shape, so the same handlers work on every platform
+  /** Called when file metadata is loaded, provides dimensions and frame info */
+  onLoad?: (event: { nativeEvent: AlphaVideoGpuLoadEvent }) => void;
+  onStateChange?: (event: { nativeEvent: { state: string } }) => void;
+  onFrameUpdate?: (event: { nativeEvent: { frame: number; totalFrames: number } }) => void;
+  onFinished?: (event: { nativeEvent: {} }) => void;
+  /** `code` is set for the errors a page may want to handle, such as 'ASTC_UNSUPPORTED' */
+  onError?: (event: { nativeEvent: { error: string; code?: AlphaVideoGpuErrorCode } }) => void;
+  /** Send onFrameUpdate for every frame played; seeks always send it. Default: false */
+  enableFrameEvents?: boolean;
+
+  // Streaming parameters (with stream)
+  /** Frames decoded ahead of the shown one, all streaming keeps. Default: 8 */
+  streamingPrefetchAhead?: number;
+  /** Memory strategy: 'vram' | 'ram'. Default: 'vram' */
+  memoryStrategy?: 'vram' | 'ram';
+  /** Enable streaming mode for texture array playback. Default: true */
+  stream?: boolean;
+  /** Log info traces to the console. Default: false */
+  verbose?: boolean;
+}
+
+// ============================================================================
+// AlphaVideoGpuView Component — Thin React Native Web wrapper
+// ============================================================================
+
+export interface AlphaVideoGpuViewRef {
+  play: () => void;
+  pause: () => void;
+  stop: () => void;
+  seekToFrame: (frame: number) => void;
+  seekToTime: (seconds: number) => void;
+}
+
+export const AlphaVideoGpuView = forwardRef<AlphaVideoGpuViewRef, AlphaVideoGpuViewProps>(({
+  source,
+  autoPlay = true,
+  loop = true,
+  playbackSpeed = 1.0,
+  paused = false,
+  cacheKey,
+  storage,
+  maxStorageBytes,
+  style,
+  testID,
+  onLoad,
+  onStateChange,
+  onFrameUpdate,
+  onFinished,
+  onError,
+  streamingPrefetchAhead = 8,
+  memoryStrategy = 'vram',
+  stream = true,
+  enableFrameEvents = false,
+  verbose = false,
+}, ref) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const coreRef = useRef<AlphaVideoGpuCore | null>(null);
+  const loadedSourceRef = useRef<unknown>(null);
+  const callbacksRef = useRef({ onLoad, onStateChange, onFrameUpdate, onFinished, onError });
+  callbacksRef.current = { onLoad, onStateChange, onFrameUpdate, onFinished, onError };
+
+  useImperativeHandle(ref, () => ({
+    play: () => coreRef.current?.play(),
+    pause: () => coreRef.current?.pause(),
+    stop: () => coreRef.current?.stop(),
+    seekToFrame: (frame: number) => coreRef.current?.seekToFrame(frame),
+    seekToTime: (seconds: number) => coreRef.current?.seekToTime(seconds),
+  }), []);
+
+  // A Blob or ByteSource plays as it is; anything else is normalized to { uri } format
+  const directSource = isDirectSource(source) ? source : null;
+  const normalizedSource = useMemo((): SourceType | null => {
+    if (!source || isDirectSource(source)) return null;
+    if (typeof source === 'string') return { uri: source };
+    return source;
+  }, [source]);
+  const headersRef = useRef(normalizedSource?.headers);
+  headersRef.current = normalizedSource?.headers;
+
+  // Create core instance when canvas is available
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || coreRef.current) return;
+
+    coreRef.current = new AlphaVideoGpuCore(canvas, {
+      autoPlay,
+      loop,
+      playbackSpeed,
+      stream,
+      streamingPrefetchAhead,
+      memoryStrategy,
+      verbose,
+      frameEvents: enableFrameEvents,
+      storage: storage === 'disk' ? 'auto' : storage,
+      maxStorageBytes: maxStorageBytes && maxStorageBytes > 0 ? maxStorageBytes : undefined,
+      ZSTDDecoderClass: ZSTDDecoder,
+      onStateChange: state => callbacksRef.current.onStateChange?.({ nativeEvent: { state } }),
+      onLoad: event => callbacksRef.current.onLoad?.({ nativeEvent: event }),
+      onFrameUpdate: (frame, totalFrames) =>
+        callbacksRef.current.onFrameUpdate?.({ nativeEvent: { frame, totalFrames } }),
+      onFinished: () => callbacksRef.current.onFinished?.({ nativeEvent: {} }),
+      onError: error => {
+        const { code } = error as AlphaVideoGpuError;
+        callbacksRef.current.onError?.({ nativeEvent: code ? { error: error.message, code } : { error: error.message } });
+      },
+    });
+
+    return () => {
+      coreRef.current?.destroy();
+      coreRef.current = null;
+      loadedSourceRef.current = null;
+    };
+    // Only create/destroy on mount/unmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // What identifies "the same video". A presigned URL is re-signed every time the app
+  // lists its media, so the URL changes while still addressing the same object; keying
+  // the load on it would resetSource() and refetch on each refresh, visibly restarting
+  // a loop that should run until unmount. The cache key is the stable identity.
+  const sourceCacheKey = normalizedSource?.cacheKey || cacheKey;
+  const dataSource = normalizedSource?.dataSource;
+  const keyed = sourceCacheKey || normalizedSource?.uri;
+  const sourceIdentity = directSource || (keyed && dataSource ? `${dataSource}:${keyed}` : keyed) || null;
+
+  // Load source when it changes
+  useEffect(() => {
+    const core = coreRef.current;
+    const uri = normalizedSource?.uri;
+    if (!core || !sourceIdentity || loadedSourceRef.current === sourceIdentity) return;
+
+    if (dataSource && uri) {
+      // The data source keeps the bytes; the player stores them too only when storage is set
+      const factory = registeredDataSource(dataSource);
+      if (!factory) {
+        callbacksRef.current.onError?.({ nativeEvent: { error: `No data source is registered on the web under "${dataSource}"` } });
+        return;
+      }
+      loadedSourceRef.current = sourceIdentity;
+      const stored = storage === 'disk' || storage === 'memory';
+      core.setSource(factory(uri, { headers: headersRef.current }), stored ? { cacheKey: keyed } : {});
+      return () => {
+        loadedSourceRef.current = null;
+        core.resetSource();
+      };
+    }
+
+    const toLoad = directSource || uri;
+    if (!toLoad) return;
+    loadedSourceRef.current = sourceIdentity;
+    core.setSource(toLoad, { cacheKey: sourceCacheKey, headers: headersRef.current });
+
+    return () => {
+      loadedSourceRef.current = null;
+      core.resetSource();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sourceIdentity]);
+
+  useEffect(() => {
+    if (coreRef.current) {
+      coreRef.current.verbose = verbose;
+    }
+  }, [verbose]);
+
+  useEffect(() => {
+    if (coreRef.current) {
+      coreRef.current.frameEvents = enableFrameEvents;
+    }
+  }, [enableFrameEvents]);
+
+  // Handle playback speed changes
+  useEffect(() => {
+    if (coreRef.current) {
+      coreRef.current.playbackSpeed = playbackSpeed;
+    }
+  }, [playbackSpeed]);
+
+  // Handle loop changes
+  useEffect(() => {
+    if (coreRef.current) {
+      coreRef.current.loop = loop;
+    }
+  }, [loop]);
+
+  // Handle paused prop changes
+  useEffect(() => {
+    coreRef.current?.setPaused(paused);
+  }, [paused]);
+
+  // Get canvas dimensions from style
+  const canvasStyle = useMemo(() => {
+    const flatStyle = StyleSheet.flatten(style) || {};
+    return {
+      width: (flatStyle as any).width || 300,
+      height: (flatStyle as any).height || 300,
+    };
+  }, [style]);
+
+  return (
+    <View testID={testID} style={[styles.container, style]}>
+      <canvas
+        ref={canvasRef}
+        width={canvasStyle.width}
+        height={canvasStyle.height}
+        style={{ width: '100%', height: '100%' }}
+      />
+    </View>
+  );
+});
+
+function isDirectSource(source: AlphaVideoGpuViewProps['source']): source is Blob | ByteSource {
+  if (!source || typeof source !== 'object') return false;
+  return (typeof Blob !== 'undefined' && source instanceof Blob) || typeof (source as ByteSource).read === 'function';
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+});
+
+AlphaVideoGpuView.displayName = 'AlphaVideoGpuView';
+
+export default AlphaVideoGpuView;

package/react-native/src/AlphaVideoGpuViewNativeComponent.ts

@@ -0,0 +1,128 @@
+import type * as React from 'react';
+import type { HostComponent, ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+  Float,
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+/**
+ * Where to load from:
+ * - `https://…` / `http://…`: with react-native-range-source read by range as it plays, and kept
+ *   as `storage` says; without it downloaded whole
+ * - `file:///abs/path` or `/abs/path`: read in place
+ * - `asset://relative/path`: Android APK `assets/`, the iOS app bundle, or the site root on web
+ * - Android only: `content://…`, or a res/raw name (what `require()` resolves to in a release build)
+ * - with `dataSource`, any URI that data source reads
+ */
+export interface SourceType {
+  uri?: string;
+  /** What the store keeps the source under, for URLs that change while the file doesn't (presigned URLs) */
+  cacheKey?: string;
+  /** Sent with every request for the URL, e.g. Authorization; given to a `dataSource` too */
+  headers?: Record<string, string>;
+  /** A data source registered in native code under this name (react-native-range-source's RangeDataSources) */
+  dataSource?: string;
+}
+
+export interface AlphaVideoGpuLoadEvent {
+  width: number;
+  height: number;
+  frameCount: number;
+  frameRate: number;
+  duration: number;
+}
+
+type NativeSource = Readonly<{
+  uri?: string;
+  cacheKey?: string;
+  /** Request headers as name, value, name, value... (codegen has no string maps) */
+  headers?: ReadonlyArray<string>;
+  dataSource?: string;
+}>;
+
+type LoadEvent = Readonly<{
+  width: Int32;
+  height: Int32;
+  frameCount: Int32;
+  frameRate: Double;
+  duration: Double;
+}>;
+
+type FrameUpdateEvent = Readonly<{
+  frame: Int32;
+  totalFrames: Int32;
+}>;
+
+type StateChangeEvent = Readonly<{
+  state: string;
+}>;
+
+type ErrorEvent = Readonly<{
+  error: string;
+  /** `'NO_SOURCE_MODULE'` for a data source without the range-source add-on */
+  code?: string;
+}>;
+
+export interface NativeProps extends ViewProps {
+  source?: NativeSource;
+  autoPlay?: WithDefault<boolean, true>;
+  loop?: WithDefault<boolean, true>;
+  playbackSpeed?: WithDefault<Float, 1.0>;
+  /** Pause playback and decompression (useful for screen focus/blur) */
+  paused?: WithDefault<boolean, false>;
+  cacheKey?: string;
+  /** Where a URL's or data source's bytes are kept between plays */
+  storage?: WithDefault<'auto' | 'disk' | 'memory' | 'none', 'auto'>;
+  /** The store's cap in bytes; 0 for the default (512 MB) */
+  maxStorageBytes?: WithDefault<Double, 0>;
+
+  // Streaming parameters (with stream)
+  /** Frames decoded ahead of the shown one, all streaming keeps: the GPU ring (vram) or the CPU cache (ram). Default: 8 */
+  streamingPrefetchAhead?: WithDefault<Int32, 8>;
+
+  /**
+   * Memory strategy for frame storage.
+   * - 'vram' (default): Store frames in GPU VRAM (texture array). Best for many simultaneous players.
+   * - 'ram': Store decoded frames in RAM, upload per-frame. Lower VRAM usage.
+   */
+  memoryStrategy?: WithDefault<'vram' | 'ram', 'vram'>;
+
+  /**
+   * Enable streaming mode for texture array playback.
+   * When true (default): Use streaming decompression with ring buffer (constant memory usage).
+   * When false: Load all frames at once.
+   */
+  stream?: WithDefault<boolean, true>;
+
+  /** Send onFrameUpdate for every rendered frame. Default: false */
+  enableFrameEvents?: WithDefault<boolean, false>;
+  /** Log info traces (Logcat / Xcode console). Warnings and errors always log. Default: false */
+  verbose?: WithDefault<boolean, false>;
+
+  onLoad?: DirectEventHandler<LoadEvent>;
+  onFrameUpdate?: DirectEventHandler<FrameUpdateEvent>;
+  onStateChange?: DirectEventHandler<StateChangeEvent>;
+  onFinished?: DirectEventHandler<Readonly<{}>>;
+  onError?: DirectEventHandler<ErrorEvent>;
+}
+
+type NativeComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  play: (viewRef: React.ElementRef<NativeComponentType>) => void;
+  pause: (viewRef: React.ElementRef<NativeComponentType>) => void;
+  stop: (viewRef: React.ElementRef<NativeComponentType>) => void;
+  seekToFrame: (viewRef: React.ElementRef<NativeComponentType>, frame: Int32) => void;
+  seekToTime: (viewRef: React.ElementRef<NativeComponentType>, seconds: Double) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['play', 'pause', 'stop', 'seekToFrame', 'seekToTime'],
+});
+
+export default codegenNativeComponent<NativeProps>('AlphaVideoGpuView') as NativeComponentType;

package/react-native/src/AlphaVideoGpuViewNativeComponent.web.ts

@@ -0,0 +1,2 @@
+// Web renders AlphaVideoGpuView.web.tsx. This stub keeps the native spec's imports out of web bundles.
+export default null;