feat(📸): video support (#2438)

docs/docs/video.md

@@ -0,0 +1,96 @@
+---
+id: video
+title: Video
+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`.
+
+## Requirements
+
+- **Android:** API level 26 or higher.
+- **Video URL:** Must be a local path. We recommend using it in combination with [expo-asset](https://docs.expo.dev/versions/latest/sdk/asset/) to download the video.
+- **Animated Playback:** Available only via [Reanimated 3](/docs/animations/animations) and above.
+- **Sound Playback:** Coming soon. In the meantime, audio can be played using [expo-av](https://docs.expo.dev/versions/latest/sdk/av/).
+
+## Example
+
+Here is an example of how to use the video support in React Native Skia. This example demonstrates how to load and display video frames within a canvas, applying a color matrix for visual effects. Tapping the screen will pause and play the video.
+
+```tsx twoslash
+import React from "react";
+import {
+  Canvas,
+  ColorMatrix,
+  Fill,
+  ImageShader,
+  useVideo
+} from "@shopify/react-native-skia";
+import { Pressable, useWindowDimensions } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+
+interface VideoExampleProps {
+    localVideoFile: string;
+}
+
+// The URL needs to be a local path, we usually use expo-asset for that.
+export const VideoExample = ({ localVideoFile }: VideoExampleProps) => {
+  const paused = useSharedValue(false);
+  const { width, height } = useWindowDimensions();
+  const video = useVideo(
+    require(localVideoFile),
+    {
+      paused,
+    }
+  );
+  return (
+    <Pressable
+      style={{ flex: 1 }}
+      onPress={() => (paused.value = !paused.value)}
+    >
+      <Canvas style={{ flex: 1 }}>
+        <Fill>
+          <ImageShader
+            image={video}
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            fit="cover"
+          />
+          <ColorMatrix
+            matrix={[
+              0.95, 0, 0, 0, 0.05, 0.65, 0, 0, 0, 0.15, 0.15, 0, 0, 0, 0.5, 0,
+              0, 0, 1, 0,
+            ]}
+          />
+        </Fill>
+      </Canvas>
+    </Pressable>
+  );
+};
+```
+
+## Using expo-asset
+
+Below is an example where we use [expo-asset](https://docs.expo.dev/versions/latest/sdk/asset/) to load the video.
+
+```tsx twoslash
+import { useVideo } from "@shopify/react-native-skia";
+import { useAssets } from "expo-asset";
+
+// Example usage:
+// const video = useVideoFromAsset(require("./BigBuckBunny.mp4"));
+export const useVideoFromAsset = (
+  mod: number,
+  options?: Parameters<typeof useVideo>[1]
+) => {
+  const [assets, error] = useAssets([mod]);
+  if (error) {
+    throw error;
+  }
+  return useVideo(assets ? assets[0].localUri : null, options);
+};
+```

docs/package.json

@@ -23,6 +23,7 @@
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "docusaurus-preset-shiki-twoslash": "1.1.41",
+    "expo-asset": "^10.0.6",
     "file-loader": "^6.2.0",
     "its-fine": "^1.0.8",
     "prism-react-renderer": "^1.2.1",

docs/sidebars.js

@@ -63,6 +63,11 @@ const sidebars = {
       label: "Images",
       items: ["image", "animated-images", "image-svg", "snapshotviews"],
     },
+    {
+      type: "doc",
+      label: "Video",
+      id: "video",
+    },
     {
       collapsed: true,
       type: "category",