blob: 398e06c615e2481d83fd1145b4f669c08a5097f7 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
"use client";
import { SnapPoint } from "@/hooks/use-timeline-snapping";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
interface SnapIndicatorProps {
snapPoint: SnapPoint | null;
zoomLevel: number;
timelineHeight: number;
isVisible: boolean;
}
export function SnapIndicator({
snapPoint,
zoomLevel,
timelineHeight,
isVisible,
}: SnapIndicatorProps) {
if (!isVisible || !snapPoint) {
return null;
}
const leftPosition =
snapPoint.time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const getIndicatorColor = () => {
switch (snapPoint.type) {
case "grid":
return "bg-blue-400";
case "element-start":
case "element-end":
return "bg-green-400";
case "playhead":
return "bg-red-400";
default:
return "bg-gray-400";
}
};
const getIndicatorLabel = () => {
switch (snapPoint.type) {
case "grid":
return "Grid";
case "element-start":
return "Start";
case "element-end":
return "End";
case "playhead":
return "Playhead";
default:
return "";
}
};
return (
<div
className="absolute top-0 pointer-events-none z-50"
style={{
left: `${leftPosition}px`,
height: `${timelineHeight}px`,
}}
>
{/* Snap line */}
<div className={`w-0.5 h-full ${getIndicatorColor()} opacity-80`} />
{/* Snap label */}
<div
className={`absolute top-0 left-1 px-1 py-0.5 text-xs text-white rounded ${getIndicatorColor()} opacity-90 whitespace-nowrap`}
style={{ transform: "translateY(-100%)" }}
>
{getIndicatorLabel()} ({snapPoint.time.toFixed(1)}s)
</div>
</div>
);
}
|
