Merge pull request Sofie-Automation#1653 from rjmunro/rjmunro/improve-screens-fullscreen-mode

Improve screens fullscreen mode

Author: rjmunro

packages/documentation/docs/user-guide/features/sofie-views-and-screens.mdx

@@ -254,8 +254,7 @@ The Configurable Screens section uses collapsible accordion panels that let you
 **Camera Screen Configuration**
 - Filter by specific Source Layer IDs (e.g., cameras, DVEs)
 - Filter by Studio Labels to show only relevant cameras
-- Enable fullscreen mode for mobile devices
-- Generates URL with `sourceLayerIds`, `studioLabels`, and `fullscreen` parameters
+- Generates URL with `sourceLayerIds` and `studioLabels` parameters
 
 **Prompter Configuration**
 - Configure display options (mirroring, font size, margins, read marker position)
@@ -271,6 +270,8 @@ Bookmark the "Available screens" view for your studio (e.g., `/countdowns/studio
 
 ## Sofie Screens
 
+All Screens support a `?fullscreen=1` query parameter. When this parameter is present, the screen will display a semi-transparent overlay prompting the user to click anywhere to enter fullscreen mode. Once fullscreen is entered, the overlay disappears. If the user exits fullscreen, the overlay will reappear.
+
 ### Prompter Screen
 
 `/prompter/:studioId`
@@ -335,7 +336,6 @@ This screen can be configured using query parameters:
 | :--------------- | :----- | :--------------------------------------------------------------------------------------------------------- | :----------- |
 | `sourceLayerIds` | string | A comma-separated list of Source Layer IDs to be considered for display                                    | _(show all)_ |
 | `studioLabels`   | string | A comma-separated list of Studio Labels (Piece `.content.studioLabel` values) to be considered for display | _(show all)_ |
-| `fullscreen`     | 0 / 1  | Should the screen be shown fullscreen on the device on first user interaction                              | 0            |
 
 Example: [http://127.0.0.1/countdowns/studio0/camera?sourceLayerIds=camera0,dve0&studioLabels=1,KAM%201,K1,KAM1&fullscreen=1](http://127.0.0.1/countdowns/studio0/camera?sourceLayerIds=camera0,dve0&studioLabels=1,KAM%201,K1,KAM1&fullscreen=1)
 

packages/webui/src/client/ui/App.tsx

@@ -29,6 +29,7 @@ import { RundownList } from './RundownList.js'
 import { RundownView } from './RundownView.js'
 import { ActiveRundownView } from './ActiveRundownView.js'
 import { ClockView } from './ClockView/ClockView.js'
+import { FullscreenOverlay } from './ClockView/FullscreenOverlay.js'
 import { ConnectionStatusNotification } from '../lib/ConnectionStatusNotification.js'
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
 import { ErrorBoundary } from '../lib/ErrorBoundary.js'
@@ -232,6 +233,14 @@ export const App: React.FC = function App() {
 							<Route path="/" component={ConnectionStatusNotification} />
 						</Switch>
 					</ErrorBoundary>
+					<ErrorBoundary>
+						<Switch>
+							{/* Screens that should show the fullscreen overlay prompt */}
+							<Route path="/countdowns/:studioId/:page" component={FullscreenOverlay} />
+							<Route path="/prompter/:studioId" component={FullscreenOverlay} />
+							<Route path="/" component={NullComponent} />
+						</Switch>
+					</ErrorBoundary>
 					<ErrorBoundary>
 						<DocumentTitleProvider />
 					</ErrorBoundary>

packages/webui/src/client/ui/ClockView/CameraConfigForm.tsx

@@ -8,19 +8,18 @@ import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
 import { useSubscription, useTracker } from '../../lib/ReactMeteorData/ReactMeteorData.js'
 import { ShowStyleBases } from '../../collections/index.js'
 import { applyAndValidateOverrides } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
+import { FullscreenLink } from './FullscreenLink.js'
 
 import './PrompterConfigForm.scss'
 
 interface CameraConfigState {
 	selectedSourceLayerIds: Set<string>
 	studioLabels: string
-	fullscreen: boolean
 }
 
 const initialState: CameraConfigState = {
 	selectedSourceLayerIds: new Set(),
 	studioLabels: '',
-	fullscreen: false,
 }
 
 /** Source layer types that are relevant for the camera screen */
@@ -36,9 +35,6 @@ function generateCameraUrl(studioId: StudioId, config: CameraConfigState): strin
 	if (config.studioLabels.trim()) {
 		params.set('studioLabels', config.studioLabels.trim())
 	}
-	if (config.fullscreen) {
-		params.set('fullscreen', '1')
-	}
 
 	const queryString = params.toString()
 	return `/countdowns/${studioId}/camera${queryString ? '?' + queryString : ''}`
@@ -157,17 +153,6 @@ export function CameraConfigForm({ studioId }: Readonly<{ studioId: StudioId }>)
 						{t('Comma-separated list of studio labels to filter by. Leave empty for all.')}
 					</Form.Text>
 				</Form.Group>
-
-				<Form.Group className="mb-2">
-					<Form.Check
-						type="checkbox"
-						id="camera-fullscreen"
-						label={t('Fullscreen mode')}
-						checked={config.fullscreen}
-						onChange={(e) => updateConfig('fullscreen', e.target.checked)}
-					/>
-					<Form.Text className="text-muted">{t('Click anywhere on the screen to enter fullscreen.')}</Form.Text>
-				</Form.Group>
 			</div>
 
 			{/* Generated URL and Open Button */}
@@ -178,9 +163,12 @@ export function CameraConfigForm({ studioId }: Readonly<{ studioId: StudioId }>)
 					</Form.Label>
 					<Form.Control type="text" size="sm" readOnly value={generatedUrl} onClick={(e) => e.currentTarget.select()} />
 				</Form.Group>
-				<Link to={generatedUrl} className="btn btn-primary">
+				<Link to={generatedUrl} className="btn btn-primary me-2">
 					{t('Open Camera Screen')}
 				</Link>
+				<FullscreenLink to={generatedUrl} className="btn btn-secondary">
+					{t('Open Fullscreen')}
+				</FullscreenLink>
 			</div>
 		</div>
 	)

packages/webui/src/client/ui/ClockView/CameraScreen/index.tsx

@@ -26,7 +26,7 @@ import { useTranslation } from 'react-i18next'
 import { Spinner } from '../../../lib/Spinner.js'
 import { useBlackBrowserTheme } from '../../../lib/useBlackBrowserTheme.js'
 import { useWakeLock } from './useWakeLock.js'
-import { catchError, useDebounce } from '../../../lib/lib.js'
+import { useDebounce } from '../../../lib/lib.js'
 import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
 import { useSetDocumentClass, useSetDocumentDarkTheme } from '../../util/useSetDocumentClass.js'
 
@@ -54,14 +54,12 @@ export const CanvasSizeContext = React.createContext<number>(1)
 
 const PARAM_NAME_SOURCE_LAYER_IDS = 'sourceLayerIds'
 const PARAM_NAME_STUDIO_LABEL = 'studioLabels'
-const PARAM_NAME_FULLSCREEN = 'fullscreen'
 
 export function CameraScreen({ playlist, studioId }: Readonly<IProps>): JSX.Element | null {
 	const playlistIds = playlist ? [playlist._id] : []
 
 	const [studioLabels, setStudioLabels] = useState<string[] | null>(null)
 	const [sourceLayerIds, setSourceLayerIds] = useState<string[] | null>(null)
-	const [fullScreenMode, setFullScreenMode] = useState<boolean>(false)
 
 	useBlackBrowserTheme()
 
@@ -73,7 +71,6 @@ export function CameraScreen({ playlist, studioId }: Readonly<IProps>): JSX.Elem
 
 		const studioLabelParam = queryParams[PARAM_NAME_STUDIO_LABEL] ?? null
 		const sourceLayerTypeParam = queryParams[PARAM_NAME_SOURCE_LAYER_IDS] ?? null
-		const fullscreenParam = queryParams[PARAM_NAME_FULLSCREEN] ?? false
 
 		setStudioLabels(
 			Array.isArray(studioLabelParam) ? studioLabelParam : studioLabelParam === null ? null : [studioLabelParam]
@@ -85,7 +82,6 @@ export function CameraScreen({ playlist, studioId }: Readonly<IProps>): JSX.Elem
 					? null
 					: [sourceLayerTypeParam]
 		)
-		setFullScreenMode(Array.isArray(fullscreenParam) ? fullscreenParam[0] === '1' : fullscreenParam === '1')
 	}, [location.search])
 
 	const rundowns = useTracker(
@@ -217,27 +213,6 @@ export function CameraScreen({ playlist, studioId }: Readonly<IProps>): JSX.Elem
 		}
 	}, [canvasElRef.current])
 
-	useLayoutEffect(() => {
-		if (!document.fullscreenEnabled || !fullScreenMode) return
-
-		const targetEl = document.documentElement
-
-		function onCanvasClick() {
-			if (document.fullscreenElement !== null) return
-			targetEl
-				?.requestFullscreen({
-					navigationUI: 'hide',
-				})
-				.catch(catchError('targetEl.requestFullscreen'))
-		}
-
-		document.documentElement.addEventListener('click', onCanvasClick)
-
-		return () => {
-			document.documentElement.removeEventListener('click', onCanvasClick)
-		}
-	}, [fullScreenMode])
-
 	useWakeLock()
 
 	if (!studio && studioReady) return <h1 className="m-4 text-center">{t("This studio doesn't exist.")}</h1>

packages/webui/src/client/ui/ClockView/ClockViewIndex.tsx

@@ -7,6 +7,7 @@ import Accordion from 'react-bootstrap/esm/Accordion'
 import { PresenterConfigForm } from './PresenterConfigForm'
 import { CameraConfigForm } from './CameraConfigForm'
 import { PrompterConfigForm } from './PrompterConfigForm'
+import { FullscreenLink } from './FullscreenLink'
 
 type AccordionKey = 'presenter' | 'camera' | 'prompter'
 
@@ -38,12 +39,21 @@ export function ClockViewIndex({ studioId }: Readonly<{ studioId: StudioId }>):
 					<ul>
 						<li>
 							<Link to={`/countdowns/${studioId}/director`}>{t('Director Screen')}</Link>
+							{' ('}
+							<FullscreenLink to={`/countdowns/${studioId}/director`}>{t('fullscreen')}</FullscreenLink>
+							{')'}
 						</li>
 						<li>
 							<Link to={`/countdowns/${studioId}/overlay`}>{t('Overlay Screen')}</Link>
+							{' ('}
+							<FullscreenLink to={`/countdowns/${studioId}/overlay`}>{t('fullscreen')}</FullscreenLink>
+							{')'}
 						</li>
 						<li>
 							<Link to={`/countdowns/${studioId}/multiview`}>{t('All Screens in a MultiViewer')}</Link>
+							{' ('}
+							<FullscreenLink to={`/countdowns/${studioId}/multiview`}>{t('fullscreen')}</FullscreenLink>
+							{')'}
 						</li>
 						<li>
 							<Link to={`/activeRundown/${studioId}`}>{t('Active Rundown View')}</Link>

packages/webui/src/client/ui/ClockView/FullscreenLink.tsx

@@ -0,0 +1,60 @@
+import { useCallback, MouseEvent } from 'react'
+import { Link, useHistory } from 'react-router-dom'
+import { catchError } from '../../lib/lib.js'
+
+interface FullscreenLinkProps {
+	to: string
+	children: React.ReactNode
+	className?: string
+}
+
+/**
+ * Appends fullscreen=1 to a URL path, handling existing query strings.
+ */
+function addFullscreenParam(url: string): string {
+	const hasQuery = url.includes('?')
+	return hasQuery ? `${url}&fullscreen=1` : `${url}?fullscreen=1`
+}
+
+/**
+ * A link that navigates to a destination and also triggers fullscreen mode.
+ * Regular clicks will navigate AND trigger fullscreen.
+ * Cmd-click, Ctrl-click, or middle-click will open in a new tab (normal link behavior).
+ * The URL will include ?fullscreen=1 so the FullscreenOverlay can prompt for fullscreen if needed.
+ */
+export function FullscreenLink({ to, children, className }: Readonly<FullscreenLinkProps>): JSX.Element {
+	const history = useHistory()
+	const fullscreenUrl = addFullscreenParam(to)
+
+	const handleClick = useCallback(
+		(e: MouseEvent<HTMLAnchorElement>) => {
+			// Allow normal link behavior for modifier keys or non-left clicks
+			if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) {
+				return
+			}
+
+			e.preventDefault()
+
+			// Request fullscreen first, then navigate
+			document.documentElement
+				.requestFullscreen({
+					navigationUI: 'hide',
+				})
+				.then(() => {
+					history.push(fullscreenUrl)
+				})
+				.catch((err) => {
+					// If fullscreen fails (e.g., not allowed), still navigate
+					catchError('FullscreenLink.requestFullscreen')(err)
+					history.push(fullscreenUrl)
+				})
+		},
+		[fullscreenUrl, history]
+	)
+
+	return (
+		<Link to={fullscreenUrl} onClick={handleClick} className={className}>
+			{children}
+		</Link>
+	)
+}

packages/webui/src/client/ui/ClockView/FullscreenOverlay.scss

@@ -0,0 +1,32 @@
+.fullscreen-overlay {
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(0 0 0 / 0.7);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	z-index: 10000;
+	backdrop-filter: blur(2px);
+	border: none;
+	padding: 0;
+	margin: 0;
+}
+
+.fullscreen-overlay__content {
+	text-align: center;
+	color: white;
+	user-select: none;
+}
+
+.fullscreen-overlay__icon {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+}
+
+.fullscreen-overlay__text {
+	font-size: 1.5rem;
+	font-weight: 500;
+}

packages/webui/src/client/ui/ClockView/FullscreenOverlay.tsx

@@ -0,0 +1,71 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useLocation } from 'react-router-dom'
+import { parse as queryStringParse } from 'query-string'
+import { useTranslation } from 'react-i18next'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExpand } from '@fortawesome/free-solid-svg-icons'
+import { catchError } from '../../lib/lib.js'
+
+import './FullscreenOverlay.scss'
+
+const PARAM_NAME_FULLSCREEN = 'fullscreen'
+
+/**
+ * A semi-transparent overlay that prompts the user to click to enter fullscreen mode.
+ * Only shows when fullscreen=1 is in the URL query string.
+ * Automatically hides when fullscreen is active, and reappears when fullscreen is exited.
+ */
+export function FullscreenOverlay(): JSX.Element | null {
+	const { t } = useTranslation()
+	const location = useLocation()
+	const [isFullscreen, setIsFullscreen] = useState(() => document.fullscreenElement !== null)
+
+	// Check if fullscreen=1 is in the URL
+	const fullscreenRequested = (() => {
+		const queryParams = queryStringParse(location.search, { arrayFormat: 'comma' })
+		const fullscreenParam = queryParams[PARAM_NAME_FULLSCREEN] ?? false
+		return Array.isArray(fullscreenParam) ? fullscreenParam[0] === '1' : fullscreenParam === '1'
+	})()
+
+	useEffect(() => {
+		function handleFullscreenChange() {
+			setIsFullscreen(document.fullscreenElement !== null)
+		}
+
+		document.addEventListener('fullscreenchange', handleFullscreenChange)
+		return () => {
+			document.removeEventListener('fullscreenchange', handleFullscreenChange)
+		}
+	}, [])
+
+	const requestFullscreen = useCallback(() => {
+		if (document.fullscreenElement !== null) return
+
+		document.documentElement
+			.requestFullscreen({
+				navigationUI: 'hide',
+			})
+			.catch(catchError('FullscreenOverlay.requestFullscreen'))
+	}, [])
+
+	// Don't render if fullscreen not requested, already fullscreen, or not supported
+	if (!fullscreenRequested || isFullscreen || !document.fullscreenEnabled) {
+		return null
+	}
+
+	return (
+		<button
+			className="fullscreen-overlay"
+			onClick={requestFullscreen}
+			type="button"
+			aria-label={t('Click or press Enter for fullscreen')}
+		>
+			<div className="fullscreen-overlay__content">
+				<div className="fullscreen-overlay__icon">
+					<FontAwesomeIcon icon={faExpand} />
+				</div>
+				<div className="fullscreen-overlay__text">{t('Click anywhere for fullscreen')}</div>
+			</div>
+		</button>
+	)
+}

packages/webui/src/client/ui/ClockView/PresenterConfigForm.tsx

@@ -8,6 +8,7 @@ import { MeteorPubSub } from '@sofie-automation/meteor-lib/dist/api/pubsub'
 import { useSubscription, useTracker } from '../../lib/ReactMeteorData/ReactMeteorData.js'
 import { RundownLayouts } from '../../collections/index.js'
 import { RundownLayoutsAPI } from '../../lib/rundownLayouts.js'
+import { FullscreenLink } from './FullscreenLink.js'
 
 import './PrompterConfigForm.scss'
 
@@ -86,9 +87,12 @@ export function PresenterConfigForm({ studioId }: Readonly<{ studioId: StudioId
 					</Form.Label>
 					<Form.Control type="text" size="sm" readOnly value={generatedUrl} onClick={(e) => e.currentTarget.select()} />
 				</Form.Group>
-				<Link to={generatedUrl} className="btn btn-primary">
+				<Link to={generatedUrl} className="btn btn-primary me-2">
 					{t('Open Presenter Screen')}
 				</Link>
+				<FullscreenLink to={generatedUrl} className="btn btn-secondary">
+					{t('Open Fullscreen')}
+				</FullscreenLink>
 			</div>
 		</div>
 	)