From 8cfa334717481bc2fcfa716b546304924157abff Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Sun, 12 Apr 2026 22:14:05 -0700 Subject: make windows re-sizeable general lint/formatting --- src/app/layout.tsx | 11 +- src/app/page.tsx | 927 ++++++++++++++++++++++++++++++--------------------- src/app/registry.tsx | 26 ++ 3 files changed, 573 insertions(+), 391 deletions(-) create mode 100644 src/app/registry.tsx (limited to 'src') diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7dbde38..66b7930 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,7 @@ -export const metadata = { +import type { Metadata } from "next"; +import StyledComponentsRegistry from "./registry"; + +export const metadata: Metadata = { title: "LRC-Karaoke Player", description: "A karaoke oriented media player with support for lyrics, subtitles, and offset adjustments!", @@ -11,7 +14,9 @@ export default function RootLayout({ }) { return ( - {children} + + {children} + ); -} +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 6dba085..5051541 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,102 +1,334 @@ "use client"; -import React, { useEffect, useRef, useState } from "react"; -import styled from "styled-components"; +import React, { + useCallback, + useEffect, + useRef, + useState, + Suspense, +} from "react"; +import styled, { css } from "styled-components"; import LRCPlayer from "./components/LRCPlayer"; import { toast, ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; -import { FaPlay, FaPause } from "react-icons/fa"; +import { + FaPlay, + FaPause, + FaFileAlt, + FaVideo, + FaClosedCaptioning, + FaHeadphones, + FaSyncAlt, +} from "react-icons/fa"; import { CaptionsRenderer } from "react-srv3"; import { useSearchParams } from "next/navigation"; -// Styled components +// ─── Layout ────────────────────────────────────────────────────────────────── + const Root = styled.div` position: absolute; + inset: 0; + display: flex; + flex-direction: column; + background-color: #f5f5f5; + overflow: hidden; +`; + +const PanesContainer = styled.div` + display: flex; + flex: 1; + height: 100vh; + overflow: hidden; + user-select: none; +`; + +// ─── Lyrics pane ───────────────────────────────────────────────────────────── + +const LyricsPane = styled.div<{ $width: number }>` + width: ${({ $width }) => $width}%; + display: flex; + flex-direction: column; + overflow: hidden; + background-color: #ffffff; +`; + +// ─── Resize handle ─────────────────────────────────────────────────────────── + +const ResizeHandle = styled.div` + width: 5px; + flex-shrink: 0; + background-color: #ddd; + cursor: col-resize; + transition: background-color 0.15s ease; + position: relative; + + &:hover, + &:active { + background-color: #aaa; + } + + &::after { + content: ""; + position: absolute; + inset: 0 -4px; + } +`; + +const VideoPane = styled.div<{ $dragOver: boolean }>` + flex: 1; + position: relative; + background-color: ${({ $dragOver }) => ($dragOver ? "#dbeeff" : "#ffffff")}; + transition: background-color 0.15s ease; + overflow: hidden; +`; + +const VideoElement = styled.video` + position: absolute; + inset: 0; width: 100%; height: 100%; - top: 0; +`; + +const CaptionsOverlay = styled.div` + position: absolute; + inset: 0; + width: 90%; + height: 90%; + margin: auto; + cursor: pointer; +`; + +const ControlBar = styled.div` + position: absolute; + bottom: 0; left: 0; + width: 100%; + height: 50px; display: flex; - flex-direction: column; align-items: center; - background-color: #f5f5f5; + background-color: rgba(0, 0, 0, 0.6); + z-index: 10; `; -const FileInputContainer = styled.div` - margin-bottom: 20px; +const PlayButton = styled.button` + flex-shrink: 0; + width: 50px; + height: 50px; + padding: 0; + border: none; + background-color: transparent; + color: #fff; + cursor: pointer; display: flex; + align-items: center; justify-content: center; - gap: 20px; - padding: 10px; - border-radius: 5px; - background-color: #ffffff; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + font-size: 15px; + transition: background-color 0.15s ease; + + &:hover { + background-color: rgba(255, 255, 255, 0.12); + } `; -const FileInput = styled.input` - padding: 10px 15px; - border-radius: 5px; - border: 1px solid #ddd; - justify-content: center; +const ScrubBar = styled.input` + flex: 1; + height: 4px; + margin: 0 12px 0 4px; cursor: pointer; - display: none; - font-family: Arial; - &:hover, + accent-color: #fff; +`; + +const ControlPanel = styled.div<{ $visible: boolean }>` + position: absolute; + bottom: 50px; + left: 0; + right: 0; + background: rgba(14, 14, 14, 0.88); + backdrop-filter: blur(8px); + border-top: 1px solid rgba(255, 255, 255, 0.08); + padding: 7px 12px; + display: flex; + flex-direction: column; + gap: 5px; + z-index: 9; + transform: translateY(${({ $visible }) => ($visible ? "0" : "6px")}); + opacity: ${({ $visible }) => ($visible ? 1 : 0)}; + pointer-events: ${({ $visible }) => ($visible ? "auto" : "none")}; + transition: + transform 0.18s ease, + opacity 0.18s ease; +`; + +const PanelRow = styled.div` + display: flex; + align-items: center; + gap: 5px; + flex-wrap: wrap; +`; + +const PanelDivider = styled.div` + width: 1px; + height: 20px; + background-color: rgba(255, 255, 255, 0.15); + flex-shrink: 0; + margin: 0 2px; +`; + +const panelItemStyles = css` + display: inline-flex; + align-items: center; + gap: 5px; + padding: 4px 10px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.07); + color: rgba(255, 255, 255, 0.85); + font-size: 12px; + font-family: Arial, sans-serif; + cursor: pointer; + white-space: nowrap; + transition: background-color 0.15s ease; + line-height: 1.4; + + &:hover { + background-color: rgba(255, 255, 255, 0.16); + } + &:focus { - background-color: #eaeaea; outline: none; + border-color: rgba(255, 255, 255, 0.35); } `; -const FileInputLabel = styled.label` - padding: 10px 15px; - border-radius: 5px; - border: 1px solid #ddd; - cursor: pointer; - &:hover, +const PanelLabel = styled.label` + ${panelItemStyles} +`; + +const PanelButton = styled.button` + ${panelItemStyles} +`; + +const HiddenFileInput = styled.input` + display: none; +`; + +const PanelFieldLabel = styled.span` + color: rgba(255, 255, 255, 0.45); + font-size: 11px; + font-family: Arial, sans-serif; + white-space: nowrap; +`; + +const PanelNumberInput = styled.input` + width: 68px; + padding: 3px 6px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.08); + color: #fff; + font-size: 12px; + font-family: Arial, sans-serif; + &:focus { - background-color: #eaeaea; outline: none; + border-color: rgba(255, 255, 255, 0.4); + } + + /* Remove number input arrows in Firefox */ + -moz-appearance: textfield; + + /* Remove number input arrows in Chrome/Safari */ + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + opacity: 0.4; } `; -const ControlBarButton = styled.button` - padding: 10px 15px; - border-radius: 5px; - border: 1px solid #ddd; +const PanelRangeInput = styled.input` + width: 90px; + accent-color: rgba(255, 255, 255, 0.8); + cursor: pointer; + vertical-align: middle; +`; + +const PanelCheckboxLabel = styled.label` + display: inline-flex; align-items: center; + gap: 5px; + color: rgba(255, 255, 255, 0.8); + font-size: 12px; + font-family: Arial, sans-serif; cursor: pointer; - &:hover, - &:focus { - background-color: #eaeaea; - outline: none; - } + user-select: none; + white-space: nowrap; `; -const StyledLink = styled.a` - font-size: 20px; - font-family: Arial; - text-decoration: none; - color: black; - &:hover { - text-decoration: underline; - } +const ColorSwatch = styled.input` + width: 24px; + height: 24px; + padding: 1px; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 3px; + cursor: pointer; + background: none; + vertical-align: middle; `; -const LRCPlayerWrapper = styled.div` - flex: 1; +// ─── Placeholder (no video loaded) ─────────────────────────────────────────── + +const PlaceholderWrapper = styled.div` + width: 100%; + height: 100%; display: flex; flex-direction: column; - height: 100vh; - overflow-y: auto; - scroll-behavior: smooth; - background-color: #ffffff; + align-items: center; + justify-content: center; + padding: 24px; + box-sizing: border-box; + text-align: center; + font-family: Arial, sans-serif; +`; + +const PlaceholderHeading = styled.h1` + font-size: 28px; + font-weight: bold; + margin: 0 0 12px; +`; + +const PlaceholderBody = styled.p` + font-size: 18px; + line-height: 1.6; + margin: 0 0 20px; `; -const StyledButton = styled.button` - padding: 10px 15px; +const CodeInputWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; + max-width: 420px; + font-family: Arial, sans-serif; + font-size: 14px; +`; + +const CodeInput = styled.input` + width: 100%; + font-size: 15px; + padding: 6px 8px; + border: 1px solid #ddd; + border-radius: 5px; + box-sizing: border-box; +`; + +const LoadButton = styled.button` + padding: 7px 14px; border-radius: 5px; border: 1px solid #ddd; + background-color: #fff; + font-family: Arial, sans-serif; + font-size: 13px; cursor: pointer; + transition: background-color 0.15s ease; + &:hover, &:focus { background-color: #eaeaea; @@ -104,15 +336,28 @@ const StyledButton = styled.button` } `; +// ─── Misc ──────────────────────────────────────────────────────────────────── + +const StyledLink = styled.a` + font-family: Arial, sans-serif; + text-decoration: none; + color: #0066cc; + + &:hover { + text-decoration: underline; + } +`; + +// ─── Component ─────────────────────────────────────────────────────────────── + function KaraokePage() { const [currentMillisecond, setCurrentMillisecond] = useState(0); const [lrcContent, setLrcContent] = useState(""); const [videoUrl, setVideoUrl] = useState(""); const [supplementAudioUrl, setSupplementAudioUrl] = useState(""); const [isPlaying, setIsPlaying] = useState(false); - const [showVolume, setShowVolume] = useState(false); const [scrubValue, setScrubValue] = useState(0); - const [showFileInputs, setShowFileInputs] = useState(true); + const [showPanel, setShowPanel] = useState(true); const videoRef = useRef(null); const supplementAudioRef = useRef(null); const [captionsText, setCaptionsText] = useState(""); @@ -126,8 +371,15 @@ function KaraokePage() { const [supplementAudioOffset, setSupplementAudioOffset] = useState(0); const [base64Input, setBase64Input] = useState(""); + // Resizable panes + const [leftWidth, setLeftWidth] = useState(50); + const isResizing = useRef(false); + const containerRef = useRef(null); + const searchParams = useSearchParams(); + // ── Persist color preferences ───────────────────────────────────────────── + useEffect(() => { const savedLrcColor = localStorage.getItem("lrcColor"); const savedFontColor = localStorage.getItem("fontColor"); @@ -143,14 +395,46 @@ function KaraokePage() { localStorage.setItem("fontColor", fontColor); }, [fontColor]); - // Functions for handling file input changes + // ── Resize logic ────────────────────────────────────────────────────────── + + const handleResizeMouseDown = useCallback( + (e: React.MouseEvent) => { + e.preventDefault(); + isResizing.current = true; + document.body.style.cursor = "col-resize"; + }, + [], + ); + + useEffect(() => { + const onMouseMove = (e: MouseEvent) => { + if (!isResizing.current || !containerRef.current) return; + const rect = containerRef.current.getBoundingClientRect(); + const newWidth = ((e.clientX - rect.left) / rect.width) * 100; + setLeftWidth(Math.min(Math.max(newWidth, 15), 85)); + }; + + const onMouseUp = () => { + if (!isResizing.current) return; + isResizing.current = false; + document.body.style.cursor = ""; + }; + + window.addEventListener("mousemove", onMouseMove); + window.addEventListener("mouseup", onMouseUp); + return () => { + window.removeEventListener("mousemove", onMouseMove); + window.removeEventListener("mouseup", onMouseUp); + }; + }, []); + const handleLrcFileChange = (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { setLrcContent(e.target?.result as string); - if (videoUrl) setShowFileInputs(false); + if (videoUrl) setShowPanel(false); }; reader.readAsText(file); toast.success("LRC file loaded successfully", { autoClose: 2000 }); @@ -167,9 +451,7 @@ function KaraokePage() { setCurrentMillisecond(0); setScrubValue(0); setIsPlaying(false); - toast.success("Video file loaded successfully", { - autoClose: 2000, - }); + toast.success("Video file loaded successfully", { autoClose: 2000 }); } }; @@ -177,9 +459,7 @@ function KaraokePage() { const file = event.target.files?.[0]; if (file) { const reader = new FileReader(); - reader.onload = (e) => { - setCaptionsText(e.target?.result as string); - }; + reader.onload = (e) => setCaptionsText(e.target?.result as string); reader.readAsText(file); toast.success("SRV file loaded successfully", { autoClose: 2000 }); } @@ -197,7 +477,7 @@ function KaraokePage() { setScrubValue(0); setIsPlaying(false); if (video) video.pause(); - toast.success("Supplemental Audio file loaded successfully", { + toast.success("Supplemental audio file loaded successfully", { autoClose: 2000, }); } @@ -210,10 +490,8 @@ function KaraokePage() { setOffset(-1550); fetch( "https://utfs.io/f/e2e18ea7-9841-437b-9ca3-5723355bd41a-rlck46.lrc", - ).then(function (response) { - response.text().then(function (responseString) { - setLrcContent(responseString); - }); + ).then((response) => { + response.text().then((text) => setLrcContent(text)); }); setVideoUrl( "https://utfs.io/f/84f5dfa6-821d-407f-a16d-a685b09c11d9-7xx2h4.webm", @@ -222,79 +500,67 @@ function KaraokePage() { toast.success("Applied offset of -1550ms"); }; - // Side effects for keyboard shortcuts + // ── Keyboard shortcuts ──────────────────────────────────────────────────── + useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { - if (e.code === "Space") { - handlePlayPause(); - } + if (e.code === "Space") handlePlayPause(); if (e.code === "ArrowRight") { if (document.activeElement?.tagName === "INPUT") return; const video = videoRef.current; - if (!video) return; - video.currentTime += 5; + if (video) video.currentTime += 5; } if (e.code === "ArrowLeft") { if (document.activeElement?.tagName === "INPUT") return; const video = videoRef.current; - if (!video) return; - video.currentTime -= 5; + if (video) video.currentTime -= 5; } }; document.addEventListener("keydown", handleKeyDown); - return () => { - document.removeEventListener("keydown", handleKeyDown); - }; + return () => document.removeEventListener("keydown", handleKeyDown); }); - // Side effects for the video itself useEffect(() => { const video = videoRef.current; if (!video) return; - const syncLrcWithVideo = () => { - setCurrentMillisecond(video.currentTime * 1000 + offset); // updates lrc position - setScrubValue((video.currentTime / video.duration) * 100); // update playhead position - }; - video.addEventListener("timeupdate", syncLrcWithVideo); - - return () => { - video.removeEventListener("timeupdate", syncLrcWithVideo); + const sync = () => { + setCurrentMillisecond(video.currentTime * 1000 + offset); + setScrubValue((video.currentTime / video.duration) * 100); }; + video.addEventListener("timeupdate", sync); + return () => video.removeEventListener("timeupdate", sync); }); - // Side effect for volume controls useEffect(() => { const video = videoRef.current; const audio = supplementAudioRef.current; if (!video || !audio) return; - if (balance < 0) { video.volume = 1 + balance; + audio.volume = 1; } else { video.volume = 1; audio.volume = 1 - balance; } }, [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); - }; + 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]); const handlePlayPause = () => { const video = videoRef.current; if (!video) return; - if (video.paused) { video.play(); if (supplementAudioUrl) supplementAudioRef.current?.play(); @@ -306,28 +572,12 @@ function KaraokePage() { } }; - // 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 = + if (supplementAudioRef.current) { + supplementAudioRef.current.currentTime = time + supplementAudioOffset / 1000; } setScrubValue(parseFloat(event.target.value)); @@ -342,11 +592,9 @@ function KaraokePage() { 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(); @@ -366,19 +614,19 @@ function KaraokePage() { event.preventDefault(); setDragOver(false); const file = event.dataTransfer.files?.[0]; + if (!file) return; + if (file.name.endsWith(".lrc")) { const reader = new FileReader(); reader.onload = (e) => { setLrcContent(e.target?.result as string); - if (videoUrl) setShowFileInputs(false); + if (videoUrl) setShowPanel(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.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")) { @@ -398,98 +646,79 @@ function KaraokePage() { function processData(data: any) { if (data.lrc) { fetch(data.lrc) - .then((response) => response.text()) + .then((r) => r.text()) .then((text) => { setLrcContent(text); - if (videoUrl) setShowFileInputs(false); - toast.success("LRC file loaded successfully", { - autoClose: 2000, - }); + if (videoUrl) setShowPanel(false); + toast.success("LRC file loaded successfully", { autoClose: 2000 }); }) - .catch((error) => { - toast.error("Failed to load LRC file", { autoClose: 2000 }); - }); + .catch(() => + toast.error("Failed to load LRC file", { autoClose: 2000 }), + ); } if (data.srv3) { fetch(data.srv3) - .then((response) => response.text()) + .then((r) => r.text()) .then((text) => { setCaptionsText(text); - toast.success("SRV file loaded successfully", { - autoClose: 2000, - }); + toast.success("SRV file loaded successfully", { autoClose: 2000 }); }) - .catch((error) => { - toast.error("Failed to load SRV3 file", { - autoClose: 2000, - }); - }); + .catch(() => + 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, - }); + 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", { + toast.success("Supplemental audio file loaded successfully", { autoClose: 2000, }); } - if (data.offset1) { - setOffset(Number(data.offset)); - } - if (data.offset2) { - setOffset(Number(data.offset2)); - } + if (data.offset1) setOffset(Number(data.offset)); + if (data.offset2) setSupplementAudioOffset(Number(data.offset2)); } - // Handle base64 input from user const handleKaraokeb64Code = () => { try { - const decodedString = atob(base64Input); - console.log(decodedString); - const data = JSON.parse(decodedString); + const data = JSON.parse(atob(base64Input)); processData(data); toast.success("Data loaded successfully", { autoClose: 2000 }); - } catch (e) { + } catch { 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); + const data = JSON.parse(atob(dataParam)); processData(data); - toast.success("Data loaded from query parameter", { - autoClose: 2000, - }); - } catch (e) { - toast.error("Invalid data in query parameter", { - autoClose: 2000, - }); + toast.success("Data loaded from query parameter", { autoClose: 2000 }); + } catch { + toast.error("Invalid data in query parameter", { autoClose: 2000 }); } } // eslint-disable-next-line react-hooks/exhaustive-deps }, [searchParams]); + // ── Render ──────────────────────────────────────────────────────────────── + return ( - {/*LRC viewer*/} -

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

setShowFileInputs(true)} - onMouseLeave={() => setShowFileInputs(false)} + + + + + setShowPanel(true)} + onMouseLeave={() => setShowPanel(false)} onDragOver={handleDragOver} onDragEnter={handleDragEnter} onDragLeave={handleDragLeave} @@ -515,277 +741,202 @@ function KaraokePage() { > {videoUrl ? ( <> -

+ Reset + + + + + ); } -export default KaraokePage; +export default function Page() { + return ( + + + + ); +} diff --git a/src/app/registry.tsx b/src/app/registry.tsx new file mode 100644 index 0000000..4a5a4e1 --- /dev/null +++ b/src/app/registry.tsx @@ -0,0 +1,26 @@ +"use client"; +import React, { useState } from "react"; +import { useServerInsertedHTML } from "next/navigation"; +import { ServerStyleSheet, StyleSheetManager } from "styled-components"; + +export default function StyledComponentsRegistry({ + children, +}: { + children: React.ReactNode; +}) { + const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()); + + useServerInsertedHTML(() => { + const styles = styledComponentsStyleSheet.getStyleElement(); + styledComponentsStyleSheet.instance.clearTag(); + return <>{styles}; + }); + + if (typeof window !== "undefined") return <>{children}; + + return ( + + {children as React.ReactElement} + + ); +} -- cgit v1.2.3

- {statusText} -