@shopify/react-native-skia 1.2.2 → 1.3.0

package/src/external/reanimated/useVideo.ts

@@ -0,0 +1,115 @@
+import {
+  runOnUI,
+  useSharedValue,
+  type FrameInfo,
+  type SharedValue,
+} from "react-native-reanimated";
+import { useCallback, useEffect, useMemo } from "react";
+
+import { Skia } from "../../skia/Skia";
+import type { SkImage } from "../../skia/types";
+import { Platform } from "../../Platform";
+
+import Rea from "./ReanimatedProxy";
+
+type Animated<T> = SharedValue<T> | T;
+
+export interface PlaybackOptions {
+  playbackSpeed: Animated<number>;
+  looping: Animated<boolean>;
+  paused: Animated<boolean>;
+}
+
+const defaultOptions = {
+  playbackSpeed: 1,
+  looping: true,
+  paused: false,
+};
+
+const useOption = <T>(value: Animated<T>) => {
+  "worklet";
+  // TODO: only create defaultValue is needed (via makeMutable)
+  const defaultValue = useSharedValue(
+    Rea.isSharedValue(value) ? value.value : value
+  );
+  return Rea.isSharedValue(value) ? value : defaultValue;
+};
+
+export const useVideo = (
+  source: string | null,
+  userOptions?: Partial<PlaybackOptions>
+) => {
+  const video = useMemo(() => (source ? Skia.Video(source) : null), [source]);
+  const isPaused = useOption(userOptions?.paused ?? defaultOptions.paused);
+  const looping = useOption(userOptions?.looping ?? defaultOptions.looping);
+  const playbackSpeed = useOption(
+    userOptions?.playbackSpeed ?? defaultOptions.playbackSpeed
+  );
+  const currentFrame = Rea.useSharedValue<null | SkImage>(null);
+  const lastTimestamp = Rea.useSharedValue(-1);
+  const startTimestamp = Rea.useSharedValue(-1);
+
+  const framerate = useMemo(() => (video ? video.framerate() : -1), [video]);
+  const duration = useMemo(() => (video ? video.duration() : -1), [video]);
+  const frameDuration = useMemo(
+    () => (framerate > 0 ? 1000 / framerate : -1),
+    [framerate]
+  );
+  const disposeVideo = useCallback(() => {
+    "worklet";
+    video?.dispose();
+  }, [video]);
+
+  Rea.useFrameCallback((frameInfo: FrameInfo) => {
+    if (!video) {
+      return;
+    }
+    if (isPaused.value && lastTimestamp.value !== -1) {
+      return;
+    }
+    const { timestamp } = frameInfo;
+
+    // Initialize start timestamp
+    if (startTimestamp.value === -1) {
+      startTimestamp.value = timestamp;
+    }
+
+    // Calculate the current time in the video
+    const currentTimestamp = timestamp - startTimestamp.value;
+
+    // Handle looping
+    if (currentTimestamp > duration && looping.value) {
+      video.seek(0);
+      startTimestamp.value = timestamp;
+    }
+
+    // Update frame only if the elapsed time since last update is greater than the frame duration
+    const currentFrameDuration = frameDuration / playbackSpeed.value;
+    if (
+      lastTimestamp.value === -1 ||
+      timestamp - lastTimestamp.value >= currentFrameDuration
+    ) {
+      const img = video.nextImage();
+      if (img) {
+        if (currentFrame.value) {
+          currentFrame.value.dispose();
+        }
+        if (Platform.OS === "android") {
+          currentFrame.value = img.makeNonTextureImage();
+        } else {
+          currentFrame.value = img;
+        }
+      }
+      lastTimestamp.value = timestamp;
+    }
+  });
+
+  useEffect(() => {
+    return () => {
+      // TODO: should video simply be a shared value instead?
+      runOnUI(disposeVideo)();
+    };
+  }, [disposeVideo, video]);
+
+  return currentFrame;
+};

package/src/mock/index.ts

@@ -46,5 +46,6 @@ export const Mock = (CanvasKit: CanvasKit) => {
     useTypeface: () => null,
     useImage: () => null,
     useSVG: () => null,
+    useVideo: () => null,
   };
 };

package/src/skia/types/Image/ImageFactory.ts

@@ -54,7 +54,7 @@ export interface ImageFactory {
 
   /**
    * Return an Image backed by a given native buffer.
-   * The platform buffer must be a valid owning reference.
+   * The native buffer must be a valid owning reference.
    *
    * For instance, this API is used by
    * [react-native-vision-camera](https://github.com/mrousavy/react-native-vision-camera)
@@ -62,9 +62,9 @@ export interface ImageFactory {
    *
    * - On Android; This is an `AHardwareBuffer*`
    * - On iOS, this is a `CVPixelBufferRef`
-   * @param nativeBuffer A strong `uintptr_t` pointer to the native platform buffer
+   * @param nativeBuffer A strong `uintptr_t` pointer to the native buffer
    * @throws Throws an error if the Image could not be created, for example when the given
-   * platform buffer is invalid.
+   * native buffer is invalid.
    */
   MakeImageFromNativeBuffer: (nativeBuffer: NativeBuffer) => SkImage;
 

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

@@ -32,7 +32,7 @@ export interface NativeBufferFactory {
    */
   MakeFromImage: (image: SkImage) => NativeBuffer;
   /**
-   * Release a platform buffer that was created with `MakeFromImage`.
+   * Release a native buffer that was created with `MakeFromImage`.
    */
-  Release: (platformBuffer: NativeBuffer) => void;
+  Release: (nativeBuffer: NativeBuffer) => void;
 }

package/src/skia/types/Skia.ts

@@ -30,6 +30,7 @@ import type { Color, SkColor } from "./Color";
 import type { TypefaceFontProviderFactory } from "./Paragraph/TypefaceFontProviderFactory";
 import type { AnimatedImageFactory } from "./AnimatedImage";
 import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
+import type { Video } from "./Video";
 import type { NativeBufferFactory } from "./NativeBuffer";
 
 /**
@@ -95,5 +96,6 @@ export interface Skia {
   TextBlob: TextBlobFactory;
   Surface: SurfaceFactory;
   ParagraphBuilder: ParagraphBuilderFactory;
+  Video: (url: string) => Video;
   NativeBuffer: NativeBufferFactory;
 }

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

@@ -0,0 +1,9 @@
+import type { SkImage } from "../Image";
+import type { SkJSIInstance } from "../JsiInstance";
+
+export interface Video extends SkJSIInstance<"Video"> {
+  duration(): number;
+  framerate(): number;
+  nextImage(): SkImage | null;
+  seek(time: number): void;
+}

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

@@ -0,0 +1 @@
+export * from "./Video";

package/src/skia/web/JsiSkNativeBufferFactory.ts

@@ -29,7 +29,7 @@ export class JsiSkNativeBufferFactory
     return canvas;
   }
 
-  Release(_platformBuffer: NativeBuffer) {
+  Release(_nativeBuffer: NativeBuffer) {
     // it's a noop on Web
   }
 }

package/src/skia/web/JsiSkia.ts

@@ -127,4 +127,7 @@ 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");
+  },
 });