From ba5cd8da9525604a35921af9443c069323c051b7 Mon Sep 17 00:00:00 2001
From: AMAGI / Jun Yuri <fand@users.noreply.github.com>
Date: Thu, 13 Jun 2024 02:45:47 -0700
Subject: [PATCH] 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 |  8 ++++----
 packages/react-vfx/src/image.tsx   | 24 +++++++++++-------------
 packages/react-vfx/src/video.tsx   | 26 +++++++++++++-------------
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/packages/react-vfx/src/element.tsx b/packages/react-vfx/src/element.tsx
index 25ee98c..53689a3 100644
--- a/packages/react-vfx/src/element.tsx
+++ b/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]);
 
diff --git a/packages/react-vfx/src/image.tsx b/packages/react-vfx/src/image.tsx
index 099f593..26a5293 100644
--- a/packages/react-vfx/src/image.tsx
+++ b/packages/react-vfx/src/image.tsx
@@ -1,23 +1,25 @@
 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,
@@ -25,13 +27,9 @@ export const VFXImg: React.FC<VFXImgProps> = (props) => {
         });
 
         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)} />;
 };
diff --git a/packages/react-vfx/src/video.tsx b/packages/react-vfx/src/video.tsx
index 2d64d88..a4524ca 100644
--- a/packages/react-vfx/src/video.tsx
+++ b/packages/react-vfx/src/video.tsx
@@ -1,23 +1,25 @@
 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,
@@ -25,13 +27,11 @@ export const VFXVideo: React.FC<VFXVideoProps> = (props) => {
         });
 
         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)} />
+    );
 };