@shopify/react-native-skia 1.3.3 → 1.3.4

package/lib/module/skia/web/JsiVideo.js

@@ -0,0 +1,75 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { CanvasKitWebGLBufferImpl } from "./CanvasKitWebGLBufferImpl";
+import { JsiSkImageFactory } from "./JsiSkImageFactory";
+export const createVideo = async (CanvasKit, url) => {
+  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(new JsiSkImageFactory(CanvasKit), video));
+    });
+    video.addEventListener("error", () => {
+      reject(new Error(`Failed to load video from URL: ${url}`));
+    });
+  });
+};
+export class JsiVideo {
+  constructor(ImageFactory, videoElement) {
+    this.ImageFactory = ImageFactory;
+    this.videoElement = videoElement;
+    _defineProperty(this, "__typename__", "Video");
+    _defineProperty(this, "webglBuffer", null);
+    document.body.appendChild(this.videoElement);
+  }
+  duration() {
+    return this.videoElement.duration * 1000;
+  }
+  framerate() {
+    throw new Error("Video.frame is not available on React Native Web");
+  }
+  setSurface(surface) {
+    // 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() {
+    return this.ImageFactory.MakeImageFromNativeBuffer(this.webglBuffer ? this.webglBuffer : this.videoElement);
+  }
+  seek(time) {
+    if (isNaN(time)) {
+      throw new Error(`Invalid time: ${time}`);
+    }
+    this.videoElement.currentTime = time / 1000;
+  }
+  rotation() {
+    return 0;
+  }
+  size() {
+    return {
+      width: this.videoElement.videoWidth,
+      height: this.videoElement.videoHeight
+    };
+  }
+  pause() {
+    this.videoElement.pause();
+  }
+  play() {
+    this.videoElement.play();
+  }
+  setVolume(volume) {
+    this.videoElement.volume = volume;
+  }
+  dispose() {
+    if (this.videoElement.parentNode) {
+      this.videoElement.parentNode.removeChild(this.videoElement);
+    }
+  }
+}
+//# sourceMappingURL=JsiVideo.js.map

package/lib/module/skia/web/JsiVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CanvasKitWebGLBufferImpl","JsiSkImageFactory","createVideo","CanvasKit","url","video","document","createElement","Promise","resolve","reject","src","style","display","crossOrigin","volume","addEventListener","body","appendChild","JsiVideo","Error","constructor","ImageFactory","videoElement","_defineProperty","duration","framerate","setSurface","surface","webglBuffer","nextImage","MakeImageFromNativeBuffer","seek","time","isNaN","currentTime","rotation","size","width","videoWidth","height","videoHeight","pause","play","setVolume","dispose","parentNode","removeChild"],"sources":["JsiVideo.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { CanvasKitWebGLBuffer, Video, ImageFactory } from \"../types\";\n\nimport { CanvasKitWebGLBufferImpl } from \"./CanvasKitWebGLBufferImpl\";\nimport { JsiSkImageFactory } from \"./JsiSkImageFactory\";\n\nexport const createVideo = async (\n  CanvasKit: CanvasKit,\n  url: string\n): Promise<Video> => {\n  const video = document.createElement(\"video\");\n  return new Promise((resolve, reject) => {\n    video.src = url;\n    video.style.display = \"none\";\n    video.crossOrigin = \"anonymous\";\n    video.volume = 0;\n    video.addEventListener(\"loadedmetadata\", () => {\n      document.body.appendChild(video);\n      resolve(new JsiVideo(new JsiSkImageFactory(CanvasKit), video));\n    });\n    video.addEventListener(\"error\", () => {\n      reject(new Error(`Failed to load video from URL: ${url}`));\n    });\n  });\n};\n\nexport class JsiVideo implements Video {\n  __typename__ = \"Video\" as const;\n\n  private webglBuffer: CanvasKitWebGLBuffer | null = null;\n\n  constructor(\n    private ImageFactory: ImageFactory,\n    private videoElement: HTMLVideoElement\n  ) {\n    document.body.appendChild(this.videoElement);\n  }\n\n  duration() {\n    return this.videoElement.duration * 1000;\n  }\n\n  framerate(): number {\n    throw new Error(\"Video.frame is not available on React Native Web\");\n  }\n\n  setSurface(surface: Surface) {\n    // If we have the surface, we can use the WebGL buffer which is slightly faster\n    // This is because WebGL cannot be shared across contextes.\n    // This can be removed with WebGPU\n    this.webglBuffer = new CanvasKitWebGLBufferImpl(surface, this.videoElement);\n  }\n\n  nextImage() {\n    return this.ImageFactory.MakeImageFromNativeBuffer(\n      this.webglBuffer ? this.webglBuffer : this.videoElement\n    );\n  }\n\n  seek(time: number) {\n    if (isNaN(time)) {\n      throw new Error(`Invalid time: ${time}`);\n    }\n    this.videoElement.currentTime = time / 1000;\n  }\n\n  rotation() {\n    return 0 as const;\n  }\n\n  size() {\n    return {\n      width: this.videoElement.videoWidth,\n      height: this.videoElement.videoHeight,\n    };\n  }\n\n  pause() {\n    this.videoElement.pause();\n  }\n\n  play() {\n    this.videoElement.play();\n  }\n\n  setVolume(volume: number) {\n    this.videoElement.volume = volume;\n  }\n\n  dispose() {\n    if (this.videoElement.parentNode) {\n      this.videoElement.parentNode.removeChild(this.videoElement);\n    }\n  }\n}\n"],"mappings":"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"}

package/lib/module/views/SkiaDomView.js

@@ -26,6 +26,8 @@ export class SkiaDomView extends React.Component {
     }
     if (onTouch) {
       assertSkiaViewApi();
+      console.warn(`The onTouch property is deprecated and will be removed in the next Skia release.
+See: https://shopify.github.io/react-native-skia/docs/animations/gestures`);
       SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
     }
     if (onSize) {

package/lib/module/views/SkiaDomView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","SkiaDomViewNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaDomView","OS","SkiaDomView","Component","constructor","props","_defineProperty","_nativeId","current","root","onTouch","onSize","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","makeImageSnapshotAsync","redraw","requestRedraw","componentWillUnmount","render","mode","debug","viewProps","createElement","_extends","collapsable","nativeID","callJsiMethod","Error"],"sources":["SkiaDomView.tsx"],"sourcesContent":["import React from \"react\";\nimport type { HostComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport { Platform } from \"../Platform\";\nimport SkiaDomViewNativeComponent from \"../specs/SkiaDomViewNativeComponent\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaDomViewProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\nconst NativeSkiaDomView: HostComponent<SkiaDomViewProps> =\n  Platform.OS !== \"web\"\n    ? SkiaDomViewNativeComponent\n    : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (null as any);\n\nexport class SkiaDomView extends React.Component<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId.current++;\n    const { root, onTouch, onSize } = props;\n    if (root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDomViewProps) {\n    const { root, onTouch, onSize } = this.props;\n    if (root !== prevProps.root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch !== prevProps.onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize !== prevProps.onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshotAsync(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshotAsync(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Clear up the dom node when unmounting to release resources.\n   */\n  componentWillUnmount(): void {\n    assertSkiaViewApi();\n    SkiaViewApi.setJsiProperty(this._nativeId, \"root\", null);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaDomView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,SAASC,QAAQ,QAAQ,aAAa;AACtC,OAAOC,0BAA0B,MAAM,qCAAqC;AAE5E,SAASC,WAAW,QAAQ,OAAO;AAEnC,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,MAAMC,iBAAkD,GACtDJ,QAAQ,CAACK,EAAE,KAAK,KAAK,GACjBJ,0BAA0B;AAC1B;AACC,IAAY;AAEnB,OAAO,MAAMK,WAAW,SAASP,KAAK,CAACQ,SAAS,CAAmB;EACjEC,WAAWA,CAACC,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA;IACb,IAAI,CAACC,SAAS,GAAGR,gBAAgB,CAACS,OAAO,EAAE;IAC3C,MAAM;MAAEC,IAAI;MAAEC,OAAO;MAAEC;IAAO,CAAC,GAAGN,KAAK;IACvC,IAAII,IAAI,EAAE;MACRG,iBAAiB,CAAC,CAAC;MACnBd,WAAW,CAACe,cAAc,CAAC,IAAI,CAACN,SAAS,EAAE,MAAM,EAAEE,IAAI,CAAC;IAC1D;IACA,IAAIC,OAAO,EAAE;MACXE,iBAAiB,CAAC,CAAC;MACnBd,WAAW,CAACe,cAAc,CAAC,IAAI,CAACN,SAAS,EAAE,SAAS,EAAEG,OAAO,CAAC;IAChE;IACA,IAAIC,MAAM,EAAE;MACVC,iBAAiB,CAAC,CAAC;MACnBd,WAAW,CAACe,cAAc,CAAC,IAAI,CAACN,SAAS,EAAE,QAAQ,EAAEI,MAAM,CAAC;IAC9D;EACF;EAIA,IAAWG,QAAQA,CAAA,EAAG;IACpB,OAAO,IAAI,CAACP,SAAS;EACvB;EAEAQ,kBAAkBA,CAACC,SAA2B,EAAE;IAC9C,MAAM;MAAEP,IAAI;MAAEC,OAAO;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACN,KAAK;IAC5C,IAAII,IAAI,KAAKO,SAAS,CAACP,IAAI,EAAE;MAC3BG,iBAAiB,CAAC,CAAC;MACnBd,WAAW,CAACe,cAAc,CAAC,IAAI,CAACN,SAAS,EAAE,MAAM,EAAEE,IAAI,CAAC;IAC1D;IACA,IAAIC,OAAO,KAAKM,SAAS,CAACN,OAAO,EAAE;MACjCE,iBAAiB,CAAC,CAAC;MACnBd,WAAW,CAACe,cAAc,CAAC,IAAI,CAACN,SAAS,EAAE,SAAS,EAAEG,OAAO,CAAC;IAChE;IACA,IAAIC,MAAM,KAAKK,SAAS,CAACL,MAAM,EAAE;MAC/BC,iBAAiB,CAAC,CAAC;MACnBd,WAAW,CAACe,cAAc,CAAC,IAAI,CAACN,SAAS,EAAE,QAAQ,EAAEI,MAAM,CAAC;IAC9D;EACF;;EAEA;AACF;AACA;AACA;AACA;EACSM,iBAAiBA,CAACC,IAAa,EAAE;IACtCN,iBAAiB,CAAC,CAAC;IACnB,OAAOd,WAAW,CAACmB,iBAAiB,CAAC,IAAI,CAACV,SAAS,EAAEW,IAAI,CAAC;EAC5D;;EAEA;AACF;AACA;AACA;AACA;EACSC,sBAAsBA,CAACD,IAAa,EAAE;IAC3CN,iBAAiB,CAAC,CAAC;IACnB,OAAOd,WAAW,CAACqB,sBAAsB,CAAC,IAAI,CAACZ,SAAS,EAAEW,IAAI,CAAC;EACjE;;EAEA;AACF;AACA;EACSE,MAAMA,CAAA,EAAG;IACdR,iBAAiB,CAAC,CAAC;IACnBd,WAAW,CAACuB,aAAa,CAAC,IAAI,CAACd,SAAS,CAAC;EAC3C;;EAEA;AACF;AACA;EACEe,oBAAoBA,CAAA,EAAS;IAC3BV,iBAAiB,CAAC,CAAC;IACnBd,WAAW,CAACe,cAAc,CAAC,IAAI,CAACN,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC;EAC1D;EAEAgB,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,IAAI;MAAEC,KAAK,GAAG,KAAK;MAAE,GAAGC;IAAU,CAAC,GAAG,IAAI,CAACrB,KAAK;IACxD,oBACEV,KAAA,CAAAgC,aAAA,CAAC3B,iBAAiB,EAAA4B,QAAA;MAChBC,WAAW,EAAE,KAAM;MACnBC,QAAQ,EAAG,GAAE,IAAI,CAACvB,SAAU,EAAE;MAC9BiB,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA;IAAM,GACTC,SAAS,CACd,CAAC;EAEN;AACF;AAEA,MAAMd,iBAAiB,GAAGA,CAAA,KAAM;EAC9B,IACEd,WAAW,KAAK,IAAI,IACpBA,WAAW,CAACe,cAAc,KAAK,IAAI,IACnCf,WAAW,CAACiC,aAAa,KAAK,IAAI,IAClCjC,WAAW,CAACuB,aAAa,KAAK,IAAI,IAClCvB,WAAW,CAACmB,iBAAiB,KAAK,IAAI,EACtC;IACA,MAAMe,KAAK,CAAC,8BAA8B,CAAC;EAC7C;AACF,CAAC"}
+{"version":3,"names":["React","Platform","SkiaDomViewNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaDomView","OS","SkiaDomView","Component","constructor","props","_defineProperty","_nativeId","current","root","onTouch","onSize","assertSkiaViewApi","setJsiProperty","console","warn","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","makeImageSnapshotAsync","redraw","requestRedraw","componentWillUnmount","render","mode","debug","viewProps","createElement","_extends","collapsable","nativeID","callJsiMethod","Error"],"sources":["SkiaDomView.tsx"],"sourcesContent":["import React from \"react\";\nimport type { HostComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport { Platform } from \"../Platform\";\nimport SkiaDomViewNativeComponent from \"../specs/SkiaDomViewNativeComponent\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaDomViewProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\nconst NativeSkiaDomView: HostComponent<SkiaDomViewProps> =\n  Platform.OS !== \"web\"\n    ? SkiaDomViewNativeComponent\n    : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (null as any);\n\nexport class SkiaDomView extends React.Component<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId.current++;\n    const { root, onTouch, onSize } = props;\n    if (root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch) {\n      assertSkiaViewApi();\n      console.warn(\n        `The onTouch property is deprecated and will be removed in the next Skia release.\nSee: https://shopify.github.io/react-native-skia/docs/animations/gestures`\n      );\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDomViewProps) {\n    const { root, onTouch, onSize } = this.props;\n    if (root !== prevProps.root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch !== prevProps.onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize !== prevProps.onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshotAsync(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshotAsync(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Clear up the dom node when unmounting to release resources.\n   */\n  componentWillUnmount(): void {\n    assertSkiaViewApi();\n    SkiaViewApi.setJsiProperty(this._nativeId, \"root\", null);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaDomView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":"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"}

package/lib/module/views/SkiaDomView.web.js

@@ -7,6 +7,8 @@ export class SkiaDomView extends SkiaBaseWebView {
   }
   renderInCanvas(canvas, touches) {
     if (this.props.onTouch) {
+      console.warn(`The onTouch property is deprecated and will be removed in the next Skia release.
+See: https://shopify.github.io/react-native-skia/docs/animations/gestures`);
       this.props.onTouch([touches]);
     }
     if (this.props.onSize) {

package/lib/module/views/SkiaDomView.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["Skia","JsiDrawingContext","SkiaBaseWebView","SkiaDomView","constructor","props","renderInCanvas","canvas","touches","onTouch","onSize","width","height","getSize","value","root","ctx","render"],"sources":["SkiaDomView.web.tsx"],"sourcesContent":["import { Skia } from \"../skia\";\nimport type { SkCanvas } from \"../skia/types\";\nimport { JsiDrawingContext } from \"../dom/types/DrawingContext\";\n\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\nimport type { SkiaDomViewProps, TouchInfo } from \"./types\";\n\nexport class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onTouch) {\n      this.props.onTouch([touches]);\n    }\n    if (this.props.onSize) {\n      const { width, height } = this.getSize();\n      this.props.onSize.value = { width, height };\n    }\n    if (this.props.root) {\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      this.props.root.render(ctx);\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAE9B,SAASC,iBAAiB,QAAQ,6BAA6B;AAE/D,SAASC,eAAe,QAAQ,mBAAmB;AAGnD,OAAO,MAAMC,WAAW,SAASD,eAAe,CAAmB;EACjEE,WAAWA,CAACC,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,CAAC;EACd;EAEUC,cAAcA,CAACC,MAAgB,EAAEC,OAAoB,EAAQ;IACrE,IAAI,IAAI,CAACH,KAAK,CAACI,OAAO,EAAE;MACtB,IAAI,CAACJ,KAAK,CAACI,OAAO,CAAC,CAACD,OAAO,CAAC,CAAC;IAC/B;IACA,IAAI,IAAI,CAACH,KAAK,CAACK,MAAM,EAAE;MACrB,MAAM;QAAEC,KAAK;QAAEC;MAAO,CAAC,GAAG,IAAI,CAACC,OAAO,CAAC,CAAC;MACxC,IAAI,CAACR,KAAK,CAACK,MAAM,CAACI,KAAK,GAAG;QAAEH,KAAK;QAAEC;MAAO,CAAC;IAC7C;IACA,IAAI,IAAI,CAACP,KAAK,CAACU,IAAI,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIf,iBAAiB,CAACD,IAAI,EAAEO,MAAM,CAAC;MAC/C,IAAI,CAACF,KAAK,CAACU,IAAI,CAACE,MAAM,CAACD,GAAG,CAAC;IAC7B;EACF;AACF"}
+{"version":3,"names":["Skia","JsiDrawingContext","SkiaBaseWebView","SkiaDomView","constructor","props","renderInCanvas","canvas","touches","onTouch","console","warn","onSize","width","height","getSize","value","root","ctx","render"],"sources":["SkiaDomView.web.tsx"],"sourcesContent":["import { Skia } from \"../skia\";\nimport type { SkCanvas } from \"../skia/types\";\nimport { JsiDrawingContext } from \"../dom/types/DrawingContext\";\n\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\nimport type { SkiaDomViewProps, TouchInfo } from \"./types\";\n\nexport class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onTouch) {\n      console.warn(\n        `The onTouch property is deprecated and will be removed in the next Skia release.\nSee: https://shopify.github.io/react-native-skia/docs/animations/gestures`\n      );\n      this.props.onTouch([touches]);\n    }\n    if (this.props.onSize) {\n      const { width, height } = this.getSize();\n      this.props.onSize.value = { width, height };\n    }\n    if (this.props.root) {\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      this.props.root.render(ctx);\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAE9B,SAASC,iBAAiB,QAAQ,6BAA6B;AAE/D,SAASC,eAAe,QAAQ,mBAAmB;AAGnD,OAAO,MAAMC,WAAW,SAASD,eAAe,CAAmB;EACjEE,WAAWA,CAACC,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,CAAC;EACd;EAEUC,cAAcA,CAACC,MAAgB,EAAEC,OAAoB,EAAQ;IACrE,IAAI,IAAI,CAACH,KAAK,CAACI,OAAO,EAAE;MACtBC,OAAO,CAACC,IAAI,CACT;AACT,0EACM,CAAC;MACD,IAAI,CAACN,KAAK,CAACI,OAAO,CAAC,CAACD,OAAO,CAAC,CAAC;IAC/B;IACA,IAAI,IAAI,CAACH,KAAK,CAACO,MAAM,EAAE;MACrB,MAAM;QAAEC,KAAK;QAAEC;MAAO,CAAC,GAAG,IAAI,CAACC,OAAO,CAAC,CAAC;MACxC,IAAI,CAACV,KAAK,CAACO,MAAM,CAACI,KAAK,GAAG;QAAEH,KAAK;QAAEC;MAAO,CAAC;IAC7C;IACA,IAAI,IAAI,CAACT,KAAK,CAACY,IAAI,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIjB,iBAAiB,CAACD,IAAI,EAAEO,MAAM,CAAC;MAC/C,IAAI,CAACF,KAAK,CAACY,IAAI,CAACE,MAAM,CAACD,GAAG,CAAC;IAC7B;EACF;AACF"}

package/lib/module/views/SkiaJSDomView.js

@@ -27,6 +27,8 @@ export class SkiaJSDomView extends React.Component {
     }
     if (onTouch) {
       assertSkiaViewApi();
+      console.warn(`The onTouch property is deprecated and will be removed in the next Skia release.
+See: https://shopify.github.io/react-native-skia/docs/animations/gestures`);
       SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
     }
     if (onSize) {

package/lib/module/views/SkiaJSDomView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","SkiaPictureViewNativeComponent","JsiDrawingContext","SkiaViewApi","SkiaViewNativeId","NativeSkiaPictureView","OS","SkiaJSDomView","Component","constructor","props","_defineProperty","_nativeId","current","root","onTouch","onSize","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","undefined","draw","makeImageSnapshot","rect","redraw","Skia","rec","PictureRecorder","canvas","beginRecording","ctx","render","picture","finishRecordingAsPicture","componentWillUnmount","mode","debug","viewProps","createElement","_extends","collapsable","nativeID","callJsiMethod","requestRedraw","Error"],"sources":["SkiaJSDomView.tsx"],"sourcesContent":["import React from \"react\";\nimport type { HostComponent } from \"react-native\";\n\nimport type { Skia, SkRect } from \"../skia/types\";\nimport { Platform } from \"../Platform\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport { JsiDrawingContext } from \"../dom/types\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaPictureViewProps, SkiaDomViewProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\nconst NativeSkiaPictureView: HostComponent<SkiaPictureViewProps> =\n  Platform.OS !== \"web\"\n    ? SkiaPictureViewNativeComponent\n    : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (null as any);\n\nexport class SkiaJSDomView extends React.Component<\n  SkiaDomViewProps & { Skia: Skia }\n> {\n  constructor(props: SkiaDomViewProps & { Skia: Skia }) {\n    super(props);\n    this._nativeId = SkiaViewNativeId.current++;\n    const { root, onTouch, onSize } = props;\n    if (root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDomViewProps & { Skia: Skia }) {\n    const { root, onTouch, onSize } = this.props;\n    if (root !== prevProps.root && root !== undefined) {\n      assertSkiaViewApi();\n      this.draw();\n    }\n    if (onTouch !== prevProps.onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize !== prevProps.onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    this.draw();\n    //SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  private draw() {\n    const { root, Skia } = this.props;\n    if (root !== undefined) {\n      assertSkiaViewApi();\n      const rec = Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      root.render(ctx);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n    }\n  }\n\n  /**\n   * Clear up the dom node when unmounting to release resources.\n   */\n  componentWillUnmount(): void {\n    assertSkiaViewApi();\n    SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", null);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaPictureView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","Platform","SkiaPictureViewNativeComponent","JsiDrawingContext","SkiaViewApi","SkiaViewNativeId","NativeSkiaPictureView","OS","SkiaJSDomView","Component","constructor","props","_defineProperty","_nativeId","current","root","onTouch","onSize","assertSkiaViewApi","setJsiProperty","console","warn","nativeId","componentDidUpdate","prevProps","undefined","draw","makeImageSnapshot","rect","redraw","Skia","rec","PictureRecorder","canvas","beginRecording","ctx","render","picture","finishRecordingAsPicture","componentWillUnmount","mode","debug","viewProps","createElement","_extends","collapsable","nativeID","callJsiMethod","requestRedraw","Error"],"sources":["SkiaJSDomView.tsx"],"sourcesContent":["import React from \"react\";\nimport type { HostComponent } from \"react-native\";\n\nimport type { Skia, SkRect } from \"../skia/types\";\nimport { Platform } from \"../Platform\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport { JsiDrawingContext } from \"../dom/types\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaPictureViewProps, SkiaDomViewProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\nconst NativeSkiaPictureView: HostComponent<SkiaPictureViewProps> =\n  Platform.OS !== \"web\"\n    ? SkiaPictureViewNativeComponent\n    : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (null as any);\n\nexport class SkiaJSDomView extends React.Component<\n  SkiaDomViewProps & { Skia: Skia }\n> {\n  constructor(props: SkiaDomViewProps & { Skia: Skia }) {\n    super(props);\n    this._nativeId = SkiaViewNativeId.current++;\n    const { root, onTouch, onSize } = props;\n    if (root) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n    }\n    if (onTouch) {\n      assertSkiaViewApi();\n      console.warn(\n        `The onTouch property is deprecated and will be removed in the next Skia release.\nSee: https://shopify.github.io/react-native-skia/docs/animations/gestures`\n      );\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDomViewProps & { Skia: Skia }) {\n    const { root, onTouch, onSize } = this.props;\n    if (root !== prevProps.root && root !== undefined) {\n      assertSkiaViewApi();\n      this.draw();\n    }\n    if (onTouch !== prevProps.onTouch) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n    }\n    if (onSize !== prevProps.onSize) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    this.draw();\n    //SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  private draw() {\n    const { root, Skia } = this.props;\n    if (root !== undefined) {\n      assertSkiaViewApi();\n      const rec = Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      root.render(ctx);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n    }\n  }\n\n  /**\n   * Clear up the dom node when unmounting to release resources.\n   */\n  componentWillUnmount(): void {\n    assertSkiaViewApi();\n    SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", null);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaPictureView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":"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"}

package/lib/typescript/src/external/reanimated/useVideoLoading.d.ts

@@ -0,0 +1,4 @@
+import type { Video } from "../../skia/types";
+type VideoSource = string | null;
+export declare const useVideoLoading: (source: VideoSource) => Video | null;
+export {};

package/lib/typescript/src/external/reanimated/useVideoLoading.web.d.ts

@@ -0,0 +1,4 @@
+import type { Video } from "../../skia/types";
+type VideoSource = string | null;
+export declare const useVideoLoading: (source: VideoSource) => Video | null;
+export {};

package/lib/typescript/src/skia/types/NativeBuffer/NativeBufferFactory.d.ts

@@ -1,5 +1,7 @@
 import type { SkImage } from "../Image";
-export type NativeBuffer<T extends bigint | ArrayBuffer | CanvasImageSource | unknown = unknown> = T;
+export declare abstract class CanvasKitWebGLBuffer {
+}
+export type NativeBuffer<T extends bigint | ArrayBuffer | CanvasImageSource | CanvasKitWebGLBuffer | unknown = unknown> = T;
 export type NativeBufferAddr = NativeBuffer<bigint>;
 export type NativeBufferWeb = NativeBuffer<CanvasImageSource>;
 export type NativeBufferNode = NativeBuffer<ArrayBuffer>;

package/lib/typescript/src/skia/types/Skia.d.ts

@@ -73,6 +73,6 @@ export interface Skia {
     TextBlob: TextBlobFactory;
     Surface: SurfaceFactory;
     ParagraphBuilder: ParagraphBuilderFactory;
-    Video: (url: string) => Video;
+    Video: (url: string) => Promise<Video> | Video;
     NativeBuffer: NativeBufferFactory;
 }

package/lib/typescript/src/skia/web/CanvasKitWebGLBufferImpl.d.ts

@@ -0,0 +1,9 @@
+import type { Surface, TextureSource, Image } from "canvaskit-wasm";
+import { CanvasKitWebGLBuffer } from "../types";
+export declare class CanvasKitWebGLBufferImpl extends CanvasKitWebGLBuffer {
+    surface: Surface;
+    private source;
+    image: Image | null;
+    constructor(surface: Surface, source: TextureSource);
+    toImage(): Image;
+}

package/lib/typescript/src/skia/web/JsiVideo.d.ts

@@ -0,0 +1,24 @@
+import type { CanvasKit, Surface } from "canvaskit-wasm";
+import type { Video, ImageFactory } from "../types";
+export declare const createVideo: (CanvasKit: CanvasKit, url: string) => Promise<Video>;
+export declare class JsiVideo implements Video {
+    private ImageFactory;
+    private videoElement;
+    __typename__: "Video";
+    private webglBuffer;
+    constructor(ImageFactory: ImageFactory, videoElement: HTMLVideoElement);
+    duration(): number;
+    framerate(): number;
+    setSurface(surface: Surface): void;
+    nextImage(): import("../types").SkImage;
+    seek(time: number): void;
+    rotation(): 0;
+    size(): {
+        width: number;
+        height: number;
+    };
+    pause(): void;
+    play(): void;
+    setVolume(volume: number): void;
+    dispose(): void;
+}

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/external/reanimated/useVideo.ts

@@ -1,11 +1,11 @@
 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;
 
@@ -16,6 +16,18 @@ 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) {
+      currentFrame.value = tex.makeNonTextureImage();
+      tex.dispose();
+    }
+  }
+};
+
 const setFrame = (video: Video, currentFrame: SharedValue<SkImage | null>) => {
   "worklet";
   const img = video.nextImage();
@@ -23,11 +35,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);
   }
 };
 
@@ -57,7 +67,7 @@ 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);
@@ -66,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;
@@ -86,6 +99,7 @@ export const useVideo = (
     () => seek.value,
     (value) => {
       if (value !== null) {
+        copyFrameOnAndroid(currentFrame);
         video?.seek(value);
         currentTime.value = value;
         seek.value = null;
@@ -118,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;

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;
+};

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;
+};

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

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;
 }

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;
+  }
+}

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

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 { createVideo } from "./JsiVideo";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -127,7 +128,5 @@ 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: createVideo.bind(null, CanvasKit),
 });

package/src/skia/web/JsiVideo.ts

@@ -0,0 +1,96 @@
+import type { CanvasKit, Surface } from "canvaskit-wasm";
+
+import type { CanvasKitWebGLBuffer, Video, ImageFactory } from "../types";
+
+import { CanvasKitWebGLBufferImpl } from "./CanvasKitWebGLBufferImpl";
+import { JsiSkImageFactory } from "./JsiSkImageFactory";
+
+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(new JsiSkImageFactory(CanvasKit), video));
+    });
+    video.addEventListener("error", () => {
+      reject(new Error(`Failed to load video from URL: ${url}`));
+    });
+  });
+};
+
+export class JsiVideo implements Video {
+  __typename__ = "Video" as const;
+
+  private webglBuffer: CanvasKitWebGLBuffer | null = null;
+
+  constructor(
+    private ImageFactory: ImageFactory,
+    private videoElement: HTMLVideoElement
+  ) {
+    document.body.appendChild(this.videoElement);
+  }
+
+  duration() {
+    return this.videoElement.duration * 1000;
+  }
+
+  framerate(): number {
+    throw new Error("Video.frame is not available on React Native Web");
+  }
+
+  setSurface(surface: Surface) {
+    // 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() {
+    return this.ImageFactory.MakeImageFromNativeBuffer(
+      this.webglBuffer ? this.webglBuffer : 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);
+    }
+  }
+}

package/src/views/SkiaDomView.tsx

@@ -26,6 +26,10 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
     }
     if (onTouch) {
       assertSkiaViewApi();
+      console.warn(
+        `The onTouch property is deprecated and will be removed in the next Skia release.
+See: https://shopify.github.io/react-native-skia/docs/animations/gestures`
+      );
       SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
     }
     if (onSize) {