@shopify/react-native-skia 1.3.2 → 1.3.4

package/src/external/reanimated/useVideo.ts

@@ -1,22 +1,52 @@
-import { type FrameInfo } from "react-native-reanimated";
+import type { SharedValue, FrameInfo } from "react-native-reanimated";
 import { useEffect, useMemo } from "react";
 
-import { Skia } from "../../skia/Skia";
 import type { SkImage, Video } from "../../skia/types";
+import { Platform } from "../../Platform";
 
 import Rea from "./ReanimatedProxy";
-import {
-  processVideoState,
-  type Animated,
-  type PlaybackOptions,
-} from "./video";
+import { useVideoLoading } from "./useVideoLoading";
+
+type Animated<T> = SharedValue<T> | T;
+
+interface PlaybackOptions {
+  looping: Animated<boolean>;
+  paused: Animated<boolean>;
+  seek: Animated<number | null>;
+  volume: Animated<number>;
+}
+
+const copyFrameOnAndroid = (currentFrame: SharedValue<SkImage | null>) => {
+  "worklet";
+  // on android we need to copy the texture before it's invalidated
+  if (Platform.OS === "android") {
+    const tex = currentFrame.value;
+    if (tex) {
+      currentFrame.value = tex.makeNonTextureImage();
+      tex.dispose();
+    }
+  }
+};
+
+const setFrame = (video: Video, currentFrame: SharedValue<SkImage | null>) => {
+  "worklet";
+  const img = video.nextImage();
+  if (img) {
+    if (currentFrame.value) {
+      currentFrame.value.dispose();
+    }
+    currentFrame.value = img;
+  } else {
+    copyFrameOnAndroid(currentFrame);
+  }
+};
 
 const defaultOptions = {
-  playbackSpeed: 1,
   looping: true,
   paused: false,
   seek: null,
   currentTime: 0,
+  volume: 0,
 };
 
 const useOption = <T>(value: Animated<T>) => {
@@ -37,38 +67,78 @@ export const useVideo = (
   source: string | null,
   userOptions?: Partial<PlaybackOptions>
 ) => {
-  const video = useMemo(() => (source ? Skia.Video(source) : null), [source]);
+  const video = useVideoLoading(source);
   const isPaused = useOption(userOptions?.paused ?? defaultOptions.paused);
   const looping = useOption(userOptions?.looping ?? defaultOptions.looping);
   const seek = useOption(userOptions?.seek ?? defaultOptions.seek);
-  const playbackSpeed = useOption(
-    userOptions?.playbackSpeed ?? defaultOptions.playbackSpeed
-  );
+  const volume = useOption(userOptions?.volume ?? defaultOptions.volume);
   const currentFrame = Rea.useSharedValue<null | SkImage>(null);
   const currentTime = Rea.useSharedValue(0);
   const lastTimestamp = Rea.useSharedValue(-1);
   const duration = useMemo(() => video?.duration() ?? 0, [video]);
-  const framerate = useMemo(() => video?.framerate() ?? 0, [video]);
-  const rotationInDegrees = useMemo(
-    () => video?.getRotationInDegrees() ?? 0,
+  const framerate = useMemo(
+    () => (Platform.OS === "web" ? -1 : video?.framerate() ?? 0),
     [video]
   );
+  const size = useMemo(() => video?.size() ?? { width: 0, height: 0 }, [video]);
+  const rotation = useMemo(() => video?.rotation() ?? 0, [video]);
+  const frameDuration = 1000 / framerate;
+  const currentFrameDuration = Math.floor(frameDuration);
+  Rea.useAnimatedReaction(
+    () => isPaused.value,
+    (paused) => {
+      if (paused) {
+        video?.pause();
+      } else {
+        lastTimestamp.value = -1;
+        video?.play();
+      }
+    }
+  );
+  Rea.useAnimatedReaction(
+    () => seek.value,
+    (value) => {
+      if (value !== null) {
+        copyFrameOnAndroid(currentFrame);
+        video?.seek(value);
+        currentTime.value = value;
+        seek.value = null;
+      }
+    }
+  );
+  Rea.useAnimatedReaction(
+    () => volume.value,
+    (value) => {
+      video?.setVolume(value);
+    }
+  );
   Rea.useFrameCallback((frameInfo: FrameInfo) => {
-    processVideoState(
-      video,
-      duration,
-      framerate,
-      frameInfo.timestamp,
-      {
-        paused: isPaused.value,
-        looping: looping.value,
-        playbackSpeed: playbackSpeed.value,
-      },
-      currentTime,
-      currentFrame,
-      lastTimestamp,
-      seek
-    );
+    "worklet";
+    if (!video) {
+      return;
+    }
+    if (isPaused.value) {
+      return;
+    }
+    const currentTimestamp = frameInfo.timestamp;
+    if (lastTimestamp.value === -1) {
+      lastTimestamp.value = currentTimestamp;
+    }
+    const delta = currentTimestamp - lastTimestamp.value;
+
+    const isOver = currentTime.value + delta > duration;
+    if (isOver && looping.value) {
+      seek.value = 0;
+      currentTime.value = seek.value;
+      lastTimestamp.value = currentTimestamp;
+    }
+    // On Web the framerate is uknown.
+    // This could be optimized by using requestVideoFrameCallback (Chrome only)
+    if ((delta >= currentFrameDuration && !isOver) || Platform.OS === "web") {
+      setFrame(video, currentFrame);
+      currentTime.value += delta;
+      lastTimestamp.value = currentTimestamp;
+    }
   });
 
   useEffect(() => {
@@ -78,5 +148,12 @@ export const useVideo = (
     };
   }, [video]);
 
-  return { currentFrame, currentTime, duration, framerate, rotationInDegrees };
+  return {
+    currentFrame,
+    currentTime,
+    duration,
+    framerate,
+    rotation,
+    size,
+  };
 };

package/src/external/reanimated/useVideoLoading.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import {
+  createWorkletRuntime,
+  runOnJS,
+  runOnRuntime,
+} from "react-native-reanimated";
+
+import type { Video } from "../../skia/types";
+import { Skia } from "../../skia";
+
+const runtime = createWorkletRuntime("video-metadata-runtime");
+
+type VideoSource = string | null;
+
+export const useVideoLoading = (source: VideoSource) => {
+  const [video, setVideo] = useState<Video | null>(null);
+  const cb = (src: string) => {
+    "worklet";
+    const vid = Skia.Video(src) as Video;
+    runOnJS(setVideo)(vid);
+  };
+  useEffect(() => {
+    if (source) {
+      runOnRuntime(runtime, cb)(source);
+    }
+  }, [source]);
+  return video;
+};

package/src/external/reanimated/useVideoLoading.web.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+import type { Video } from "../../skia/types";
+import { Skia } from "../../skia";
+
+type VideoSource = string | null;
+
+export const useVideoLoading = (source: VideoSource) => {
+  const [video, setVideo] = useState<Video | null>(null);
+  useEffect(() => {
+    if (source) {
+      const vid = Skia.Video(source) as Promise<Video>;
+      vid.then((v) => setVideo(v));
+    }
+  }, [source]);
+  return video;
+};

package/src/renderer/components/shapes/FitBox.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 
 import type { Fit } from "../../../dom/nodes";
 import { fitRects, rect2rect } from "../../../dom/nodes";
-import type { SkRect } from "../../../skia/types";
+import type { SkRect, Transforms3d } from "../../../skia/types";
 import { Group } from "../Group";
 
 interface FitProps {
@@ -13,9 +13,43 @@ interface FitProps {
   children: ReactNode | ReactNode[];
 }
 
-export const fitbox = (fit: Fit, src: SkRect, dst: SkRect) => {
-  const rects = fitRects(fit, src, dst);
-  return rect2rect(rects.src, rects.dst);
+export const fitbox = (
+  fit: Fit,
+  src: SkRect,
+  dst: SkRect,
+  rotation: 0 | 90 | 180 | 270 = 0
+) => {
+  "worklet";
+  const rects = fitRects(
+    fit,
+    rotation === 90 || rotation === 270
+      ? { x: 0, y: 0, width: src.height, height: src.width }
+      : src,
+    dst
+  );
+  const result = rect2rect(rects.src, rects.dst);
+  if (rotation === 90) {
+    return [
+      ...result,
+      { translate: [src.height, 0] },
+      { rotate: Math.PI / 2 },
+    ] as Transforms3d;
+  }
+  if (rotation === 180) {
+    return [
+      ...result,
+      { translate: [src.width, src.height] },
+      { rotate: Math.PI },
+    ] as Transforms3d;
+  }
+  if (rotation === 270) {
+    return [
+      ...result,
+      { translate: [0, src.width] },
+      { rotate: -Math.PI / 2 },
+    ] as Transforms3d;
+  }
+  return result;
 };
 
 export const FitBox = ({ fit = "contain", src, dst, children }: FitProps) => {

package/src/skia/core/Matrix.ts

@@ -2,5 +2,7 @@ import { Skia } from "../Skia";
 import type { Transforms3d } from "../types";
 import { processTransform } from "../types";
 
-export const processTransform2d = (transforms: Transforms3d) =>
-  processTransform(Skia.Matrix(), transforms);
+export const processTransform2d = (transforms: Transforms3d) => {
+  "worklet";
+  return processTransform(Skia.Matrix(), transforms);
+};

package/src/skia/types/Matrix.ts

@@ -30,6 +30,7 @@ export const processTransform = <T extends SkMatrix | SkCanvas>(
   m: T,
   transforms: Transforms3d
 ) => {
+  "worklet";
   const m3 = processTransform3d(transforms);
   m.concat(m3);
   return m;

package/src/skia/types/NativeBuffer/NativeBufferFactory.ts

@@ -1,7 +1,14 @@
 import type { SkImage } from "../Image";
 
+export abstract class CanvasKitWebGLBuffer {}
+
 export type NativeBuffer<
-  T extends bigint | ArrayBuffer | CanvasImageSource | unknown = unknown
+  T extends
+    | bigint
+    | ArrayBuffer
+    | CanvasImageSource
+    | CanvasKitWebGLBuffer
+    | unknown = unknown
 > = T;
 
 export type NativeBufferAddr = NativeBuffer<bigint>;
@@ -20,7 +27,8 @@ export const isNativeBufferWeb = (
   buffer instanceof OffscreenCanvas ||
   buffer instanceof VideoFrame ||
   buffer instanceof HTMLImageElement ||
-  buffer instanceof SVGImageElement;
+  buffer instanceof SVGImageElement ||
+  buffer instanceof CanvasKitWebGLBuffer;
 
 export const isNativeBufferNode = (
   buffer: NativeBuffer

package/src/skia/types/Skia.ts

@@ -96,6 +96,6 @@ export interface Skia {
   TextBlob: TextBlobFactory;
   Surface: SurfaceFactory;
   ParagraphBuilder: ParagraphBuilderFactory;
-  Video: (url: string) => Video;
+  Video: (url: string) => Promise<Video> | Video;
   NativeBuffer: NativeBufferFactory;
 }

package/src/skia/types/Video/Video.ts

@@ -1,10 +1,16 @@
 import type { SkImage } from "../Image";
 import type { SkJSIInstance } from "../JsiInstance";
 
+export type VideoRotation = 0 | 90 | 180 | 270;
+
 export interface Video extends SkJSIInstance<"Video"> {
   duration(): number;
   framerate(): number;
   nextImage(): SkImage | null;
   seek(time: number): void;
-  getRotationInDegrees(): number;
+  rotation(): VideoRotation;
+  size(): { width: number; height: number };
+  pause(): void;
+  play(): void;
+  setVolume(volume: number): void;
 }

package/src/skia/web/CanvasKitWebGLBufferImpl.ts

@@ -0,0 +1,22 @@
+import type { Surface, TextureSource, Image } from "canvaskit-wasm";
+
+import { CanvasKitWebGLBuffer } from "../types";
+
+export class CanvasKitWebGLBufferImpl extends CanvasKitWebGLBuffer {
+  public image: Image | null = null;
+
+  constructor(public surface: Surface, private source: TextureSource) {
+    super();
+  }
+
+  toImage() {
+    if (this.image === null) {
+      this.image = this.surface.makeImageFromTextureSource(this.source);
+    }
+    if (this.image === null) {
+      throw new Error("Failed to create image from texture source");
+    }
+    this.surface.updateTextureFromSource(this.image, this.source);
+    return this.image;
+  }
+}

package/src/skia/web/JsiSkImageFactory.ts

@@ -1,6 +1,6 @@
 import type { CanvasKit, Image } from "canvaskit-wasm";
 
-import { isNativeBufferWeb } from "../types";
+import { CanvasKitWebGLBuffer, isNativeBufferWeb } from "../types";
 import type {
   SkData,
   ImageInfo,
@@ -13,6 +13,7 @@ import { Host, getEnum } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
 import { JsiSkData } from "./JsiSkData";
 import type { JsiSkSurface } from "./JsiSkSurface";
+import type { CanvasKitWebGLBufferImpl } from "./CanvasKitWebGLBufferImpl";
 
 export class JsiSkImageFactory extends Host implements ImageFactory {
   constructor(CanvasKit: CanvasKit) {
@@ -35,8 +36,20 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
       throw new Error("Invalid NativeBuffer");
     }
     if (!surface) {
-      // TODO: this is way to slow
-      const img = this.CanvasKit.MakeImageFromCanvasImageSource(buffer);
+      let img: Image;
+      if (
+        buffer instanceof HTMLImageElement ||
+        buffer instanceof HTMLVideoElement ||
+        buffer instanceof ImageBitmap
+      ) {
+        img = this.CanvasKit.MakeLazyImageFromTextureSource(buffer);
+      } else if (buffer instanceof CanvasKitWebGLBuffer) {
+        img = (
+          buffer as CanvasKitWebGLBuffer as CanvasKitWebGLBufferImpl
+        ).toImage();
+      } else {
+        img = this.CanvasKit.MakeImageFromCanvasImageSource(buffer);
+      }
       return new JsiSkImage(this.CanvasKit, img);
     } else if (!image) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/skia/web/JsiSkia.ts

@@ -42,6 +42,7 @@ import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
 import { JsiSkAnimatedImageFactory } from "./JsiSkAnimatedImageFactory";
 import { JsiSkParagraphBuilderFactory } from "./JsiSkParagraphBuilderFactory";
 import { JsiSkNativeBufferFactory } from "./JsiSkNativeBufferFactory";
+import { createVideo } from "./JsiVideo";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -127,7 +128,5 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   FontMgr: new JsiSkFontMgrFactory(CanvasKit),
   ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),
   NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),
-  Video: (_localUri: string) => {
-    throw new Error("Not implemented on React Native Web");
-  },
+  Video: createVideo.bind(null, CanvasKit),
 });

package/src/skia/web/JsiVideo.ts

@@ -0,0 +1,96 @@
+import type { CanvasKit, Surface } from "canvaskit-wasm";
+
+import type { CanvasKitWebGLBuffer, Video, ImageFactory } from "../types";
+
+import { CanvasKitWebGLBufferImpl } from "./CanvasKitWebGLBufferImpl";
+import { JsiSkImageFactory } from "./JsiSkImageFactory";
+
+export const createVideo = async (
+  CanvasKit: CanvasKit,
+  url: string
+): Promise<Video> => {
+  const video = document.createElement("video");
+  return new Promise((resolve, reject) => {
+    video.src = url;
+    video.style.display = "none";
+    video.crossOrigin = "anonymous";
+    video.volume = 0;
+    video.addEventListener("loadedmetadata", () => {
+      document.body.appendChild(video);
+      resolve(new JsiVideo(new JsiSkImageFactory(CanvasKit), video));
+    });
+    video.addEventListener("error", () => {
+      reject(new Error(`Failed to load video from URL: ${url}`));
+    });
+  });
+};
+
+export class JsiVideo implements Video {
+  __typename__ = "Video" as const;
+
+  private webglBuffer: CanvasKitWebGLBuffer | null = null;
+
+  constructor(
+    private ImageFactory: ImageFactory,
+    private videoElement: HTMLVideoElement
+  ) {
+    document.body.appendChild(this.videoElement);
+  }
+
+  duration() {
+    return this.videoElement.duration * 1000;
+  }
+
+  framerate(): number {
+    throw new Error("Video.frame is not available on React Native Web");
+  }
+
+  setSurface(surface: Surface) {
+    // If we have the surface, we can use the WebGL buffer which is slightly faster
+    // This is because WebGL cannot be shared across contextes.
+    // This can be removed with WebGPU
+    this.webglBuffer = new CanvasKitWebGLBufferImpl(surface, this.videoElement);
+  }
+
+  nextImage() {
+    return this.ImageFactory.MakeImageFromNativeBuffer(
+      this.webglBuffer ? this.webglBuffer : this.videoElement
+    );
+  }
+
+  seek(time: number) {
+    if (isNaN(time)) {
+      throw new Error(`Invalid time: ${time}`);
+    }
+    this.videoElement.currentTime = time / 1000;
+  }
+
+  rotation() {
+    return 0 as const;
+  }
+
+  size() {
+    return {
+      width: this.videoElement.videoWidth,
+      height: this.videoElement.videoHeight,
+    };
+  }
+
+  pause() {
+    this.videoElement.pause();
+  }
+
+  play() {
+    this.videoElement.play();
+  }
+
+  setVolume(volume: number) {
+    this.videoElement.volume = volume;
+  }
+
+  dispose() {
+    if (this.videoElement.parentNode) {
+      this.videoElement.parentNode.removeChild(this.videoElement);
+    }
+  }
+}

package/src/views/SkiaDomView.tsx

@@ -26,6 +26,10 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
     }
     if (onTouch) {
       assertSkiaViewApi();
+      console.warn(
+        `The onTouch property is deprecated and will be removed in the next Skia release.
+See: https://shopify.github.io/react-native-skia/docs/animations/gestures`
+      );
       SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
     }
     if (onSize) {

package/src/views/SkiaDomView.web.tsx

@@ -12,6 +12,10 @@ export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
 
   protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {
     if (this.props.onTouch) {
+      console.warn(
+        `The onTouch property is deprecated and will be removed in the next Skia release.
+See: https://shopify.github.io/react-native-skia/docs/animations/gestures`
+      );
       this.props.onTouch([touches]);
     }
     if (this.props.onSize) {

package/src/views/SkiaJSDomView.tsx

@@ -29,6 +29,10 @@ export class SkiaJSDomView extends React.Component<
     }
     if (onTouch) {
       assertSkiaViewApi();
+      console.warn(
+        `The onTouch property is deprecated and will be removed in the next Skia release.
+See: https://shopify.github.io/react-native-skia/docs/animations/gestures`
+      );
       SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
     }
     if (onSize) {

package/lib/commonjs/external/reanimated/video.d.ts

@@ -1,16 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-import type { SkImage, Video } from "../../skia/types";
-export type Animated<T> = SharedValue<T> | T;
-export interface PlaybackOptions {
-    playbackSpeed: Animated<number>;
-    looping: Animated<boolean>;
-    paused: Animated<boolean>;
-    seek: Animated<number | null>;
-}
-type Materialized<T> = {
-    [K in keyof T]: T[K] extends Animated<infer U> ? U : T[K];
-};
-export type MaterializedPlaybackOptions = Materialized<Omit<PlaybackOptions, "seek">>;
-export declare const setFrame: (video: Video, currentFrame: SharedValue<SkImage | null>) => void;
-export declare const processVideoState: (video: Video | null, duration: number, framerate: number, currentTimestamp: number, options: Materialized<Omit<PlaybackOptions, "seek">>, currentTime: SharedValue<number>, currentFrame: SharedValue<SkImage | null>, lastTimestamp: SharedValue<number>, seek: SharedValue<number | null>) => void;
-export {};

package/lib/commonjs/external/reanimated/video.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.setFrame = exports.processVideoState = void 0;
-var _Platform = require("../../Platform");
-const setFrame = (video, currentFrame) => {
-  "worklet";
-
-  const img = video.nextImage();
-  if (img) {
-    if (currentFrame.value) {
-      currentFrame.value.dispose();
-    }
-    if (_Platform.Platform.OS === "android") {
-      currentFrame.value = img.makeNonTextureImage();
-    } else {
-      currentFrame.value = img;
-    }
-  }
-};
-exports.setFrame = setFrame;
-const processVideoState = (video, duration, framerate, currentTimestamp, options, currentTime, currentFrame, lastTimestamp, seek) => {
-  "worklet";
-
-  if (!video) {
-    return;
-  }
-  if (options.paused) {
-    return;
-  }
-  const delta = currentTimestamp - lastTimestamp.value;
-  const frameDuration = 1000 / framerate;
-  const currentFrameDuration = Math.floor(frameDuration / options.playbackSpeed);
-  if (currentTime.value + delta >= duration && options.looping) {
-    seek.value = 0;
-  }
-  if (seek.value !== null) {
-    video.seek(seek.value);
-    currentTime.value = seek.value;
-    setFrame(video, currentFrame);
-    lastTimestamp.value = currentTimestamp;
-    seek.value = null;
-    return;
-  }
-  if (delta >= currentFrameDuration) {
-    setFrame(video, currentFrame);
-    currentTime.value += delta;
-    lastTimestamp.value = currentTimestamp;
-  }
-};
-exports.processVideoState = processVideoState;
-//# sourceMappingURL=video.js.map

package/lib/commonjs/external/reanimated/video.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_Platform","require","setFrame","video","currentFrame","img","nextImage","value","dispose","Platform","OS","makeNonTextureImage","exports","processVideoState","duration","framerate","currentTimestamp","options","currentTime","lastTimestamp","seek","paused","delta","frameDuration","currentFrameDuration","Math","floor","playbackSpeed","looping"],"sources":["video.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type { SkImage, Video } from \"../../skia/types\";\nimport { Platform } from \"../../Platform\";\n\nexport type Animated<T> = SharedValue<T> | T;\n\nexport interface PlaybackOptions {\n  playbackSpeed: Animated<number>;\n  looping: Animated<boolean>;\n  paused: Animated<boolean>;\n  seek: Animated<number | null>;\n}\n\ntype Materialized<T> = {\n  [K in keyof T]: T[K] extends Animated<infer U> ? U : T[K];\n};\n\nexport type MaterializedPlaybackOptions = Materialized<\n  Omit<PlaybackOptions, \"seek\">\n>;\n\nexport const setFrame = (\n  video: Video,\n  currentFrame: SharedValue<SkImage | null>\n) => {\n  \"worklet\";\n  const img = video.nextImage();\n  if (img) {\n    if (currentFrame.value) {\n      currentFrame.value.dispose();\n    }\n    if (Platform.OS === \"android\") {\n      currentFrame.value = img.makeNonTextureImage();\n    } else {\n      currentFrame.value = img;\n    }\n  }\n};\n\nexport const processVideoState = (\n  video: Video | null,\n  duration: number,\n  framerate: number,\n  currentTimestamp: number,\n  options: Materialized<Omit<PlaybackOptions, \"seek\">>,\n  currentTime: SharedValue<number>,\n  currentFrame: SharedValue<SkImage | null>,\n  lastTimestamp: SharedValue<number>,\n  seek: SharedValue<number | null>\n) => {\n  \"worklet\";\n  if (!video) {\n    return;\n  }\n  if (options.paused) {\n    return;\n  }\n  const delta = currentTimestamp - lastTimestamp.value;\n\n  const frameDuration = 1000 / framerate;\n  const currentFrameDuration = Math.floor(\n    frameDuration / options.playbackSpeed\n  );\n  if (currentTime.value + delta >= duration && options.looping) {\n    seek.value = 0;\n  }\n  if (seek.value !== null) {\n    video.seek(seek.value);\n    currentTime.value = seek.value;\n    setFrame(video, currentFrame);\n    lastTimestamp.value = currentTimestamp;\n    seek.value = null;\n    return;\n  }\n\n  if (delta >= currentFrameDuration) {\n    setFrame(video, currentFrame);\n    currentTime.value += delta;\n    lastTimestamp.value = currentTimestamp;\n  }\n};\n"],"mappings":";;;;;;AAGA,IAAAA,SAAA,GAAAC,OAAA;AAmBO,MAAMC,QAAQ,GAAGA,CACtBC,KAAY,EACZC,YAAyC,KACtC;EACH,SAAS;;EACT,MAAMC,GAAG,GAAGF,KAAK,CAACG,SAAS,CAAC,CAAC;EAC7B,IAAID,GAAG,EAAE;IACP,IAAID,YAAY,CAACG,KAAK,EAAE;MACtBH,YAAY,CAACG,KAAK,CAACC,OAAO,CAAC,CAAC;IAC9B;IACA,IAAIC,kBAAQ,CAACC,EAAE,KAAK,SAAS,EAAE;MAC7BN,YAAY,CAACG,KAAK,GAAGF,GAAG,CAACM,mBAAmB,CAAC,CAAC;IAChD,CAAC,MAAM;MACLP,YAAY,CAACG,KAAK,GAAGF,GAAG;IAC1B;EACF;AACF,CAAC;AAACO,OAAA,CAAAV,QAAA,GAAAA,QAAA;AAEK,MAAMW,iBAAiB,GAAGA,CAC/BV,KAAmB,EACnBW,QAAgB,EAChBC,SAAiB,EACjBC,gBAAwB,EACxBC,OAAoD,EACpDC,WAAgC,EAChCd,YAAyC,EACzCe,aAAkC,EAClCC,IAAgC,KAC7B;EACH,SAAS;;EACT,IAAI,CAACjB,KAAK,EAAE;IACV;EACF;EACA,IAAIc,OAAO,CAACI,MAAM,EAAE;IAClB;EACF;EACA,MAAMC,KAAK,GAAGN,gBAAgB,GAAGG,aAAa,CAACZ,KAAK;EAEpD,MAAMgB,aAAa,GAAG,IAAI,GAAGR,SAAS;EACtC,MAAMS,oBAAoB,GAAGC,IAAI,CAACC,KAAK,CACrCH,aAAa,GAAGN,OAAO,CAACU,aAC1B,CAAC;EACD,IAAIT,WAAW,CAACX,KAAK,GAAGe,KAAK,IAAIR,QAAQ,IAAIG,OAAO,CAACW,OAAO,EAAE;IAC5DR,IAAI,CAACb,KAAK,GAAG,CAAC;EAChB;EACA,IAAIa,IAAI,CAACb,KAAK,KAAK,IAAI,EAAE;IACvBJ,KAAK,CAACiB,IAAI,CAACA,IAAI,CAACb,KAAK,CAAC;IACtBW,WAAW,CAACX,KAAK,GAAGa,IAAI,CAACb,KAAK;IAC9BL,QAAQ,CAACC,KAAK,EAAEC,YAAY,CAAC;IAC7Be,aAAa,CAACZ,KAAK,GAAGS,gBAAgB;IACtCI,IAAI,CAACb,KAAK,GAAG,IAAI;IACjB;EACF;EAEA,IAAIe,KAAK,IAAIE,oBAAoB,EAAE;IACjCtB,QAAQ,CAACC,KAAK,EAAEC,YAAY,CAAC;IAC7Bc,WAAW,CAACX,KAAK,IAAIe,KAAK;IAC1BH,aAAa,CAACZ,KAAK,GAAGS,gBAAgB;EACxC;AACF,CAAC;AAACJ,OAAA,CAAAC,iBAAA,GAAAA,iBAAA"}

package/lib/module/external/reanimated/video.d.ts

@@ -1,16 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-import type { SkImage, Video } from "../../skia/types";
-export type Animated<T> = SharedValue<T> | T;
-export interface PlaybackOptions {
-    playbackSpeed: Animated<number>;
-    looping: Animated<boolean>;
-    paused: Animated<boolean>;
-    seek: Animated<number | null>;
-}
-type Materialized<T> = {
-    [K in keyof T]: T[K] extends Animated<infer U> ? U : T[K];
-};
-export type MaterializedPlaybackOptions = Materialized<Omit<PlaybackOptions, "seek">>;
-export declare const setFrame: (video: Video, currentFrame: SharedValue<SkImage | null>) => void;
-export declare const processVideoState: (video: Video | null, duration: number, framerate: number, currentTimestamp: number, options: Materialized<Omit<PlaybackOptions, "seek">>, currentTime: SharedValue<number>, currentFrame: SharedValue<SkImage | null>, lastTimestamp: SharedValue<number>, seek: SharedValue<number | null>) => void;
-export {};