import React, { useEffect } 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"; import { useRouter } from "next/router"; import Linkify from "linkify-react"; const CustomPlayerPage = () => { const router = useRouter(); 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 [urlInfoJson, setUrlInfoJson] = React.useState(""); const [infoJson, setInfoJson] = React.useState({} as any); const [showPlayer, setShowPlayer] = React.useState(false); const { query } = router; const videoUrl = query.vid as string; const chatUrl = query.chat as string; const infoJsonUrl = query.info as string; const srv3Url = query.ytt as string; if (videoUrl && videoUrl !== urlVideo) { setUrlVideo(videoUrl); } if (chatUrl && chatUrl !== urlChat) { setUrlChat(chatUrl); } if (srv3Url && srv3Url !== urlYtt) { setUrlYtt(srv3Url); } if (infoJsonUrl && infoJsonUrl !== urlInfoJson) { setUrlInfoJson(infoJsonUrl); } if (videoUrl && !showPlayer) { setShowPlayer(true); } useEffect(() => { if (urlInfoJson) { fetch(urlInfoJson) .then((res) => res.json()) .then((data) => { setInfoJson(data); }); } }), [urlChat]; 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 ( { infoJson && infoJson.title ? ( {infoJson.title} ) : a very nice video } {showPlayer ? (
{!urlChat ? (

Chat replay unavailable

) : ( )}
{infoJson && infoJson.description ? (

{infoJson.title}

{infoJson.view_count.toLocaleString()} views ·{" "} {infoJson.upload_date.slice(0, 4) + "-" + infoJson.upload_date.slice(4, 6) + "-" + infoJson.upload_date.slice(6, 8)}

{infoJson.uploader}

Description

{infoJson.description}
) : null} {!videoUrl ? ( ) : null}
) : (

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;