@symbiote-native/video 0.0.0-stage → 0.0.0

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,33 @@
+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,27 @@
+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,31 @@
+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,21 @@
+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)));
+  },
+});