fix(📸): load video metadata on dedicated thread (#2473)

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
@@ -85,14 +87,13 @@ 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");
 
   // 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;

package/src/external/reanimated/useVideo.ts

@@ -1,5 +1,11 @@
-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 +59,30 @@ 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);