@shopify/react-native-skia 1.3.2 → 1.3.3

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,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/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 {};

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

@@ -1,46 +0,0 @@
-import { Platform } from "../../Platform";
-export 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;
-    }
-  }
-};
-export 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;
-  }
-};
-//# sourceMappingURL=video.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["Platform","setFrame","video","currentFrame","img","nextImage","value","dispose","OS","makeNonTextureImage","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,SAASA,QAAQ,QAAQ,gBAAgB;AAmBzC,OAAO,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,IAAIP,QAAQ,CAACQ,EAAE,KAAK,SAAS,EAAE;MAC7BL,YAAY,CAACG,KAAK,GAAGF,GAAG,CAACK,mBAAmB,CAAC,CAAC;IAChD,CAAC,MAAM;MACLN,YAAY,CAACG,KAAK,GAAGF,GAAG;IAC1B;EACF;AACF,CAAC;AAED,OAAO,MAAMM,iBAAiB,GAAGA,CAC/BR,KAAmB,EACnBS,QAAgB,EAChBC,SAAiB,EACjBC,gBAAwB,EACxBC,OAAoD,EACpDC,WAAgC,EAChCZ,YAAyC,EACzCa,aAAkC,EAClCC,IAAgC,KAC7B;EACH,SAAS;;EACT,IAAI,CAACf,KAAK,EAAE;IACV;EACF;EACA,IAAIY,OAAO,CAACI,MAAM,EAAE;IAClB;EACF;EACA,MAAMC,KAAK,GAAGN,gBAAgB,GAAGG,aAAa,CAACV,KAAK;EAEpD,MAAMc,aAAa,GAAG,IAAI,GAAGR,SAAS;EACtC,MAAMS,oBAAoB,GAAGC,IAAI,CAACC,KAAK,CACrCH,aAAa,GAAGN,OAAO,CAACU,aAC1B,CAAC;EACD,IAAIT,WAAW,CAACT,KAAK,GAAGa,KAAK,IAAIR,QAAQ,IAAIG,OAAO,CAACW,OAAO,EAAE;IAC5DR,IAAI,CAACX,KAAK,GAAG,CAAC;EAChB;EACA,IAAIW,IAAI,CAACX,KAAK,KAAK,IAAI,EAAE;IACvBJ,KAAK,CAACe,IAAI,CAACA,IAAI,CAACX,KAAK,CAAC;IACtBS,WAAW,CAACT,KAAK,GAAGW,IAAI,CAACX,KAAK;IAC9BL,QAAQ,CAACC,KAAK,EAAEC,YAAY,CAAC;IAC7Ba,aAAa,CAACV,KAAK,GAAGO,gBAAgB;IACtCI,IAAI,CAACX,KAAK,GAAG,IAAI;IACjB;EACF;EAEA,IAAIa,KAAK,IAAIE,oBAAoB,EAAE;IACjCpB,QAAQ,CAACC,KAAK,EAAEC,YAAY,CAAC;IAC7BY,WAAW,CAACT,KAAK,IAAIa,KAAK;IAC1BH,aAAa,CAACV,KAAK,GAAGO,gBAAgB;EACxC;AACF,CAAC"}

package/lib/typescript/src/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/src/external/reanimated/video.ts

@@ -1,82 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-
-import type { SkImage, Video } from "../../skia/types";
-import { Platform } from "../../Platform";
-
-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 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;
-    }
-  }
-};
-
-export 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>
-) => {
-  "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;
-  }
-};