How to extract offscreen video thumbnails?

[hungtooc]

In @shopify/react-native-skia version ^1.10.1
If the video is paused and you seek to a different time, the currentFrame value does not update, it's ok.
I want to show thumbnail images to overlay currentFrame while seeking the video (using react-native-gesture-handler Pan gesture in React Native).

import React from "react";
import {
  Canvas,
  Fill,
  Image,
  useVideo
} from "@shopify/react-native-skia";
import { Pressable, useWindowDimensions } from "react-native";
import { useSharedValue } from "react-native-reanimated";

export const VideoExample = () => {
  const seek = useSharedValue<null | number>(null);
  // Set this value to true to pause the video
  const paused = useSharedValue(false);
  const { width, height } = useWindowDimensions();
  const {currentFrame, currentTime} = useVideo(
    "https://bit.ly/skia-video",
    {
      seek,
      paused,
      looping: true
    }
  );
  return (
    <Pressable
      style={{ flex: 1 }}
      onPress={() => (seek.value = 2000)}
    >
      <Canvas style={{ flex: 1 }}>
        <Image
          image={currentFrame}
          x={0}
          y={0}
          width={width}
          height={height}
          fit="cover"
        />
      </Canvas>
    </Pressable>
  );
};

How to get video offscreen thumbnail ? Example low resolution images for each second, minute,...

[andrew-azzuu]

Did you find a way around this issue?

I have the same problem (I want to pause the video then seek to a position and have the preview image update immediately)

I had a look at the RNSkia code and found this line which will stop the return of a frame if the video is paused, comment out the return statement and you may have the solution you are looking for (I have only briefly tested this mind you)

Hope this helps, but if you have another idea then I'd be very interested in hearing your thoughts.

react-native-skia/packages/skia/src/external/reanimated/useVideo.ts

Line 121 in 953ce82

return;

[andrew-azzuu]

I would discard my previous advice but instead I found that changing the Rea.useAnimatedReaction(() => seek.value, {}) function to the following seems to behave a lot better:

  Rea.useAnimatedReaction(
    () => seek.value,
    (value) => {
      if (value !== null) {
        video?.seek(value);
        currentTime.value = value;
        seek.value = null;
       
        if (!video) {
            return;
        }
        setFrame(video, currentFrame);
        
      }
    }
  );