@symbiote-native/video-thumbnails 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 A. Prokopenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,106 @@
+# @symbiote-native/video-thumbnails
+
+Show a preview image for a video without playing it: pick a moment, get a file. One API for every
+[SymbioteNative](../../README.md) adapter (React, Vue, Svelte, Solid and Angular).
+
+> **Deprecated upstream.** Expo replaced
+> [`expo-video-thumbnails`](https://github.com/expo/expo/tree/main/packages/expo-video-thumbnails)
+> with `generateThumbnailsAsync` in `expo-video` and ships no further patches. It is ported here for
+> parity with the rest of the Expo surface.
+
+Built the same way as [`@symbiote-native/print`](../print): an `expo-modules-core`-based wrapper
+(see the `symbiote-expo-native-module` project skill for the full mechanism).
+
+## Install
+
+**New app:**
+
+```bash
+npx @symbiote-native/cli new my-app --video-thumbnails
+```
+
+**Existing SymbioteNative app:**
+
+```bash
+npx @symbiote-native/cli add --video-thumbnails
+```
+
+Either way: installs `@symbiote-native/video-thumbnails` 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
+npm install @symbiote-native/video-thumbnails
+```
+
+`expo-video-thumbnails` and `expo-modules-core` come along as regular, pinned dependencies -
+never install either yourself, and never add the `expo` meta-package to this project.
+
+### Required one-time step: native autolinking wiring
+
+Same one-time app wiring every `expo-modules-core` package shares - see
+[`@symbiote-native/print`'s README](../print/README.md#required-one-time-step-native-autolinking-wiring)
+for the full table; nothing package-specific here.
+
+### No permissions, no config plugin
+
+- **No runtime permission on either platform.** The module only ever reads a URI the caller
+  already has access to.
+- **No manifest edit.** `expo-video-thumbnails`'s own `AndroidManifest.xml` declares nothing.
+- **No config plugin.** Upstream ships none.
+
+</details>
+
+## Shape
+
+```
+src/core/                 the whole API: getThumbnailAsync. native-module.ts resolves
+                          ExpoVideoThumbnails through expo-modules-core's requireNativeModule.
+src/angular/              @symbiote-native/video-thumbnails/angular
+```
+
+`./react`, `./vue`, `./svelte`, and `./solid` are `exports`-map aliases straight onto `src/core/` -
+the whole export surface is one stateless async function, nothing to wrap in a hook/composable.
+
+## Use it
+
+```ts
+import { getThumbnailAsync } from '@symbiote-native/video-thumbnails';
+
+const { uri, width, height } = await getThumbnailAsync('file:///video.mp4', {
+  time: 2000,
+  quality: 0.8,
+});
+```
+
+## API
+
+| Export              | Signature                                                               | Notes                                       |
+| -------------------- | ------------------------------------------------------------------------ | --------------------------------------------- |
+| `getThumbnailAsync`  | `(sourceFilename: string, options?: IVideoThumbnailsOptions) => Promise<IVideoThumbnailsResult>` | `time` in ms, `quality` `0.0`-`1.0`, optional remote `headers`. |
+
+## Common questions
+
+- **New code?** No: deprecated upstream in favor of `generateThumbnailsAsync` in `expo-video`.
+- **Never resolves, or fails on some Android devices.** The most reported upstream problem, mostly
+  certain codecs and `.mov` files on older Android. Test with your real videos and handle failure.
+- **Two thumbnails close together look the same.** Nearby `time` values can return the same frame;
+  space them further apart.
+- **Remote video.** Pass the URL (and `headers` if needed); a local file is more reliable.
+
+Sources: [Expo docs: VideoThumbnails](https://docs.expo.dev/versions/latest/sdk/video-thumbnails/),
+[expo/expo#7832](https://github.com/expo/expo/issues/7832),
+[expo/expo#19165](https://github.com/expo/expo/issues/19165),
+[expo/expo#12429](https://github.com/expo/expo/issues/12429).
+
+## Test it
+
+```bash
+pnpm vitest run packages/video-thumbnails
+```
+
+Upstream ships no test suite of its own (`expo-video-thumbnails`'s `src/` has no `__tests__`), so
+nothing to port - every test here is net-new coverage of the ported logic (option defaulting,
+argument forwarding, result passthrough).

package/build/angular/index.d.ts

@@ -0,0 +1 @@
+export * from '../core';

package/build/angular/index.js

@@ -0,0 +1,2 @@
+// No per-instance state or event stream to wrap in an injectable service — plain re-export.
+export * from '../core/index.js';

package/build/core/index.d.ts

@@ -0,0 +1,2 @@
+export { getThumbnailAsync } from './video-thumbnails';
+export type { IVideoThumbnailsOptions, IVideoThumbnailsResult } from './types';

package/build/core/index.js

@@ -0,0 +1 @@
+export { getThumbnailAsync } from './video-thumbnails.js';

package/build/core/native-module.d.ts

@@ -0,0 +1,5 @@
+import type { IVideoThumbnailsOptions, IVideoThumbnailsResult } from './types';
+export type INativeVideoThumbnailsModule = {
+    getThumbnail(sourceFilename: string, options: IVideoThumbnailsOptions): Promise<IVideoThumbnailsResult>;
+};
+export declare const expoVideoThumbnails: INativeVideoThumbnailsModule;

package/build/core/native-module.js

@@ -0,0 +1,3 @@
+import { requireNativeModule } from 'expo-modules-core';
+const EXPO_VIDEO_THUMBNAILS_MODULE_NAME = 'ExpoVideoThumbnails';
+export const expoVideoThumbnails = requireNativeModule(EXPO_VIDEO_THUMBNAILS_MODULE_NAME);

package/build/core/types.d.ts

@@ -0,0 +1,13 @@
+export type IVideoThumbnailsResult = {
+    uri: string;
+    width: number;
+    height: number;
+};
+export type IVideoThumbnailsOptions = {
+    /** `0.0`-`1.0`. `1` is no compression (highest quality). */
+    quality?: number;
+    /** Milliseconds into the video to grab the frame from. */
+    time?: number;
+    /** Sent with the network request when `sourceFilename` is a remote URI. */
+    headers?: Record<string, string>;
+};

package/build/core/types.js

@@ -0,0 +1 @@
+export {};

package/build/core/video-thumbnails.d.ts

@@ -0,0 +1,3 @@
+import type { IVideoThumbnailsOptions, IVideoThumbnailsResult } from './types';
+/** Grabs a still frame from `sourceFilename` (local or remote) as a new image file. */
+export declare function getThumbnailAsync(sourceFilename: string, options?: IVideoThumbnailsOptions): Promise<IVideoThumbnailsResult>;

package/build/core/video-thumbnails.js

@@ -0,0 +1,5 @@
+import { expoVideoThumbnails } from './native-module.js';
+/** Grabs a still frame from `sourceFilename` (local or remote) as a new image file. */
+export async function getThumbnailAsync(sourceFilename, options = {}) {
+    return await expoVideoThumbnails.getThumbnail(sourceFilename, options);
+}

package/build-ngc/angular/index.d.ts

@@ -0,0 +1 @@
+export * from '../core';

package/build-ngc/angular/index.js

@@ -0,0 +1,3 @@
+// No per-instance state or event stream to wrap in an injectable service — plain re-export.
+export * from '../core';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,cAAc,SAAS,CAAC"}

package/build-ngc/core/index.d.ts

@@ -0,0 +1,2 @@
+export { getThumbnailAsync } from './video-thumbnails';
+export type { IVideoThumbnailsOptions, IVideoThumbnailsResult } from './types';

package/build-ngc/core/index.js

@@ -0,0 +1,2 @@
+export { getThumbnailAsync } from './video-thumbnails';
+//# sourceMappingURL=index.js.map

package/build-ngc/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}

package/build-ngc/core/native-module.d.ts

@@ -0,0 +1,5 @@
+import type { IVideoThumbnailsOptions, IVideoThumbnailsResult } from './types';
+export type INativeVideoThumbnailsModule = {
+    getThumbnail(sourceFilename: string, options: IVideoThumbnailsOptions): Promise<IVideoThumbnailsResult>;
+};
+export declare const expoVideoThumbnails: INativeVideoThumbnailsModule;

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

@@ -0,0 +1,4 @@
+import { requireNativeModule } from 'expo-modules-core';
+const EXPO_VIDEO_THUMBNAILS_MODULE_NAME = 'ExpoVideoThumbnails';
+export const expoVideoThumbnails = requireNativeModule(EXPO_VIDEO_THUMBNAILS_MODULE_NAME);
+//# sourceMappingURL=native-module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"native-module.js","sourceRoot":"","sources":["../../src/core/native-module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAGxD,MAAM,iCAAiC,GAAG,qBAAqB,CAAC;AAShE,MAAM,CAAC,MAAM,mBAAmB,GAC9B,mBAAmB,CACjB,iCAAiC,CAClC,CAAC"}

package/build-ngc/core/types.d.ts

@@ -0,0 +1,13 @@
+export type IVideoThumbnailsResult = {
+    uri: string;
+    width: number;
+    height: number;
+};
+export type IVideoThumbnailsOptions = {
+    /** `0.0`-`1.0`. `1` is no compression (highest quality). */
+    quality?: number;
+    /** Milliseconds into the video to grab the frame from. */
+    time?: number;
+    /** Sent with the network request when `sourceFilename` is a remote URI. */
+    headers?: Record<string, string>;
+};

package/build-ngc/core/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-ngc/core/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":""}

package/build-ngc/core/video-thumbnails.d.ts

@@ -0,0 +1,3 @@
+import type { IVideoThumbnailsOptions, IVideoThumbnailsResult } from './types';
+/** Grabs a still frame from `sourceFilename` (local or remote) as a new image file. */
+export declare function getThumbnailAsync(sourceFilename: string, options?: IVideoThumbnailsOptions): Promise<IVideoThumbnailsResult>;

package/build-ngc/core/video-thumbnails.js

@@ -0,0 +1,6 @@
+import { expoVideoThumbnails } from './native-module';
+/** Grabs a still frame from `sourceFilename` (local or remote) as a new image file. */
+export async function getThumbnailAsync(sourceFilename, options = {}) {
+    return await expoVideoThumbnails.getThumbnail(sourceFilename, options);
+}
+//# sourceMappingURL=video-thumbnails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"video-thumbnails.js","sourceRoot":"","sources":["../../src/core/video-thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGtD,uFAAuF;AACvF,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACrC,cAAsB,EACtB,UAAmC,EAAE;IAErC,OAAO,MAAM,mBAAmB,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;AACzE,CAAC"}

package/native-link.json

@@ -0,0 +1,12 @@
+{
+  "android": {
+    "gradleProjectName": "expo-video-thumbnails",
+    "modules": [
+      {
+        "importPath": "expo.modules.videothumbnails.VideoThumbnailsModule",
+        "className": "VideoThumbnailsModule",
+        "nativeName": "ExpoVideoThumbnails"
+      }
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,150 @@
+{
+  "name": "@symbiote-native/video-thumbnails",
+  "version": "0.1.0",
+  "description": "expo-video-thumbnails wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. Creates an image thumbnail from a local or remote video.",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "expo-video-thumbnails",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "video",
+    "thumbnail"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "packages/video-thumbnails"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/packages/video-thumbnails#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "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/core/index.d.ts",
+      "default": "./build/core/index.js"
+    },
+    "./react": {
+      "types": "./build/core/index.d.ts",
+      "default": "./build/core/index.js"
+    },
+    "./svelte": {
+      "types": "./build/core/index.d.ts",
+      "default": "./build/core/index.js"
+    },
+    "./solid": {
+      "types": "./build/core/index.d.ts",
+      "default": "./build/core/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-thumbnails": "57.0.2",
+    "expo-modules-core": "57.0.20"
+  },
+  "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.1.3",
+    "@symbiote-native/react": "^3.1.0",
+    "@symbiote-native/solid": "^3.0.5",
+    "@symbiote-native/engine": "^1.4.0",
+    "@symbiote-native/vue": "^3.1.0",
+    "@symbiote-native/svelte": "^3.0.5"
+  },
+  "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.1.3",
+    "@symbiote-native/engine": "1.4.0",
+    "@symbiote-native/react": "3.1.0",
+    "@symbiote-native/test-utils": "0.4.5",
+    "@symbiote-native/svelte": "3.0.5",
+    "@symbiote-native/solid": "3.0.5",
+    "@symbiote-native/vue": "3.1.0"
+  },
+  "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,2 @@
+// No per-instance state or event stream to wrap in an injectable service — plain re-export.
+export * from '../core';

package/src/core/index.ts

@@ -0,0 +1,2 @@
+export { getThumbnailAsync } from './video-thumbnails';
+export type { IVideoThumbnailsOptions, IVideoThumbnailsResult } from './types';

package/src/core/native-module.ts

@@ -0,0 +1,16 @@
+import { requireNativeModule } from 'expo-modules-core';
+import type { IVideoThumbnailsOptions, IVideoThumbnailsResult } from './types';
+
+const EXPO_VIDEO_THUMBNAILS_MODULE_NAME = 'ExpoVideoThumbnails';
+
+export type INativeVideoThumbnailsModule = {
+  getThumbnail(
+    sourceFilename: string,
+    options: IVideoThumbnailsOptions,
+  ): Promise<IVideoThumbnailsResult>;
+};
+
+export const expoVideoThumbnails =
+  requireNativeModule<INativeVideoThumbnailsModule>(
+    EXPO_VIDEO_THUMBNAILS_MODULE_NAME,
+  );

package/src/core/types.ts

@@ -0,0 +1,14 @@
+export type IVideoThumbnailsResult = {
+  uri: string;
+  width: number;
+  height: number;
+};
+
+export type IVideoThumbnailsOptions = {
+  /** `0.0`-`1.0`. `1` is no compression (highest quality). */
+  quality?: number;
+  /** Milliseconds into the video to grab the frame from. */
+  time?: number;
+  /** Sent with the network request when `sourceFilename` is a remote URI. */
+  headers?: Record<string, string>;
+};

package/src/core/video-thumbnails.ts

@@ -0,0 +1,10 @@
+import { expoVideoThumbnails } from './native-module';
+import type { IVideoThumbnailsOptions, IVideoThumbnailsResult } from './types';
+
+/** Grabs a still frame from `sourceFilename` (local or remote) as a new image file. */
+export async function getThumbnailAsync(
+  sourceFilename: string,
+  options: IVideoThumbnailsOptions = {},
+): Promise<IVideoThumbnailsResult> {
+  return await expoVideoThumbnails.getThumbnail(sourceFilename, options);
+}