From 56ca09692a308b22455420d11376ff8d41244c47 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 26 Apr 2026 17:31:28 +0200
Subject: refactor: thinner hooks

---
 apps/web/src/components/editable-timecode.tsx      | 27 ++++++++++++++--------
 .../editor/panels/assets/draggable-item.tsx        | 17 +++++++-------
 2 files changed, 27 insertions(+), 17 deletions(-)

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

diff --git a/apps/web/src/components/editable-timecode.tsx b/apps/web/src/components/editable-timecode.tsx
index 8450cec2..aaae79a9 100644
--- a/apps/web/src/components/editable-timecode.tsx
+++ b/apps/web/src/components/editable-timecode.tsx
@@ -1,9 +1,17 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { formatTimecode, parseTimecode, snappedSeekTime, type FrameRate, type TimeCodeFormat } from "opencut-wasm";
+import {
+	formatTimecode,
+	type FrameRate,
+	type TimeCodeFormat,
+} from "opencut-wasm";
 import { cn } from "@/utils/ui";
-import type { MediaTime } from "@/wasm";
+import {
+	parseMediaTimecode,
+	snapSeekMediaTime,
+	type MediaTime,
+} from "@/wasm";
 
 interface EditableTimecodeProps {
 	time: MediaTime;
@@ -47,19 +55,20 @@ export function EditableTimecode({
 	};
 
 	const applyEdit = () => {
-		const parsedTime = parseTimecode({ timeCode: inputValue, format, rate: fps });
+		const parsedTime = parseMediaTimecode({
+			timeCode: inputValue,
+			format,
+			fps,
+		});
 
 		if (parsedTime == null) {
 			setHasError(true);
 			return;
 		}
 
-		const clampedTime = (
-			duration
-				? (snappedSeekTime({ time: parsedTime, duration, rate: fps }) ??
-					parsedTime)
-				: parsedTime
-		) as MediaTime;
+		const clampedTime = duration
+			? snapSeekMediaTime({ time: parsedTime, duration, fps })
+			: parsedTime;
 
 		onTimeChange?.({ time: clampedTime });
 		setIsEditing(false);
diff --git a/apps/web/src/components/editor/panels/assets/draggable-item.tsx b/apps/web/src/components/editor/panels/assets/draggable-item.tsx
index fdbf5e76..8cfb99c3 100644
--- a/apps/web/src/components/editor/panels/assets/draggable-item.tsx
+++ b/apps/web/src/components/editor/panels/assets/draggable-item.tsx
@@ -11,7 +11,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useEditor } from "@/editor/use-editor";
-import { clearDragData, setDragData } from "@/timeline/drag-data";
 import type { TimelineDragData } from "@/timeline/drag";
 import { cn } from "@/utils/ui";
 import type { MediaTime } from "@/wasm";
@@ -74,21 +73,23 @@ export function DraggableItem({
 		};
 	}, [isDragging]);
 
-	const handleDragStart = (e: React.DragEvent) => {
-		e.dataTransfer.setDragImage(emptyImg, 0, 0);
+	const handleDragStart = (event: React.DragEvent) => {
+		event.dataTransfer.setDragImage(emptyImg, 0, 0);
 
-		setDragData({ dataTransfer: e.dataTransfer, dragData });
-		e.dataTransfer.effectAllowed = "copy";
+		editor.timeline.dragSource.begin({
+			dataTransfer: event.dataTransfer,
+			dragData,
+		});
 
-		setDragPosition({ x: e.clientX, y: e.clientY });
+		setDragPosition({ x: event.clientX, y: event.clientY });
 		setIsDragging(true);
 
-		onDragStart?.({ e });
+		onDragStart?.({ e: event });
 	};
 
 	const handleDragEnd = () => {
 		setIsDragging(false);
-		clearDragData();
+		editor.timeline.dragSource.end();
 	};
 
 	return (
-- 
cgit v1.3.1