import React from "react"; import Head from "next/head"; import ChatReplayPanel from "../modules/ChatReplay/ChatReplayPanel"; import { useWindowSize } from "../modules/hooks/useWindowSize"; import PageBase from "../modules/PageBase"; import VideoPlayer2 from "../modules/VideoPlayer/VideoPlayer2"; import { buttonStyle } from "../modules/VideoActionButtons"; import { IconCheck } from "../modules/icons"; const CustomPlayerPage = () => { const [isChatVisible, setIsChatVisible] = React.useState(false); const { innerWidth, innerHeight } = useWindowSize(); const [playbackProgress, setPlaybackProgress] = React.useState(0); const [urlVideo, setUrlVideo] = React.useState(""); const [urlChat, setUrlChat] = React.useState(""); const [urlYtt, setUrlYtt] = React.useState(""); const [showPlayer, setShowPlayer] = React.useState(false); const handleFile = ( e: React.ChangeEvent, setter: (newValue: string) => any ) => { const file = e.target.files?.[0]; if (!file) { console.error("No file selected"); return false; } const url = URL.createObjectURL(file).toString(); console.log(url); setter(url); }; return ( Custom Player - Ragtag Archive {showPlayer ? (
{!urlChat ? (

Chat replay unavailable

) : ( )}
) : (

Custom Video Player

You can play locally-saved video files and chat replay JSON

Chat replay compatible with output from{" "} yt-dlp {" and "} chat-downloader .

)} ); }; export default CustomPlayerPage;