diff options
| -rw-r--r-- | src/app/components/LRCPlayer.tsx | 24 | ||||
| -rw-r--r-- | src/app/page.tsx | 86 |
2 files changed, 85 insertions, 25 deletions
diff --git a/src/app/components/LRCPlayer.tsx b/src/app/components/LRCPlayer.tsx index e6d9551..92b9531 100644 --- a/src/app/components/LRCPlayer.tsx +++ b/src/app/components/LRCPlayer.tsx @@ -6,6 +6,8 @@ interface LineProps { $active: boolean; $next: boolean; $animate: boolean; + $lrcColor: string; + $fontColor: string; } const Line = styled.div<LineProps>` @@ -16,13 +18,13 @@ const Line = styled.div<LineProps>` font-family: "Roboto", sans-serif; font-weight: 500; text-align: center; - color: rgb(72, 72, 72); + color: ${({ $fontColor }) => $fontColor}; - background: linear-gradient( + background: ${({ $lrcColor }) => `linear-gradient( to right, rgba(0, 0, 0, 0) 50%, - rgb(200, 190, 190) 50% - ); + ${$lrcColor} 50% + )`}; background-size: 200% 100%; background-position: right bottom; @@ -53,23 +55,33 @@ interface LrcPlayerProps { currentMillisecond: number; lrc: string; animate: boolean; + lrcColor: string; + fontColor: string; } const LrcPlayer: React.FC<LrcPlayerProps> = ({ currentMillisecond, lrc, animate, + lrcColor = "#C8BEBE", + fontColor = "rgb(72, 72, 72)", }) => { const lineRenderer = useCallback( ({ active, line: { content } }: { active: boolean; line: LrcLine }) => { const next = active && content === ""; return ( - <Line $active={active} $next={next} $animate={animate}> + <Line + $active={active} + $next={next} + $animate={animate} + $lrcColor={lrcColor} + $fontColor={fontColor} + > {content} </Line> ); }, - [animate], + [animate, lrcColor, fontColor], ); return ( diff --git a/src/app/page.tsx b/src/app/page.tsx index 3e8dfb6..c781f58 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,7 +6,6 @@ import { toast, ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute } from "react-icons/fa"; import { CaptionsRenderer } from "react-srv3"; -import { Button } from "react-bootstrap"; // Srtyled components const Root = styled.div` @@ -99,9 +98,26 @@ function KaraokePage() { const [statusText, setStatusText] = useState<string>("No video selected"); const [balance, setBalance] = useState<number>(0); const [animate, setAnimate] = useState<boolean>(true); + const [lrcColor, setLrcColor] = useState<string>("#C8BEBE"); + const [fontColor, setFontColor] = useState<string>("#000000"); const [supplementAudioOffset, setSupplementAudioOffset] = useState<number>(0); + useEffect(() => { + const savedLrcColor = localStorage.getItem("lrcColor"); + const savedFontColor = localStorage.getItem("fontColor"); + if (savedLrcColor) setLrcColor(savedLrcColor); + if (savedFontColor) setFontColor(savedFontColor); + }, []); + + useEffect(() => { + localStorage.setItem("lrcColor", lrcColor); + }, [lrcColor]); + + useEffect(() => { + localStorage.setItem("fontColor", fontColor); + }, [fontColor]); + // Functions for handling file input changes const handleLrcFileChange = ( event: React.ChangeEvent<HTMLInputElement>, @@ -225,6 +241,7 @@ function KaraokePage() { }; }); + // Side effect for volume controls useEffect(() => { const video = videoRef.current; const audio = supplementAudioRef.current; @@ -238,6 +255,7 @@ function KaraokePage() { } }, [balance]); + // Side effect for audio useEffect(() => { const video = videoRef.current; const audio = supplementAudioRef.current; @@ -370,6 +388,8 @@ function KaraokePage() { lrc={lrcContent} currentMillisecond={currentMillisecond} animate={animate} + lrcColor={lrcColor} + fontColor={fontColor} /> {/* Ternary operation for if videoUrl has been set */} @@ -616,25 +636,53 @@ function KaraokePage() { } step="25" /> + <label + style={{ + fontSize: "14px", + fontFamily: "Arial", + userSelect: "none", + }} + > + <input + type="checkbox" + checked={animate} + onChange={(e) => + setAnimate(e.target.checked) + } + onSelect={(e) => e.preventDefault()} + style={{ marginRight: "8px" }} + /> + Line Animation + </label> + <div + style={{ + display: "flex", + }} + > + <input + type="color" + value={lrcColor} + onChange={(e) => + setLrcColor(e.target.value) + } + /> + <input + type="color" + value={fontColor} + onChange={(e) => + setFontColor(e.target.value) + } + /> + <button + onClick={() => { + setLrcColor("#C8BEBE"); + setFontColor("#000000"); + }} + > + Reset + </button> + </div> </div> - <label - style={{ - fontSize: "14px", - fontFamily: "Arial", - userSelect: "none", - }} - > - <input - type="checkbox" - checked={animate} - onChange={(e) => - setAnimate(e.target.checked) - } - onSelect={(e) => e.preventDefault()} - style={{ marginRight: "8px" }} - /> - Line Animation - </label> </FileInputContainer> )} </div> |