- - - - - {/* Ternary operation for if videoUrl has been set */} + }, [balance]); + + // Side effect for audio + useEffect(() => { + const video = videoRef.current; + const audio = supplementAudioRef.current; + if (!video || !audio) return; + if (supplementAudioOffset === null || supplementAudioOffset == null) return; + audio.currentTime = video.currentTime + supplementAudioOffset / 1000; + }, [supplementAudioOffset]); + + // General video control functionality + + const handleVolumeToggle = () => { + setShowVolume(!showVolume); + }; + + const handlePlayPause = () => { + const video = videoRef.current; + if (!video) return; + + if (video.paused) { + video.play(); + if (supplementAudioUrl) supplementAudioRef.current?.play(); + setIsPlaying(true); + } else { + video.pause(); + if (supplementAudioUrl) supplementAudioRef.current?.pause(); + setIsPlaying(false); + } + }; + + // Status text styling depending on whats loaded. Not all visible + useEffect(() => { + if (videoUrl && lrcContent) { + setStatusText("Ready to play!"); + } else if (videoUrl) { + setStatusText("No lyrics file selected"); + } else if (lrcContent) { + setStatusText("No video file selected"); + } else { + setStatusText("No video or lyrics file selected"); + } + }, [videoUrl, lrcContent]); + + // Video Control Bar functionality + const handleScrub = (event: React.ChangeEvent) => { + const time = + (parseFloat(event.target.value) / 100) * videoRef.current!.duration; + videoRef.current!.currentTime = time; + if (supplementAudioOffset === null || supplementAudioOffset == null) { + supplementAudioRef.current!.currentTime = time; + } else { + supplementAudioRef.current!.currentTime = + time + supplementAudioOffset / 1000; + } + setScrubValue(parseFloat(event.target.value)); + }; + + const handleVideoEnded = () => { + setIsPlaying(false); + supplementAudioRef.current?.pause(); + }; + + const syncSupplementAudioWithVideo = () => { + const video = videoRef.current; + const audio = supplementAudioRef.current; + if (!video || !audio) return; + if (supplementAudioOffset === null || supplementAudioOffset == null) return; + audio.currentTime = video.currentTime + supplementAudioOffset / 1000; + }; + + // Handling drag and drop files + const handleDragOver = (event: React.DragEvent) => { + setDragOver(true); + event.preventDefault(); + }; + + const handleDragEnter = (event: React.DragEvent) => { + setDragOver(true); + event.preventDefault(); + }; + + const handleDragLeave = (event: React.DragEvent) => { + setDragOver(false); + event.preventDefault(); + }; + + const handleDrop = (event: React.DragEvent) => { + event.preventDefault(); + setDragOver(false); + const file = event.dataTransfer.files?.[0]; + if (file.name.endsWith(".lrc")) { + const reader = new FileReader(); + reader.onload = (e) => { + setLrcContent(e.target?.result as string); + if (videoUrl) setShowFileInputs(false); + }; + reader.readAsText(file); + toast.success("LRC file loaded successfully", { autoClose: 2000 }); + } else if (file.name.endsWith(".srv3")) { + const reader = new FileReader(); + reader.onload = (e) => { + setCaptionsText(e.target?.result as string); + }; + reader.readAsText(file); + toast.success("SRV file loaded successfully", { autoClose: 2000 }); + } else if (file.type.startsWith("video") || file.type.startsWith("audio")) { + const url = URL.createObjectURL(file); + setVideoUrl(url); + setCurrentMillisecond(0); + setScrubValue(0); + setIsPlaying(false); + toast.success("Video/Audio file loaded successfully", { + autoClose: 2000, + }); + } else { + toast.error("Unsupported file type", { autoClose: 2000 }); + } + }; + + function processData(data: any) { + if (data.lrc) { + fetch(data.lrc) + .then((response) => response.text()) + .then((text) => { + setLrcContent(text); + if (videoUrl) setShowFileInputs(false); + toast.success("LRC file loaded successfully", { + autoClose: 2000, + }); + }) + .catch((error) => { + toast.error("Failed to load LRC file", { autoClose: 2000 }); + }); + } + if (data.srv3) { + fetch(data.srv3) + .then((response) => response.text()) + .then((text) => { + setCaptionsText(text); + toast.success("SRV file loaded successfully", { + autoClose: 2000, + }); + }) + .catch((error) => { + toast.error("Failed to load SRV3 file", { + autoClose: 2000, + }); + }); + } + if (data.file1) { + setVideoUrl(data.file1); + setCurrentMillisecond(0); + setScrubValue(0); + setIsPlaying(false); + toast.success("Video file loaded successfully", { + autoClose: 2000, + }); + } + if (data.file2) { + setSupplementAudioUrl(data.file2); + setCurrentMillisecond(0); + setScrubValue(0); + setIsPlaying(false); + toast.success("Supplemental Audio file loaded successfully", { + autoClose: 2000, + }); + } + if (data.offset1) { + setOffset(Number(data.offset)); + } + if (data.offset2) { + setOffset(Number(data.offset2)); + } + } + + // Handle base64 input from user + const handleKaraokeb64Code = () => { + try { + const decodedString = atob(base64Input); + console.log(decodedString); + const data = JSON.parse(decodedString); + processData(data); + toast.success("Data loaded successfully", { autoClose: 2000 }); + } catch (e) { + toast.error("Invalid base64 or JSON data", { autoClose: 2000 }); + } + }; + + // Check for query parameter + useEffect(() => { + const dataParam = searchParams.get("code"); + if (dataParam) { + try { + const decodedString = atob(dataParam); + const data = JSON.parse(decodedString); + processData(data); + toast.success("Data loaded from query parameter", { + autoClose: 2000, + }); + } catch (e) { + toast.error("Invalid data in query parameter", { + autoClose: 2000, + }); + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [searchParams]); + + return ( + + + {/*LRC viewer*/} +

+ + + + + {/* Ternary operation for if videoUrl has been set */} +

setShowFileInputs(true)} + onMouseLeave={() => setShowFileInputs(false)} + onDragOver={handleDragOver} + onDragEnter={handleDragEnter} + onDragLeave={handleDragLeave} + onDrop={handleDrop} + > + {videoUrl ? ( + <> +

+ + )} +

+ {statusText} +

- {statusText} -