@shopify/react-native-skia 2.4.17 → 2.4.19

package/src/external/reanimated/useVideo.ts

@@ -44,13 +44,11 @@ const defaultOptions = {
   looping: true,
   paused: false,
   seek: null,
-  currentTime: 0,
   volume: 0,
 };
 
 const useOption = <T>(value: MaybeAnimated<T>) => {
   "worklet";
-  // TODO: only create defaultValue is needed (via makeMutable)
   const defaultValue = Rea.useSharedValue(
     Rea.isSharedValue(value) ? value.value : value
   );
@@ -75,7 +73,6 @@ export const useVideo = (
   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(
     () => (Platform.OS === "web" ? -1 : (video?.framerate() ?? 0)),
@@ -83,70 +80,73 @@ export const useVideo = (
   );
   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);
+
+  // Handle pause/play state changes
   Rea.useAnimatedReaction(
     () => isPaused.value,
     (paused) => {
       if (paused) {
         video?.pause();
       } else {
-        lastTimestamp.value = -1;
         video?.play();
       }
     }
   );
+
+  // Handle seek
   Rea.useAnimatedReaction(
     () => seek.value,
     (value) => {
       if (value !== null) {
         video?.seek(value);
-        currentTime.value = value;
         seek.value = null;
       }
     }
   );
+
+  // Handle volume changes
   Rea.useAnimatedReaction(
     () => volume.value,
     (value) => {
       video?.setVolume(value);
     }
   );
-  Rea.useFrameCallback((frameInfo: FrameInfo) => {
+
+  // Handle looping changes
+  Rea.useAnimatedReaction(
+    () => looping.value,
+    (value) => {
+      video?.setLooping(value);
+    }
+  );
+
+  // Frame callback - simplified since native handles frame timing
+  Rea.useFrameCallback((_frameInfo: FrameInfo) => {
     "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;
-    }
+    // Update current time from native player
+    currentTime.value = video.currentTime();
+    // Get the latest frame (native handles timing via CADisplayLink/etc)
+    setFrame(video, currentFrame);
   });
 
+  // Apply initial state when video becomes available
   useEffect(() => {
+    if (video) {
+      video.setLooping(looping.value);
+      video.setVolume(volume.value);
+      if (isPaused.value) {
+        video.pause();
+      } else {
+        video.play();
+      }
+    }
     return () => {
-      // TODO: should video simply be a shared value instead?
       Rea.runOnUI(disposeVideo)(video);
     };
-  }, [video]);
+  }, [video, isPaused, looping, volume]);
 
   return {
     currentFrame,

package/src/renderer/Offscreen.tsx

@@ -20,6 +20,7 @@ export const drawAsPicture = async (element: ReactElement, bounds?: SkRect) => {
   await root.render(element);
   root.drawOnCanvas(canvas);
   const picture = recorder.finishRecordingAsPicture();
+  recorder.dispose();
   root.unmount();
   return picture;
 };

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

@@ -6,6 +6,7 @@ export type VideoRotation = 0 | 90 | 180 | 270;
 export interface Video extends SkJSIInstance<"Video"> {
   duration(): number;
   framerate(): number;
+  currentTime(): number;
   nextImage(): SkImage | null;
   seek(time: number): void;
   rotation(): VideoRotation;
@@ -13,4 +14,6 @@ export interface Video extends SkJSIInstance<"Video"> {
   pause(): void;
   play(): void;
   setVolume(volume: number): void;
+  setLooping(looping: boolean): void;
+  isPlaying(): boolean;
 }

package/src/skia/web/JsiVideo.ts

@@ -46,6 +46,10 @@ export class JsiVideo implements Video {
     return throwNotImplementedOnRNWeb<number>();
   }
 
+  currentTime() {
+    return this.videoElement.currentTime * 1000;
+  }
+
   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.
@@ -89,6 +93,14 @@ export class JsiVideo implements Video {
     this.videoElement.volume = volume;
   }
 
+  setLooping(looping: boolean) {
+    this.videoElement.loop = looping;
+  }
+
+  isPlaying() {
+    return !this.videoElement.paused && !this.videoElement.ended;
+  }
+
   [Symbol.dispose]() {
     if (this.videoElement.parentNode) {
       this.videoElement.parentNode.removeChild(this.videoElement);

package/src/sksg/Container.web.ts

@@ -21,6 +21,7 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
   replay(ctx, recording.commands);
   const picture = rec.finishRecordingAsPicture();
+  rec.dispose();
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);

package/src/sksg/HostConfig.ts

@@ -263,4 +263,8 @@ export const sksgHostConfig: SkiaHostConfig = {
     return DefaultEventPriority;
   },
   resetFormInstance() {},
+
+  // DefinitelyTyped is not up to date, these are needed for devtools
+  rendererVersion: "0.0.1",
+  rendererPackageName: "react-native-skia",
 };

package/src/sksg/Reconciler.ts

@@ -13,11 +13,8 @@ import "./Elements";
 
 const skiaReconciler = ReactReconciler(sksgHostConfig);
 
-skiaReconciler.injectIntoDevTools({
-  bundleType: 1,
-  version: "0.0.1",
-  rendererPackageName: "react-native-skia",
-});
+// @ts-expect-error DefinitelyTyped is not up to date
+skiaReconciler.injectIntoDevTools();
 
 export class SkiaSGRoot {
   private root: OpaqueRoot;
@@ -68,7 +65,9 @@ export class SkiaSGRoot {
     const recorder = this.Skia.PictureRecorder();
     const canvas = recorder.beginRecording();
     this.drawOnCanvas(canvas);
-    return recorder.finishRecordingAsPicture();
+    const picture = recorder.finishRecordingAsPicture();
+    recorder.dispose();
+    return picture;
   }
 
   unmount() {

package/src/sksg/StaticContainer.ts

@@ -65,6 +65,7 @@ export class StaticContainer extends Container {
       const canvas = rec.beginRecording();
       this.drawOnCanvas(canvas);
       const picture = rec.finishRecordingAsPicture();
+      rec.dispose();
       SkiaViewApi.setJsiProperty(this.nativeId, "picture", picture);
     }
   }