From 69fc99f55c24efe858c1b14973549b5b87371653 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 12 Jun 2024 10:15:57 +0200
Subject: [PATCH 01/11] =?UTF-8?q?fix(=F0=9F=93=B8):=20load=20video=20metad?=
 =?UTF-8?q?ata=20on=20dedicated=20thread?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package/src/external/reanimated/useVideo.ts | 26 ++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/package/src/external/reanimated/useVideo.ts b/package/src/external/reanimated/useVideo.ts
index 0d9638e840..07dd104591 100644
--- a/package/src/external/reanimated/useVideo.ts
+++ b/package/src/external/reanimated/useVideo.ts
@@ -1,5 +1,5 @@
-import type { SharedValue, FrameInfo } from "react-native-reanimated";
-import { useEffect, useMemo } from "react";
+import { type SharedValue, type FrameInfo, createWorkletRuntime, runOnJS, runOnRuntime } from "react-native-reanimated";
+import { useEffect, useMemo, useState } from "react";
 
 import { Skia } from "../../skia/Skia";
 import type { SkImage, Video } from "../../skia/types";
@@ -53,11 +53,31 @@ const disposeVideo = (video: Video | null) => {
   video?.dispose();
 };
 
+const runtime = createWorkletRuntime('video-metadata-runtime');
+
+type VideoSource = string | null;
+
+const useVideoLoading = (source: VideoSource) => {
+  const [video, setVideo] = useState<Video | null>(null);
+  const cb = (src: string) => {
+    "worklet";
+    const vid = Skia.Video(src);
+    runOnJS(setVideo)(vid);
+  };
+  useEffect(() => {
+    if (source) {
+      runOnRuntime(runtime, cb)(source);
+    }
+  }, [source]);
+  return video;
+};
+
+
 export const useVideo = (
   source: string | null,
   userOptions?: Partial<PlaybackOptions>
 ) => {
-  const video = useMemo(() => (source ? Skia.Video(source) : null), [source]);
+  const video = useVideoLoading(source);
   const isPaused = useOption(userOptions?.paused ?? defaultOptions.paused);
   const looping = useOption(userOptions?.looping ?? defaultOptions.looping);
   const seek = useOption(userOptions?.seek ?? defaultOptions.seek);

From 92500cc03a7908595ea75822879ccc86bb4384be Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 12 Jun 2024 11:10:37 +0200
Subject: [PATCH 02/11] fix android implementation

---
 package/android/cpp/jni/JniPlatformContext.cpp | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/package/android/cpp/jni/JniPlatformContext.cpp b/package/android/cpp/jni/JniPlatformContext.cpp
index 2edb19f67f..876c58cf6e 100644
--- a/package/android/cpp/jni/JniPlatformContext.cpp
+++ b/package/android/cpp/jni/JniPlatformContext.cpp
@@ -77,6 +77,8 @@ TSelf JniPlatformContext::initHybrid(jni::alias_ref<jhybridobject> jThis,
 
 jni::global_ref<jobject>
 JniPlatformContext::createVideo(const std::string &url) {
+  jni::Environment::ensureCurrentThreadIsAttached();
+
   jni::ThreadScope ts; // Manages JNI thread attachment/detachment
 
   // Get the JNI environment
@@ -93,6 +95,8 @@ JniPlatformContext::createVideo(const std::string &url) {
 
   // Call the method and receive a local reference to the video object
   auto videoObject = method(javaPart_.get(), jUrl);
+  env->DeleteLocalRef(jUrl);
+
   // Clean up the jstring local reference
   auto result = jni::make_global(videoObject);
   return result;

From 486d0bb0284b3e3c30d0a17cc3d6bcb0bb676a49 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 12 Jun 2024 11:16:13 +0200
Subject: [PATCH 03/11] remove bogus comment

---
 package/android/cpp/jni/JniPlatformContext.cpp | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/package/android/cpp/jni/JniPlatformContext.cpp b/package/android/cpp/jni/JniPlatformContext.cpp
index 876c58cf6e..ba3e70e0c9 100644
--- a/package/android/cpp/jni/JniPlatformContext.cpp
+++ b/package/android/cpp/jni/JniPlatformContext.cpp
@@ -87,9 +87,6 @@ JniPlatformContext::createVideo(const std::string &url) {
   // Convert std::string to jstring
   jstring jUrl = env->NewStringUTF(url.c_str());
 
-  // Get the method ID for the createVideo method
-  // Replace "Lcom/yourpackage/RNSkVideo;" with the actual return type
-  // descriptor
   static auto method =
       javaPart_->getClass()->getMethod<jobject(jstring)>("createVideo");
 

From d3a9f140a5becca36532d9c8afd8b99cad839bfd Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 12 Jun 2024 11:24:16 +0200
Subject: [PATCH 04/11] :green_heart:

---
 package/src/external/reanimated/useVideo.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/package/src/external/reanimated/useVideo.ts b/package/src/external/reanimated/useVideo.ts
index 07dd104591..5969bf1ee6 100644
--- a/package/src/external/reanimated/useVideo.ts
+++ b/package/src/external/reanimated/useVideo.ts
@@ -1,4 +1,10 @@
-import { type SharedValue, type FrameInfo, createWorkletRuntime, runOnJS, runOnRuntime } from "react-native-reanimated";
+import {
+  type SharedValue,
+  type FrameInfo,
+  createWorkletRuntime,
+  runOnJS,
+  runOnRuntime,
+} from "react-native-reanimated";
 import { useEffect, useMemo, useState } from "react";
 
 import { Skia } from "../../skia/Skia";
@@ -53,7 +59,7 @@ const disposeVideo = (video: Video | null) => {
   video?.dispose();
 };
 
-const runtime = createWorkletRuntime('video-metadata-runtime');
+const runtime = createWorkletRuntime("video-metadata-runtime");
 
 type VideoSource = string | null;
 
@@ -72,7 +78,6 @@ const useVideoLoading = (source: VideoSource) => {
   return video;
 };
 
-
 export const useVideo = (
   source: string | null,
   userOptions?: Partial<PlaybackOptions>

From 260b01f820e4f53afb11040035da552e974f45f1 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 12 Jun 2024 13:10:07 +0200
Subject: [PATCH 05/11] Remove uncessary copies on android

---
 example/src/Examples/Video/Video.tsx        |  2 +-
 package/src/external/reanimated/useVideo.ts | 22 ++++++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/example/src/Examples/Video/Video.tsx b/example/src/Examples/Video/Video.tsx
index da53bb435c..c8403ad243 100644
--- 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
index 5969bf1ee6..d7dbd4d961 100644
--- a/package/src/external/reanimated/useVideo.ts
+++ b/package/src/external/reanimated/useVideo.ts
@@ -22,6 +22,19 @@ 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();
@@ -29,11 +42,9 @@ const setFrame = (video: Video, currentFrame: SharedValue<SkImage | null>) => {
     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;

From 2e64f233ec6eaaeec9d249bf1c681d3f7ebc12f3 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 12 Jun 2024 18:22:53 +0200
Subject: [PATCH 06/11] Remove bogus log

---
 package/src/external/reanimated/useVideo.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package/src/external/reanimated/useVideo.ts b/package/src/external/reanimated/useVideo.ts
index d7dbd4d961..bbb8675d41 100644
--- a/package/src/external/reanimated/useVideo.ts
+++ b/package/src/external/reanimated/useVideo.ts
@@ -28,7 +28,6 @@ const copyFrameOnAndroid = (currentFrame: SharedValue<SkImage | null>) => {
   if (Platform.OS === "android") {
     const tex = currentFrame.value;
     if (tex) {
-      console.log("Copying frame on Android");
       currentFrame.value = tex.makeNonTextureImage();
       tex.dispose();
     }

From a367ff6939f9fe01303016078ec8f3751813872d Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Thu, 13 Jun 2024 06:08:55 +0200
Subject: [PATCH 07/11] Add web implementation

---
 package/src/external/reanimated/useVideo.ts   | 31 +------
 .../external/reanimated/useVideoLoading.ts    | 28 ++++++
 .../reanimated/useVideoLoading.web.ts         | 17 ++++
 package/src/skia/types/Skia.ts                |  2 +-
 package/src/skia/web/JsiSkia.ts               | 18 +++-
 package/src/skia/web/JsiVideo.ts              | 87 +++++++++++++++++++
 6 files changed, 152 insertions(+), 31 deletions(-)
 create mode 100644 package/src/external/reanimated/useVideoLoading.ts
 create mode 100644 package/src/external/reanimated/useVideoLoading.web.ts
 create mode 100644 package/src/skia/web/JsiVideo.ts

diff --git a/package/src/external/reanimated/useVideo.ts b/package/src/external/reanimated/useVideo.ts
index bbb8675d41..20fc5f0185 100644
--- a/package/src/external/reanimated/useVideo.ts
+++ b/package/src/external/reanimated/useVideo.ts
@@ -1,17 +1,11 @@
-import {
-  type SharedValue,
-  type FrameInfo,
-  createWorkletRuntime,
-  runOnJS,
-  runOnRuntime,
-} from "react-native-reanimated";
-import { useEffect, useMemo, useState } from "react";
+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 { useVideoLoading } from "./useVideoLoading";
 
 type Animated<T> = SharedValue<T> | T;
 
@@ -69,25 +63,6 @@ const disposeVideo = (video: Video | null) => {
   video?.dispose();
 };
 
-const runtime = createWorkletRuntime("video-metadata-runtime");
-
-type VideoSource = string | null;
-
-const useVideoLoading = (source: VideoSource) => {
-  const [video, setVideo] = useState<Video | null>(null);
-  const cb = (src: string) => {
-    "worklet";
-    const vid = Skia.Video(src);
-    runOnJS(setVideo)(vid);
-  };
-  useEffect(() => {
-    if (source) {
-      runOnRuntime(runtime, cb)(source);
-    }
-  }, [source]);
-  return video;
-};
-
 export const useVideo = (
   source: string | null,
   userOptions?: Partial<PlaybackOptions>
diff --git a/package/src/external/reanimated/useVideoLoading.ts b/package/src/external/reanimated/useVideoLoading.ts
new file mode 100644
index 0000000000..7049956ac1
--- /dev/null
+++ b/package/src/external/reanimated/useVideoLoading.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import {
+  createWorkletRuntime,
+  runOnJS,
+  runOnRuntime,
+} from "react-native-reanimated";
+
+import type { Video } from "../../skia/types";
+import { Skia } from "../../skia";
+
+const runtime = createWorkletRuntime("video-metadata-runtime");
+
+type VideoSource = string | null;
+
+export const useVideoLoading = (source: VideoSource) => {
+  const [video, setVideo] = useState<Video | null>(null);
+  const cb = (src: string) => {
+    "worklet";
+    const vid = Skia.Video(src) as Video;
+    runOnJS(setVideo)(vid);
+  };
+  useEffect(() => {
+    if (source) {
+      runOnRuntime(runtime, cb)(source);
+    }
+  }, [source]);
+  return video;
+};
diff --git a/package/src/external/reanimated/useVideoLoading.web.ts b/package/src/external/reanimated/useVideoLoading.web.ts
new file mode 100644
index 0000000000..43b8263400
--- /dev/null
+++ b/package/src/external/reanimated/useVideoLoading.web.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+import type { Video } from "../../skia/types";
+import { Skia } from "../../skia";
+
+type VideoSource = string | null;
+
+export const useVideoLoading = (source: VideoSource) => {
+  const [video, setVideo] = useState<Video | null>(null);
+  useEffect(() => {
+    if (source) {
+      const vid = Skia.Video(source) as Promise<Video>;
+      vid.then((v) => setVideo(v));
+    }
+  }, [source]);
+  return video;
+};
diff --git a/package/src/skia/types/Skia.ts b/package/src/skia/types/Skia.ts
index f0904c36e6..ca0c2edcf2 100644
--- a/package/src/skia/types/Skia.ts
+++ b/package/src/skia/types/Skia.ts
@@ -96,6 +96,6 @@ export interface Skia {
   TextBlob: TextBlobFactory;
   Surface: SurfaceFactory;
   ParagraphBuilder: ParagraphBuilderFactory;
-  Video: (url: string) => Video;
+  Video: (url: string) => Promise<Video> | Video;
   NativeBuffer: NativeBufferFactory;
 }
diff --git a/package/src/skia/web/JsiSkia.ts b/package/src/skia/web/JsiSkia.ts
index c6908c745f..0d5c370f20 100644
--- a/package/src/skia/web/JsiSkia.ts
+++ b/package/src/skia/web/JsiSkia.ts
@@ -42,6 +42,7 @@ import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
 import { JsiSkAnimatedImageFactory } from "./JsiSkAnimatedImageFactory";
 import { JsiSkParagraphBuilderFactory } from "./JsiSkParagraphBuilderFactory";
 import { JsiSkNativeBufferFactory } from "./JsiSkNativeBufferFactory";
+import { JsiVideo } from "./JsiVideo";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -127,7 +128,20 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   FontMgr: new JsiSkFontMgrFactory(CanvasKit),
   ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),
   NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),
-  Video: (_localUri: string) => {
-    throw new Error("Not implemented on React Native Web");
+  Video: (url: string) => {
+    const video = document.createElement("video");
+    return new Promise((resolve, reject) => {
+      video.src = url;
+      video.style.display = "none";
+      video.crossOrigin = "anonymous";
+      video.volume = 0;
+      video.addEventListener("loadedmetadata", () => {
+        document.body.appendChild(video);
+        resolve(new JsiVideo(CanvasKit, video));
+      });
+      video.addEventListener("error", () => {
+        reject(new Error(`Failed to load video from URL: ${url}`));
+      });
+    });
   },
 });
diff --git a/package/src/skia/web/JsiVideo.ts b/package/src/skia/web/JsiVideo.ts
new file mode 100644
index 0000000000..50e3f23754
--- /dev/null
+++ b/package/src/skia/web/JsiVideo.ts
@@ -0,0 +1,87 @@
+import type { CanvasKit, Surface } from "canvaskit-wasm";
+
+import type { Video } from "../types";
+
+import { JsiSkImage } from "./JsiSkImage";
+
+export class JsiVideo implements Video {
+  __typename__ = "Video" as const;
+
+  private surface: Surface | null = null;
+  private img: JsiSkImage | null = null;
+
+  constructor(
+    private CanvasKit: CanvasKit,
+    private videoElement: HTMLVideoElement,
+    private fps = 30
+  ) {
+    document.body.appendChild(this.videoElement);
+  }
+
+  duration() {
+    return this.videoElement.duration * 1000;
+  }
+
+  framerate(): number {
+    return this.fps;
+  }
+
+  setSurface(surface: Surface) {
+    if (!this.surface) {
+      this.surface = surface;
+      const img = surface.makeImageFromTextureSource(this.videoElement);
+      if (img) {
+        this.img = new JsiSkImage(this.CanvasKit, img);
+      } else {
+        this.img = null;
+      }
+    }
+  }
+
+  nextImage() {
+    if (this.img && this.surface) {
+      this.surface.updateTextureFromSource(this.img.ref, this.videoElement);
+      return this.img;
+    }
+    return new JsiSkImage(
+      this.CanvasKit,
+      this.CanvasKit.MakeLazyImageFromTextureSource(this.videoElement)
+    );
+  }
+
+  seek(time: number) {
+    if (isNaN(time)) {
+      throw new Error(`Invalid time: ${time}`);
+    }
+    this.videoElement.currentTime = time / 1000;
+  }
+
+  rotation() {
+    return 0 as const;
+  }
+
+  size() {
+    return {
+      width: this.videoElement.videoWidth,
+      height: this.videoElement.videoHeight,
+    };
+  }
+
+  pause() {
+    this.videoElement.pause();
+  }
+
+  play() {
+    this.videoElement.play();
+  }
+
+  setVolume(volume: number) {
+    this.videoElement.volume = volume;
+  }
+
+  dispose() {
+    if (this.videoElement.parentNode) {
+      this.videoElement.parentNode.removeChild(this.videoElement);
+    }
+  }
+}

From 5363a856073a2826f740c379a0aeec5f4df0372e Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Thu, 13 Jun 2024 07:26:03 +0200
Subject: [PATCH 08/11] :wrench:

---
 docs/docs/video.md                          |  4 +++-
 package/src/external/reanimated/useVideo.ts |  9 ++++++--
 package/src/skia/web/JsiSkia.ts             | 19 ++--------------
 package/src/skia/web/JsiVideo.ts            | 25 ++++++++++++++++++---
 4 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/docs/docs/video.md b/docs/docs/video.md
index 670ed29118..213efe4efd 100644
--- a/docs/docs/video.md
+++ b/docs/docs/video.md
@@ -5,7 +5,9 @@ sidebar_label: Video
 slug: /video
 ---
 
-React Native Skia provides a way to load video frames as images, enabling rich multimedia experiences within your applications. A video frame can be used anywhere a Skia image is accepted: `Image`, `ImageShader`, and `Atlas`.
+React Native Skia provides a way to load video frames as images, enabling rich multimedia experiences within your applications.
+A video frame can be used anywhere a Skia image is accepted: `Image`, `ImageShader`, and `Atlas`.
+Videos are also supported on Web.
 
 ### Requirements
 
diff --git a/package/src/external/reanimated/useVideo.ts b/package/src/external/reanimated/useVideo.ts
index 20fc5f0185..9ec1f29084 100644
--- a/package/src/external/reanimated/useVideo.ts
+++ b/package/src/external/reanimated/useVideo.ts
@@ -76,7 +76,10 @@ export const useVideo = (
   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 framerate = useMemo(
+    () => (Platform.OS === "web" ? -1 : 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;
@@ -129,7 +132,9 @@ export const useVideo = (
       currentTime.value = seek.value;
       lastTimestamp.value = currentTimestamp;
     }
-    if (delta >= currentFrameDuration && !isOver) {
+    // 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;
diff --git a/package/src/skia/web/JsiSkia.ts b/package/src/skia/web/JsiSkia.ts
index 0d5c370f20..26089334db 100644
--- a/package/src/skia/web/JsiSkia.ts
+++ b/package/src/skia/web/JsiSkia.ts
@@ -42,7 +42,7 @@ import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
 import { JsiSkAnimatedImageFactory } from "./JsiSkAnimatedImageFactory";
 import { JsiSkParagraphBuilderFactory } from "./JsiSkParagraphBuilderFactory";
 import { JsiSkNativeBufferFactory } from "./JsiSkNativeBufferFactory";
-import { JsiVideo } from "./JsiVideo";
+import { createVideo, JsiVideo } from "./JsiVideo";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -128,20 +128,5 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   FontMgr: new JsiSkFontMgrFactory(CanvasKit),
   ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),
   NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),
-  Video: (url: string) => {
-    const video = document.createElement("video");
-    return new Promise((resolve, reject) => {
-      video.src = url;
-      video.style.display = "none";
-      video.crossOrigin = "anonymous";
-      video.volume = 0;
-      video.addEventListener("loadedmetadata", () => {
-        document.body.appendChild(video);
-        resolve(new JsiVideo(CanvasKit, video));
-      });
-      video.addEventListener("error", () => {
-        reject(new Error(`Failed to load video from URL: ${url}`));
-      });
-    });
-  },
+  Video: createVideo.bind(null, CanvasKit),
 });
diff --git a/package/src/skia/web/JsiVideo.ts b/package/src/skia/web/JsiVideo.ts
index 50e3f23754..7e5d5ec88b 100644
--- a/package/src/skia/web/JsiVideo.ts
+++ b/package/src/skia/web/JsiVideo.ts
@@ -4,6 +4,26 @@ import type { Video } from "../types";
 
 import { JsiSkImage } from "./JsiSkImage";
 
+export const createVideo = async (
+  CanvasKit: CanvasKit,
+  url: string
+): Promise<Video> => {
+  const video = document.createElement("video");
+  return new Promise((resolve, reject) => {
+    video.src = url;
+    video.style.display = "none";
+    video.crossOrigin = "anonymous";
+    video.volume = 0;
+    video.addEventListener("loadedmetadata", () => {
+      document.body.appendChild(video);
+      resolve(new JsiVideo(CanvasKit, video));
+    });
+    video.addEventListener("error", () => {
+      reject(new Error(`Failed to load video from URL: ${url}`));
+    });
+  });
+};
+
 export class JsiVideo implements Video {
   __typename__ = "Video" as const;
 
@@ -12,8 +32,7 @@ export class JsiVideo implements Video {
 
   constructor(
     private CanvasKit: CanvasKit,
-    private videoElement: HTMLVideoElement,
-    private fps = 30
+    private videoElement: HTMLVideoElement
   ) {
     document.body.appendChild(this.videoElement);
   }
@@ -23,7 +42,7 @@ export class JsiVideo implements Video {
   }
 
   framerate(): number {
-    return this.fps;
+    throw new Error("Video.frame is not available on React Native Web");
   }
 
   setSurface(surface: Surface) {

From 9d93cc62623c126e5c259cd327114044eaf9d70c Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Thu, 13 Jun 2024 08:27:21 +0200
Subject: [PATCH 09/11] :wrench:

---
 package/src/renderer/__tests__/e2e/Video.spec.tsx | 5 +++--
 package/src/skia/web/JsiSkia.ts                   | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/package/src/renderer/__tests__/e2e/Video.spec.tsx b/package/src/renderer/__tests__/e2e/Video.spec.tsx
index f65764ba6c..2094e2ce4e 100644
--- a/package/src/renderer/__tests__/e2e/Video.spec.tsx
+++ b/package/src/renderer/__tests__/e2e/Video.spec.tsx
@@ -1,10 +1,11 @@
 import { itRunsE2eOnly } from "../../../__tests__/setup";
+import type { Video } from "../../../skia/types";
 import { surface } from "../setup";
 
 describe("Videos", () => {
   itRunsE2eOnly("get video duration and framerate", async () => {
     const result = await surface.eval((Skia, ctx) => {
-      const video = Skia.Video(ctx.localAssets[0]);
+      const video = Skia.Video(ctx.localAssets[0]) as Video;
       return {
         duration: video.duration(),
         framerate: video.framerate(),
@@ -57,7 +58,7 @@ describe("Videos", () => {
   // });
   itRunsE2eOnly("seek non existing frame returns null", async () => {
     const result = await surface.eval((Skia, ctx) => {
-      const video = Skia.Video(ctx.localAssets[0]);
+      const video = Skia.Video(ctx.localAssets[0]) as Video;
       video.seek(100000);
       const image = video.nextImage();
       return image === null;
diff --git a/package/src/skia/web/JsiSkia.ts b/package/src/skia/web/JsiSkia.ts
index 26089334db..165ffc01b4 100644
--- a/package/src/skia/web/JsiSkia.ts
+++ b/package/src/skia/web/JsiSkia.ts
@@ -42,7 +42,7 @@ import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
 import { JsiSkAnimatedImageFactory } from "./JsiSkAnimatedImageFactory";
 import { JsiSkParagraphBuilderFactory } from "./JsiSkParagraphBuilderFactory";
 import { JsiSkNativeBufferFactory } from "./JsiSkNativeBufferFactory";
-import { createVideo, JsiVideo } from "./JsiVideo";
+import { createVideo } from "./JsiVideo";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>

From 81e2d57ab8f11f9126881fedd81c859c4c7534a2 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Thu, 13 Jun 2024 08:55:50 +0200
Subject: [PATCH 10/11] factorize nativebuffer logic

---
 .../types/NativeBuffer/NativeBufferFactory.ts | 12 ++++-
 .../src/skia/web/CanvasKitWebGLBufferImpl.ts  | 22 ++++++++++
 package/src/skia/web/JsiSkImageFactory.ts     | 19 ++++++--
 package/src/skia/web/JsiSkia.ts               |  2 +-
 package/src/skia/web/JsiVideo.ts              | 44 ++++++-------------
 5 files changed, 63 insertions(+), 36 deletions(-)
 create mode 100644 package/src/skia/web/CanvasKitWebGLBufferImpl.ts

diff --git a/package/src/skia/types/NativeBuffer/NativeBufferFactory.ts b/package/src/skia/types/NativeBuffer/NativeBufferFactory.ts
index acd9e83448..51160cedd6 100644
--- a/package/src/skia/types/NativeBuffer/NativeBufferFactory.ts
+++ b/package/src/skia/types/NativeBuffer/NativeBufferFactory.ts
@@ -1,7 +1,14 @@
 import type { SkImage } from "../Image";
 
+export abstract class CanvasKitWebGLBuffer {}
+
 export type NativeBuffer<
-  T extends bigint | ArrayBuffer | CanvasImageSource | unknown = unknown
+  T extends
+    | bigint
+    | ArrayBuffer
+    | CanvasImageSource
+    | CanvasKitWebGLBuffer
+    | unknown = unknown
 > = T;
 
 export type NativeBufferAddr = NativeBuffer<bigint>;
@@ -20,7 +27,8 @@ export const isNativeBufferWeb = (
   buffer instanceof OffscreenCanvas ||
   buffer instanceof VideoFrame ||
   buffer instanceof HTMLImageElement ||
-  buffer instanceof SVGImageElement;
+  buffer instanceof SVGImageElement ||
+  buffer instanceof CanvasKitWebGLBuffer;
 
 export const isNativeBufferNode = (
   buffer: NativeBuffer
diff --git a/package/src/skia/web/CanvasKitWebGLBufferImpl.ts b/package/src/skia/web/CanvasKitWebGLBufferImpl.ts
new file mode 100644
index 0000000000..02ebd7c5e6
--- /dev/null
+++ b/package/src/skia/web/CanvasKitWebGLBufferImpl.ts
@@ -0,0 +1,22 @@
+import type { Surface, TextureSource, Image } from "canvaskit-wasm";
+
+import { CanvasKitWebGLBuffer } from "../types";
+
+export class CanvasKitWebGLBufferImpl extends CanvasKitWebGLBuffer {
+  public image: Image | null = null;
+
+  constructor(public surface: Surface, private source: TextureSource) {
+    super();
+  }
+
+  toImage() {
+    if (this.image === null) {
+      this.image = this.surface.makeImageFromTextureSource(this.source);
+    }
+    if (this.image === null) {
+      throw new Error("Failed to create image from texture source");
+    }
+    this.surface.updateTextureFromSource(this.image, this.source);
+    return this.image;
+  }
+}
diff --git a/package/src/skia/web/JsiSkImageFactory.ts b/package/src/skia/web/JsiSkImageFactory.ts
index fd3a4f94c8..09b6521542 100644
--- a/package/src/skia/web/JsiSkImageFactory.ts
+++ b/package/src/skia/web/JsiSkImageFactory.ts
@@ -1,6 +1,6 @@
 import type { CanvasKit, Image } from "canvaskit-wasm";
 
-import { isNativeBufferWeb } from "../types";
+import { CanvasKitWebGLBuffer, isNativeBufferWeb } from "../types";
 import type {
   SkData,
   ImageInfo,
@@ -13,6 +13,7 @@ import { Host, getEnum } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
 import { JsiSkData } from "./JsiSkData";
 import type { JsiSkSurface } from "./JsiSkSurface";
+import type { CanvasKitWebGLBufferImpl } from "./CanvasKitWebGLBufferImpl";
 
 export class JsiSkImageFactory extends Host implements ImageFactory {
   constructor(CanvasKit: CanvasKit) {
@@ -35,8 +36,20 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
       throw new Error("Invalid NativeBuffer");
     }
     if (!surface) {
-      // TODO: this is way to slow
-      const img = this.CanvasKit.MakeImageFromCanvasImageSource(buffer);
+      let img: Image;
+      if (
+        buffer instanceof HTMLImageElement ||
+        buffer instanceof HTMLVideoElement ||
+        buffer instanceof ImageBitmap
+      ) {
+        img = this.CanvasKit.MakeLazyImageFromTextureSource(buffer);
+      } else if (buffer instanceof CanvasKitWebGLBuffer) {
+        img = (
+          buffer as CanvasKitWebGLBuffer as CanvasKitWebGLBufferImpl
+        ).toImage();
+      } else {
+        img = this.CanvasKit.MakeImageFromCanvasImageSource(buffer);
+      }
       return new JsiSkImage(this.CanvasKit, img);
     } else if (!image) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/package/src/skia/web/JsiSkia.ts b/package/src/skia/web/JsiSkia.ts
index 165ffc01b4..7cad5b50e1 100644
--- a/package/src/skia/web/JsiSkia.ts
+++ b/package/src/skia/web/JsiSkia.ts
@@ -128,5 +128,5 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   FontMgr: new JsiSkFontMgrFactory(CanvasKit),
   ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),
   NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),
-  Video: createVideo.bind(null, CanvasKit),
+  Video: createVideo,
 });
diff --git a/package/src/skia/web/JsiVideo.ts b/package/src/skia/web/JsiVideo.ts
index 7e5d5ec88b..7d96f3694a 100644
--- a/package/src/skia/web/JsiVideo.ts
+++ b/package/src/skia/web/JsiVideo.ts
@@ -1,13 +1,11 @@
-import type { CanvasKit, Surface } from "canvaskit-wasm";
+import type { Surface } from "canvaskit-wasm";
 
-import type { Video } from "../types";
+import type { CanvasKitWebGLBuffer, Video } from "../types";
+import { Skia } from "../Skia";
 
-import { JsiSkImage } from "./JsiSkImage";
+import { CanvasKitWebGLBufferImpl } from "./CanvasKitWebGLBufferImpl";
 
-export const createVideo = async (
-  CanvasKit: CanvasKit,
-  url: string
-): Promise<Video> => {
+export const createVideo = async (url: string): Promise<Video> => {
   const video = document.createElement("video");
   return new Promise((resolve, reject) => {
     video.src = url;
@@ -16,7 +14,7 @@ export const createVideo = async (
     video.volume = 0;
     video.addEventListener("loadedmetadata", () => {
       document.body.appendChild(video);
-      resolve(new JsiVideo(CanvasKit, video));
+      resolve(new JsiVideo(video));
     });
     video.addEventListener("error", () => {
       reject(new Error(`Failed to load video from URL: ${url}`));
@@ -27,13 +25,9 @@ export const createVideo = async (
 export class JsiVideo implements Video {
   __typename__ = "Video" as const;
 
-  private surface: Surface | null = null;
-  private img: JsiSkImage | null = null;
+  private webglBuffer: CanvasKitWebGLBuffer | null = null;
 
-  constructor(
-    private CanvasKit: CanvasKit,
-    private videoElement: HTMLVideoElement
-  ) {
+  constructor(private videoElement: HTMLVideoElement) {
     document.body.appendChild(this.videoElement);
   }
 
@@ -46,25 +40,15 @@ export class JsiVideo implements Video {
   }
 
   setSurface(surface: Surface) {
-    if (!this.surface) {
-      this.surface = surface;
-      const img = surface.makeImageFromTextureSource(this.videoElement);
-      if (img) {
-        this.img = new JsiSkImage(this.CanvasKit, img);
-      } else {
-        this.img = null;
-      }
-    }
+    // If we have the surface, we can use the WebGL buffer which is slightly faster
+    // This is because WebGL cannot be shared across contextes.
+    // This can be removed with WebGPU
+    this.webglBuffer = new CanvasKitWebGLBufferImpl(surface, this.videoElement);
   }
 
   nextImage() {
-    if (this.img && this.surface) {
-      this.surface.updateTextureFromSource(this.img.ref, this.videoElement);
-      return this.img;
-    }
-    return new JsiSkImage(
-      this.CanvasKit,
-      this.CanvasKit.MakeLazyImageFromTextureSource(this.videoElement)
+    return Skia.Image.MakeImageFromNativeBuffer(
+      this.webglBuffer ? this.webglBuffer : this.videoElement
     );
   }
 

From f1ed1c302fd40e5598a8829258d077b1a92186e2 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Thu, 13 Jun 2024 09:11:35 +0200
Subject: [PATCH 11/11] :green_heart:

---
 package/src/skia/web/JsiSkia.ts  |  2 +-
 package/src/skia/web/JsiVideo.ts | 20 +++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/package/src/skia/web/JsiSkia.ts b/package/src/skia/web/JsiSkia.ts
index 7cad5b50e1..165ffc01b4 100644
--- a/package/src/skia/web/JsiSkia.ts
+++ b/package/src/skia/web/JsiSkia.ts
@@ -128,5 +128,5 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   FontMgr: new JsiSkFontMgrFactory(CanvasKit),
   ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),
   NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),
-  Video: createVideo,
+  Video: createVideo.bind(null, CanvasKit),
 });
diff --git a/package/src/skia/web/JsiVideo.ts b/package/src/skia/web/JsiVideo.ts
index 7d96f3694a..abbb556a4f 100644
--- a/package/src/skia/web/JsiVideo.ts
+++ b/package/src/skia/web/JsiVideo.ts
@@ -1,11 +1,14 @@
-import type { Surface } from "canvaskit-wasm";
+import type { CanvasKit, Surface } from "canvaskit-wasm";
 
-import type { CanvasKitWebGLBuffer, Video } from "../types";
-import { Skia } from "../Skia";
+import type { CanvasKitWebGLBuffer, Video, ImageFactory } from "../types";
 
 import { CanvasKitWebGLBufferImpl } from "./CanvasKitWebGLBufferImpl";
+import { JsiSkImageFactory } from "./JsiSkImageFactory";
 
-export const createVideo = async (url: string): Promise<Video> => {
+export const createVideo = async (
+  CanvasKit: CanvasKit,
+  url: string
+): Promise<Video> => {
   const video = document.createElement("video");
   return new Promise((resolve, reject) => {
     video.src = url;
@@ -14,7 +17,7 @@ export const createVideo = async (url: string): Promise<Video> => {
     video.volume = 0;
     video.addEventListener("loadedmetadata", () => {
       document.body.appendChild(video);
-      resolve(new JsiVideo(video));
+      resolve(new JsiVideo(new JsiSkImageFactory(CanvasKit), video));
     });
     video.addEventListener("error", () => {
       reject(new Error(`Failed to load video from URL: ${url}`));
@@ -27,7 +30,10 @@ export class JsiVideo implements Video {
 
   private webglBuffer: CanvasKitWebGLBuffer | null = null;
 
-  constructor(private videoElement: HTMLVideoElement) {
+  constructor(
+    private ImageFactory: ImageFactory,
+    private videoElement: HTMLVideoElement
+  ) {
     document.body.appendChild(this.videoElement);
   }
 
@@ -47,7 +53,7 @@ export class JsiVideo implements Video {
   }
 
   nextImage() {
-    return Skia.Image.MakeImageFromNativeBuffer(
+    return this.ImageFactory.MakeImageFromNativeBuffer(
       this.webglBuffer ? this.webglBuffer : this.videoElement
     );
   }