fix: init elements only if they are loaded (#61)

* fix: render element only if player is ready

* Revert "fix: render element only if player is ready"

This reverts commit b09155157c0279d46f99ee8d0f74013452e00b64.

* fix: add elements only if player is ready

* fix: init image / video only if the element, element data and player are all ready

packages/react-vfx/src/element.tsx

@@ -31,12 +31,12 @@ function VFXElementFactory<T extends keyof JSX.IntrinsicElements>(
 
         // Create scene
         useEffect(() => {
-            const element = elementRef.current;
-            if (element === undefined) {
+            if (!player || !elementRef.current) {
                 return;
             }
+            const element = elementRef.current;
 
-            player?.addElement(element, {
+            player.addElement(element, {
                 shader,
                 release,
                 uniforms,
@@ -55,8 +55,8 @@ function VFXElementFactory<T extends keyof JSX.IntrinsicElements>(
             });
 
             return () => {
-                player?.removeElement(element);
                 mo.disconnect();
+                player.removeElement(element);
             };
         }, [elementRef, player, shader, release, uniforms, overflow]);
 

packages/react-vfx/src/image.tsx

@@ -1,37 +1,35 @@
 import * as React from "react";
-import { useRef, useContext, useCallback } from "react";
+import { useRef, useContext, useEffect, useState } from "react";
 import { VFXContext } from "./context";
 import { VFXProps } from "./types";
 
 export type VFXImgProps = JSX.IntrinsicElements["img"] & VFXProps;
 
 export const VFXImg: React.FC<VFXImgProps> = (props) => {
+    const { shader, release, uniforms, overflow, ...rawProps } = props;
+
     const player = useContext(VFXContext);
     const ref = useRef<HTMLImageElement>(null);
-
-    const { shader, release, uniforms, overflow, ...rawProps } = props;
+    const [isLoaded, setIsLoaded] = useState(false);
 
     // Create scene
-    const init = useCallback(() => {
-        if (ref.current === null) {
+    useEffect(() => {
+        if (!player || !ref.current || !isLoaded) {
             return;
         }
+        const element = ref.current;
 
-        player?.addElement(ref.current, {
+        player.addElement(element, {
             shader,
             release,
             uniforms,
             overflow,
         });
 
         return () => {
-            if (ref.current === null) {
-                return;
-            }
-
-            player?.removeElement(ref.current);
+            player.removeElement(element);
         };
-    }, [player, shader, release, uniforms, overflow]);
+    }, [player, shader, release, uniforms, overflow, isLoaded]);
 
-    return <img ref={ref} {...rawProps} onLoad={init} />;
+    return <img ref={ref} {...rawProps} onLoad={() => setIsLoaded(true)} />;
 };

packages/react-vfx/src/video.tsx

@@ -1,37 +1,37 @@
 import * as React from "react";
-import { useRef, useContext, useCallback } from "react";
+import { useRef, useContext, useState, useEffect } from "react";
 import { VFXContext } from "./context";
 import { VFXProps } from "./types";
 
 export type VFXVideoProps = JSX.IntrinsicElements["video"] & VFXProps;
 
 export const VFXVideo: React.FC<VFXVideoProps> = (props) => {
+    const { shader, release, uniforms, overflow, ...rawProps } = props;
+
     const player = useContext(VFXContext);
     const ref = useRef<HTMLVideoElement>(null);
-
-    const { shader, release, uniforms, overflow, ...rawProps } = props;
+    const [isLoaded, setIsLoaded] = useState(false);
 
     // Create scene
-    const onLoadedData = useCallback(() => {
-        if (ref.current === null) {
+    useEffect(() => {
+        if (!player || !ref.current || !isLoaded) {
             return;
         }
+        const element = ref.current;
 
-        player?.addElement(ref.current, {
+        player.addElement(element, {
             shader,
             release,
             uniforms,
             overflow,
         });
 
         return () => {
-            if (ref.current === null) {
-                return;
-            }
-
-            player?.removeElement(ref.current);
+            player.removeElement(element);
         };
-    }, [player, shader, release, uniforms, overflow]);
+    }, [player, shader, release, uniforms, overflow, isLoaded]);
 
-    return <video ref={ref} {...rawProps} onLoadedData={onLoadedData} />;
+    return (
+        <video ref={ref} {...rawProps} onLoadedData={() => setIsLoaded(true)} />
+    );
 };