#Astro React Video Component events not triggered

11 messages · Page 1 of 1 (latest)

frigid token
#

Hey Guys. Im trying to use the react integration.
Sadly some events of my video arent triggered. Steps to reproduce:

  1. Define Component:
export const VideoTest = () => {
    return (
        <video
            controls
            src={
                "https://player.vimeo.com/external/372335193.sd.mp4?s=80151fa22b2eba81883c8641f2c9e493762c7357&profile_id=164&oauth2_token_id=57447761"
            }
            onLoadStart={() => {
                console.log("LoadStart");
            }}
            onLoadedData={() => {
                console.log("LoadedData");
            }}
        />
    );
};
  1. Test in React:
import React from 'react';

export function App(props) {
  return (
    <VideoTest/>
  );
}

export const VideoTest = () => {
    return (
        <video
            controls
            src={
                "https://player.vimeo.com/external/372335193.sd.mp4?s=80151fa22b2eba81883c8641f2c9e493762c7357&profile_id=164&oauth2_token_id=57447761"
            }
            onLoadStart={() => {
                console.log("LoadStart");
            }}
            onLoadedData={() => {
                console.log("LoadedData");
            }}
        />
    );
};

--> Logs "LoadStart" and "LoadedData"

  1. Test in Astro
---
import { VideoTest } from "./link/to/component/videoTest.jsx";
---

<html>
        ...
    <body>
        <VideoTest></VideoTest>
    </body>
</html>

--> Doesnt log nothing :c

Is this expected behaviour or is this a bug?

(currently this is crucial to me, so id also be happy about a workaround)

terse dragon
#

i'm a noob, but I think you might need to hydrate it? i.e. <html> ... <body> <VideoTest client:load></VideoTest> </body> </html>

frigid token
terse dragon
#

how about client:only="react"

frigid token
#

yep that works! Thanks a lot, youre a hero! 😄

terse dragon
#

no worries. i'm still trying to get my head around it. i think for stuff that cannot run server-side at all you need that directive 😄

frigid token
#

interesting tho. But i still have no idea why it doesnt work with client:load (it even says it works similar to client:only="...")

terse dragon
#

client:load renders the content on the server, client:only does everything in the user's browser. components that require access to document or window must be client:only

#

i think!