@shopify/react-native-skia 1.3.2 → 1.3.3

package/lib/module/external/reanimated/useVideo.js

@@ -1,13 +1,28 @@
 import { useEffect, useMemo } from "react";
 import { Skia } from "../../skia/Skia";
+import { Platform } from "../../Platform";
 import Rea from "./ReanimatedProxy";
-import { processVideoState } from "./video";
+const setFrame = (video, currentFrame) => {
+  "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
+  currentTime: 0,
+  volume: 0
 };
 const useOption = value => {
   "worklet";
@@ -22,12 +37,12 @@ const disposeVideo = video => {
   video === null || video === void 0 || video.dispose();
 };
 export const useVideo = (source, userOptions) => {
-  var _userOptions$paused, _userOptions$looping, _userOptions$seek, _userOptions$playback;
+  var _userOptions$paused, _userOptions$looping, _userOptions$seek, _userOptions$volume;
   const video = useMemo(() => source ? Skia.Video(source) : null, [source]);
   const isPaused = useOption((_userOptions$paused = userOptions === null || userOptions === void 0 ? void 0 : userOptions.paused) !== null && _userOptions$paused !== void 0 ? _userOptions$paused : defaultOptions.paused);
   const looping = useOption((_userOptions$looping = userOptions === null || userOptions === void 0 ? void 0 : userOptions.looping) !== null && _userOptions$looping !== void 0 ? _userOptions$looping : defaultOptions.looping);
   const seek = useOption((_userOptions$seek = userOptions === null || userOptions === void 0 ? void 0 : userOptions.seek) !== null && _userOptions$seek !== void 0 ? _userOptions$seek : defaultOptions.seek);
-  const playbackSpeed = useOption((_userOptions$playback = userOptions === null || userOptions === void 0 ? void 0 : userOptions.playbackSpeed) !== null && _userOptions$playback !== void 0 ? _userOptions$playback : defaultOptions.playbackSpeed);
+  const volume = useOption((_userOptions$volume = userOptions === null || userOptions === void 0 ? void 0 : userOptions.volume) !== null && _userOptions$volume !== void 0 ? _userOptions$volume : defaultOptions.volume);
   const currentFrame = Rea.useSharedValue(null);
   const currentTime = Rea.useSharedValue(0);
   const lastTimestamp = Rea.useSharedValue(-1);
@@ -39,16 +54,62 @@ export const useVideo = (source, userOptions) => {
     var _video$framerate;
     return (_video$framerate = video === null || video === void 0 ? void 0 : video.framerate()) !== null && _video$framerate !== void 0 ? _video$framerate : 0;
   }, [video]);
-  const rotationInDegrees = useMemo(() => {
-    var _video$getRotationInD;
-    return (_video$getRotationInD = video === null || video === void 0 ? void 0 : video.getRotationInDegrees()) !== null && _video$getRotationInD !== void 0 ? _video$getRotationInD : 0;
+  const size = useMemo(() => {
+    var _video$size;
+    return (_video$size = video === null || video === void 0 ? void 0 : video.size()) !== null && _video$size !== void 0 ? _video$size : {
+      width: 0,
+      height: 0
+    };
+  }, [video]);
+  const rotation = useMemo(() => {
+    var _video$rotation;
+    return (_video$rotation = video === null || video === void 0 ? void 0 : video.rotation()) !== null && _video$rotation !== void 0 ? _video$rotation : 0;
   }, [video]);
+  const frameDuration = 1000 / framerate;
+  const currentFrameDuration = Math.floor(frameDuration);
+  Rea.useAnimatedReaction(() => isPaused.value, paused => {
+    if (paused) {
+      video === null || video === void 0 || video.pause();
+    } else {
+      lastTimestamp.value = -1;
+      video === null || video === void 0 || video.play();
+    }
+  });
+  Rea.useAnimatedReaction(() => seek.value, value => {
+    if (value !== null) {
+      video === null || video === void 0 || video.seek(value);
+      currentTime.value = value;
+      seek.value = null;
+    }
+  });
+  Rea.useAnimatedReaction(() => volume.value, value => {
+    video === null || video === void 0 || video.setVolume(value);
+  });
   Rea.useFrameCallback(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;
+    }
+    if (delta >= currentFrameDuration && !isOver) {
+      setFrame(video, currentFrame);
+      currentTime.value += delta;
+      lastTimestamp.value = currentTimestamp;
+    }
   });
   useEffect(() => {
     return () => {
@@ -61,7 +122,8 @@ export const useVideo = (source, userOptions) => {
     currentTime,
     duration,
     framerate,
-    rotationInDegrees
+    rotation,
+    size
   };
 };
 //# sourceMappingURL=useVideo.js.map

package/lib/module/external/reanimated/useVideo.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","Skia","Rea","processVideoState","defaultOptions","playbackSpeed","looping","paused","seek","currentTime","useOption","value","defaultValue","useSharedValue","isSharedValue","disposeVideo","video","dispose","useVideo","source","userOptions","_userOptions$paused","_userOptions$looping","_userOptions$seek","_userOptions$playback","Video","isPaused","currentFrame","lastTimestamp","duration","_video$duration","framerate","_video$framerate","rotationInDegrees","_video$getRotationInD","getRotationInDegrees","useFrameCallback","frameInfo","timestamp","runOnUI"],"sources":["useVideo.ts"],"sourcesContent":["import { type FrameInfo } from \"react-native-reanimated\";\nimport { useEffect, useMemo } from \"react\";\n\nimport { Skia } from \"../../skia/Skia\";\nimport type { SkImage, Video } from \"../../skia/types\";\n\nimport Rea from \"./ReanimatedProxy\";\nimport {\n  processVideoState,\n  type Animated,\n  type PlaybackOptions,\n} from \"./video\";\n\nconst defaultOptions = {\n  playbackSpeed: 1,\n  looping: true,\n  paused: false,\n  seek: null,\n  currentTime: 0,\n};\n\nconst useOption = <T>(value: Animated<T>) => {\n  \"worklet\";\n  // TODO: only create defaultValue is needed (via makeMutable)\n  const defaultValue = Rea.useSharedValue(\n    Rea.isSharedValue(value) ? value.value : value\n  );\n  return Rea.isSharedValue(value) ? value : defaultValue;\n};\n\nconst disposeVideo = (video: Video | null) => {\n  \"worklet\";\n  video?.dispose();\n};\n\nexport const useVideo = (\n  source: string | null,\n  userOptions?: Partial<PlaybackOptions>\n) => {\n  const video = useMemo(() => (source ? Skia.Video(source) : null), [source]);\n  const isPaused = useOption(userOptions?.paused ?? defaultOptions.paused);\n  const looping = useOption(userOptions?.looping ?? defaultOptions.looping);\n  const seek = useOption(userOptions?.seek ?? defaultOptions.seek);\n  const playbackSpeed = useOption(\n    userOptions?.playbackSpeed ?? defaultOptions.playbackSpeed\n  );\n  const currentFrame = Rea.useSharedValue<null | SkImage>(null);\n  const currentTime = Rea.useSharedValue(0);\n  const lastTimestamp = Rea.useSharedValue(-1);\n  const duration = useMemo(() => video?.duration() ?? 0, [video]);\n  const framerate = useMemo(() => video?.framerate() ?? 0, [video]);\n  const rotationInDegrees = useMemo(\n    () => video?.getRotationInDegrees() ?? 0,\n    [video]\n  );\n  Rea.useFrameCallback((frameInfo: FrameInfo) => {\n    processVideoState(\n      video,\n      duration,\n      framerate,\n      frameInfo.timestamp,\n      {\n        paused: isPaused.value,\n        looping: looping.value,\n        playbackSpeed: playbackSpeed.value,\n      },\n      currentTime,\n      currentFrame,\n      lastTimestamp,\n      seek\n    );\n  });\n\n  useEffect(() => {\n    return () => {\n      // TODO: should video simply be a shared value instead?\n      Rea.runOnUI(disposeVideo)(video);\n    };\n  }, [video]);\n\n  return { currentFrame, currentTime, duration, framerate, rotationInDegrees };\n};\n"],"mappings":"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"}
+{"version":3,"names":["useEffect","useMemo","Skia","Platform","Rea","setFrame","video","currentFrame","img","nextImage","value","dispose","OS","makeNonTextureImage","defaultOptions","looping","paused","seek","currentTime","volume","useOption","defaultValue","useSharedValue","isSharedValue","disposeVideo","useVideo","source","userOptions","_userOptions$paused","_userOptions$looping","_userOptions$seek","_userOptions$volume","Video","isPaused","lastTimestamp","duration","_video$duration","framerate","_video$framerate","size","_video$size","width","height","rotation","_video$rotation","frameDuration","currentFrameDuration","Math","floor","useAnimatedReaction","pause","play","setVolume","useFrameCallback","frameInfo","currentTimestamp","timestamp","delta","isOver","runOnUI"],"sources":["useVideo.ts"],"sourcesContent":["import type { SharedValue, FrameInfo } from \"react-native-reanimated\";\nimport { useEffect, useMemo } from \"react\";\n\nimport { Skia } from \"../../skia/Skia\";\nimport type { SkImage, Video } from \"../../skia/types\";\nimport { Platform } from \"../../Platform\";\n\nimport Rea from \"./ReanimatedProxy\";\n\ntype Animated<T> = SharedValue<T> | T;\n\ninterface PlaybackOptions {\n  looping: Animated<boolean>;\n  paused: Animated<boolean>;\n  seek: Animated<number | null>;\n  volume: Animated<number>;\n}\n\nconst setFrame = (video: Video, currentFrame: SharedValue<SkImage | null>) => {\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\nconst defaultOptions = {\n  looping: true,\n  paused: false,\n  seek: null,\n  currentTime: 0,\n  volume: 0,\n};\n\nconst useOption = <T>(value: Animated<T>) => {\n  \"worklet\";\n  // TODO: only create defaultValue is needed (via makeMutable)\n  const defaultValue = Rea.useSharedValue(\n    Rea.isSharedValue(value) ? value.value : value\n  );\n  return Rea.isSharedValue(value) ? value : defaultValue;\n};\n\nconst disposeVideo = (video: Video | null) => {\n  \"worklet\";\n  video?.dispose();\n};\n\nexport const useVideo = (\n  source: string | null,\n  userOptions?: Partial<PlaybackOptions>\n) => {\n  const video = useMemo(() => (source ? Skia.Video(source) : null), [source]);\n  const isPaused = useOption(userOptions?.paused ?? defaultOptions.paused);\n  const looping = useOption(userOptions?.looping ?? defaultOptions.looping);\n  const seek = useOption(userOptions?.seek ?? defaultOptions.seek);\n  const volume = useOption(userOptions?.volume ?? defaultOptions.volume);\n  const currentFrame = Rea.useSharedValue<null | SkImage>(null);\n  const currentTime = Rea.useSharedValue(0);\n  const lastTimestamp = Rea.useSharedValue(-1);\n  const duration = useMemo(() => video?.duration() ?? 0, [video]);\n  const framerate = useMemo(() => video?.framerate() ?? 0, [video]);\n  const size = useMemo(() => video?.size() ?? { width: 0, height: 0 }, [video]);\n  const rotation = useMemo(() => video?.rotation() ?? 0, [video]);\n  const frameDuration = 1000 / framerate;\n  const currentFrameDuration = Math.floor(frameDuration);\n  Rea.useAnimatedReaction(\n    () => isPaused.value,\n    (paused) => {\n      if (paused) {\n        video?.pause();\n      } else {\n        lastTimestamp.value = -1;\n        video?.play();\n      }\n    }\n  );\n  Rea.useAnimatedReaction(\n    () => seek.value,\n    (value) => {\n      if (value !== null) {\n        video?.seek(value);\n        currentTime.value = value;\n        seek.value = null;\n      }\n    }\n  );\n  Rea.useAnimatedReaction(\n    () => volume.value,\n    (value) => {\n      video?.setVolume(value);\n    }\n  );\n  Rea.useFrameCallback((frameInfo: FrameInfo) => {\n    \"worklet\";\n    if (!video) {\n      return;\n    }\n    if (isPaused.value) {\n      return;\n    }\n    const currentTimestamp = frameInfo.timestamp;\n    if (lastTimestamp.value === -1) {\n      lastTimestamp.value = currentTimestamp;\n    }\n    const delta = currentTimestamp - lastTimestamp.value;\n\n    const isOver = currentTime.value + delta > duration;\n    if (isOver && looping.value) {\n      seek.value = 0;\n      currentTime.value = seek.value;\n      lastTimestamp.value = currentTimestamp;\n    }\n    if (delta >= currentFrameDuration && !isOver) {\n      setFrame(video, currentFrame);\n      currentTime.value += delta;\n      lastTimestamp.value = currentTimestamp;\n    }\n  });\n\n  useEffect(() => {\n    return () => {\n      // TODO: should video simply be a shared value instead?\n      Rea.runOnUI(disposeVideo)(video);\n    };\n  }, [video]);\n\n  return {\n    currentFrame,\n    currentTime,\n    duration,\n    framerate,\n    rotation,\n    size,\n  };\n};\n"],"mappings":"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"}

package/lib/module/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/module/renderer/components/shapes/FitBox.js

@@ -1,9 +1,38 @@
 import React, { useMemo } from "react";
 import { fitRects, rect2rect } from "../../../dom/nodes";
 import { Group } from "../Group";
-export const fitbox = (fit, src, dst) => {
-  const rects = fitRects(fit, src, dst);
-  return rect2rect(rects.src, rects.dst);
+export const fitbox = (fit, src, dst, rotation = 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
+    }];
+  }
+  if (rotation === 180) {
+    return [...result, {
+      translate: [src.width, src.height]
+    }, {
+      rotate: Math.PI
+    }];
+  }
+  if (rotation === 270) {
+    return [...result, {
+      translate: [0, src.width]
+    }, {
+      rotate: -Math.PI / 2
+    }];
+  }
+  return result;
 };
 export const FitBox = ({
   fit = "contain",

package/lib/module/renderer/components/shapes/FitBox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","fitRects","rect2rect","Group","fitbox","fit","src","dst","rects","FitBox","children","transform","createElement"],"sources":["FitBox.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport type { Fit } from \"../../../dom/nodes\";\nimport { fitRects, rect2rect } from \"../../../dom/nodes\";\nimport type { SkRect } from \"../../../skia/types\";\nimport { Group } from \"../Group\";\n\ninterface FitProps {\n  fit?: Fit;\n  src: SkRect;\n  dst: SkRect;\n  children: ReactNode | ReactNode[];\n}\n\nexport const fitbox = (fit: Fit, src: SkRect, dst: SkRect) => {\n  const rects = fitRects(fit, src, dst);\n  return rect2rect(rects.src, rects.dst);\n};\n\nexport const FitBox = ({ fit = \"contain\", src, dst, children }: FitProps) => {\n  const transform = useMemo(() => fitbox(fit, src, dst), [dst, fit, src]);\n  return <Group transform={transform}>{children}</Group>;\n};\n"],"mappings":"AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAGtC,SAASC,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;AAExD,SAASC,KAAK,QAAQ,UAAU;AAShC,OAAO,MAAMC,MAAM,GAAGA,CAACC,GAAQ,EAAEC,GAAW,EAAEC,GAAW,KAAK;EAC5D,MAAMC,KAAK,GAAGP,QAAQ,CAACI,GAAG,EAAEC,GAAG,EAAEC,GAAG,CAAC;EACrC,OAAOL,SAAS,CAACM,KAAK,CAACF,GAAG,EAAEE,KAAK,CAACD,GAAG,CAAC;AACxC,CAAC;AAED,OAAO,MAAME,MAAM,GAAGA,CAAC;EAAEJ,GAAG,GAAG,SAAS;EAAEC,GAAG;EAAEC,GAAG;EAAEG;AAAmB,CAAC,KAAK;EAC3E,MAAMC,SAAS,GAAGX,OAAO,CAAC,MAAMI,MAAM,CAACC,GAAG,EAAEC,GAAG,EAAEC,GAAG,CAAC,EAAE,CAACA,GAAG,EAAEF,GAAG,EAAEC,GAAG,CAAC,CAAC;EACvE,oBAAOP,KAAA,CAAAa,aAAA,CAACT,KAAK;IAACQ,SAAS,EAAEA;EAAU,GAAED,QAAgB,CAAC;AACxD,CAAC"}
+{"version":3,"names":["React","useMemo","fitRects","rect2rect","Group","fitbox","fit","src","dst","rotation","rects","x","y","width","height","result","translate","rotate","Math","PI","FitBox","children","transform","createElement"],"sources":["FitBox.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport type { Fit } from \"../../../dom/nodes\";\nimport { fitRects, rect2rect } from \"../../../dom/nodes\";\nimport type { SkRect, Transforms3d } from \"../../../skia/types\";\nimport { Group } from \"../Group\";\n\ninterface FitProps {\n  fit?: Fit;\n  src: SkRect;\n  dst: SkRect;\n  children: ReactNode | ReactNode[];\n}\n\nexport const fitbox = (\n  fit: Fit,\n  src: SkRect,\n  dst: SkRect,\n  rotation: 0 | 90 | 180 | 270 = 0\n) => {\n  \"worklet\";\n  const rects = fitRects(\n    fit,\n    rotation === 90 || rotation === 270\n      ? { x: 0, y: 0, width: src.height, height: src.width }\n      : src,\n    dst\n  );\n  const result = rect2rect(rects.src, rects.dst);\n  if (rotation === 90) {\n    return [\n      ...result,\n      { translate: [src.height, 0] },\n      { rotate: Math.PI / 2 },\n    ] as Transforms3d;\n  }\n  if (rotation === 180) {\n    return [\n      ...result,\n      { translate: [src.width, src.height] },\n      { rotate: Math.PI },\n    ] as Transforms3d;\n  }\n  if (rotation === 270) {\n    return [\n      ...result,\n      { translate: [0, src.width] },\n      { rotate: -Math.PI / 2 },\n    ] as Transforms3d;\n  }\n  return result;\n};\n\nexport const FitBox = ({ fit = \"contain\", src, dst, children }: FitProps) => {\n  const transform = useMemo(() => fitbox(fit, src, dst), [dst, fit, src]);\n  return <Group transform={transform}>{children}</Group>;\n};\n"],"mappings":"AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAGtC,SAASC,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;AAExD,SAASC,KAAK,QAAQ,UAAU;AAShC,OAAO,MAAMC,MAAM,GAAGA,CACpBC,GAAQ,EACRC,GAAW,EACXC,GAAW,EACXC,QAA4B,GAAG,CAAC,KAC7B;EACH,SAAS;;EACT,MAAMC,KAAK,GAAGR,QAAQ,CACpBI,GAAG,EACHG,QAAQ,KAAK,EAAE,IAAIA,QAAQ,KAAK,GAAG,GAC/B;IAAEE,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE,CAAC;IAAEC,KAAK,EAAEN,GAAG,CAACO,MAAM;IAAEA,MAAM,EAAEP,GAAG,CAACM;EAAM,CAAC,GACpDN,GAAG,EACPC,GACF,CAAC;EACD,MAAMO,MAAM,GAAGZ,SAAS,CAACO,KAAK,CAACH,GAAG,EAAEG,KAAK,CAACF,GAAG,CAAC;EAC9C,IAAIC,QAAQ,KAAK,EAAE,EAAE;IACnB,OAAO,CACL,GAAGM,MAAM,EACT;MAAEC,SAAS,EAAE,CAACT,GAAG,CAACO,MAAM,EAAE,CAAC;IAAE,CAAC,EAC9B;MAAEG,MAAM,EAAEC,IAAI,CAACC,EAAE,GAAG;IAAE,CAAC,CACxB;EACH;EACA,IAAIV,QAAQ,KAAK,GAAG,EAAE;IACpB,OAAO,CACL,GAAGM,MAAM,EACT;MAAEC,SAAS,EAAE,CAACT,GAAG,CAACM,KAAK,EAAEN,GAAG,CAACO,MAAM;IAAE,CAAC,EACtC;MAAEG,MAAM,EAAEC,IAAI,CAACC;IAAG,CAAC,CACpB;EACH;EACA,IAAIV,QAAQ,KAAK,GAAG,EAAE;IACpB,OAAO,CACL,GAAGM,MAAM,EACT;MAAEC,SAAS,EAAE,CAAC,CAAC,EAAET,GAAG,CAACM,KAAK;IAAE,CAAC,EAC7B;MAAEI,MAAM,EAAE,CAACC,IAAI,CAACC,EAAE,GAAG;IAAE,CAAC,CACzB;EACH;EACA,OAAOJ,MAAM;AACf,CAAC;AAED,OAAO,MAAMK,MAAM,GAAGA,CAAC;EAAEd,GAAG,GAAG,SAAS;EAAEC,GAAG;EAAEC,GAAG;EAAEa;AAAmB,CAAC,KAAK;EAC3E,MAAMC,SAAS,GAAGrB,OAAO,CAAC,MAAMI,MAAM,CAACC,GAAG,EAAEC,GAAG,EAAEC,GAAG,CAAC,EAAE,CAACA,GAAG,EAAEF,GAAG,EAAEC,GAAG,CAAC,CAAC;EACvE,oBAAOP,KAAA,CAAAuB,aAAA,CAACnB,KAAK;IAACkB,SAAS,EAAEA;EAAU,GAAED,QAAgB,CAAC;AACxD,CAAC"}

package/lib/module/skia/core/Matrix.js

@@ -1,4 +1,8 @@
 import { Skia } from "../Skia";
 import { processTransform } from "../types";
-export const processTransform2d = transforms => processTransform(Skia.Matrix(), transforms);
+export const processTransform2d = transforms => {
+  "worklet";
+
+  return processTransform(Skia.Matrix(), transforms);
+};
 //# sourceMappingURL=Matrix.js.map

package/lib/module/skia/core/Matrix.js.map

@@ -1 +1 @@
-{"version":3,"names":["Skia","processTransform","processTransform2d","transforms","Matrix"],"sources":["Matrix.ts"],"sourcesContent":["import { Skia } from \"../Skia\";\nimport type { Transforms3d } from \"../types\";\nimport { processTransform } from \"../types\";\n\nexport const processTransform2d = (transforms: Transforms3d) =>\n  processTransform(Skia.Matrix(), transforms);\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAE9B,SAASC,gBAAgB,QAAQ,UAAU;AAE3C,OAAO,MAAMC,kBAAkB,GAAIC,UAAwB,IACzDF,gBAAgB,CAACD,IAAI,CAACI,MAAM,CAAC,CAAC,EAAED,UAAU,CAAC"}
+{"version":3,"names":["Skia","processTransform","processTransform2d","transforms","Matrix"],"sources":["Matrix.ts"],"sourcesContent":["import { Skia } from \"../Skia\";\nimport type { Transforms3d } from \"../types\";\nimport { processTransform } from \"../types\";\n\nexport const processTransform2d = (transforms: Transforms3d) => {\n  \"worklet\";\n  return processTransform(Skia.Matrix(), transforms);\n};\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAE9B,SAASC,gBAAgB,QAAQ,UAAU;AAE3C,OAAO,MAAMC,kBAAkB,GAAIC,UAAwB,IAAK;EAC9D,SAAS;;EACT,OAAOF,gBAAgB,CAACD,IAAI,CAACI,MAAM,CAAC,CAAC,EAAED,UAAU,CAAC;AACpD,CAAC"}

package/lib/module/skia/types/Matrix.js

@@ -1,6 +1,8 @@
 import { processTransform3d } from "./Matrix4";
 export const isMatrix = obj => obj !== null && obj.__typename__ === "Matrix";
 export const processTransform = (m, transforms) => {
+  "worklet";
+
   const m3 = processTransform3d(transforms);
   m.concat(m3);
   return m;

package/lib/module/skia/types/Matrix.js.map

@@ -1 +1 @@
-{"version":3,"names":["processTransform3d","isMatrix","obj","__typename__","processTransform","m","transforms","m3","concat","toDegrees","rad","Math","PI"],"sources":["Matrix.ts"],"sourcesContent":["import type { SkJSIInstance } from \"./JsiInstance\";\nimport type { SkCanvas } from \"./Canvas\";\nimport type { Matrix3, Matrix4, Transforms3d } from \"./Matrix4\";\nimport { processTransform3d } from \"./Matrix4\";\n\nexport const isMatrix = (obj: unknown): obj is SkMatrix =>\n  obj !== null && (obj as SkJSIInstance<string>).__typename__ === \"Matrix\";\n\nexport interface SkMatrix extends SkJSIInstance<\"Matrix\"> {\n  concat: (matrix: InputMatrix) => SkMatrix;\n  translate: (x: number, y: number) => SkMatrix;\n  scale: (x: number, y?: number) => SkMatrix;\n  skew: (x: number, y: number) => SkMatrix;\n  rotate: (theta: number) => SkMatrix;\n  postTranslate: (x: number, y: number) => SkMatrix;\n  postScale: (x: number, y?: number) => SkMatrix;\n  postSkew: (x: number, y: number) => SkMatrix;\n  postRotate: (theta: number) => SkMatrix;\n  identity: () => SkMatrix;\n  get: () => number[];\n}\n\nexport type InputMatrix = SkMatrix | Matrix3 | Matrix4 | number[];\n\nexport interface TransformProp {\n  transform?: Transforms3d;\n}\n\nexport const processTransform = <T extends SkMatrix | SkCanvas>(\n  m: T,\n  transforms: Transforms3d\n) => {\n  const m3 = processTransform3d(transforms);\n  m.concat(m3);\n  return m;\n};\n\nexport const toDegrees = (rad: number) => {\n  return (rad * 180) / Math.PI;\n};\n"],"mappings":"AAGA,SAASA,kBAAkB,QAAQ,WAAW;AAE9C,OAAO,MAAMC,QAAQ,GAAIC,GAAY,IACnCA,GAAG,KAAK,IAAI,IAAKA,GAAG,CAA2BC,YAAY,KAAK,QAAQ;AAsB1E,OAAO,MAAMC,gBAAgB,GAAGA,CAC9BC,CAAI,EACJC,UAAwB,KACrB;EACH,MAAMC,EAAE,GAAGP,kBAAkB,CAACM,UAAU,CAAC;EACzCD,CAAC,CAACG,MAAM,CAACD,EAAE,CAAC;EACZ,OAAOF,CAAC;AACV,CAAC;AAED,OAAO,MAAMI,SAAS,GAAIC,GAAW,IAAK;EACxC,OAAQA,GAAG,GAAG,GAAG,GAAIC,IAAI,CAACC,EAAE;AAC9B,CAAC"}
+{"version":3,"names":["processTransform3d","isMatrix","obj","__typename__","processTransform","m","transforms","m3","concat","toDegrees","rad","Math","PI"],"sources":["Matrix.ts"],"sourcesContent":["import type { SkJSIInstance } from \"./JsiInstance\";\nimport type { SkCanvas } from \"./Canvas\";\nimport type { Matrix3, Matrix4, Transforms3d } from \"./Matrix4\";\nimport { processTransform3d } from \"./Matrix4\";\n\nexport const isMatrix = (obj: unknown): obj is SkMatrix =>\n  obj !== null && (obj as SkJSIInstance<string>).__typename__ === \"Matrix\";\n\nexport interface SkMatrix extends SkJSIInstance<\"Matrix\"> {\n  concat: (matrix: InputMatrix) => SkMatrix;\n  translate: (x: number, y: number) => SkMatrix;\n  scale: (x: number, y?: number) => SkMatrix;\n  skew: (x: number, y: number) => SkMatrix;\n  rotate: (theta: number) => SkMatrix;\n  postTranslate: (x: number, y: number) => SkMatrix;\n  postScale: (x: number, y?: number) => SkMatrix;\n  postSkew: (x: number, y: number) => SkMatrix;\n  postRotate: (theta: number) => SkMatrix;\n  identity: () => SkMatrix;\n  get: () => number[];\n}\n\nexport type InputMatrix = SkMatrix | Matrix3 | Matrix4 | number[];\n\nexport interface TransformProp {\n  transform?: Transforms3d;\n}\n\nexport const processTransform = <T extends SkMatrix | SkCanvas>(\n  m: T,\n  transforms: Transforms3d\n) => {\n  \"worklet\";\n  const m3 = processTransform3d(transforms);\n  m.concat(m3);\n  return m;\n};\n\nexport const toDegrees = (rad: number) => {\n  return (rad * 180) / Math.PI;\n};\n"],"mappings":"AAGA,SAASA,kBAAkB,QAAQ,WAAW;AAE9C,OAAO,MAAMC,QAAQ,GAAIC,GAAY,IACnCA,GAAG,KAAK,IAAI,IAAKA,GAAG,CAA2BC,YAAY,KAAK,QAAQ;AAsB1E,OAAO,MAAMC,gBAAgB,GAAGA,CAC9BC,CAAI,EACJC,UAAwB,KACrB;EACH,SAAS;;EACT,MAAMC,EAAE,GAAGP,kBAAkB,CAACM,UAAU,CAAC;EACzCD,CAAC,CAACG,MAAM,CAACD,EAAE,CAAC;EACZ,OAAOF,CAAC;AACV,CAAC;AAED,OAAO,MAAMI,SAAS,GAAIC,GAAW,IAAK;EACxC,OAAQA,GAAG,GAAG,GAAG,GAAIC,IAAI,CAACC,EAAE;AAC9B,CAAC"}

package/lib/module/skia/types/Video/Video.d.ts

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

package/lib/module/skia/types/Video/Video.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Video.ts"],"sourcesContent":["import type { SkImage } from \"../Image\";\nimport type { SkJSIInstance } from \"../JsiInstance\";\n\nexport interface Video extends SkJSIInstance<\"Video\"> {\n  duration(): number;\n  framerate(): number;\n  nextImage(): SkImage | null;\n  seek(time: number): void;\n  getRotationInDegrees(): number;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["Video.ts"],"sourcesContent":["import type { SkImage } from \"../Image\";\nimport type { SkJSIInstance } from \"../JsiInstance\";\n\nexport type VideoRotation = 0 | 90 | 180 | 270;\n\nexport interface Video extends SkJSIInstance<\"Video\"> {\n  duration(): number;\n  framerate(): number;\n  nextImage(): SkImage | null;\n  seek(time: number): void;\n  rotation(): VideoRotation;\n  size(): { width: number; height: number };\n  pause(): void;\n  play(): void;\n  setVolume(volume: number): void;\n}\n"],"mappings":""}

package/lib/typescript/src/external/reanimated/useVideo.d.ts

@@ -1,9 +1,21 @@
+import type { SharedValue } from "react-native-reanimated";
 import type { SkImage } from "../../skia/types";
-import { type PlaybackOptions } from "./video";
+type Animated<T> = SharedValue<T> | T;
+interface PlaybackOptions {
+    looping: Animated<boolean>;
+    paused: Animated<boolean>;
+    seek: Animated<number | null>;
+    volume: Animated<number>;
+}
 export declare const useVideo: (source: string | null, userOptions?: Partial<PlaybackOptions>) => {
-    currentFrame: import("react-native-reanimated").SharedValue<SkImage | null>;
-    currentTime: import("react-native-reanimated").SharedValue<number>;
+    currentFrame: SharedValue<SkImage | null>;
+    currentTime: SharedValue<number>;
     duration: number;
     framerate: number;
-    rotationInDegrees: number;
+    rotation: import("../../skia/types").VideoRotation;
+    size: {
+        width: number;
+        height: number;
+    };
 };
+export {};

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

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.3.2",
+  "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,22 +1,42 @@
-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";
+
+type Animated<T> = SharedValue<T> | T;
+
+interface PlaybackOptions {
+  looping: Animated<boolean>;
+  paused: Animated<boolean>;
+  seek: Animated<number | null>;
+  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>) => {
@@ -41,34 +61,68 @@ 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 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,
-    [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);
+    }
   );
   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;
+    }
+    if (delta >= currentFrameDuration && !isOver) {
+      setFrame(video, currentFrame);
+      currentTime.value += delta;
+      lastTimestamp.value = currentTimestamp;
+    }
   });
 
   useEffect(() => {
@@ -78,5 +132,12 @@ export const useVideo = (
     };
   }, [video]);
 
-  return { currentFrame, currentTime, duration, framerate, rotationInDegrees };
+  return {
+    currentFrame,
+    currentTime,
+    duration,
+    framerate,
+    rotation,
+    size,
+  };
 };