kennethscoffee/starr-philproperties
1
0
Fork 0
mirror of https://github.com/rgrgogu/new_starr.git synced 2026-09-27 00:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

video block misses UIs

Browse Source
This commit is contained in:
rgrgogu
2026-08-01 18:08:54 +08:00
parent a34c6feb84
commit 510a883974
2 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/generic/Blocks/Admin/AudioBlock.jsx
+2 -2
View File
@@ -181,9 +181,9 @@ export function AudioBlock({ content, onUpdate, readOnly = false }) {
{!readOnly && <Label>Audio</Label>}
{isS3 && tokenLoading ? (
<MediaFallback className="w-full max-w-lg h-28 rounded-xl border border-border" />
<MediaFallback className="w-full h-28 rounded-xl border border-border" />
) : src ? (
<div className="w-full max-w-lg rounded-xl overflow-hidden border border-border bg-card text-card-foreground shadow-sm">
<div className="w-full rounded-xl overflow-hidden border border-border bg-card text-card-foreground shadow-sm">
<audio
ref={audioRef}
src={src}
src/components/generic/Blocks/Admin/VideoBlock.jsx
+20 -6
View File
@@ -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>