diff --git a/app/expo/page.tsx b/app/expo/page.tsx index 05033b6..b8b7075 100644 --- a/app/expo/page.tsx +++ b/app/expo/page.tsx @@ -1,7 +1,7 @@ "use client"; import { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; -import { X } from "lucide-react"; +import { X, Maximize2, Minimize2 } from "lucide-react"; import clsx from "clsx"; // 展台四模块视频配置(请将对应 mp4/webm 文件放入 public/videos/ 下) @@ -39,8 +39,10 @@ interface VideoStateRef { export default function ExpoPage() { const [active, setActive] = useState(null); + const [isFullscreen, setIsFullscreen] = useState(false); const timeRefs = useRef>({}); const containerRefs = useRef>({}); + const mainRef = useRef(null); // 记录时间用于在放大时继续播放(非严格同步,够展示用) const handleBeforeExpand = (key: string) => { @@ -83,8 +85,53 @@ export default function ExpoPage() { return () => window.removeEventListener("keydown", onKey); }, [active]); + // Fullscreen 监听 + useEffect(() => { + const handler = () => { + const fsEl = document.fullscreenElement || (document as any).webkitFullscreenElement; + setIsFullscreen(!!fsEl); + }; + document.addEventListener("fullscreenchange", handler); + document.addEventListener("webkitfullscreenchange", handler as any); + return () => { + document.removeEventListener("fullscreenchange", handler); + document.removeEventListener("webkitfullscreenchange", handler as any); + }; + }, []); + + const enterFs = async () => { + const el = mainRef.current; + if (!el) return; + try { + if (el.requestFullscreen) await el.requestFullscreen(); + else if ((el as any).webkitRequestFullscreen) (el as any).webkitRequestFullscreen(); + } catch (_) { + /* ignore */ + } + }; + const exitFs = async () => { + try { + if (document.exitFullscreen) await document.exitFullscreen(); + else if ((document as any).webkitExitFullscreen) (document as any).webkitExitFullscreen(); + } catch (_) { + /* ignore */ + } + }; + const toggleFs = () => { + if (isFullscreen) exitFs(); else enterFs(); + }; + return ( -
+
+ + {/* 全屏按钮 */} + {/* 2x2 全屏栅格 */}
@@ -109,9 +156,9 @@ export default function ExpoPage() { preload="auto" /> {/* 角标信息,默认半透明,悬停/触摸更亮 */} -
+

{v.title}

-

{v.desc}

+

{v.desc}

点击放大
@@ -138,10 +185,11 @@ export default function ExpoPage() { exit={{ opacity: 0, scale: 0.95 }} transition={{ type: "spring", stiffness: 180, damping: 22 }} > -
+
+ {/* 居中容器:使用 max-* 避免视频固有尺寸撑大父容器 */}