From f15508df62ca407522de448f21711c0711601c91 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 30 Jul 2025 17:44:19 +0200
Subject: feat: make timestamp editable

---
 apps/web/src/components/ui/editable-timecode.tsx | 137 +++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 apps/web/src/components/ui/editable-timecode.tsx

(limited to 'apps/web/src/components/ui')

diff --git a/apps/web/src/components/ui/editable-timecode.tsx b/apps/web/src/components/ui/editable-timecode.tsx
new file mode 100644
index 00000000..f6d29f49
--- /dev/null
+++ b/apps/web/src/components/ui/editable-timecode.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { cn } from "@/lib/utils";
+import { formatTimeCode, parseTimeCode } from "@/lib/time";
+
+interface EditableTimecodeProps {
+  time: number;
+  duration?: number;
+  format?: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF";
+  fps?: number;
+  onTimeChange?: (time: number) => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function EditableTimecode({
+  time,
+  duration,
+  format = "HH:MM:SS:FF",
+  fps = 30,
+  onTimeChange,
+  className,
+  disabled = false,
+}: EditableTimecodeProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [hasError, setHasError] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const enterPressedRef = useRef(false);
+
+  const formattedTime = formatTimeCode(time, format, fps);
+
+  const startEditing = () => {
+    if (disabled) return;
+    setIsEditing(true);
+    setInputValue(formattedTime);
+    setHasError(false);
+    enterPressedRef.current = false;
+  };
+
+  const cancelEditing = () => {
+    setIsEditing(false);
+    setInputValue("");
+    setHasError(false);
+    enterPressedRef.current = false;
+  };
+
+  const applyEdit = () => {
+    const parsedTime = parseTimeCode(inputValue, format, fps);
+
+    if (parsedTime === null) {
+      setHasError(true);
+      return;
+    }
+
+    // Clamp time to valid range
+    const clampedTime = Math.max(
+      0,
+      duration ? Math.min(duration, parsedTime) : parsedTime
+    );
+
+    onTimeChange?.(clampedTime);
+    setIsEditing(false);
+    setInputValue("");
+    setHasError(false);
+    enterPressedRef.current = false;
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      enterPressedRef.current = true;
+      applyEdit();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      cancelEditing();
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    setHasError(false);
+  };
+
+  const handleBlur = () => {
+    // Only apply edit if Enter wasn't pressed (to avoid double processing)
+    if (!enterPressedRef.current && isEditing) {
+      applyEdit();
+    }
+  };
+
+  // Focus input when entering edit mode
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        className={cn(
+          "text-xs font-mono bg-transparent border-none outline-none",
+          "focus:bg-background focus:border focus:border-primary focus:px-1 focus:rounded",
+          "tabular-nums text-primary",
+          hasError && "text-destructive focus:border-destructive",
+          className
+        )}
+        style={{ width: `${formattedTime.length + 1}ch` }}
+        placeholder={formattedTime}
+      />
+    );
+  }
+
+  return (
+    <span
+      onClick={startEditing}
+      className={cn(
+        "text-xs font-mono tabular-nums text-primary cursor-pointer",
+        "hover:bg-muted/50 hover:rounded px-1 -mx-1 transition-colors",
+        disabled && "cursor-default hover:bg-transparent",
+        className
+      )}
+      title={disabled ? undefined : "Click to edit time"}
+    >
+      {formattedTime}
+    </span>
+  );
+}
-- 
cgit v1.3.1