@symbiote-native/video 0.0.0 → 0.1.0

package/README.md

@@ -4,17 +4,79 @@
 [SymbioteNative](../../README.md) adapter: React, Vue, Svelte, Solid and Angular. The player, the
 view, thumbnails, the video cache and the AirPlay button.
 
+Built the same way as [`@symbiote-native/clipboard`](../clipboard)'s `ClipboardPasteButton`, an
+`expo-modules-core` native view reached through `requireNativeViewManager` (see the
+`symbiote-expo-native-module` project skill: why `expo-modules-core` is depended on directly and never
+the `expo` meta-package, why the upstream JS is hand-ported into `core/`, and how autolinking finds the
+native module). One render function in `core/` returns a descriptor and every adapter only turns it into
+its own element.
+
 ## Install
 
+**New app:**
+
+```bash
+npx @symbiote-native/cli new my-app --video
+```
+
+**Existing SymbioteNative app:**
+
+```bash
+npx @symbiote-native/cli add --video
+```
+
+Either way: installs `@symbiote-native/video` and wires the native autolinking automatically,
+see [`@symbiote-native/cli`](../cli).
+
+<details>
+<summary>Manual install (no CLI - installing and wiring native autolinking by hand)</summary>
+
 ```bash
-npx @symbiote-native/cli new my-app --video   # new app
-npx @symbiote-native/cli add --video          # existing app
+npm install @symbiote-native/video
+```
+
+Depends on `expo-video` and `expo-modules-core` directly (regular dependencies, pinned to exact
+versions, since this package's `core/` is hand-ported against one specific native API shape).
+Never install `expo-video` yourself, and never add the `expo` package to this project: it bundles
+its own Metro/Babel pipeline that conflicts with this project's own.
+
+### Required one-time step: native autolinking wiring
+
+`expo-video`'s native code is discovered by `expo-modules-autolinking`, not by RN's own
+`react-native.config.cjs` mechanism. Wire it into the native host app **once**, it covers this package
+and every other `expo-modules-core` package with zero further changes. The steps and the
+mechanics behind them are in the `symbiote-expo-native-module` skill and in
+[`@symbiote-native/network`](../network)'s README; the reference app is `examples/expo-react`.
+
+### Background playback and Picture in Picture
+
+The package writes nothing by default. For iOS add `audio` to `UIBackgroundModes` in `Info.plist`.
+For Android choose the "Background video playback" bundle (the foreground service and its permissions),
+and give the main activity `android:supportsPictureInPicture="true"` for Picture in Picture.
+
+</details>
+
+## Shape
+
+```
+src/core/                video-player.ts and video-player-controller.ts (the player and its lifecycle over
+                         the engine's createJsonKeyedResourceController), video-view.ts
+                         (createVideoView(getNode)), video-airplay-button.ts, video-source.ts,
+                         video-module.ts (cache and Picture in Picture functions), video-thumbnail.ts.
+src/react/               @symbiote-native/video/react   - VideoView, useVideoPlayer
+src/vue/                 @symbiote-native/video/vue     - VideoView, useVideoPlayer (a computed ref)
+src/svelte/              @symbiote-native/video/svelte  - VideoView, useVideoPlayer ({ current })
+src/solid/               @symbiote-native/video/solid   - VideoView, useVideoPlayer (an accessor)
+src/angular/             @symbiote-native/video/angular - VideoView, injectVideoPlayer (a signal)
 ```
 
-Manual: `npm install @symbiote-native/video`, then wire `expo-modules-autolinking` once per app.
-Never install `expo-video` or the `expo` meta-package yourself.
+`VideoView` is one component per platform (`VideoView` on iOS, `SurfaceVideoView` or `TextureVideoView` on
+Android), and the view functions follow the surface the last render chose. `VideoAirPlayButton` is a plain
+view off iOS. `useEvent` and `useEventListener` come from each adapter, not from this package.
 
-## Usage
+## Use it
+
+### React
 
 ```tsx
 import { VideoView, useVideoPlayer } from '@symbiote-native/video/react';
@@ -27,42 +89,153 @@ const player = useVideoPlayer('https://example.com/video.mp4', player => {
 <VideoView player={player} style={{ width: 320, height: 180 }} nativeControls />;
 ```
 
-`createVideoPlayer(source, builderOptions?)` makes a player that is not released by itself, call
-`player.release()`. The player is the native `VideoPlayer` object: its properties, `play()`,
-`pause()`, `replaceAsync()`, `generateThumbnailsAsync()` and `addListener(event, listener)` are
-the same on every adapter. The player is created by the hook of the framework, which releases it
-when the owner goes away:
+### Vue
+
+```vue
+<script setup lang="ts">
+import { VideoView, useVideoPlayer } from '@symbiote-native/video/vue';
+
+const player = useVideoPlayer(
+  () => 'https://example.com/video.mp4',
+  instance => {
+    instance.loop = true;
+    instance.play();
+  },
+);
+</script>
+
+<template>
+  <VideoView :player="player" :style="{ width: 320, height: 180 }" :nativeControls="true" />
+</template>
+```
+
+### Angular
+
+```ts
+import { Component } from '@angular/core';
+import { VideoView, injectVideoPlayer } from '@symbiote-native/video/angular';
+
+@Component({
+  standalone: true,
+  imports: [VideoView],
+  template: `
+    <VideoView [player]="player()" [style]="{ width: 320, height: 180 }" [nativeControls]="true" />
+  `,
+})
+export class Clip {
+  readonly player = injectVideoPlayer(
+    () => 'https://example.com/video.mp4',
+    instance => {
+      instance.loop = true;
+      instance.play();
+    },
+  );
+}
+```
 
-| Adapter | Player                                                                  |
-| ------- | ----------------------------------------------------------------------- |
-| React   | `useVideoPlayer(source, setup?, options?)`                              |
-| Vue     | `useVideoPlayer(source, setup?, options?)`, returns a computed ref      |
-| Solid   | `useVideoPlayer(() => source, setup?, () => options)`, returns an accessor |
-| Svelte  | `useVideoPlayer(() => source, setup?, () => options).current`           |
-| Angular | `injectVideoPlayer(() => source, setup?, () => options)`, a signal      |
+### Svelte
 
-`setup` runs once on each new player, and a changed source or options make a new one.
+```svelte
+<script lang="ts">
+  import { VideoView, useVideoPlayer } from '@symbiote-native/video/svelte';
 
-The functions of the view (`enterFullscreen`, `exitFullscreen`, `startPictureInPicture`,
-`stopPictureInPicture`) are reached by a `ref` in React and Solid (`ref={fn}`), the exposed members
-of a template ref in Vue, `bind:this` in Svelte and `@ViewChild` in Angular.
+  const player = useVideoPlayer(
+    () => 'https://example.com/video.mp4',
+    instance => {
+      instance.loop = true;
+      instance.play();
+    },
+  );
+</script>
 
-Module functions: `isPictureInPictureSupported()`, `setVideoCacheSizeAsync(bytes)`,
-`clearVideoCacheAsync()`, `getCurrentVideoCacheSize()`. `VideoThumbnail` is the native class of the
-thumbnails. `VideoAirPlayButton` is the iOS route picker and a plain view elsewhere.
+<VideoView player={player.current} style={{ width: 320, height: 180 }} nativeControls />
+```
 
-## App setup
+### Solid
 
-Nothing is written by default. Background playback and Picture in Picture need what upstream's
-config plugin adds:
+```tsx
+import { VideoView, useVideoPlayer } from '@symbiote-native/video/solid';
 
-- iOS: add `audio` to `UIBackgroundModes` in `Info.plist`.
-- Android: pick the "Background video playback" bundle for the foreground service and its
-  permissions. Picture in Picture needs `android:supportsPictureInPicture="true"` on the main
-  activity.
+const player = useVideoPlayer(
+  () => 'https://example.com/video.mp4',
+  instance => {
+    instance.loop = true;
+    instance.play();
+  },
+);
+
+<VideoView player={player()} style={{ width: 320, height: 180 }} nativeControls />;
+```
 
-## Not ported
+## API
+
+```ts
+useVideoPlayer(source, setup?, options?): VideoPlayer     // released on unmount, per adapter see Shape
+createVideoPlayer(source, options?): VideoPlayer          // you call player.release()
+
+<VideoView player nativeControls? contentFit? surfaceType?={'surfaceView' | 'textureView'}   // Android
+           allowsPictureInPicture? ... />
+<VideoAirPlayButton ... />                                // plain view off iOS
+
+isPictureInPictureSupported(): boolean
+setVideoCacheSizeAsync(sizeBytes): Promise<void>   clearVideoCacheAsync(): Promise<void>
+getCurrentVideoCacheSize(): number                // all three work only while no player exists
+```
 
-The web build. `useEvent` / `useEventListener` ship with the `expo` package upstream, here the
-adapters export them for any emitter (`useEvent(player, 'statusChange')`, `injectEvent` in
-Angular, `@symbiote-native/svelte/runes/use-event` in Svelte). Upstream ships no tests, the suites here are written against its behavior.
+The player is the native `VideoPlayer` shared object, `{ uri, useCaching }` sources enable the cache.
+Ported from upstream's `VideoPlayer.ts`, `VideoView.tsx`, `VideoAirPlayButton.tsx` and `index.ts`.
+
+## Notes
+
+- **One player, one `VideoView` on Android.** Mounting several views with the same player does not
+  work there, a platform limitation. iOS accepts it. Create a player per visible view, or move the
+  player to the new view only after the old one is gone.
+- **`useVideoPlayer` releases the player for you.** It disposes of it when the component unmounts,
+  and a changed source or options make a new one. A player from `createVideoPlayer` is yours:
+  call `release()` when you are done, or it leaks.
+- **Android renders on a surface by default.** `surfaceType="surfaceView"` is the efficient choice,
+  `surfaceType="textureView"` composes like an ordinary view and costs more performance.
+- **Caching is per source.** Set `useCaching: true` on the source object. The cache is persistent
+  and trimmed least-recently-used, 1 GB by default, and works offline for what it holds.
+  iOS cannot cache HLS, and DRM-protected video is not cached on either platform.
+- **The cache functions work only while no player exists**, so call `setVideoCacheSizeAsync` and
+  `clearVideoCacheAsync` before you create one.
+- **`useEvent` and `useEventListener` come from the adapter**, not from this package. See the aside
+  above.
+- **Not ported.** The web build. `useEvent` / `useEventListener` ship with the `expo` package upstream, here the adapters export them for any emitter (`useEvent(player, 'statusChange')`, `injectEvent` in Angular, `@symbiote-native/svelte/runes/use-event` in Svelte). Upstream ships no tests, the suites here are written against its behavior.
+
+## Common questions
+
+- **Black screen on Android.** One player in several `VideoView`s does not work there. Keep one view
+  per player and unmount the old view first.
+- **Overlap or out of bounds on Android.** An ExoPlayer bug with `contentFit="cover"`. Set
+  `surfaceType="textureView"`.
+- **`zIndex` ignored on Android.** The default surface draws above its surroundings. Try
+  `surfaceType="textureView"`.
+- **Touch handlers do not fire on Android.** Put the handler on a wrapping view.
+- **Not released.** `useVideoPlayer` releases on unmount, a player from `createVideoPlayer` needs
+  `player.release()`.
+- **Fullscreen will not rotate on Android.** It follows the app's orientation lock, unlock it with
+  `@symbiote-native/screen-orientation`.
+- **Caching.** `{ uri, useCaching: true }`. 1 GB by default, not for HLS on iOS or DRM. The cache
+  functions work only while no player exists.
+
+Sources: [Expo docs: Video](https://docs.expo.dev/versions/latest/sdk/video/),
+[expo/expo#35012](https://github.com/expo/expo/issues/35012),
+[expo/expo#31248](https://github.com/expo/expo/issues/31248),
+[expo/expo#31722](https://github.com/expo/expo/issues/31722),
+[expo/expo#30275](https://github.com/expo/expo/issues/30275),
+[expo/expo#34630](https://github.com/expo/expo/issues/34630),
+[expo/expo#33804](https://github.com/expo/expo/issues/33804),
+[expo/expo#9899](https://github.com/expo/expo/issues/9899).
+
+## Test it
+
+No device is needed for the logic. The core tests (`src/core/*.test.ts`) replace `expo-modules-core`
+(`requireNativeViewManager`, `Platform`) and assert the descriptor a render function returns. The
+adapter tests (`src/{react,vue,solid,angular}/**/*.test.*`, `vitest`) render the real component over the
+recording Fabric with an injected view config and assert the committed payload, and Svelte's
+`*.smoke.test.ts` compile the `.svelte` files and mount them. Painting itself is verified on a device in
+the six `examples/expo-*` canary apps (`examples/expo-react`, `examples/expo-vue-sfc`,
+`examples/expo-vue-tsx`, `examples/expo-svelte`, `examples/expo-solid`, `examples/expo-angular`), see the
+parent [README](../../README.md).

package/build/svelte/use-video-player.svelte.js

@@ -7,5 +7,9 @@ const usePlayerResource = createResourceHook(createVideoPlayerController);
  * `setup` runs once on each new player, a changed source or options make a new one
  */
 export function useVideoPlayer(getSource, setup, getPlayerBuilderOptions = () => undefined) {
-    return usePlayerResource(() => [getSource(), getPlayerBuilderOptions(), setup]);
+    return usePlayerResource(() => [
+        getSource(),
+        getPlayerBuilderOptions(),
+        setup,
+    ]);
 }

package/build-ngc/angular/video-airplay-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/angular/video-airplay-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;;AAGtD,oFAAoF;AACpF,MAAM,cAAc,GAAG;IACrB,MAAM;IACN,YAAY;IACZ,wBAAwB;IACxB,yBAAyB;IACzB,uBAAuB;CACf,CAAC;AAQX,gFAAgF;AAWhF,MAAM,OAAO,kBAAmB,SAAQ,cAAc;IACxB,SAAS,GAAG,cAAc,CAAC;IAEpC,UAAU,CAAC,KAAa;QACzC,OAAO,wBAAwB,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;uGALU,kBAAkB;2FAAlB,kBAAkB,+SAJnB;;IAER,4DALQ,gBAAgB;;2FAOf,kBAAkB;kBAV9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,MAAM,EAAE,CAAC,GAAG,cAAc,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;IAER;iBACH"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/angular/video-airplay-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;;AAGtD,oFAAoF;AACpF,MAAM,cAAc,GAAG;IACrB,MAAM;IACN,YAAY;IACZ,wBAAwB;IACxB,yBAAyB;IACzB,uBAAuB;CACf,CAAC;AAOX,gFAAgF;AAWhF,MAAM,OAAO,kBAAmB,SAAQ,cAAc;IACxB,SAAS,GAAG,cAAc,CAAC;IAEpC,UAAU,CAAC,KAAa;QACzC,OAAO,wBAAwB,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;uGALU,kBAAkB;2FAAlB,kBAAkB,+SAJnB;;IAER,4DALQ,gBAAgB;;2FAOf,kBAAkB;kBAV9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,MAAM,EAAE,CAAC,GAAG,cAAc,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;IAER;iBACH"}

package/build-ngc/angular/video-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/angular/video-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;;AAG7C,oFAAoF;AACpF,MAAM,iBAAiB,GAAG;IACxB,QAAQ;IACR,gBAAgB;IAChB,YAAY;IACZ,mBAAmB;IACnB,gBAAgB;IAChB,wBAAwB;IACxB,eAAe;IACf,aAAa;IACb,iBAAiB;IACjB,yBAAyB;IACzB,wBAAwB;IACxB,wBAAwB;IACxB,qCAAqC;IACrC,0BAA0B;IAC1B,mBAAmB;IACnB,kBAAkB;IAClB,oBAAoB;IACpB,eAAe;CACP,CAAC;AAMX,iDAAiD;AAWjD,MAAM,OAAO,SAAU,SAAQ,cAAc;IAC1B,IAAI,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAE/D,sFAAsF;IAC7E,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC;IACnD,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;IACjD,qBAAqB,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC;IAC/D,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC;IAE1C,SAAS,GAAG,iBAAiB,CAAC;IAEvC,UAAU,CAAC,KAAa;QACzC,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;uGAbU,SAAS;2FAAT,SAAS,o0BAJV;;IAER,4DALQ,gBAAgB;;2FAOf,SAAS;kBAVrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,MAAM,EAAE,CAAC,GAAG,iBAAiB,CAAC;oBAC9B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;IAER;iBACH"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/angular/video-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;;AAG7C,oFAAoF;AACpF,MAAM,iBAAiB,GAAG;IACxB,QAAQ;IACR,gBAAgB;IAChB,YAAY;IACZ,mBAAmB;IACnB,gBAAgB;IAChB,wBAAwB;IACxB,eAAe;IACf,aAAa;IACb,iBAAiB;IACjB,yBAAyB;IACzB,wBAAwB;IACxB,wBAAwB;IACxB,qCAAqC;IACrC,0BAA0B;IAC1B,mBAAmB;IACnB,kBAAkB;IAClB,oBAAoB;IACpB,eAAe;CACP,CAAC;AAOX,iDAAiD;AAWjD,MAAM,OAAO,SAAU,SAAQ,cAAc;IAC1B,IAAI,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAE/D,sFAAsF;IAC7E,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC;IACnD,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;IACjD,qBAAqB,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC;IAC/D,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC;IAE1C,SAAS,GAAG,iBAAiB,CAAC;IAEvC,UAAU,CAAC,KAAa;QACzC,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;uGAbU,SAAS;2FAAT,SAAS,o0BAJV;;IAER,4DALQ,gBAAgB;;2FAOf,SAAS;kBAVrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,MAAM,EAAE,CAAC,GAAG,iBAAiB,CAAC;oBAC9B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;IAER;iBACH"}

package/build-ngc/core/native-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-module.js","sourceRoot":"","sources":["../../src/core/native-module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAYhD,MAAM,CAAC,MAAM,SAAS,GAAG,mBAAmB,CAC1C,iBAAiB,CAClB,CAAC"}
+{"version":3,"file":"native-module.js","sourceRoot":"","sources":["../../src/core/native-module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAYhD,MAAM,CAAC,MAAM,SAAS,GACpB,mBAAmB,CAAqB,iBAAiB,CAAC,CAAC"}

package/build-ngc/core/video-player-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-player-controller.js","sourceRoot":"","sources":["../../src/core/video-player-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iCAAiC,EAAE,MAAM,yBAAyB,CAAC;AAO5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAkB7C,gFAAgF;AAChF,MAAM,UAAU,2BAA2B;IACzC,+EAA+E;IAC/E,IAAI,WAAwD,CAAC;IAC7D,MAAM,UAAU,GAAG,iCAAiC,CAIlD,GAAG,CAAC,EAAE;QACJ,MAAM,MAAM,GAAG,iBAAiB,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;QAC1D,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC;QACtB,OAAO,MAAM,CAAC;IAChB,CAAC,EACD,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAC3B,CAAC;IACF,OAAO;QACL,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;YAClC,WAAW,GAAG,KAAK,CAAC;YACpB,OAAO,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;QACtE,CAAC;QACD,YAAY,EAAE,UAAU,CAAC,YAAY;QACrC,OAAO,EAAE,UAAU,CAAC,OAAO;KAC5B,CAAC;AACJ,CAAC"}
+{"version":3,"file":"video-player-controller.js","sourceRoot":"","sources":["../../src/core/video-player-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iCAAiC,EAAE,MAAM,yBAAyB,CAAC;AAO5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAqB7C,gFAAgF;AAChF,MAAM,UAAU,2BAA2B;IACzC,+EAA+E;IAC/E,IAAI,WAAwD,CAAC;IAC7D,MAAM,UAAU,GAAG,iCAAiC,CAIlD,GAAG,CAAC,EAAE;QACJ,MAAM,MAAM,GAAG,iBAAiB,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;QAC1D,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC;QACtB,OAAO,MAAM,CAAC;IAChB,CAAC,EACD,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAC3B,CAAC;IACF,OAAO;QACL,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;YAClC,WAAW,GAAG,KAAK,CAAC;YACpB,OAAO,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;QACtE,CAAC;QACD,YAAY,EAAE,UAAU,CAAC,YAAY;QACrC,OAAO,EAAE,UAAU,CAAC,OAAO;KAC5B,CAAC;AACJ,CAAC"}

package/build-ngc/core/video-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-view.js","sourceRoot":"","sources":["../../src/core/video-view.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"video-view.js","sourceRoot":"","sources":["../../src/core/video-view.ts"],"names":[],"mappings":"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"}

package/native-link.json

@@ -22,7 +22,9 @@
           {
             "name": "expo.modules.video.playbackService.ExpoVideoPlaybackService",
             "foregroundServiceType": "mediaPlayback",
-            "intentFilterActions": ["androidx.media3.session.MediaSessionService"]
+            "intentFilterActions": [
+              "androidx.media3.session.MediaSessionService"
+            ]
           }
         ]
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/video",
-  "version": "0.0.0",
+  "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": {
@@ -67,7 +67,7 @@
   "dependencies": {
     "expo-video": "57.0.5",
     "expo-modules-core": "57.0.20",
-    "@symbiote-native/components": "3.1.4"
+    "@symbiote-native/components": "3.2.0"
   },
   "peerDependencies": {
     "@angular/core": ">=20",
@@ -77,12 +77,12 @@
     "solid-js": ">=1.9.0",
     "svelte": ">=5.56.0",
     "vue": ">=3.5.0",
-    "@symbiote-native/engine": "^1.5.0",
-    "@symbiote-native/react": "^3.2.0",
-    "@symbiote-native/angular": "^3.2.0",
-    "@symbiote-native/svelte": "^3.1.0",
-    "@symbiote-native/vue": "^3.2.0",
-    "@symbiote-native/solid": "^3.1.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": {
@@ -130,13 +130,13 @@
     "solid-js": "^1.9.14",
     "svelte": "^5.56.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/react": "3.2.0",
-    "@symbiote-native/solid": "3.1.0",
-    "@symbiote-native/vue": "3.2.0",
-    "@symbiote-native/angular": "3.2.0",
-    "@symbiote-native/engine": "1.5.0",
-    "@symbiote-native/test-utils": "0.4.6",
-    "@symbiote-native/svelte": "3.1.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",

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

@@ -14,10 +14,9 @@ const AIRPLAY_INPUTS = [
 ] 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]>
-  > {}
+export interface VideoAirPlayButton extends Partial<
+  Pick<IVideoAirPlayButtonProps, (typeof AIRPLAY_INPUTS)[number]>
+> {}
 
 /** Angular twin of `expo-video`'s `VideoAirPlayButton`, a plain view off iOS */
 @Component({

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

@@ -27,8 +27,9 @@ const VIDEO_VIEW_INPUTS = [
 ] 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]>> {}
+export interface VideoView extends Partial<
+  Pick<IVideoViewProps, (typeof VIDEO_VIEW_INPUTS)[number]>
+> {}
 
 /** Angular twin of `expo-video`'s `VideoView` */
 @Component({

package/src/core/native-module.ts

@@ -11,6 +11,5 @@ export type INativeVideoModule = {
   getCurrentVideoCacheSize(): number;
 };
 
-export const expoVideo = requireNativeModule<INativeVideoModule>(
-  VIDEO_MODULE_NAME,
-);
+export const expoVideo =
+  requireNativeModule<INativeVideoModule>(VIDEO_MODULE_NAME);

package/src/core/player-types.ts

@@ -3,11 +3,7 @@ import type { SharedObject, SharedRef } from 'expo-modules-core';
 export type IVideoPlayerStatus = 'idle' | 'loading' | 'readyToPlay' | 'error';
 
 export type IVideoContentType =
-  | 'auto'
-  | 'progressive'
-  | 'hls'
-  | 'dash'
-  | 'smoothStreaming';
+  'auto' | 'progressive' | 'hls' | 'dash' | 'smoothStreaming';
 
 export type IVideoDrmType = 'clearkey' | 'fairplay' | 'playready' | 'widevine';
 
@@ -49,10 +45,7 @@ export type IVideoSource = string | number | null | IVideoSourceObject;
 export type IVideoPlayerError = { message: string };
 
 export type IVideoAudioMixingMode =
-  | 'mixWithOthers'
-  | 'duckOthers'
-  | 'auto'
-  | 'doNotMix';
+  'mixWithOthers' | 'duckOthers' | 'auto' | 'doNotMix';
 
 export type IVideoBufferOptions = {
   /** iOS only, in seconds */
@@ -146,7 +139,10 @@ export type IVideoPlayerEvents = {
     currentOffsetFromLive: number | null;
     bufferedPosition: number;
   }): void;
-  sourceChange(payload: { source: IVideoSource; oldSource?: IVideoSource }): void;
+  sourceChange(payload: {
+    source: IVideoSource;
+    oldSource?: IVideoSource;
+  }): void;
   availableSubtitleTracksChange(payload: {
     availableSubtitleTracks: IVideoSubtitleTrack[];
     oldAvailableSubtitleTracks?: IVideoSubtitleTrack[];

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

@@ -20,7 +20,10 @@ export type IVideoPlayerController = {
     options?: IVideoPlayerBuilderOptions,
     setup?: (player: VideoPlayer) => void,
   ) => VideoPlayer;
-  flushDispose: IResourceController<IVideoPlayerKey, VideoPlayer>['flushDispose'];
+  flushDispose: IResourceController<
+    IVideoPlayerKey,
+    VideoPlayer
+  >['flushDispose'];
   dispose: IResourceController<IVideoPlayerKey, VideoPlayer>['dispose'];
 };
 

package/src/core/video-view.ts

@@ -35,9 +35,21 @@ const views = defineExpoNativeViews(
 );
 
 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),
+  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 = {

package/src/react/video-view.ts

@@ -28,6 +28,8 @@ export function VideoView({
 }
 
 /** React twin of `expo-video`'s `VideoAirPlayButton`, a plain view off iOS */
-export function VideoAirPlayButton(props: IVideoAirPlayButtonReactProps): ReactElement {
+export function VideoAirPlayButton(
+  props: IVideoAirPlayButtonReactProps,
+): ReactElement {
   return descriptorToReact(renderVideoAirPlayButton(props));
 }

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

@@ -23,5 +23,9 @@ export function useVideoPlayer(
   getPlayerBuilderOptions: () => IVideoPlayerBuilderOptions | undefined = () =>
     undefined,
 ): IUseVideoPlayerResult {
-  return usePlayerResource(() => [getSource(), getPlayerBuilderOptions(), setup]);
+  return usePlayerResource(() => [
+    getSource(),
+    getPlayerBuilderOptions(),
+    setup,
+  ]);
 }

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

@@ -21,7 +21,9 @@ const usePlayerResource = createResourceHook(createVideoPlayerController);
 export function useVideoPlayer(
   source: MaybeRefOrGetter<IVideoSource>,
   setup?: (player: VideoPlayer) => void,
-  playerBuilderOptions?: MaybeRefOrGetter<IVideoPlayerBuilderOptions | undefined>,
+  playerBuilderOptions?: MaybeRefOrGetter<
+    IVideoPlayerBuilderOptions | undefined
+  >,
 ): ComputedRef<VideoPlayer> {
   return usePlayerResource(() => [
     toValue(source),

package/src/vue/video-view.ts

@@ -7,7 +7,10 @@ import {
 import { createVideoView, renderVideoAirPlayButton } from '../core';
 
 /** Vue twin of `expo-video`'s `VideoView` */
-export const VideoView = defineNativeViewComponent('VideoView', createVideoView);
+export const VideoView = defineNativeViewComponent(
+  'VideoView',
+  createVideoView,
+);
 
 /** Vue twin of `expo-video`'s `VideoAirPlayButton`, a plain view off iOS */
 export const VideoAirPlayButton = defineComponent({