forked from averyfelts/Lofi_Generator
Nicholai
d3158e4c6a
work in progress implementation of: - mixer with channel strips, faders, pan knobs, level meters - timeline with ruler, playhead, sections, keyframe tracks - pattern and progression pickers for drums/chords - automation lanes and mute tracks - loop bracket for loop region selection - export modal placeholder known issues: - drum pattern changes don't update audio engine - timeline keyframes not connected to scheduler - some UI bugs remain this is a checkpoint commit for further iteration
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface TimeDisplayProps {
|
|
bar: number;
|
|
beat: number;
|
|
durationBars: number;
|
|
bpm: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function TimeDisplay({
|
|
bar,
|
|
beat,
|
|
durationBars,
|
|
bpm,
|
|
className,
|
|
}: TimeDisplayProps) {
|
|
const { currentTime, totalTime } = useMemo(() => {
|
|
const secondsPerBeat = 60 / bpm;
|
|
const secondsPerBar = secondsPerBeat * 4;
|
|
|
|
const currentSeconds = bar * secondsPerBar + beat * secondsPerBeat;
|
|
const totalSeconds = durationBars * secondsPerBar;
|
|
|
|
const formatTime = (seconds: number) => {
|
|
const mins = Math.floor(seconds / 60);
|
|
const secs = Math.floor(seconds % 60);
|
|
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
return {
|
|
currentTime: formatTime(currentSeconds),
|
|
totalTime: formatTime(totalSeconds),
|
|
};
|
|
}, [bar, beat, durationBars, bpm]);
|
|
|
|
return (
|
|
<div className={cn('flex items-center gap-3 font-mono text-sm', className)}>
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-muted-foreground">Bar</span>
|
|
<span className="text-foreground font-medium w-6 text-right">{bar + 1}</span>
|
|
<span className="text-muted-foreground/50">|</span>
|
|
<span className="text-muted-foreground">Beat</span>
|
|
<span className="text-foreground font-medium w-4">{beat + 1}</span>
|
|
</div>
|
|
<div className="text-muted-foreground/50">|</div>
|
|
<div className="text-muted-foreground">
|
|
{currentTime} / {totalTime}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|