fifty-shades-of-bully/src/pages/components/playVideo.jsx

import '../../css/video.css';

function PlayVideo({ src = "hallway_MMM.mp4" ,side = "middle", onVideoReady }) {
    const urlSource = `${import.meta.env.VITE_ASSETS_URL}/${src}`;

    return (
        <div className={`video-container ${side}`}>
            <video
                autoPlay
                muted
                controls="none"
                playsInline
                loop
                pointerEvents="none"
                onCanPlayThrough={(e) => {
                    e.target.play();
                    console.log("Video is ready and played");
                    if (onVideoReady) {
                        onVideoReady(); // Call the callback to notify that the video is ready
                    }
                }}
            >
                <source src={urlSource} type="video/mp4" />
                Your browser does not support the video tag.
            </video>
        </div>
    );
}

export default PlayVideo;