52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
|
import { Pause, Play, Square } from 'lucide-react';
|
||
|
|
import React from 'react';
|
||
|
|
import { useI18n } from '@/application/i18n/I18nProvider';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { cn } from '@/lib/utils.ts';
|
||
|
|
|
||
|
|
export interface ScriptRecordingIndicatorProps {
|
||
|
|
elapsedMs: number;
|
||
|
|
isPaused: boolean;
|
||
|
|
onPause: () => void;
|
||
|
|
onResume: () => void;
|
||
|
|
onStop: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatElapsed(ms: number) {
|
||
|
|
const seconds = Math.floor(ms / 1000);
|
||
|
|
const minutes = Math.floor(seconds / 60);
|
||
|
|
const rest = seconds % 60;
|
||
|
|
return `${String(minutes).padStart(2, '0')}:${String(rest).padStart(2, '0')}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ScriptRecordingIndicator: React.FC<ScriptRecordingIndicatorProps> = ({
|
||
|
|
elapsedMs,
|
||
|
|
isPaused,
|
||
|
|
onPause,
|
||
|
|
onResume,
|
||
|
|
onStop,
|
||
|
|
}) => {
|
||
|
|
const { t } = useI18n();
|
||
|
|
return (
|
||
|
|
<div className="flex items-center gap-2 text-xs">
|
||
|
|
<span className="flex items-center gap-1 text-red-500 font-medium">
|
||
|
|
<span className={cn('inline-block h-2 w-2 rounded-full bg-red-500', !isPaused && 'animate-pulse')} />
|
||
|
|
REC
|
||
|
|
</span>
|
||
|
|
<span className="tabular-nums text-muted-foreground">{formatElapsed(elapsedMs)}</span>
|
||
|
|
{isPaused ? (
|
||
|
|
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={onResume} title={t('scripts.recording.resume')}>
|
||
|
|
<Play size={14} />
|
||
|
|
</Button>
|
||
|
|
) : (
|
||
|
|
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={onPause} title={t('scripts.recording.pause')}>
|
||
|
|
<Pause size={14} />
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={onStop} title={t('scripts.recording.stop')}>
|
||
|
|
<Square size={14} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|