1 files changed, 30 insertions, 317 deletions
diff --git a/src/app/player/page.tsx b/src/app/player/page.tsx
index 1f1d80c..2ac6d50 100644
--- a/src/app/player/page.tsx
+++ b/src/app/player/page.tsx
@@ -6,7 +6,6 @@ import React, {
   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";
@@ -21,322 +20,36 @@ import {
 } from "react-icons/fa";
 import { CaptionsRenderer } from "react-srv3";
 import { useSearchParams } from "next/navigation";
-
-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;
-`;
-
-const LyricsPane = styled.div<{ $width: number }>`
-  width: ${({ $width }) => $width}%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: #ffffff;
-`;
-
-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%;
-`;
-
-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;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.6);
-  z-index: 10;
-`;
-
-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;
-  font-size: 15px;
-  transition: background-color 0.15s ease;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.12);
-  }
-`;
-
-const ScrubBar = styled.input`
-  flex: 1;
-  height: 4px;
-  margin: 0 12px 0 4px;
-  cursor: pointer;
-  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 {
-    outline: none;
-    border-color: rgba(255, 255, 255, 0.35);
-  }
-`;
-
-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 {
-    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 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;
-  user-select: none;
-  white-space: nowrap;
-`;
-
-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 PlaceholderWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  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 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;
-    outline: none;
-  }
-`;
-
-const StyledLink = styled.a`
-  font-family: Arial, sans-serif;
-  text-decoration: none;
-  color: #0066cc;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
+import {
+  Root,
+  PanesContainer,
+  LyricsPane,
+  ResizeHandle,
+  VideoPane,
+  VideoElement,
+  CaptionsOverlay,
+  ControlBar,
+  PlayButton,
+  ScrubBar,
+  ControlPanel,
+  PanelRow,
+  PanelDivider,
+  PanelLabel,
+  PanelButton,
+  HiddenFileInput,
+  PanelFieldLabel,
+  PanelNumberInput,
+  PanelRangeInput,
+  PanelCheckboxLabel,
+  ColorSwatch,
+  PlaceholderWrapper,
+  PlaceholderHeading,
+  PlaceholderBody,
+  CodeInputWrapper,
+  CodeInput,
+  LoadButton,
+  StyledLink,
+} from "./page.styles";
 
 function KaraokePage() {
   const [currentMillisecond, setCurrentMillisecond] = useState(0);