From c8537ee711a61e1953c16f4115f8aea14d4413b1 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sun, 11 Feb 2024 00:18:45 -0800
Subject: chore: bump dependencies

---
 src/app/components/KaraokePlayer.tsx | 58 ---------------------------------
 src/app/components/LRCPlayer.tsx     | 57 +++++++++++++++++++++++++++++++++
 src/app/page.tsx                     | 62 ++----------------------------------
 3 files changed, 60 insertions(+), 117 deletions(-)
 delete mode 100644 src/app/components/KaraokePlayer.tsx
 create mode 100644 src/app/components/LRCPlayer.tsx

(limited to 'src')

diff --git a/src/app/components/KaraokePlayer.tsx b/src/app/components/KaraokePlayer.tsx
deleted file mode 100644
index 5160226..0000000
--- a/src/app/components/KaraokePlayer.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { CSSProperties, useCallback } from 'react';
-import styled, { css } from 'styled-components';
-import { Lrc, LrcLine } from 'react-lrc';
-
-const Line = styled.div<{ $active: boolean; $next: boolean }>`
-    min-height: 10px;
-    padding: 14px 30px;
-
-    font-size: 40px;
-    font-family: "Roboto", sans-serif;
-    font-weight: 500;
-    text-align: center;
-    color: rgb(72,72,72);
-
-    background: linear-gradient(to right, rgba(0,0,0,0) 50%, rgb(200, 190, 190) 50%);
-    background-size: 200% 100%;
-    background-position: right bottom;
-    transition: color 1s ease-out, background-position 1s ease-out;
-
-    ${({ $active }) => $active && css`
-        color: black;
-        font-weight: 700;
-        background-position: left bottom;
-        color: rgb(50, 50, 50);
-    `}
-`;
-const lrcStyle: CSSProperties = {
-  flex: 1,
-  minHeight: 0,
-  overflow: 'hidden !important'
-};
-
-interface KaraokePlayerProps {
-  currentMillisecond: number;
-  lrc: string;
-}
-
-const KaraokePlayer: React.FC<KaraokePlayerProps> = ({ currentMillisecond, lrc }) => {
-  const lineRenderer = useCallback(
-    ({ active, line: { content } }: { active: boolean; line: LrcLine }) => {
-      const next = active && content === '';
-      return <Line $active={active} $next={next}>{content}</Line>;
-    },
-    []
-  );
-
-  return (
-    <Lrc
-      lrc={lrc}
-      lineRenderer={lineRenderer}
-      currentMillisecond={currentMillisecond}
-      style={lrcStyle}
-      recoverAutoScrollInterval={0}
-    />
-  );
-};
-
-export default KaraokePlayer;
diff --git a/src/app/components/LRCPlayer.tsx b/src/app/components/LRCPlayer.tsx
new file mode 100644
index 0000000..c561ee8
--- /dev/null
+++ b/src/app/components/LRCPlayer.tsx
@@ -0,0 +1,57 @@
+import React, { CSSProperties, useCallback } from 'react';
+import { Lrc, LrcLine } from 'react-lrc';
+import styled from 'styled-components';
+import css from 'styled-components';
+
+const Line = styled.div<{ $active: boolean; $next: boolean }>`
+    min-height: 10px;
+    padding: 14px 30px;
+
+    font-size: 40px;
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    text-align: center;
+    color: rgb(72,72,72);
+
+    background: linear-gradient(to right, rgba(0,0,0,0) 50%, rgb(200, 190, 190) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: color 1s ease-out, background-position 1s ease-out;
+
+    ${({ $active }: { $active: boolean }) => $active ? `
+        color: black;
+        font-weight: 700;
+    ` : ''}
+`;
+const lrcStyle: CSSProperties = {
+  flex: 1,
+  minHeight: 0,
+  overflow: 'hidden !important'
+};
+
+interface LRCPlayerProps {
+  currentMillisecond: number;
+  lrc: string;
+}
+
+const LRCPlayer: React.FC<LRCPlayerProps> = ({ currentMillisecond, lrc }) => {
+  const lineRenderer = useCallback(
+    ({ active, line: { content } }: { active: boolean; line: LrcLine }) => {
+      const next = active && content === '';
+      return <Line $active={active} $next={next}>{content}</Line>;
+    },
+    []
+  );
+
+  return (
+    <Lrc
+      lrc={lrc}
+      lineRenderer={lineRenderer}
+      currentMillisecond={currentMillisecond}
+      style={lrcStyle}
+      recoverAutoScrollInterval={0}
+    />
+  );
+};
+
+export default LRCPlayer;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 457610d..106193d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
-import KaraokePlayer from "./components/KaraokePlayer";
+import LRCPlayer from "./components/LRCPlayer";
 import { toast, ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute } from "react-icons/fa";
@@ -267,20 +267,6 @@ function KaraokePage() {
     setScrubValue(parseFloat(event.target.value));
   };
 
-  const handleVolumeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const volume = Number(event.target.value) / 100;
-    const video = videoRef.current;
-    const audio = supplementAudioRef.current;
-    if (!video || !audio) return;
-
-    if (balance < 0) {
-      video.volume = volume * (1 + balance);
-      audio.volume = volume;
-    } else {
-      video.volume = volume;
-      audio.volume = volume * (1 - balance);
-    }
-  };
 
   const handleVideoEnded = () => {
     setIsPlaying(false);
@@ -349,7 +335,7 @@ function KaraokePage() {
       <ToastContainer />
       {/*LRC viewer*/}
       <div style={{ display: "flex", width: "100%", height: "100vh" }}>
-        <KaraokePlayer
+        <LRCPlayer
           lrc={lrcContent}
           currentMillisecond={currentMillisecond}
         />
@@ -422,50 +408,9 @@ function KaraokePage() {
                   min="0"
                   max="100"
                   value={scrubValue}
-                  style={{ flex: 1, height: "50px" }}
+                  style={{ flex: 1, height: "50px", width: "100%"}}
                   onInput={handleScrub}
                 />
-                <div
-                  style={{
-                    position: "relative",
-                    width: "50px",
-                    height: "50px",
-                  }}
-                >
-                  <button
-                    onClick={handleVolumeToggle}
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                      padding: "10px",
-                      border: "none",
-                      borderRadius: "5px",
-                      backgroundColor: "white",
-                      color: "black",
-                    }}
-                  >
-                    {!showVolume ? <FaVolumeMute /> : <FaVolumeUp />}
-                  </button>
-                  {showVolume && (
-                    <div
-                      style={{
-                        position: "absolute",
-                        bottom: "100%",
-                        transform:
-                          "translateX(-50%) translateY(-100%) rotate(-90deg)",
-                      }}
-                    >
-                      <input
-                        type="range"
-                        min="0"
-                        max="100"
-                        defaultValue="100"
-                        style={{ height: "40px", width: "100px" }}
-                        onChange={handleVolumeChange}
-                      />
-                    </div>
-                  )}
-                </div>
               </div>
             </>
           ) : (
@@ -489,7 +434,6 @@ function KaraokePage() {
                 {statusText}
               </h1>
               {/* Show a placeholder while no video selected */}
-
               <p
                 style={{
                   fontSize: "30px",
-- 
cgit v1.2.3