From ea945ed62deccf9d0c7b7345f23ceca1cef11af5 Mon Sep 17 00:00:00 2001
From: Alan Trebugeais <alan.trebugeais@epitech.eu>
Date: Fri, 8 May 2026 12:32:47 +0200
Subject: [PATCH] fix: some issues with on select clip

---
 src/components/video-editor/timeline/Item.tsx  | 10 ++++++++--
 .../components/viewport/TimelineCanvasRows.tsx | 18 +++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/video-editor/timeline/Item.tsx b/src/components/video-editor/timeline/Item.tsx
index 4af2d8d4..6d8abf12 100644
--- a/src/components/video-editor/timeline/Item.tsx
+++ b/src/components/video-editor/timeline/Item.tsx
@@ -20,6 +20,7 @@ interface ItemProps {
 	children: React.ReactNode;
 	isSelected?: boolean;
 	onSelect?: () => void;
+	onSelectId?: (id: string) => void;
 	zoomDepth?: number;
 	zoomMode?: "auto" | "manual";
 	speedValue?: number;
@@ -52,6 +53,7 @@ export default function Item({
 	rowId,
 	isSelected = false,
 	onSelect,
+	onSelectId,
 	zoomDepth = 1,
 	zoomMode = "auto",
 	speedValue,
@@ -88,6 +90,10 @@ export default function Item({
 	);
 
 	const MIN_ITEM_PX = 6;
+	const handleSelect = () => {
+		onSelect?.();
+		onSelectId?.(id);
+	};
 	const safeItemStyle = {
 		...itemStyle,
 		minWidth: MIN_ITEM_PX,
@@ -101,7 +107,7 @@ export default function Item({
 			style={safeItemStyle}
 			{...listeners}
 			{...attributes}
-			onPointerDownCapture={() => onSelect?.()}
+			onPointerDownCapture={handleSelect}
 			className="group h-full"
 		>
 			<div
@@ -127,7 +133,7 @@ export default function Item({
 					}}
 					onClick={(event) => {
 						event.stopPropagation();
-						onSelect?.();
+						handleSelect();
 					}}
 				>
 					<div
diff --git a/src/components/video-editor/timeline/components/viewport/TimelineCanvasRows.tsx b/src/components/video-editor/timeline/components/viewport/TimelineCanvasRows.tsx
index fb1e8b8a..01cdf831 100644
--- a/src/components/video-editor/timeline/components/viewport/TimelineCanvasRows.tsx
+++ b/src/components/video-editor/timeline/components/viewport/TimelineCanvasRows.tsx
@@ -18,6 +18,10 @@ import type { TimelineRenderItem } from "../../model/timelineModel";
 import type { AudioPeaksData } from "../../useAudioPeaks";
 import ClipMarkerOverlay from "../overlays/ClipMarkerOverlay";
 
+const HINT_CLIP = "Press C to split clip";
+const HINT_ANNOTATION = "Press A to add annotation";
+const HINT_AUDIO = "Click music icon to add audio";
+
 interface TimelineCanvasRowsProps {
 	items: TimelineRenderItem[];
 	videoDurationMs: number;
@@ -94,7 +98,7 @@ export function TimelineCanvasRows({
 
 	return (
 		<>
-			<Row id={CLIP_ROW_ID} isEmpty={clipItems.length === 0} hint="Press C to split clip">
+			<Row id={CLIP_ROW_ID} isEmpty={clipItems.length === 0} hint={HINT_CLIP}>
 				{audioPeaks && <AudioWaveform peaks={audioPeaks} />}
 				<ClipMarkerOverlay videoDurationMs={videoDurationMs} />
 				{clipItems.map((item) => (
@@ -104,7 +108,7 @@ export function TimelineCanvasRows({
 						rowId={item.rowId}
 						span={item.span}
 						isSelected={selectAllBlocksActive || item.id === selectedClipId}
-						onSelect={() => onSelectClip?.(item.id)}
+						onSelectId={onSelectClip}
 						variant="clip"
 					>
 						{item.label}
@@ -152,7 +156,7 @@ export function TimelineCanvasRows({
 						rowId={item.rowId}
 						span={item.span}
 						isSelected={selectAllBlocksActive || item.id === selectedZoomId}
-						onSelect={() => onSelectZoom?.(item.id)}
+						onSelectId={onSelectZoom}
 						zoomDepth={item.zoomDepth}
 						zoomMode={item.zoomMode}
 						variant="zoom"
@@ -171,7 +175,7 @@ export function TimelineCanvasRows({
 						key={rowId}
 						id={rowId}
 						isEmpty={rowItems.length === 0}
-						hint={index === 0 ? "Press A to add annotation" : undefined}
+						hint={index === 0 ? HINT_ANNOTATION : undefined}
 					>
 						{rowItems.map((item) => (
 							<Item
@@ -180,7 +184,7 @@ export function TimelineCanvasRows({
 								rowId={item.rowId}
 								span={item.span}
 								isSelected={selectAllBlocksActive || item.id === selectedAnnotationId}
-								onSelect={() => onSelectAnnotation?.(item.id)}
+								onSelectId={onSelectAnnotation}
 								variant="annotation"
 							>
 								{item.label}
@@ -199,7 +203,7 @@ export function TimelineCanvasRows({
 						key={rowId}
 						id={rowId}
 						isEmpty={rowItems.length === 0}
-						hint={index === 0 ? "Click music icon to add audio" : undefined}
+						hint={index === 0 ? HINT_AUDIO : undefined}
 					>
 						{rowItems.map((item) => (
 							<Item
@@ -208,7 +212,7 @@ export function TimelineCanvasRows({
 								rowId={item.rowId}
 								span={item.span}
 								isSelected={selectAllBlocksActive || item.id === selectedAudioId}
-								onSelect={() => onSelectAudio?.(item.id)}
+								onSelectId={onSelectAudio}
 								variant="audio"
 							>
 								{item.label}