summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor/panels/timeline/timeline-tick.tsx
blob: 7d9a4bc27c1835a9c9a4ea147b11d6a058b02221 (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
"use client";

import { timelineTimeToSnappedPixels } from "@/lib/timeline";
import { formatRulerLabel } from "@/lib/timeline/ruler-utils";

interface TimelineTickProps {
	time: number;
	zoomLevel: number;
	fps: number;
	showLabel: boolean;
}

export function TimelineTick({
	time,
	zoomLevel,
	fps,
	showLabel,
}: TimelineTickProps) {
	const leftPosition = timelineTimeToSnappedPixels({ time, zoomLevel });

	if (showLabel) {
		const label = formatRulerLabel({ timeInSeconds: time, fps });
		return (
			<span
				className="text-muted-foreground/85 absolute top-1 select-none text-[10px] leading-none"
				style={{ left: `${leftPosition}px` }}
			>
				{label}
			</span>
		);
	}

	return (
		<div
			className="border-muted-foreground/25 absolute top-1.5 h-1.5 border-l"
			style={{ left: `${leftPosition}px` }}
		/>
	);
}