@shopify/react-native-skia 1.3.1 → 1.3.3

package/lib/typescript/src/renderer/components/shapes/FitBox.d.ts

@@ -1,21 +1,13 @@
 import type { ReactNode } from "react";
 import React from "react";
 import type { Fit } from "../../../dom/nodes";
-import type { SkRect } from "../../../skia/types";
+import type { SkRect, Transforms3d } from "../../../skia/types";
 interface FitProps {
     fit?: Fit;
     src: SkRect;
     dst: SkRect;
     children: ReactNode | ReactNode[];
 }
-export declare const fitbox: (fit: Fit, src: SkRect, dst: SkRect) => [{
-    translateX: number;
-}, {
-    translateY: number;
-}, {
-    scaleX: number;
-}, {
-    scaleY: number;
-}];
+export declare const fitbox: (fit: Fit, src: SkRect, dst: SkRect, rotation?: 0 | 90 | 180 | 270) => Transforms3d;
 export declare const FitBox: ({ fit, src, dst, children }: FitProps) => React.JSX.Element;
 export {};

package/lib/typescript/src/skia/types/Video/Video.d.ts

@@ -1,8 +1,17 @@
 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;
+    rotation(): VideoRotation;
+    size(): {
+        width: number;
+        height: number;
+    };
+    pause(): void;
+    play(): void;
+    setVolume(volume: number): void;
 }

package/lib/typescript/src/skia/types/index.d.ts

@@ -30,3 +30,4 @@ export * from "./Size";
 export * from "./Paragraph";
 export * from "./Matrix4";
 export * from "./NativeBuffer";
+export * from "./Video";

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/dom/nodes/datatypes/Fitting.ts

@@ -7,7 +7,10 @@ export interface Size {
   height: number;
 }
 
-export const size = (width = 0, height = 0) => ({ width, height });
+export const size = (width = 0, height = 0) => {
+  "worklet";
+  return { width, height };
+};
 
 export const rect2rect = (
   src: SkRect,
@@ -18,6 +21,7 @@ export const rect2rect = (
   { scaleX: number },
   { scaleY: number }
 ] => {
+  "worklet";
   const scaleX = dst.width / src.width;
   const scaleY = dst.height / src.height;
   const translateX = dst.x - src.x * scaleX;
@@ -25,30 +29,11 @@ export const rect2rect = (
   return [{ translateX }, { translateY }, { scaleX }, { scaleY }];
 };
 
-export const fitRects = (
-  fit: Fit,
-  rect: SkRect,
-  { x, y, width, height }: SkRect
-) => {
-  const sizes = applyBoxFit(
-    fit,
-    { width: rect.width, height: rect.height },
-    { width, height }
-  );
-  const src = inscribe(sizes.src, rect);
-  const dst = inscribe(sizes.dst, {
-    x,
-    y,
-    width,
-    height,
-  });
-  return { src, dst };
-};
-
 const inscribe = (
   { width, height }: Size,
   rect: { x: number; y: number; width: number; height: number }
 ) => {
+  "worklet";
   const halfWidthDelta = (rect.width - width) / 2.0;
   const halfHeightDelta = (rect.height - height) / 2.0;
   return {
@@ -60,6 +45,7 @@ const inscribe = (
 };
 
 const applyBoxFit = (fit: Fit, input: Size, output: Size) => {
+  "worklet";
   let src = size(),
     dst = size();
   if (
@@ -122,3 +108,24 @@ const applyBoxFit = (fit: Fit, input: Size, output: Size) => {
   }
   return { src, dst };
 };
+
+export const fitRects = (
+  fit: Fit,
+  rect: SkRect,
+  { x, y, width, height }: SkRect
+) => {
+  "worklet";
+  const sizes = applyBoxFit(
+    fit,
+    { width: rect.width, height: rect.height },
+    { width, height }
+  );
+  const src = inscribe(sizes.src, rect);
+  const dst = inscribe(sizes.dst, {
+    x,
+    y,
+    width,
+    height,
+  });
+  return { src, dst };
+};

package/src/external/reanimated/useVideo.ts

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

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/Video/Video.ts

@@ -1,9 +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;
+  rotation(): VideoRotation;
+  size(): { width: number; height: number };
+  pause(): void;
+  play(): void;
+  setVolume(volume: number): void;
 }

package/src/skia/types/index.ts

@@ -30,3 +30,4 @@ export * from "./Size";
 export * from "./Paragraph";
 export * from "./Matrix4";
 export * from "./NativeBuffer";
+export * from "./Video";