diff --git a/apps/ScreenShareWeb/src/App.css b/apps/ScreenShareWeb/src/App.css index 5763ba7..bf2403e 100644 --- a/apps/ScreenShareWeb/src/App.css +++ b/apps/ScreenShareWeb/src/App.css @@ -278,6 +278,14 @@ button:disabled { background: #10111b; } +.screen-stage:fullscreen { + width: 100vw; + height: 100vh; + min-height: 100vh; + border: 0; + border-radius: 0; +} + .screen-stage .screen-frame { display: grid; grid-template-rows: auto minmax(0, 1fr); diff --git a/apps/ScreenShareWeb/src/App.tsx b/apps/ScreenShareWeb/src/App.tsx index 3a5ff8f..9602d47 100644 --- a/apps/ScreenShareWeb/src/App.tsx +++ b/apps/ScreenShareWeb/src/App.tsx @@ -71,6 +71,7 @@ async function apiRequest(path: string, options: RequestInit = {}, token?: st function App() { const roomRef = useRef(null) + const screenStageRef = useRef(null) const [session, setSession] = useState(null) const [authMode, setAuthMode] = useState<'login' | 'register'>('login') const [username, setUsername] = useState('') @@ -93,6 +94,7 @@ function App() { const [localScreen, setLocalScreen] = useState(null) const [remoteScreens, setRemoteScreens] = useState([]) const [activeScreenId, setActiveScreenId] = useState(null) + const [fullscreenMode, setFullscreenMode] = useState<'none' | 'page' | 'stage'>('none') const [createdInvite, setCreatedInvite] = useState('') const [error, setError] = useState('') @@ -109,6 +111,20 @@ function App() { void roomRef.current?.disconnect() }, []) + useEffect(() => { + function syncFullscreenMode() { + if (document.fullscreenElement === screenStageRef.current) { + setFullscreenMode('stage') + } else if (document.fullscreenElement === document.documentElement) { + setFullscreenMode('page') + } else { + setFullscreenMode('none') + } + } + document.addEventListener('fullscreenchange', syncFullscreenMode) + return () => document.removeEventListener('fullscreenchange', syncFullscreenMode) + }, []) + function saveSession(next: Session) { localStorage.setItem('screen-share-session', JSON.stringify(next)) setSession(next) @@ -289,6 +305,31 @@ function App() { roomRef.current = null } + async function togglePageFullscreen() { + try { + if (fullscreenMode === 'page') { + await document.exitFullscreen() + } else { + await document.documentElement.requestFullscreen() + } + } catch { + setError('浏览器不允许进入全屏模式。') + } + } + + async function toggleStageFullscreen() { + if (!screenStageRef.current) return + try { + if (fullscreenMode === 'stage') { + await document.exitFullscreen() + } else { + await screenStageRef.current.requestFullscreen() + } + } catch { + setError('浏览器不允许将主画面全屏显示。') + } + } + function logout() { leaveRoom() localStorage.removeItem('screen-share-session') @@ -382,11 +423,17 @@ function App() { {connected && ( <>
+ + {canShare && }
-
+
{activeScreen ? :

等待参与者共享屏幕

}