Untitled

// import PropTypes from 'prop-types'

import axios from "axios";
import { useState } from "react";
import { useEffect } from "react";
import { ActionIcon, Box, Slider } from "@mantine/core";
import { useRef } from "react";
import { BsFillPauseFill, BsFillPlayFill } from "react-icons/bs";
import { useSearchParams } from "react-router-dom";
import moment from "moment";

function Watch() {
  const instance =
    localStorage.getItem("instance") ?? "https://invidious.flokinet.to";
  // eslint-disable-next-line no-unused-vars
  const [searchParams, setSearchParams] = useSearchParams();
  const [data, setData] = useState(false);
  const video = useRef(null);
  const [videoPosition, setVideoPosition] = useState(0);
  const [videoData, setVideoData] = useState({
    playing: false,
    position: 0,
  });
  useEffect(() => {
    if (data) {
      videoData.playing ? video.current.play() : video.current.pause();
      video.current.currentTime = videoData.position;
    }
    console.log(videoData);
  }, [videoData, data]);
  useEffect(() => {
    (async () => {
      const response = await axios.get(
        `${instance}/api/v1/videos/${searchParams.get("v")}`
      );
      setData(response.data);
      console.log(response.data);
    })();
  }, [instance, searchParams]);

  useEffect(() => {
    console.log(videoPosition);
  }, [videoPosition]);

  // Add a timeupdate event listener to the video element
  useEffect(() => {
    const updateTime = () => {
      if (video.current) {
        setVideoPosition(video.current.currentTime);
      }
    };
    if (video.current) {
      video.current.addEventListener("timeupdate", updateTime);
    }

    // Clean up the event listener when the component unmounts
    return () => {
      if (video.current) {
        // eslint-disable-next-line react-hooks/exhaustive-deps
        video.current.removeEventListener("timeupdate", updateTime);
      }
    };
  }, []);
  return (
    <Box className="w-full h-max flex flex-col">
      {data ? (
        <Box className="w-full relative h-max flex flex-col justify-center bg-[#000000] rounded-sm border-b border-dark-500">
          <video
            ref={video}
            src={data.formatStreams[2].url}
            autoPlay={true}
            className="max-h-[28rem]"
          />
          <Box className="absolute bottom-0 w-full flex items-center h-max p-1 bg-dark-800 bg-opacity-95 gap-2">
            <ActionIcon
              variant="subtle"
              radius={"xs"}
              onClick={() => {
                videoData.playing
                  ? setVideoData((prevData) => ({
                      ...prevData,
                      playing: false,
                    }))
                  : setVideoData((prevData) => ({
                      ...prevData,
                      playing: true,
                    }));
              }}
            >
              {videoData.playing ? <BsFillPauseFill /> : <BsFillPlayFill />}
            </ActionIcon>
            <Slider
              className="w-full"
              size={"sm"}
              max={data.lengthSeconds}
              label={moment
                .utc(videoData.position * 1000)
                .format(data.lengthSeconds < 3600 ? "mm:ss" : "HH:mm:ss")}
              value={videoPosition}
              onChange={(value) => {
                setVideoData((prevData) => ({
                  ...prevData,
                  position: value,
                }));
                setVideoPosition(value);
              }}
            />
          </Box>
        </Box>
      ) : (
        void 0
      )}
    </Box>
  );
}

Watch.propTypes = {};

export default Watch;