61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
interface ActiveVideoInfo {
|
|
cellId: string;
|
|
cellNumber: number;
|
|
}
|
|
|
|
interface BorderlessToolbarProps {
|
|
onExitBorderlessMode: () => void;
|
|
activeVideos: ActiveVideoInfo[];
|
|
onSelectAudio: (cellId: string) => void;
|
|
currentActiveAudioVideoId: string | null;
|
|
}
|
|
|
|
export const BorderlessToolbar = React.forwardRef<HTMLDivElement, BorderlessToolbarProps>(({
|
|
onExitBorderlessMode,
|
|
activeVideos,
|
|
onSelectAudio,
|
|
currentActiveAudioVideoId,
|
|
}, ref) => {
|
|
if (activeVideos.length === 0) return null; // Don't show toolbar if no videos are active
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="fixed top-0 left-0 right-0 bg-black bg-opacity-75 p-2 sm:p-3 flex items-center justify-between space-x-2 sm:space-x-4 z-[100]"
|
|
role="toolbar"
|
|
aria-label="Borderless mode controls"
|
|
>
|
|
<button
|
|
onClick={onExitBorderlessMode}
|
|
className="px-3 py-1.5 sm:px-4 sm:py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-md text-xs sm:text-sm shadow-md transition-colors"
|
|
aria-label="Exit Borderless Mode"
|
|
>
|
|
Exit Borderless
|
|
</button>
|
|
|
|
<div className="flex items-center space-x-1 sm:space-x-2 overflow-x-auto">
|
|
<span className="text-gray-300 font-medium text-xs sm:text-sm mr-1 sm:mr-2 flex-shrink-0">Audio:</span>
|
|
{activeVideos.map(({ cellId, cellNumber }) => (
|
|
<button
|
|
key={cellId}
|
|
onClick={() => onSelectAudio(cellId)}
|
|
className={`px-2.5 py-1 sm:px-3 sm:py-1.5 rounded-md text-xs sm:text-sm font-medium transition-colors shadow flex-shrink-0
|
|
${currentActiveAudioVideoId === cellId
|
|
? 'bg-green-500 text-white hover:bg-green-600'
|
|
: 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`}
|
|
aria-pressed={currentActiveAudioVideoId === cellId}
|
|
aria-label={`Play audio from video ${cellNumber}`}
|
|
>
|
|
V{cellNumber}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
BorderlessToolbar.displayName = 'BorderlessToolbar';
|