refactor: thinner hooks

2 files changed, 27 insertions, 17 deletions

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 (