video block misses UIs

src/components/generic/Blocks/Admin/VideoBlock.jsx

@@ -6,6 +6,7 @@ import {
   Volume2,
   VolumeX,
   Maximize2,
+  Minimize2,
   VideoIcon,
 } from "lucide-react";
 import { Label } from "@/components/ui/label";
@@ -37,6 +38,7 @@ export function VideoBlock({ content, onUpdate, readOnly = false }) {
   const [muted,         setMuted]         = useState(false);
   const [volume,        setVolume]        = useState(1);
   const [overlayVisible,setOverlayVisible]= useState(true);
+  const [isFullscreen,  setIsFullscreen]  = useState(false);
   // True from the moment `src` is set until the browser has actually
   // buffered enough to render a frame (or stalls mid-playback) — closes the
   // gap between "token resolved" (the `loading` from useAssetPreviewSrc
@@ -136,6 +138,16 @@ export function VideoBlock({ content, onUpdate, readOnly = false }) {
     else el.requestFullscreen?.();
   };
 
+  // #video-block-wrap now wraps both the video area and the controls bar
+  // below it (previously just the video), so fullscreen no longer drops the
+  // seek bar / volume / fullscreen button. isFullscreen also relaxes the
+  // 16/9 + max-height constraints so the video fills the screen properly.
+  useEffect(() => {
+    const onChange = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", onChange);
+    return () => document.removeEventListener("fullscreenchange", onChange);
+  }, []);
+
   // ── Asset picker handler ──────────────────────────────────────────────────
   //
   // Saves all metadata needed by the client VideoBlock at render time.
@@ -175,13 +187,15 @@ export function VideoBlock({ content, onUpdate, readOnly = false }) {
       {loading ? (
         <MediaFallback className="w-full aspect-video rounded-lg" />
       ) : src ? (
-        <div className="rounded-lg overflow-hidden bg-card">
+        <div
+          id="video-block-wrap"
+          className={`overflow-hidden bg-card ${isFullscreen ? "fixed inset-0 flex flex-col" : "rounded-lg border"}`}
+        >
 
           {/* ── Video area ── */}
           <div
-            id="video-block-wrap"
-            className="relative w-full bg-black cursor-pointer group"
-            style={{ aspectRatio: "16/9" }}
+            className={`relative w-full bg-black cursor-pointer group ${isFullscreen ? "flex-1 min-h-0" : ""}`}
+            style={isFullscreen ? undefined : { aspectRatio: "16/9", maxHeight: "calc(100vh - 260px)" }}
             onClick={togglePlay}
           >
             <video
@@ -276,8 +290,8 @@ export function VideoBlock({ content, onUpdate, readOnly = false }) {
                 />
               </div>
 
-              <button onClick={toggleFullscreen} aria-label="Fullscreen" className="text-muted-foreground hover:text-foreground transition-colors ml-1">
-                <Maximize2 className="size-4" />
+              <button onClick={toggleFullscreen} aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"} className="text-muted-foreground hover:text-foreground transition-colors ml-1">
+                {isFullscreen ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
               </button>
             </div>
           </div>