fix(🤖): remove unnecessary video frame copies on Android (#2476)

Shopify · Jun 12, 2024 · 524072c · 524072c
1 parent 7d391ae
commit 524072c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/example/src/Examples/Video/Video.tsx b/example/src/Examples/Video/Video.tsx
@@ -16,7 +16,7 @@ import Slider from "@react-native-community/slider";
 const videoURL =
   Platform.OS === "web"
     ? require("../../Tests/assets/BigBuckBunny.mp4").default
-    : "https://bit.ly/skia-video-short";
+    : "https://bit.ly/skia-video";
 
 export const Video = () => {
   const paused = useSharedValue(false);

diff --git a/package/src/external/reanimated/useVideo.ts b/package/src/external/reanimated/useVideo.ts
@@ -22,18 +22,29 @@ interface PlaybackOptions {
   volume: Animated<number>;
 }
 
+const copyFrameOnAndroid = (currentFrame: SharedValue<SkImage | null>) => {
+  "worklet";
+  // on android we need to copy the texture before it's invalidated
+  if (Platform.OS === "android") {
+    const tex = currentFrame.value;
+    if (tex) {
+      console.log("Copying frame on Android");
+      currentFrame.value = tex.makeNonTextureImage();
+      tex.dispose();
+    }
+  }
+};
+
 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;
-    }
+    currentFrame.value = img;
+  } else {
+    copyFrameOnAndroid(currentFrame);
   }
 };
 
@@ -111,6 +122,7 @@ export const useVideo = (
     () => seek.value,
     (value) => {
       if (value !== null) {
+        copyFrameOnAndroid(currentFrame);
         video?.seek(value);
         currentTime.value = value;
         seek.value = null;