@symbiote-native/video 0.0.0-stage → 0.1.0

package/native-link.json

@@ -0,0 +1,33 @@
+{
+  "android": {
+    "gradleProjectName": "expo-video",
+    "modules": [
+      {
+        "importPath": "expo.modules.video.VideoModule",
+        "className": "VideoModule",
+        "nativeName": "ExpoVideo"
+      }
+    ],
+    "optionalManifestBundles": [
+      {
+        "id": "backgroundPlayback",
+        "label": "Background video playback",
+        "warning": "Requesting FOREGROUND_SERVICE_MEDIA_PLAYBACK triggers Play Console policy review for a foreground service, Google asks for a justification before you can publish.",
+        "nextSteps": "Set `staysActiveInBackground` and `showNowPlayingNotification` on the player. On iOS add `audio` to UIBackgroundModes in Info.plist yourself.",
+        "manifestPermissions": [
+          "android.permission.FOREGROUND_SERVICE",
+          "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"
+        ],
+        "manifestServices": [
+          {
+            "name": "expo.modules.video.playbackService.ExpoVideoPlaybackService",
+            "foregroundServiceType": "mediaPlayback",
+            "intentFilterActions": [
+              "androidx.media3.session.MediaSessionService"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,147 @@
 {
   "name": "@symbiote-native/video",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "expo-video wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. Video playback: the player, the view, thumbnails, the cache and the AirPlay button.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "packages/video"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/packages/video#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "expo-video",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "video"
+  ],
+  "type": "module",
+  "main": "./build/core/index.js",
+  "module": "./build/core/index.js",
+  "types": "./build/core/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/core/index.d.ts",
+      "default": "./build/core/index.js"
+    },
+    "./vue": {
+      "types": "./build/vue/index.d.ts",
+      "default": "./build/vue/index.js"
+    },
+    "./react": {
+      "types": "./build/react/index.d.ts",
+      "default": "./build/react/index.js"
+    },
+    "./svelte": "./src/svelte/index.ts",
+    "./solid": {
+      "types": "./build/solid/index.d.ts",
+      "default": "./build/solid/index.js"
+    },
+    "./angular": {
+      "types": "./build-ngc/angular/index.d.ts",
+      "react-native": "./build-ngc/angular/index.js",
+      "default": "./src/angular/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "build",
+    "build-ngc",
+    "native-link.json",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/*.detox.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "expo-video": "57.0.5",
+    "expo-modules-core": "57.0.20",
+    "@symbiote-native/components": "3.2.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20",
+    "@vue/runtime-core": "^3.5.13",
+    "react": ">=19.0.0",
+    "react-native": ">=0.86",
+    "solid-js": ">=1.9.0",
+    "svelte": ">=5.56.0",
+    "vue": ">=3.5.0",
+    "@symbiote-native/angular": "^3.3.0",
+    "@symbiote-native/engine": "^1.6.0",
+    "@symbiote-native/react": "^3.3.0",
+    "@symbiote-native/vue": "^3.3.0",
+    "@symbiote-native/svelte": "^3.2.0",
+    "@symbiote-native/solid": "^3.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@symbiote-native/angular": {
+      "optional": true
+    },
+    "@symbiote-native/react": {
+      "optional": true
+    },
+    "@symbiote-native/solid": {
+      "optional": true
+    },
+    "@symbiote-native/svelte": {
+      "optional": true
+    },
+    "@symbiote-native/vue": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@vue/runtime-core": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/compiler": "~22.0.8",
+    "@angular/compiler-cli": "~22.0.8",
+    "@angular/core": "~22.0.8",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.0",
+    "@vue/runtime-core": "^3.5.13",
+    "react": "19.2.3",
+    "solid-js": "^1.9.14",
+    "svelte": "^5.56.0",
+    "typescript": "~6.0.0",
+    "@symbiote-native/angular": "3.3.0",
+    "@symbiote-native/engine": "1.6.0",
+    "@symbiote-native/react": "3.3.0",
+    "@symbiote-native/solid": "3.2.0",
+    "@symbiote-native/svelte": "3.2.0",
+    "@symbiote-native/vue": "3.3.0",
+    "@symbiote-native/test-utils": "0.4.7"
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "clean": "rm -rf build-ngc",
+    "ng:build": "pnpm run clean && ngc -p tsconfig.angular.json",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
 }

package/src/angular/index.ts

@@ -0,0 +1,6 @@
+// @symbiote-native/video/angular: плеер, view, миниатюры, кэш и кнопка AirPlay на общем ядре
+
+export { VideoView } from './video-view';
+export { VideoAirPlayButton } from './video-airplay-button';
+export { injectVideoPlayer } from './inject-video-player';
+export * from '../core';

package/src/angular/inject-video-player.ts

@@ -0,0 +1,20 @@
+// Angular twin of `useVideoPlayer`, `injectX` shape matching `injectAudioPlayer`
+
+import type { Signal } from '@angular/core';
+import { createResourceHook } from '@symbiote-native/angular';
+import { createVideoPlayerController } from '../core/video-player-controller';
+import type {
+  IVideoPlayerBuilderOptions,
+  IVideoSource,
+  VideoPlayer,
+} from '../core';
+
+const injectPlayerResource = createResourceHook(createVideoPlayerController);
+
+/** Released with the injection context, `setup` runs once on each new player */
+export const injectVideoPlayer = (
+  source: () => IVideoSource,
+  setup?: (player: VideoPlayer) => void,
+  options?: () => IVideoPlayerBuilderOptions | undefined,
+): Signal<VideoPlayer> =>
+  injectPlayerResource(() => [source(), options?.(), setup]);

package/src/angular/video-airplay-button/index.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet, NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import { renderVideoAirPlayButton } from '../../core';
+import type { IVideoAirPlayButtonProps } from '../../core';
+
+// One list is the inputs of the component and the props it hands to the native view
+const AIRPLAY_INPUTS = [
+  'tint',
+  'activeTint',
+  'prioritizeVideoDevices',
+  'onBeginPresentingRoutes',
+  'onEndPresentingRoutes',
+] as const;
+
+// Types the inputs for the template, the decorators that would do it are replaced by `inputs`
+export interface VideoAirPlayButton extends Partial<
+  Pick<IVideoAirPlayButtonProps, (typeof AIRPLAY_INPUTS)[number]>
+> {}
+
+/** Angular twin of `expo-video`'s `VideoAirPlayButton`, a plain view off iOS */
+@Component({
+  selector: 'VideoAirPlayButton',
+  standalone: true,
+  imports: [DescriptorOutlet],
+  inputs: [...AIRPLAY_INPUTS],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `@if (descriptor; as node) {
+    <symbiote-descriptor-outlet [node]="node" />
+  }`,
+})
+export class VideoAirPlayButton extends NativeViewBase {
+  protected override readonly propNames = AIRPLAY_INPUTS;
+
+  protected override renderView(props: object): IDescriptor | null {
+    return renderVideoAirPlayButton(props);
+  }
+}

package/src/angular/video-view/index.ts

@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet, NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import { createVideoView } from '../../core';
+import type { IVideoViewProps } from '../../core';
+
+// One list is the inputs of the component and the props it hands to the native view
+const VIDEO_VIEW_INPUTS = [
+  'player',
+  'nativeControls',
+  'contentFit',
+  'fullscreenOptions',
+  'showsTimecodes',
+  'requiresLinearPlayback',
+  'buttonOptions',
+  'surfaceType',
+  'contentPosition',
+  'onPictureInPictureStart',
+  'onPictureInPictureStop',
+  'allowsPictureInPicture',
+  'startsPictureInPictureAutomatically',
+  'allowsVideoFrameAnalysis',
+  'onFullscreenEnter',
+  'onFullscreenExit',
+  'onFirstFrameRender',
+  'useExoShutter',
+] as const;
+
+// Types the inputs for the template, the decorators that would do it are replaced by `inputs`
+export interface VideoView extends Partial<
+  Pick<IVideoViewProps, (typeof VIDEO_VIEW_INPUTS)[number]>
+> {}
+
+/** Angular twin of `expo-video`'s `VideoView` */
+@Component({
+  selector: 'VideoView',
+  standalone: true,
+  imports: [DescriptorOutlet],
+  inputs: [...VIDEO_VIEW_INPUTS],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `@if (descriptor; as node) {
+    <symbiote-descriptor-outlet [node]="node" />
+  }`,
+})
+export class VideoView extends NativeViewBase {
+  private readonly view = createVideoView(() => this.hostNode());
+
+  // The functions of the view are members of the component, a `@ViewChild` reaches them
+  readonly enterFullscreen = this.view.handle.enterFullscreen;
+  readonly exitFullscreen = this.view.handle.exitFullscreen;
+  readonly startPictureInPicture = this.view.handle.startPictureInPicture;
+  readonly stopPictureInPicture = this.view.handle.stopPictureInPicture;
+
+  protected override readonly propNames = VIDEO_VIEW_INPUTS;
+
+  protected override renderView(props: object): IDescriptor | null {
+    return this.view.render(props);
+  }
+}

package/src/core/constants.ts

@@ -0,0 +1,16 @@
+// Apart from `native-module`, which resolves the module on import: the views need the name too
+
+export const VIDEO_MODULE_NAME = 'ExpoVideo';
+
+/** Upstream's label for its `UnavailabilityError` */
+export const VIDEO_PACKAGE_NAME = 'expo-video';
+
+export const VIDEO_VIEW_NAMES = {
+  /** The one iOS view */
+  video: 'VideoView',
+  /** The Android default, renders into a `SurfaceView` */
+  surface: 'SurfaceVideoView',
+  /** Android, for overlapping views */
+  texture: 'TextureVideoView',
+  airPlayButton: 'VideoAirPlayButtonView',
+} as const;

package/src/core/index.ts

@@ -0,0 +1,56 @@
+export { VIDEO_MODULE_NAME } from './constants';
+export type {
+  IVideoAudioMixingMode,
+  IVideoAudioTrack,
+  IVideoBufferOptions,
+  IVideoContentType,
+  IVideoDrmOptions,
+  IVideoDrmType,
+  IVideoMetadata,
+  IVideoPlayerBuilderOptions,
+  IVideoPlayerError,
+  IVideoPlayerEvents,
+  IVideoPlayerStatus,
+  IVideoRange,
+  IVideoScrubbingModeOptions,
+  IVideoSeekTolerance,
+  IVideoSize,
+  IVideoSource,
+  IVideoSourceObject,
+  IVideoSubtitleTrack,
+  IVideoThumbnailOptions,
+  IVideoTrack,
+  VideoPlayer,
+} from './player-types';
+export { createVideoPlayer } from './video-player';
+export {
+  createVideoPlayerController,
+  type IVideoPlayerController,
+} from './video-player-controller';
+export {
+  clearVideoCacheAsync,
+  getCurrentVideoCacheSize,
+  isPictureInPictureSupported,
+  setVideoCacheSizeAsync,
+} from './video-module';
+export { parseSource } from './video-source';
+export { VideoThumbnail } from './video-thumbnail';
+export {
+  createVideoView,
+  type IVideoView,
+  type IVideoViewHandle,
+} from './video-view';
+export {
+  renderVideoAirPlayButton,
+  videoAirPlayButtonViewName,
+} from './video-airplay-button';
+export type {
+  IVideoAirPlayButtonProps,
+  IVideoButtonOptions,
+  IVideoContentFit,
+  IVideoFullscreenOptions,
+  IVideoFullscreenOrientation,
+  IVideoKeepFullscreenOnPiPStop,
+  IVideoSurfaceType,
+  IVideoViewProps,
+} from './view-types';

package/src/core/native-module.ts

@@ -0,0 +1,15 @@
+import { requireNativeModule } from 'expo-modules-core';
+import { VIDEO_MODULE_NAME } from './constants';
+import type { VideoPlayer, VideoThumbnail } from './player-types';
+
+export type INativeVideoModule = {
+  VideoPlayer: typeof VideoPlayer;
+  VideoThumbnail: typeof VideoThumbnail;
+  isPictureInPictureSupported(): boolean;
+  setVideoCacheSizeAsync(sizeBytes: number): Promise<void>;
+  clearVideoCacheAsync(): Promise<void>;
+  getCurrentVideoCacheSize(): number;
+};
+
+export const expoVideo =
+  requireNativeModule<INativeVideoModule>(VIDEO_MODULE_NAME);

package/src/core/player-types.ts

@@ -0,0 +1,241 @@
+import type { SharedObject, SharedRef } from 'expo-modules-core';
+
+export type IVideoPlayerStatus = 'idle' | 'loading' | 'readyToPlay' | 'error';
+
+export type IVideoContentType =
+  'auto' | 'progressive' | 'hls' | 'dash' | 'smoothStreaming';
+
+export type IVideoDrmType = 'clearkey' | 'fairplay' | 'playready' | 'widevine';
+
+export type IVideoDrmOptions = {
+  type: IVideoDrmType;
+  licenseServer: string;
+  headers?: Record<string, string>;
+  /** Android only */
+  multiKey?: boolean;
+  /** iOS only */
+  contentId?: string;
+  /** iOS only */
+  certificateUrl?: string;
+  /** iOS only */
+  base64CertificateData?: string;
+};
+
+export type IVideoMetadata = {
+  title?: string;
+  artist?: string;
+  artwork?: string;
+};
+
+export type IVideoSourceObject = {
+  uri?: string;
+  /** A `require`d asset, `uri` wins when both are set */
+  assetId?: number;
+  drm?: IVideoDrmOptions;
+  metadata?: IVideoMetadata;
+  headers?: Record<string, string>;
+  /** Caches the video on disk, off by default */
+  useCaching?: boolean;
+  contentType?: IVideoContentType;
+};
+
+/** A URI, a `require`d asset or an object, `null` unloads the player */
+export type IVideoSource = string | number | null | IVideoSourceObject;
+
+export type IVideoPlayerError = { message: string };
+
+export type IVideoAudioMixingMode =
+  'mixWithOthers' | 'duckOthers' | 'auto' | 'doNotMix';
+
+export type IVideoBufferOptions = {
+  /** iOS only, in seconds */
+  readonly preferredForwardBufferDuration?: number;
+  /** iOS only */
+  readonly waitsToMinimizeStalling?: boolean;
+  /** Android only, in seconds */
+  readonly minBufferForPlayback?: number;
+  /** Android only, in bytes */
+  readonly maxBufferBytes?: number | null;
+  /** Android only */
+  readonly prioritizeTimeOverSizeThreshold?: boolean;
+};
+
+export type IVideoTextTrack = {
+  id?: string;
+  language: string;
+  label: string;
+  name?: string;
+  isDefault?: boolean;
+  autoSelect?: boolean;
+};
+
+export type IVideoSubtitleTrack = IVideoTextTrack;
+
+export type IVideoAudioTrack = IVideoTextTrack;
+
+export type IVideoSize = { width: number; height: number };
+
+export type IVideoRange = 'sdr' | 'hlg' | 'pq';
+
+export type IVideoTrack = {
+  id: string;
+  url: string | null;
+  size: IVideoSize;
+  mimeType: string | null;
+  isSupported: boolean;
+  bitrate: number | null;
+  averageBitrate: number | null;
+  peakBitrate: number | null;
+  frameRate: number | null;
+  videoRange: IVideoRange;
+};
+
+export type IVideoSeekTolerance = {
+  /** iOS only, in seconds */
+  toleranceBefore?: number;
+  /** iOS only, in seconds */
+  toleranceAfter?: number;
+};
+
+export type IVideoScrubbingModeOptions = {
+  /** Android only */
+  scrubbingModeEnabled?: boolean;
+  increaseCodecOperatingRate?: boolean;
+  enableDynamicScheduling?: boolean;
+  useDecodeOnlyFlag?: boolean;
+  allowSkippingMediaCodecFlush?: boolean;
+};
+
+/** Options of the Android player builder, applied before the native constructor runs */
+export type IVideoPlayerBuilderOptions = {
+  /** In seconds */
+  seekBackwardIncrement?: number;
+  /** In seconds */
+  seekForwardIncrement?: number;
+};
+
+export type IVideoThumbnailOptions = {
+  maxWidth?: number;
+  maxHeight?: number;
+};
+
+export type IVideoPlayerEvents = {
+  statusChange(payload: {
+    status: IVideoPlayerStatus;
+    oldStatus?: IVideoPlayerStatus;
+    error?: IVideoPlayerError;
+  }): void;
+  playingChange(payload: { isPlaying: boolean; oldIsPlaying?: boolean }): void;
+  playbackRateChange(payload: {
+    playbackRate: number;
+    oldPlaybackRate?: number;
+  }): void;
+  volumeChange(payload: { volume: number; oldVolume?: number }): void;
+  mutedChange(payload: { muted: boolean; oldMuted?: boolean }): void;
+  playToEnd(): void;
+  timeUpdate(payload: {
+    currentTime: number;
+    currentLiveTimestamp: number | null;
+    currentOffsetFromLive: number | null;
+    bufferedPosition: number;
+  }): void;
+  sourceChange(payload: {
+    source: IVideoSource;
+    oldSource?: IVideoSource;
+  }): void;
+  availableSubtitleTracksChange(payload: {
+    availableSubtitleTracks: IVideoSubtitleTrack[];
+    oldAvailableSubtitleTracks?: IVideoSubtitleTrack[];
+  }): void;
+  subtitleTrackChange(payload: {
+    subtitleTrack: IVideoSubtitleTrack | null;
+    oldSubtitleTrack?: IVideoSubtitleTrack | null;
+  }): void;
+  availableAudioTracksChange(payload: {
+    availableAudioTracks: IVideoAudioTrack[];
+    oldAvailableAudioTracks?: IVideoAudioTrack[];
+  }): void;
+  audioTrackChange(payload: {
+    audioTrack: IVideoAudioTrack | null;
+    oldAudioTrack?: IVideoAudioTrack | null;
+  }): void;
+  videoTrackChange(payload: {
+    videoTrack: IVideoTrack | null;
+    oldVideoTrack?: IVideoTrack | null;
+  }): void;
+  sourceLoad(payload: {
+    videoSource: IVideoSource | null;
+    duration: number;
+    availableVideoTracks: IVideoTrack[];
+    availableSubtitleTracks: IVideoSubtitleTrack[];
+    availableAudioTracks: IVideoAudioTrack[];
+  }): void;
+  isExternalPlaybackActiveChange(payload: {
+    isExternalPlaybackActive: boolean;
+    oldIsExternalPlaybackActive?: boolean;
+  }): void;
+};
+
+/** The native thumbnail, `expo-image` takes it as an image source */
+export declare class VideoThumbnail extends SharedRef<'image'> {
+  width: number;
+  height: number;
+  /** In seconds */
+  requestedTime: number;
+  /** In seconds, iOS only */
+  actualTime: number;
+}
+
+export declare class VideoPlayer extends SharedObject<IVideoPlayerEvents> {
+  readonly playing: boolean;
+  loop: boolean;
+  /** iOS only */
+  allowsExternalPlayback: boolean;
+  audioMixingMode: IVideoAudioMixingMode;
+  muted: boolean;
+  /** In seconds, assigning seeks */
+  currentTime: number;
+  readonly currentLiveTimestamp: number | null;
+  readonly currentOffsetFromLive: number | null;
+  targetOffsetFromLive: number;
+  readonly duration: number;
+  volume: number;
+  preservesPitch: boolean;
+  /** In seconds, `0` turns the `timeUpdate` event off */
+  timeUpdateEventInterval: number;
+  playbackRate: number;
+  keepScreenOnWhilePlaying: boolean;
+  readonly isLive: boolean;
+  readonly status: IVideoPlayerStatus;
+  showNowPlayingNotification: boolean;
+  staysActiveInBackground: boolean;
+  readonly bufferedPosition: number;
+  bufferOptions: IVideoBufferOptions;
+  subtitleTrack: IVideoSubtitleTrack | null;
+  audioTrack: IVideoAudioTrack | null;
+  readonly availableAudioTracks: IVideoAudioTrack[];
+  readonly availableSubtitleTracks: IVideoSubtitleTrack[];
+  readonly videoTrack: IVideoTrack | null;
+  readonly availableVideoTracks: IVideoTrack[];
+  readonly isExternalPlaybackActive: boolean;
+  seekTolerance: IVideoSeekTolerance;
+  scrubbingModeOptions: IVideoScrubbingModeOptions;
+
+  constructor(
+    source: IVideoSource,
+    useSynchronousReplace?: boolean,
+    playerBuilderOptions?: IVideoPlayerBuilderOptions,
+  );
+
+  play(): void;
+  pause(): void;
+  /** On iOS it loads the asset on the main thread, prefer `replaceAsync` */
+  replace(source: IVideoSource, disableWarning?: boolean): void;
+  replaceAsync(source: IVideoSource): Promise<void>;
+  seekBy(seconds: number): void;
+  replay(): void;
+  generateThumbnailsAsync(
+    times: number | number[],
+    options?: IVideoThumbnailOptions,
+  ): Promise<VideoThumbnail[]>;
+}

package/src/core/video-airplay-button.ts

@@ -0,0 +1,45 @@
+import { Platform, requireNativeViewManager } from 'expo-modules-core';
+import { el } from '@symbiote-native/components';
+import type { IDescriptor } from '@symbiote-native/components';
+import { defineExpoNativeView } from '@symbiote-native/engine';
+import { VIDEO_MODULE_NAME, VIDEO_VIEW_NAMES } from './constants';
+import type { IVideoAirPlayButtonProps } from './view-types';
+
+// Регистрация идёт при рендере: побочный эффект барреля теряется в release
+const airPlayButton = defineExpoNativeView(
+  requireNativeViewManager,
+  VIDEO_MODULE_NAME,
+  VIDEO_VIEW_NAMES.airPlayButton,
+);
+
+export const videoAirPlayButtonViewName = airPlayButton.name;
+
+const MIN_SIZE = { minWidth: 30, minHeight: 30 };
+
+// What only the native route picker takes, the plain fallback view must not get it
+const AIRPLAY_ONLY_PROPS = new Set<string>([
+  'tint',
+  'activeTint',
+  'prioritizeVideoDevices',
+  'onBeginPresentingRoutes',
+  'onEndPresentingRoutes',
+] as const satisfies readonly (keyof IVideoAirPlayButtonProps)[]);
+
+function isAirPlayAvailable(): boolean {
+  return (
+    Platform.select({ ios: true, default: false }) &&
+    airPlayButton.ensureRegistered()
+  );
+}
+
+/** A plain view with the minimum size where the system route picker does not exist */
+export function renderVideoAirPlayButton(props: object): IDescriptor {
+  const style = [MIN_SIZE, Reflect.get(props, 'style')];
+  if (isAirPlayAvailable()) {
+    return el(airPlayButton.name(), { ...props, style });
+  }
+  const viewProps = Object.entries(props).filter(
+    ([key]) => !AIRPLAY_ONLY_PROPS.has(key),
+  );
+  return el('view', { ...Object.fromEntries(viewProps), style });
+}