Untitled
unknown
javascript
a year ago
3.8 kB
6
Indexable
// 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;
Editor is loading...