@assetlib/sdk-expo 0.5.3-preview.1 → 0.6.0-preview.1

package/README.md

@@ -184,13 +184,42 @@ For example, `createExpoAssetClient(config, { cachePolicy: 'memory' })` keeps ar
 
 Native uses the maintained Expo `File`, `Directory`, and `Paths` APIs for durable verification metadata and optional disk artwork, with private app-document storage and a recoverable state replacement journal. Native delivery uses streaming `expo/fetch`. Web uses transactional IndexedDB for durable metadata and optional cached artwork, browser Fetch, and ephemeral Blob image URLs, released when the component changes or unmounts. No credentials are attached to public delivery requests; the server must allow the web demo origin through CORS.
 
-Caches and durable replay state are isolated by manifest origin, organization, app, and environment. Changing pins or switching between the legacy and environment-scoped production manifest routes preserves that namespace. On first use, an empty namespace checks both previous URL/key formulas (single-key and sorted-key-set), verifies the complete stored history with the current pins, and moves valid state and bounded cached artwork into the new namespace. Invalid legacy state is left untouched. A persisted completion marker prevents re-migration; missing or corrupt current state fails closed. Persistent artwork storage, including cached Lottie JSON, is bounded to 50 MiB / 100 entries per namespace; the core retains eight signed releases. Cached content is rehashed. When verified artwork cannot be fetched or found in an eligible cache, the component uses its bundled fallback.
+Caches and durable replay state are isolated by manifest origin, organization, app, and environment. Changing pins or switching between the legacy and environment-scoped production manifest routes preserves that namespace. On first use, an empty namespace checks both previous URL/key formulas (single-key and sorted-key-set), verifies the complete stored history with the current pins, and moves valid state and bounded cached artwork into the new namespace. Invalid legacy state is left untouched. A persisted completion marker prevents re-migration; missing or corrupt current state fails closed. Persistent artwork storage, including cached Lottie JSON and MP4 clips, is bounded to 50 MiB / 100 entries per namespace; the core retains eight signed releases. Cached content is rehashed. When verified artwork cannot be fetched or found in an eligible cache, the component uses its bundled fallback.
 
 For the first upgrade from the old namespace scheme, retain the previous pinned set until migration has completed. Migration recognizes subsets of the current pins, including an expansion during upgrade, but cannot reconstruct an old sorted-set namespace containing a removed, unused pin from its one-way hash. Searches are limited to 4,096 namespace probes; exceeding this limit fails closed with bundled artwork instead of resetting replay protection. After migration, pin changes do not change storage identity; every retained release must still verify with the current pins.
 
 There is no automatic app-data reset API: disconnect the client to show bundled artwork while retaining the cache. Explicitly clearing app/browser data removes stored replay protection. Multiple native clients are serialized within one JavaScript process; cross-process synchronization is outside this preview's contract. Preview 0.2 supports PNG/WebP renditions selected by explicit pixel size. Logical placement dimensions still match the generated catalog. Native caches preserve compatibility with existing `.webp` entries. Web can opt into normalized SVG with `createExpoAssetClient(config, { allowVector: true })`; enabling that option on native throws. On native, `client.resolveAnimation(ref)` resolves verified Lottie JSON and, under the `disk` policy, caches it as `<sha256>.json` beside the cached images (at most 512 KiB per entry, inside the same budget) for a Lottie player that the app supplies. The SDK includes no player, and its image components show the still poster. Native SVG and PDF delivery are not implemented. Browser rendering checks decoded dimensions before handing the image to Expo; native Expo decode errors fall back to the bundled image. See the core README for signature, timeout, body-size, and compatibility limits.
 
-## Optional runtime observations
+## Short looping video
+
+`AssetlibVideo` shows a placement's poster and plays its signed short looping MP4 clip over it. It ships from a separate entry point so `expo-video` stays an optional peer dependency; importing `@assetlib/sdk-expo` never loads it. **This has not been verified on a device, simulator, emulator or browser**; it is covered by Node unit tests with a simulated player only.
+
+```sh
+npx expo install expo-video
+```
+
+```tsx
+import { AssetlibVideo } from '@assetlib/sdk-expo/video';
+
+<AssetlibVideo
+  client={client}
+  asset={AppAssets.Cards.gold}
+  fallback={require('./assets/gold.png')}
+  revision={refreshCounter}
+  contentFit="cover"
+  style={{ width: '100%', aspectRatio: 4 / 3 }}
+/>
+```
+
+- **Poster first.** It takes `AssetlibImage`'s props and renders that image as the poster, bundled fallback first. `style` sizes the container; the poster and clip fill it. The poster stays visible until the clip's first frame renders and returns on any failure.
+- **Playback.** `expo-video`'s `useVideoPlayer` with `loop` and `muted` (screen not kept awake), in a `VideoView` with `nativeControls={false}` and the poster's `contentFit` (`none` and `scale-down` become `contain`).
+- **When it plays.** Only while `AccessibilityInfo.isReduceMotionEnabled()` reports `false` (it listens to `reduceMotionChanged`; an unknown or failing query counts as reduced), the app is active (`AppState`; `background` and `inactive` stop it), `paused` is not set, and the view holds one of two playback slots shared by every `AssetlibVideo` in the app. Other views show their poster and take a slot when one frees. A view resolves its clip only once it holds a slot. Off-screen detection is up to the app: pass `paused` for views that are not visible.
+- **Failures.** A missing clip, a failed check, a player error, or a rejected web `play()` (autoplay blocked, for example in iOS Low Power Mode) shows the poster until the request changes (client, asset, `revision` or `cachePolicy`).
+- **iOS and Android.** The native adapter caches verified clips as `<sha256>.mp4` in the namespaced cache directory (at most 4 MiB each, inside the 50 MiB / 100 entry budget) and the core returns the file's `file://` URI. Under the `memory` and `none` policies `resolveVideo` returns the poster without downloading, because the player needs a file.
+- **Web.** Verified bytes from IndexedDB, memory or the network become a `video/mp4` Blob URL, revoked when the clip changes or the component unmounts.
+- **Open risk.** `expo-video` documents `require()` assets and media-library URIs as local sources, not plain `file://` URIs. Its 57.0.5 source passes a string URI through unchanged: iOS builds an `AVURLAsset` from it (only `ph://` is special-cased) and Android hands it to Media3's `DefaultDataSource`, which reads `file://` URIs. Whether a cached file plays on devices is unverified.
+- Limits and the signed descriptor are in the core README's [Short looping video](../sdk-core/README.md#short-looping-video) section. `createExpoAssetClient(config, { videoTimeoutMs })` sets the clip deadline.
+
 
 Telemetry is **off by default**. Enable it explicitly to report which published placement artwork the app resolves and attaches to an image renderer:
 
@@ -208,7 +237,7 @@ await client.flush();
 client.dispose(); // Remove the AppState listener and stop observation timers.
 ```
 
-The adapter identifies itself as `sdk-expo` version `0.5.3-preview.1`. An explicit `telemetry.sdk` or `telemetry.build` takes precedence. When the runtime can optionally require `expo-application` or `expo-constants`, the adapter reads native app version and build number (falling back to Expo config version/build). Missing packages, unavailable runtime loaders, and throwing native bridges are ignored; no new dependency is required. Supply `build` explicitly for reliable production attribution, especially with bundlers that cannot resolve optional runtime requires or in Expo Go. Without complete runtime metadata or an explicit build, batches use platform `expo` and version/build `unknown`.
+The adapter identifies itself as `sdk-expo` version `0.6.0-preview.1`. An explicit `telemetry.sdk` or `telemetry.build` takes precedence. When the runtime can optionally require `expo-application` or `expo-constants`, the adapter reads native app version and build number (falling back to Expo config version/build). Missing packages, unavailable runtime loaders, and throwing native bridges are ignored; no new dependency is required. Supply `build` explicitly for reliable production attribution, especially with bundlers that cannot resolve optional runtime requires or in Expo Go. Without complete runtime metadata or an explicit build, batches use platform `expo` and version/build `unknown`.
 
 Only the observation contract fields are sent: environment, SDK name/version, build platform/version/number, random install ID, send time, and coalesced events with placement key, kind/count, source, asset ID/release sequence when known, effective arm/appearance when selected, and fallback reason. Bundle outcomes send only `fallback` events without asset ID or sequence. Dynamic catalog references do not emit observations because they have no placement key. Image bytes, descriptions, URLs, device identifiers, account identifiers, and status/error messages are not included.
 
@@ -222,4 +251,4 @@ Enabling telemetry changes the app's data collection behavior. Review Google Pla
 
 ## Validation
 
-`npm test` exercises component lifecycle behavior with a React test renderer and mocked platform boundaries, including state-family activation, pinned selection, cancellation, fallback, and native no-file data URI generation. `npm run typecheck` checks against the current Expo 57 APIs. Core security and offline tests run in the sibling package. Actual iOS/Android runtime and web delivery checks must be reported separately; these tests and typechecking are not evidence of a native device run.
+`npm test` exercises component lifecycle behavior with a React test renderer and mocked platform boundaries, including state-family activation, pinned selection, cancellation, fallback, native no-file data URI generation, and `AssetlibVideo`'s reduced-motion, app-state, two-slot and failure handling against a simulated player. `npm run typecheck` checks against the current Expo 57 APIs. Core security and offline tests run in the sibling package. Actual iOS/Android runtime and web delivery checks must be reported separately; these tests and typechecking are not evidence of a native device run.

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@assetlib/sdk-expo",
-  "version": "0.5.3-preview.1",
+  "version": "0.6.0-preview.1",
   "license": "MIT",
   "type": "module",
   "main": "./src/index.tsx",
   "types": "./src/index.tsx",
   "react-native": "./src/index.tsx",
   "exports": {
-    ".": "./src/index.tsx"
+    ".": "./src/index.tsx",
+    "./video": "./src/video.tsx"
   },
   "files": [
     "src",
@@ -19,15 +20,21 @@
     "test": "node --test test/*.test.mjs"
   },
   "dependencies": {
-    "@assetlib/sdk-core": "0.5.3-preview.1"
+    "@assetlib/sdk-core": "0.6.0-preview.1"
   },
   "peerDependencies": {
     "expo": ">=57 <58",
     "expo-file-system": ">=57 <58",
     "expo-image": ">=57 <58",
+    "expo-video": ">=57 <58",
     "react": ">=19 <20",
     "react-native": ">=0.86 <0.87"
   },
+  "peerDependenciesMeta": {
+    "expo-video": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "react": "19.2.3",

package/src/index.tsx

@@ -6,9 +6,9 @@ import { createPlatformStorage, imageUri, platformFetch, vectorRenderingSupporte
 import type { ImageUri } from './shared';
 import { expoTelemetry, flushOnBackground } from './telemetry';
 export { resolveAccessibilityDescription } from '@assetlib/sdk-core';
-export type { AssetAccessibility, AssetClient, AssetlibConfig, AssetRef, AssetRendering, AssetStatus, CachePolicy, ClientStatus, DynamicAssetRef, RefreshResult, StateSetRef, TelemetryOptions } from '@assetlib/sdk-core';
+export type { AssetAccessibility, AssetClient, AssetlibConfig, AssetRef, AssetRendering, AssetStatus, CachePolicy, ClientStatus, DynamicAssetRef, RefreshResult, ResolvedVideo, StateSetRef, TelemetryOptions } from '@assetlib/sdk-core';
 
-export function createExpoAssetClient(config: AssetlibConfig, options: { allowInsecureLoopback?: boolean; timeoutMs?: number; decisionTimeoutMs?: number; allowVector?: boolean; cachePolicy?: CachePolicy; decide?: ClientOptions['decide']; telemetry?: ClientOptions['telemetry'] } = {}): AssetClient {
+export function createExpoAssetClient(config: AssetlibConfig, options: { allowInsecureLoopback?: boolean; timeoutMs?: number; videoTimeoutMs?: number; decisionTimeoutMs?: number; allowVector?: boolean; cachePolicy?: CachePolicy; decide?: ClientOptions['decide']; telemetry?: ClientOptions['telemetry'] } = {}): AssetClient {
   const validated = parsePublicConfig(config, options);
   if (options.allowVector && !vectorRenderingSupported) throw new Error('SVG delivery is supported only by the browser adapter.');
   const telemetry = expoTelemetry(options.telemetry);

package/src/platform.native.ts

@@ -1,15 +1,16 @@
 import { Directory, File, Paths } from 'expo-file-system';
 import { fetch as expoFetch } from 'expo/fetch';
-import { LOTTIE_LIMITS, SDK_LIMITS, verifyStoredState, type AssetlibConfig, type AssetStorage, type ResolvedAsset } from '@assetlib/sdk-core';
+import { LOTTIE_LIMITS, SDK_LIMITS, verifyStoredState, type AssetlibConfig, type AssetStorage, type ResolvedAsset, type ResolvedVideo } from '@assetlib/sdk-core';
 import { namespace, legacyNamespaces, installStorageKey, rasterDataUri, validateCacheKey, type ImageUri } from './shared';
 
 export const vectorRenderingSupported = false;
 export const platformFetch = expoFetch as unknown as typeof globalThis.fetch;
-// Raster images and verified Lottie JSON share one namespaced directory and its budget.
-const cacheFormats = new Map<string, { extension: string; maxBytes: number }>([
-  ['image/webp', { extension: 'webp', maxBytes: SDK_LIMITS.assetBytes }],
-  ['image/png', { extension: 'png', maxBytes: SDK_LIMITS.assetBytes }],
-  ['application/json', { extension: 'json', maxBytes: LOTTIE_LIMITS.bytes }],
+// Raster images, verified Lottie JSON and MP4 clips share one namespaced directory and its budget.
+const cacheFormats = new Map<string, { extension: string; maxBytes: number; label: string }>([
+  ['image/webp', { extension: 'webp', maxBytes: SDK_LIMITS.assetBytes, label: 'Image' }],
+  ['image/png', { extension: 'png', maxBytes: SDK_LIMITS.assetBytes, label: 'Image' }],
+  ['application/json', { extension: 'json', maxBytes: LOTTIE_LIMITS.bytes, label: 'Animation' }],
+  ['video/mp4', { extension: 'mp4', maxBytes: SDK_LIMITS.videoBytes, label: 'Clip' }],
 ]);
 const locks = new Map<string, Promise<unknown>>();
 function exclusive<T>(key: string, fn: () => Promise<T>): Promise<T> {
@@ -135,13 +136,13 @@ export function createPlatformStorage(config: AssetlibConfig): AssetStorage {
     },
     putAsset: (hash, bytes, mime = 'image/webp') => exclusive(scope, async () => {
       const format = cacheFormats.get(mime);
-      if (!format) throw new Error('This native adapter caches PNG, WebP and Lottie JSON only.');
+      if (!format) throw new Error('This native adapter caches PNG, WebP, Lottie JSON and MP4 only.');
       const { extension } = format;
       validateCacheKey(hash);
-      if (bytes.length > format.maxBytes) throw new Error(`${mime === 'application/json' ? 'Animation' : 'Image'} exceeds the cache entry bound.`);
+      if (bytes.length > format.maxBytes) throw new Error(`${format.label} exceeds the cache entry bound.`);
       const { images } = directories(config);
       for (const entry of images.list()) if (entry instanceof File && entry.name.endsWith('.next')) entry.delete();
-      const entries = images.list().filter((entry): entry is File => entry instanceof File && /\.(webp|png|json)$/.test(entry.name) && entry.name !== `${hash}.${extension}`).sort((a, b) => (a.modificationTime ?? 0) - (b.modificationTime ?? 0));
+      const entries = images.list().filter((entry): entry is File => entry instanceof File && /\.(webp|png|json|mp4)$/.test(entry.name) && entry.name !== `${hash}.${extension}`).sort((a, b) => (a.modificationTime ?? 0) - (b.modificationTime ?? 0));
       let total = entries.reduce((sum, file) => sum + file.size, 0);
       while (entries.length >= SDK_LIMITS.cacheEntries || total + bytes.length > SDK_LIMITS.cacheBytes) {
         const oldest = entries.shift();
@@ -153,6 +154,14 @@ export function createPlatformStorage(config: AssetlibConfig): AssetStorage {
       next.create({ overwrite: true }); next.write(bytes);
       await next.move(new File(images, `${hash}.${extension}`), { overwrite: true });
     }),
+    // The player opens clips from files, so the core returns this URI instead of clip bytes.
+    getAssetFileUri: async (hash, mime) => {
+      validateCacheKey(hash);
+      const format = cacheFormats.get(mime);
+      if (!format) return null;
+      const file = new File(directories(config).images, `${hash}.${format.extension}`);
+      return file.exists && file.size <= format.maxBytes ? file.uri : null;
+    },
   };
 }
 export async function imageUri(config: AssetlibConfig, result: ResolvedAsset): Promise<ImageUri> {
@@ -167,3 +176,8 @@ export async function imageUri(config: AssetlibConfig, result: ResolvedAsset): P
   if (!file.exists) throw new Error('The verified image was evicted from the local cache.');
   return { uri: file.uri, release() {} };
 }
+/** A verified cached clip as the player's local file. `memory` and `none` never reach here: the core gives the poster. */
+export async function videoUri(_config: AssetlibConfig, result: ResolvedVideo): Promise<ImageUri> {
+  if (result.source === 'poster' || typeof result.uri !== 'string' || !result.uri.startsWith('file://')) throw new Error('The verified clip is not available as a local file.');
+  return { uri: result.uri, release() {} };
+}

package/src/platform.web.ts

@@ -1,4 +1,4 @@
-import { SDK_LIMITS, verifyStoredState, type AssetlibConfig, type AssetStorage, type ResolvedAsset } from '@assetlib/sdk-core';
+import { SDK_LIMITS, verifyStoredState, type AssetlibConfig, type AssetStorage, type ResolvedAsset, type ResolvedVideo } from '@assetlib/sdk-core';
 import { namespace, legacyNamespaces, installStorageKey, validateCacheKey, type ImageUri } from './shared';
 export const vectorRenderingSupported = true;
 export const platformFetch: typeof globalThis.fetch = (...args) => globalThis.fetch(...args);
@@ -161,3 +161,9 @@ export async function imageUri(_config: AssetlibConfig, result: ResolvedAsset):
     return { uri, release: () => URL.revokeObjectURL(uri) };
   } catch (error) { URL.revokeObjectURL(uri); throw error; }
 }
+/** Verified clip bytes from IndexedDB, memory or the network as a Blob URL; the component releases it on unmount. */
+export async function videoUri(_config: AssetlibConfig, result: ResolvedVideo): Promise<ImageUri> {
+  if (result.source === 'poster' || !result.bytes?.length || result.bytes.length > SDK_LIMITS.videoBytes) throw new Error('Missing verified clip bytes.');
+  const uri = URL.createObjectURL(new Blob([result.bytes.slice().buffer as ArrayBuffer], { type: 'video/mp4' }));
+  return { uri, release: () => URL.revokeObjectURL(uri) };
+}

package/src/telemetry.ts

@@ -48,7 +48,7 @@ export function expoTelemetry(telemetry: ClientOptions['telemetry']): ClientOpti
   if (!telemetry?.enabled) return telemetry;
   return {
     ...telemetry,
-    sdk: telemetry.sdk ?? { name: 'sdk-expo', version: '0.5.3-preview.1' },
+    sdk: telemetry.sdk ?? { name: 'sdk-expo', version: '0.6.0-preview.1' },
     build: telemetry.build ?? runtimeBuild() ?? { platform: 'expo', appVersion: 'unknown', buildNumber: 'unknown' },
   };
 }

package/src/video.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, AppState, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useVideoPlayer, VideoView, type VideoContentFit } from 'expo-video';
+import type { AssetRef } from '@assetlib/sdk-core';
+import { AssetlibImage, type AssetlibImageProps } from './index';
+import { videoUri } from './platform';
+import type { ImageUri } from './shared';
+
+export type AssetlibVideoProps<R extends AssetRef = AssetRef> = AssetlibImageProps<R> & {
+  /** Show the poster instead of playing, for example while the view is off screen. */
+  paused?: boolean;
+};
+
+/** At most two clips play at once across every AssetlibVideo; the others show their poster until a slot frees. */
+const maxPlaying = 2;
+let playing = 0;
+const waiting: (() => void)[] = [];
+function acquirePlaybackSlot(granted: () => void): () => void {
+  let state: 'waiting' | 'playing' | 'released' = 'waiting';
+  const start = () => { state = 'playing'; playing++; granted(); };
+  if (playing < maxPlaying) start(); else waiting.push(start);
+  return () => {
+    if (state === 'waiting') waiting.splice(waiting.indexOf(start), 1);
+    else if (state === 'playing') { playing--; while (playing < maxPlaying && waiting.length) waiting.shift()!(); }
+    state = 'released';
+  };
+}
+
+/** Unknown counts as reduced: no clip plays until the system says motion is allowed. */
+function useReduceMotion(): boolean {
+  const [reduced, setReduced] = useState<boolean | null>(null);
+  useEffect(() => {
+    let mounted = true;
+    const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', enabled => setReduced(enabled !== false));
+    AccessibilityInfo.isReduceMotionEnabled().then(enabled => { if (mounted) setReduced(value => value ?? enabled !== false); }, () => { if (mounted) setReduced(value => value ?? true); });
+    return () => { mounted = false; subscription?.remove(); };
+  }, []);
+  return reduced !== false;
+}
+
+function useAppActive(): boolean {
+  const [state, setState] = useState<string | null | undefined>(() => AppState.currentState);
+  useEffect(() => {
+    try { const subscription = AppState.addEventListener('change', setState); return () => subscription.remove(); }
+    catch { return undefined; }
+  }, []);
+  return state !== 'background' && state !== 'inactive';
+}
+
+const videoFit = (fit: AssetlibImageProps['contentFit']): VideoContentFit => fit === 'contain' || fit === 'fill' ? fit : fit === 'none' || fit === 'scale-down' ? 'contain' : 'cover';
+type PlayableElement = { play?: () => Promise<void> | void };
+
+function LoopingClip({ uri, contentFit, onFirstFrame, onFailure }: { uri: string; contentFit: VideoContentFit; onFirstFrame: () => void; onFailure: () => void }) {
+  const view = useRef<VideoView>(null);
+  const callbacks = useRef({ onFirstFrame, onFailure });
+  callbacks.current = { onFirstFrame, onFailure };
+  const player = useVideoPlayer(uri, created => { created.loop = true; created.muted = true; created.keepScreenOnWhilePlaying = false; });
+  useEffect(() => {
+    let mounted = true;
+    const fail = () => { if (mounted) callbacks.current.onFailure(); };
+    const subscription = player.addListener('statusChange', ({ status }) => { if (status === 'error') fail(); });
+    try {
+      if (player.status === 'error') fail();
+      // On web, VideoView exposes its <video> element, whose play() promise rejects when autoplay is blocked.
+      const element = (view.current as unknown as { nativeRef?: { current?: PlayableElement | null } } | null)?.nativeRef?.current;
+      if (typeof element?.play === 'function') Promise.resolve(element.play()).catch(fail);
+      else player.play();
+    } catch { fail(); }
+    return () => { mounted = false; subscription.remove(); };
+  }, [player]);
+  return <VideoView ref={view} player={player} nativeControls={false} contentFit={contentFit} allowsPictureInPicture={false} playsInline style={StyleSheet.absoluteFill} onFirstFrameRender={() => callbacks.current.onFirstFrame()} />;
+}
+
+/**
+ * The placement's poster (an AssetlibImage, bundled fallback first) with its signed short looping clip over it.
+ * The clip resolves and plays only while motion is allowed, the app is active, `paused` is false and this view
+ * holds one of the two playback slots. It plays muted and looping with no controls; any failure shows the poster
+ * until the request (client, asset, revision or cache policy) changes. `style` sizes the container.
+ */
+export function AssetlibVideo<R extends AssetRef>({ paused = false, ...props }: AssetlibVideoProps<R>) {
+  const { client, asset, cachePolicy, revision = 0, style, contentFit } = props;
+  const reduceMotion = useReduceMotion();
+  const active = useAppActive();
+  const request = useMemo(() => ({}), [client, asset.key, asset.width, asset.height, revision, cachePolicy]);
+  const [failed, setFailed] = useState<object | null>(null);
+  const wantsSlot = !paused && !reduceMotion && active && failed !== request;
+  const [slot, setSlot] = useState(false);
+  useEffect(() => {
+    if (!wantsSlot) return;
+    const release = acquirePlaybackSlot(() => setSlot(true));
+    return () => { release(); setSlot(false); };
+  }, [wantsSlot]);
+  const [clip, setClip] = useState<{ request: object; media: ImageUri } | null>(null);
+  useEffect(() => () => clip?.media.release(), [clip]);
+  useEffect(() => {
+    if (clip && clip.request !== request) { setClip(null); return; }
+    if (clip || !wantsSlot || !slot) return;
+    const controller = new AbortController();
+    client.resolveVideo(asset, { cachePolicy, signal: controller.signal }).then(async result => {
+      if (controller.signal.aborted) return;
+      if (result.source === 'poster') { setFailed(request); return; }
+      const media = await videoUri(client.config, result);
+      if (controller.signal.aborted) { media.release(); return; }
+      setClip({ request, media });
+    }).catch(() => { if (!controller.signal.aborted) setFailed(request); });
+    return () => controller.abort();
+  }, [client, request, wantsSlot, slot, clip]);
+  const play = wantsSlot && slot && clip?.request === request;
+  const [frame, setFrame] = useState(false);
+  useEffect(() => { if (!play) setFrame(false); }, [play]);
+  const poster = { ...props, style: [StyleSheet.absoluteFill, { opacity: play && frame ? 0 : 1 }] } as AssetlibImageProps<R>;
+  return (
+    <View style={[{ overflow: 'hidden' }, style as StyleProp<ViewStyle>]}>
+      {play && <LoopingClip uri={clip!.media.uri} contentFit={videoFit(contentFit)} onFirstFrame={() => setFrame(true)} onFailure={() => { setFailed(request); setClip(null); }} />}
+      <AssetlibImage<R> {...poster} />
+    </View>
+  );
+}