Add links to fullscreen versions of screens from screens llist view

Author: rjmunro

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/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/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>
 	)

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import Form from 'react-bootstrap/esm/Form'
 import Collapse from 'react-bootstrap/esm/Collapse'
+import { FullscreenLink } from './FullscreenLink.js'
 
 import './PrompterConfigForm.scss'
 
@@ -668,9 +669,12 @@ export function PrompterConfigForm({ 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 Prompter')}
 				</Link>
+				<FullscreenLink to={generatedUrl} className="btn btn-secondary">
+					{t('Open Fullscreen')}
+				</FullscreenLink>
 			</div>
 		</div>
 	)