@symbiote-native/video 0.0.0-stage → 0.1.0

package/src/core/video-module.ts

@@ -0,0 +1,25 @@
+import { expoVideo } from './native-module';
+
+/** Whether the device supports Picture in Picture */
+export function isPictureInPictureSupported(): boolean {
+  return expoVideo.isPictureInPictureSupported();
+}
+
+/** Clears the video cache, only while no `VideoPlayer` exists */
+export function clearVideoCacheAsync(): Promise<void> {
+  return expoVideo.clearVideoCacheAsync();
+}
+
+/**
+ * Sets the cache size in bytes, 1GB by default, and the value persists
+ *
+ * Only while no `VideoPlayer` exists, and the real size may be slightly larger
+ */
+export function setVideoCacheSizeAsync(sizeBytes: number): Promise<void> {
+  return expoVideo.setVideoCacheSizeAsync(sizeBytes);
+}
+
+/** The space the video cache occupies, in bytes */
+export function getCurrentVideoCacheSize(): number {
+  return expoVideo.getCurrentVideoCacheSize();
+}

package/src/core/video-player-controller.ts

@@ -0,0 +1,53 @@
+import { createJsonKeyedResourceController } from '@symbiote-native/engine';
+import type { IResourceController } from '@symbiote-native/engine';
+import type {
+  IVideoPlayerBuilderOptions,
+  IVideoSource,
+  VideoPlayer,
+} from './player-types';
+import { createVideoPlayer } from './video-player';
+import { parseSource } from './video-source';
+
+type IVideoPlayerKey = {
+  source: IVideoSource;
+  options?: IVideoPlayerBuilderOptions;
+};
+
+export type IVideoPlayerController = {
+  /** `setup` runs only on a player this call creates */
+  resolve: (
+    source: IVideoSource,
+    options?: IVideoPlayerBuilderOptions,
+    setup?: (player: VideoPlayer) => void,
+  ) => VideoPlayer;
+  flushDispose: IResourceController<
+    IVideoPlayerKey,
+    VideoPlayer
+  >['flushDispose'];
+  dispose: IResourceController<IVideoPlayerKey, VideoPlayer>['dispose'];
+};
+
+/** Twin of `useVideoPlayer`'s releasing shared object, one per mounted owner */
+export function createVideoPlayerController(): IVideoPlayerController {
+  // The latest setup, it is not part of the key and must not recreate the player
+  let latestSetup: ((player: VideoPlayer) => void) | undefined;
+  const controller = createJsonKeyedResourceController<
+    IVideoPlayerKey,
+    VideoPlayer
+  >(
+    key => {
+      const player = createVideoPlayer(key.source, key.options);
+      latestSetup?.(player);
+      return player;
+    },
+    player => player.release(),
+  );
+  return {
+    resolve: (source, options, setup) => {
+      latestSetup = setup;
+      return controller.resolve({ source: parseSource(source), options });
+    },
+    flushDispose: controller.flushDispose,
+    dispose: controller.dispose,
+  };
+}

package/src/core/video-player.ts

@@ -0,0 +1,38 @@
+import { expoVideo } from './native-module';
+import type {
+  IVideoPlayerBuilderOptions,
+  IVideoSource,
+  VideoPlayer,
+} from './player-types';
+import { parseSource } from './video-source';
+
+const SYNC_REPLACE_WARNING =
+  '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.';
+
+// Upstream patches these two methods onto the native prototype at load, a subclass does the same
+class SourceParsingVideoPlayer extends expoVideo.VideoPlayer {
+  override replace(source: IVideoSource, disableWarning = false): void {
+    if (!disableWarning) console.warn(SYNC_REPLACE_WARNING);
+    super.replace(parseSource(source));
+  }
+
+  override replaceAsync(source: IVideoSource): Promise<void> {
+    return super.replaceAsync(parseSource(source));
+  }
+}
+
+/**
+ * Creates a player that does not release automatically, call `release()` when done
+ *
+ * The adapter hooks release it on unmount
+ */
+export function createVideoPlayer(
+  source: IVideoSource,
+  playerBuilderOptions?: IVideoPlayerBuilderOptions,
+): VideoPlayer {
+  return new SourceParsingVideoPlayer(
+    parseSource(source),
+    false,
+    playerBuilderOptions,
+  );
+}

package/src/core/video-source.ts

@@ -0,0 +1,21 @@
+import { resolveAssetSource } from '@symbiote-native/engine';
+import type { IVideoSource } from './player-types';
+
+function uriOfAsset(assetId: number): string {
+  const resolved = resolveAssetSource(assetId);
+  const uri: unknown = Reflect.get(Object(resolved), 'uri');
+  if (typeof uri !== 'string') {
+    throw new Error(`The asset ${assetId} could not be resolved`);
+  }
+  return uri;
+}
+
+/** What the native player takes: a `require`d asset and a string both become a uri */
+export function parseSource(source: IVideoSource): IVideoSource {
+  if (typeof source === 'number') return { uri: uriOfAsset(source) };
+  if (typeof source === 'string') return { uri: source };
+  if (typeof source?.assetId === 'number' && !source.uri) {
+    return { ...source, uri: uriOfAsset(source.assetId) };
+  }
+  return source;
+}

package/src/core/video-thumbnail.ts

@@ -0,0 +1,7 @@
+import { expoVideo } from './native-module';
+import type { VideoThumbnail as IVideoThumbnailInstance } from './player-types';
+
+/** The native class of a thumbnail, `generateThumbnailsAsync` resolves to instances of it */
+export const VideoThumbnail = expoVideo.VideoThumbnail;
+
+export type VideoThumbnail = IVideoThumbnailInstance;

package/src/core/video-view.ts

@@ -0,0 +1,119 @@
+// Ядро `VideoView`: нативный view плеера, функции вызываются через `ViewPrototypes`
+import {
+  Platform,
+  requireNativeModule,
+  requireNativeViewManager,
+} from 'expo-modules-core';
+import { el } from '@symbiote-native/components';
+import type { IDescriptor } from '@symbiote-native/components';
+import {
+  defineExpoNativeViews,
+  defineExpoViewMethods,
+  getNativeTag,
+  isDevBuild,
+} from '@symbiote-native/engine';
+import type {
+  IExpoViewMethodCaller,
+  ISymbioteNode,
+} from '@symbiote-native/engine';
+import { VIDEO_MODULE_NAME, VIDEO_VIEW_NAMES } from './constants';
+import { expoVideo } from './native-module';
+
+type IVideoViewKey = 'video' | 'surface' | 'texture';
+
+const VIEW_NAMES = {
+  video: VIDEO_VIEW_NAMES.video,
+  surface: VIDEO_VIEW_NAMES.surface,
+  texture: VIDEO_VIEW_NAMES.texture,
+} as const satisfies Record<IVideoViewKey, string>;
+
+// Регистрация идёт при рендере: побочный эффект барреля теряется в release
+const views = defineExpoNativeViews(
+  requireNativeViewManager,
+  VIDEO_MODULE_NAME,
+  VIEW_NAMES,
+);
+
+const callers: Record<IVideoViewKey, IExpoViewMethodCaller> = {
+  video: defineExpoViewMethods(
+    requireNativeModule,
+    VIDEO_MODULE_NAME,
+    VIEW_NAMES.video,
+  ),
+  surface: defineExpoViewMethods(
+    requireNativeModule,
+    VIDEO_MODULE_NAME,
+    VIEW_NAMES.surface,
+  ),
+  texture: defineExpoViewMethods(
+    requireNativeModule,
+    VIDEO_MODULE_NAME,
+    VIEW_NAMES.texture,
+  ),
+};
+
+export type IVideoViewHandle = {
+  /** Always shows the native controls */
+  enterFullscreen(): Promise<void>;
+  /** On Android it works only from a native listener, the JS runtime sleeps in fullscreen */
+  exitFullscreen(): Promise<void>;
+  /** Needs `supportsPictureInPicture` of the app setup, one player at a time */
+  startPictureInPicture(): Promise<void>;
+  stopPictureInPicture(): Promise<void>;
+};
+
+export type IVideoView = {
+  handle: IVideoViewHandle;
+  /** `null` means the view cannot register and the caller renders nothing */
+  render(props: object): IDescriptor | null;
+};
+
+function viewKeyFor(surfaceType: unknown): IVideoViewKey {
+  return Platform.select<IVideoViewKey>({
+    android: surfaceType === 'textureView' ? 'texture' : 'surface',
+    default: 'video',
+  });
+}
+
+// The native view takes the id of the shared object, not the player itself
+function playerIdOf(player: unknown): number | null {
+  if (player instanceof expoVideo.VideoPlayer) {
+    const id: unknown = Reflect.get(player, '__expo_shared_object_id__');
+    return typeof id === 'number' ? id : null;
+  }
+  return typeof player === 'number' ? player : null;
+}
+
+/** One per mounted view, `getNode` answers the host node once it exists */
+export function createVideoView(
+  getNode: () => ISymbioteNode | null | undefined,
+): IVideoView {
+  let renderedKey = viewKeyFor(undefined);
+
+  async function call(method: string): Promise<void> {
+    const node = getNode();
+    if (!node || getNativeTag(node) === undefined) return;
+    await callers[renderedKey]<Promise<void>>(node, method, []);
+  }
+
+  return {
+    handle: {
+      enterFullscreen: () => call('enterFullscreen'),
+      exitFullscreen: () => call('exitFullscreen'),
+      startPictureInPicture: () => call('startPictureInPicture'),
+      stopPictureInPicture: () => call('stopPictureInPicture'),
+    },
+    render: props => {
+      renderedKey = viewKeyFor(Reflect.get(props, 'surfaceType'));
+      const view = views[renderedKey];
+      if (!view.ensureRegistered()) {
+        if (isDevBuild()) console.warn("'VideoView' is not available.");
+        return null;
+      }
+      return el(view.name(), {
+        ...Object.fromEntries(Object.entries(props)),
+        player: playerIdOf(Reflect.get(props, 'player')),
+      });
+    },
+  };
+}

package/src/core/view-types.ts

@@ -0,0 +1,114 @@
+import type {
+  IAccessibilityProps,
+  IAriaProps,
+  IResponderProps,
+} from '@symbiote-native/components';
+import type {
+  IColorValue,
+  IStyleProp,
+  ISymbioteEvent,
+  IViewStyle,
+} from '@symbiote-native/engine';
+import type { VideoPlayer } from './player-types';
+
+/** `fill` stretches the video, `cover` crops it, `contain` letterboxes it */
+export type IVideoContentFit = 'contain' | 'cover' | 'fill';
+
+/** Android only: `textureView` for overlapping views, `surfaceView` otherwise */
+export type IVideoSurfaceType = 'textureView' | 'surfaceView';
+
+/** Android only, which buttons the native controls show */
+export type IVideoButtonOptions = {
+  /** `false` by default */
+  showNext?: boolean;
+  /** `false` by default */
+  showPrevious?: boolean;
+  /** `true` by default */
+  showSeekForward?: boolean;
+  /** `true` by default */
+  showSeekBackward?: boolean;
+  /** `true` always, `false` never, `null` only when subtitles exist */
+  showSubtitles?: boolean | null;
+  /** `true` by default */
+  showSettings?: boolean;
+  /** `true` by default */
+  showPlayPause?: boolean;
+  /** `true` by default, fullscreen shows it anyway */
+  showBottomBar?: boolean;
+};
+
+export type IVideoFullscreenOrientation =
+  | 'default'
+  | 'portrait'
+  | 'portraitUp'
+  | 'portraitDown'
+  | 'landscape'
+  | 'landscapeLeft'
+  | 'landscapeRight';
+
+export type IVideoKeepFullscreenOnPiPStop = 'always' | 'autoEnter' | 'never';
+
+export type IVideoFullscreenOptions = {
+  /** Shows the fullscreen button, `true` by default */
+  enable: boolean;
+  orientation?: IVideoFullscreenOrientation;
+  /** Leaves fullscreen when the device turns away from `orientation` */
+  autoExitOnRotate?: boolean;
+  /** iOS only, `autoEnter` by default */
+  keepFullscreenOnPiPStop?: IVideoKeepFullscreenOnPiPStop;
+};
+
+export type IVideoViewProps = IAccessibilityProps &
+  IAriaProps &
+  IResponderProps & {
+    /** From `useVideoPlayer` */
+    player?: VideoPlayer | null;
+    /** Always on in fullscreen, `true` by default */
+    nativeControls?: boolean;
+    /** `contain` by default */
+    contentFit?: IVideoContentFit;
+    fullscreenOptions?: IVideoFullscreenOptions;
+    /** iOS only, `true` by default */
+    showsTimecodes?: boolean;
+    /** Forbids skipping, `false` by default */
+    requiresLinearPlayback?: boolean;
+    buttonOptions?: IVideoButtonOptions;
+    /** Android only, must not change at runtime */
+    surfaceType?: IVideoSurfaceType;
+    /** iOS only, `{ dx: 0, dy: 0 }` by default */
+    contentPosition?: { dx?: number; dy?: number };
+    onPictureInPictureStart?: () => void;
+    onPictureInPictureStop?: () => void;
+    /** Needs `supportsPictureInPicture` of the app setup */
+    allowsPictureInPicture?: boolean;
+    /** Android 12+ and iOS, `false` by default */
+    startsPictureInPictureAutomatically?: boolean;
+    /** iOS 16+, `true` by default */
+    allowsVideoFrameAnalysis?: boolean;
+    onFullscreenEnter?: () => void;
+    onFullscreenExit?: () => void;
+    /** The first frame is rendered, also when the video track changes */
+    onFirstFrameRender?: () => void;
+    /** Android only, `false` by default */
+    useExoShutter?: boolean;
+    style?: IStyleProp<IViewStyle>;
+    testID?: string;
+    nativeID?: string;
+    onLayout?: (event: ISymbioteEvent) => void;
+  };
+
+export type IVideoAirPlayButtonProps = IAccessibilityProps &
+  IAriaProps & {
+    /** The icon colour while AirPlay is not active */
+    tint?: IColorValue;
+    /** The icon colour while AirPlay is active */
+    activeTint?: IColorValue;
+    /** Lists the video outputs first, `true` by default */
+    prioritizeVideoDevices?: boolean;
+    onBeginPresentingRoutes?: () => void;
+    onEndPresentingRoutes?: () => void;
+    style?: IStyleProp<IViewStyle>;
+    testID?: string;
+    nativeID?: string;
+    onLayout?: (event: ISymbioteEvent) => void;
+  };

package/src/react/index.ts

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

package/src/react/use-video-player.ts

@@ -0,0 +1,22 @@
+import { createResourceHook } from '@symbiote-native/react';
+import { createVideoPlayerController } from '../core/video-player-controller';
+import type {
+  IVideoPlayerBuilderOptions,
+  IVideoSource,
+  VideoPlayer,
+} from '../core';
+
+const usePlayerResource = createResourceHook(createVideoPlayerController);
+
+/**
+ * Creates a player that is released when the component unmounts
+ *
+ * `setup` runs once on each new player, a changed source or options make a new one
+ */
+export function useVideoPlayer(
+  source: IVideoSource,
+  setup?: (player: VideoPlayer) => void,
+  playerBuilderOptions?: IVideoPlayerBuilderOptions,
+): VideoPlayer {
+  return usePlayerResource(source, playerBuilderOptions, setup);
+}

package/src/react/video-view.ts

@@ -0,0 +1,35 @@
+import type { ReactElement, Ref } from 'react';
+import {
+  descriptorToReact,
+  useNativeViewController,
+} from '@symbiote-native/react';
+import { createVideoView, renderVideoAirPlayButton } from '../core';
+import type {
+  IVideoAirPlayButtonProps,
+  IVideoViewHandle,
+  IVideoViewProps,
+} from '../core';
+
+export type IVideoViewReactProps = IVideoViewProps & {
+  ref?: Ref<IVideoViewHandle>;
+  className?: string;
+};
+
+export type IVideoAirPlayButtonReactProps = IVideoAirPlayButtonProps & {
+  className?: string;
+};
+
+/** React twin of `expo-video`'s `VideoView` */
+export function VideoView({
+  ref,
+  ...props
+}: IVideoViewReactProps): ReactElement | null {
+  return useNativeViewController(ref, createVideoView, props);
+}
+
+/** React twin of `expo-video`'s `VideoAirPlayButton`, a plain view off iOS */
+export function VideoAirPlayButton(
+  props: IVideoAirPlayButtonReactProps,
+): ReactElement {
+  return descriptorToReact(renderVideoAirPlayButton(props));
+}

package/src/solid/index.ts

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

package/src/solid/use-video-player.ts

@@ -0,0 +1,24 @@
+import type { Accessor } from 'solid-js';
+import { createResourceHook } from '@symbiote-native/solid';
+import { createVideoPlayerController } from '../core/video-player-controller';
+import type {
+  IVideoPlayerBuilderOptions,
+  IVideoSource,
+  VideoPlayer,
+} from '../core';
+
+const usePlayerResource = createResourceHook(createVideoPlayerController);
+
+/**
+ * Solid twin of `expo-video`'s `useVideoPlayer`, released when the owner is disposed
+ *
+ * `setup` runs once on each new player, a changed source or options make a new one
+ */
+export function useVideoPlayer(
+  source: Accessor<IVideoSource>,
+  setup?: (player: VideoPlayer) => void,
+  playerBuilderOptions: Accessor<IVideoPlayerBuilderOptions | undefined> = () =>
+    undefined,
+): Accessor<VideoPlayer> {
+  return usePlayerResource(() => [source(), playerBuilderOptions(), setup]);
+}

package/src/solid/video-view.ts

@@ -0,0 +1,22 @@
+import {
+  defineNativeViewComponent,
+  defineOptionalDescriptorComponent,
+} from '@symbiote-native/solid';
+import { createVideoView, renderVideoAirPlayButton } from '../core';
+import type {
+  IVideoAirPlayButtonProps,
+  IVideoViewHandle,
+  IVideoViewProps,
+} from '../core';
+
+/** Solid twin of `expo-video`'s `VideoView`, `ref` gets the handle of the view */
+export const VideoView = defineNativeViewComponent<
+  IVideoViewHandle,
+  IVideoViewProps
+>(createVideoView);
+
+/** Solid twin of `expo-video`'s `VideoAirPlayButton`, a plain view off iOS */
+export const VideoAirPlayButton =
+  defineOptionalDescriptorComponent<IVideoAirPlayButtonProps>(
+    renderVideoAirPlayButton,
+  );

package/src/svelte/index.ts

@@ -0,0 +1,7 @@
+// @symbiote-native/video/svelte: плеер, view, миниатюры, кэш и кнопка AirPlay на общем ядре
+
+export { default as VideoView } from './video-view.svelte';
+export { default as VideoAirPlayButton } from './video-airplay-button.svelte';
+export { useVideoPlayer } from './use-video-player.svelte';
+export type { IUseVideoPlayerResult } from './use-video-player.svelte';
+export * from '../core';

package/src/svelte/svelte-ambient.d.ts

@@ -0,0 +1,3 @@
+// Pulls in svelte's ambient globals ($state/$effect/...) for this package's tsc program
+// This package has no value import from 'svelte', so a triple-slash reference does it explicitly
+/// <reference types="svelte" />

package/src/svelte/svelte-compile.test-helper.ts

@@ -0,0 +1,6 @@
+// Re-exports the existing harness instead of another copy
+export {
+  createSvelteHarness,
+  loadComponent,
+  type ISvelteHarness,
+} from '../../../sqlite/src/svelte/svelte-compile.test-helper';

package/src/svelte/use-video-player.svelte.ts

@@ -0,0 +1,31 @@
+import { createResourceHook } from '@symbiote-native/svelte/runes/create-resource-hook';
+import { createVideoPlayerController } from '../core/video-player-controller';
+import type {
+  IVideoPlayerBuilderOptions,
+  IVideoSource,
+  VideoPlayer,
+} from '../core';
+
+export type IUseVideoPlayerResult = {
+  readonly current: VideoPlayer;
+};
+
+const usePlayerResource = createResourceHook(createVideoPlayerController);
+
+/**
+ * Svelte twin of `expo-video`'s `useVideoPlayer`, boxed getter shape of the other resource hooks
+ *
+ * `setup` runs once on each new player, a changed source or options make a new one
+ */
+export function useVideoPlayer(
+  getSource: () => IVideoSource,
+  setup?: (player: VideoPlayer) => void,
+  getPlayerBuilderOptions: () => IVideoPlayerBuilderOptions | undefined = () =>
+    undefined,
+): IUseVideoPlayerResult {
+  return usePlayerResource(() => [
+    getSource(),
+    getPlayerBuilderOptions(),
+    setup,
+  ]);
+}

package/src/svelte/video-airplay-button.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  // The native view name is mixed-case, which a literal tag would parse as a component reference,
+  // so the tag is dynamic
+  import { hostProps } from '@symbiote-native/svelte/native-view-bridge';
+  import { renderVideoAirPlayButton } from '../core';
+  import type { IVideoAirPlayButtonProps } from '../core';
+
+  const props: IVideoAirPlayButtonProps = $props();
+  const descriptor = $derived(renderVideoAirPlayButton({ ...props }));
+</script>
+
+<svelte:element this={descriptor.type} {@attach hostProps(descriptor.props)} />

package/src/svelte/video-view.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  // The native view name is mixed-case, which a literal tag would parse as a component reference,
+  // so the tag is dynamic
+  import { hostProps } from '@symbiote-native/svelte/native-view-bridge';
+  import { useNativeViewController } from '@symbiote-native/svelte/runes/use-native-view-controller';
+  import { createVideoView } from '../core';
+  import type { IVideoViewProps } from '../core';
+
+  const props: IVideoViewProps = $props();
+  const view = useNativeViewController(createVideoView, () => ({ ...props }));
+
+  // The functions of the view are instance members, `bind:this` reaches them
+  export const enterFullscreen = view.handle.enterFullscreen;
+  export const exitFullscreen = view.handle.exitFullscreen;
+  export const startPictureInPicture = view.handle.startPictureInPicture;
+  export const stopPictureInPicture = view.handle.stopPictureInPicture;
+</script>
+
+{#if view.descriptor}
+  <svelte:element
+    this={view.descriptor.type}
+    {@attach view.attachHost}
+    {@attach hostProps(view.descriptor.props)}
+  />
+{/if}

package/src/vue/index.ts

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

package/src/vue/use-video-player.ts

@@ -0,0 +1,33 @@
+import {
+  toValue,
+  type ComputedRef,
+  type MaybeRefOrGetter,
+} from '@vue/runtime-core';
+import { createResourceHook } from '@symbiote-native/vue';
+import { createVideoPlayerController } from '../core/video-player-controller';
+import type {
+  IVideoPlayerBuilderOptions,
+  IVideoSource,
+  VideoPlayer,
+} from '../core';
+
+const usePlayerResource = createResourceHook(createVideoPlayerController);
+
+/**
+ * Vue twin of `expo-video`'s `useVideoPlayer`, released when the owner unmounts
+ *
+ * `setup` runs once on each new player, a changed source or options make a new one
+ */
+export function useVideoPlayer(
+  source: MaybeRefOrGetter<IVideoSource>,
+  setup?: (player: VideoPlayer) => void,
+  playerBuilderOptions?: MaybeRefOrGetter<
+    IVideoPlayerBuilderOptions | undefined
+  >,
+): ComputedRef<VideoPlayer> {
+  return usePlayerResource(() => [
+    toValue(source),
+    toValue(playerBuilderOptions),
+    setup,
+  ]);
+}

package/src/vue/video-view.ts

@@ -0,0 +1,24 @@
+import { defineComponent, type VNode } from '@vue/runtime-core';
+import {
+  defineNativeViewComponent,
+  descriptorToVue,
+  normalizeVueAttrs,
+} from '@symbiote-native/vue';
+import { createVideoView, renderVideoAirPlayButton } from '../core';
+
+/** Vue twin of `expo-video`'s `VideoView` */
+export const VideoView = defineNativeViewComponent(
+  'VideoView',
+  createVideoView,
+);
+
+/** Vue twin of `expo-video`'s `VideoAirPlayButton`, a plain view off iOS */
+export const VideoAirPlayButton = defineComponent({
+  name: 'VideoAirPlayButton',
+  // Все атрибуты это пропсы нативного view, на обёртку ничего не должно просочиться
+  inheritAttrs: false,
+  setup(_props, { attrs }) {
+    return (): VNode =>
+      descriptorToVue(renderVideoAirPlayButton(normalizeVueAttrs(attrs)));
+  },
+});