import { useState } from "react";

import { playbackVideo } from '../../data.tsx';

const BgVideo = () => {
  const videoSrc = playbackVideo;
  const [loading, setLoading] = useState(true);
  const makeVisible = () => {
    setLoading(false);
  }

  return (
    <video
      onLoadedData={makeVisible}
      autoPlay
      muted
      loop
      style={{
        position: "fixed",
        minWidth: "100vw",
        minHeight: "100vh",
        left: 0,
        top: 0,
        zIndex: -1,
        opacity: loading ? 0 : 1,
        transition: "opacity, 2s ease-in-out"

      }}
    >
      <source src={videoSrc} type="video/mp4" />
    </video>
  );

}

export default BgVideo;