1 files changed, 18 insertions, 2 deletions
diff --git a/src/app/player/page.tsx b/src/app/player/page.tsx
index 2ac6d50..0806c3b 100644
--- a/src/app/player/page.tsx
+++ b/src/app/player/page.tsx
@@ -63,6 +63,7 @@ function KaraokePage() {
   const supplementAudioRef = useRef<HTMLAudioElement>(null);
   const [captionsText, setCaptionsText] = useState<string>("");
   const [offset, setOffset] = useState<number>(0);
+  const [offsetInput, setOffsetInput] = useState<string>("0");
   const [dragOver, setDragOver] = useState<boolean>(false);
   const [statusText, setStatusText] = useState<string>("No video selected");
   const [balance, setBalance] = useState<number>(0);
@@ -94,6 +95,10 @@ function KaraokePage() {
     localStorage.setItem("fontColor", fontColor);
   }, [fontColor]);
 
+  useEffect(() => {
+    setOffsetInput(String(offset));
+  }, [offset]);
+
   const handleResizeMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       e.preventDefault();
@@ -567,8 +572,19 @@ function KaraokePage() {
               <PanelFieldLabel>Offset</PanelFieldLabel>
               <PanelNumberInput
                 type="number"
-                value={offset}
-                onChange={(e) => setOffset(Number(e.target.value))}
+                value={offsetInput}
+                onChange={(e) => {
+                  const next = e.target.value;
+                  if (next === "" || next === "-" || next === "+") {
+                    setOffsetInput(next);
+                    return;
+                  }
+                  const parsed = Number(next);
+                  if (!Number.isNaN(parsed)) {
+                    setOffset(parsed);
+                    setOffsetInput(next);
+                  }
+                }}
                 step="25"
               />