52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
/**
|
|
* Composant TimeDisplay
|
|
* Affiche le temps actuel et la durée totale au format MM:SS
|
|
*/
|
|
|
|
import { formatTime } from '../services/playerService';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface TimeDisplayProps {
|
|
currentTime: number;
|
|
duration: number;
|
|
className?: string;
|
|
showSeparator?: boolean;
|
|
separator?: string;
|
|
}
|
|
|
|
export function TimeDisplay({
|
|
currentTime,
|
|
duration,
|
|
className,
|
|
showSeparator = true,
|
|
separator = ' / ',
|
|
}: TimeDisplayProps) {
|
|
const formattedCurrentTime = formatTime(currentTime);
|
|
const formattedDuration = formatTime(duration);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center text-sm text-muted-foreground',
|
|
className,
|
|
)}
|
|
role="timer"
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
>
|
|
<span aria-label={`Temps actuel: ${formattedCurrentTime}`}>
|
|
{formattedCurrentTime}
|
|
</span>
|
|
{showSeparator && (
|
|
<span className="mx-1" aria-hidden="true">
|
|
{separator}
|
|
</span>
|
|
)}
|
|
<span aria-label={`Durée totale: ${formattedDuration}`}>
|
|
{formattedDuration}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TimeDisplay;
|