initial commit

components/BorderlessToolbar.tsx

@@ -0,0 +1,60 @@
+
+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';