Video event props do not work on React View360

[pat-canex]

Description

Hi, I need to add listeners to some of the View360 events (timeupdate, durationchange, canplay, etc.), but the props to do so on the React implementation do not work.

I tried accessing the HTMLMediaElement directly and adding listeners on it instead and it only partially works. The durationchange and canplay events are triggered, but the timeupdate is only triggered once, instead of on each currentTime change.

I am using "@egjs/react-view360": "4.0.0-beta.7".

Steps to check or reproduce

1. Create a component that looks like this :

const [canPlay, setCanPlay] = useState<boolean>(false);
const viewerRef = React.useRef<View360>(null);

const projection = useMemo(() => new EquirectProjection({
    src: videoUrl!,
    video: {
        autoplay: false
    },
}), []);

const getVideo = () => {
    const texture = viewerRef.current?.mesh?.getTexture()
    return texture && "source" in texture ? texture.source as HTMLMediaElement : null;
}

useEffect(() => {
    viewerRef.current?.load(projection).then(() => {
        setCanPlay(true);
        getVideo()?.play();
    });
}, [viewerRef.current, projection]);

useEffect(() => {
    const video = getVideo();
    if (canPlay && video) {
        video.addEventListener("timeupdate", (e) => console.log("timeupdate", e));
        video.addEventListener("durationchange", (e) => console.log("durationchange", e));
        video.addEventListener("canplay", (e) => console.log("canplay", e));
    }
}, [canPlay]);

return (
    <View360
        style={{
            height: "100%",
            width: "100%",
            position: "absolute",
        }}
        ref={viewerRef}
        zoom
        zoomRange={{ min: 1, max: 30 }}
        initialZoom={10}
        fov={100}
        onTimeUpdate={() => { console.log("onTimeUpdate") }}
        onDurationChange={() => { console.log("onDurationChange") }}
        onCanPlay={() => { console.log("onCanPlay") }}
    />
);

2. Run that code.

Note this is temporary code, but the idea is to see if it would log the events using addEventListener and the props.

I only get the logs from the listeners added with addEventListener, but not with the props :

Also, the video is started as soon as it is ready with this code and, as mentioned above, I would expect the timeUpdate to be triggered regularly but it is only triggered once. I also tried using the autoplay or starting the video with a plugin play button to see if it would change the way the video is loaded (after seeing issues related to that i.e.: https://stackoverflow.com/questions/9770247/html5-video-timeupdate-event-not-firing), but to not avail.