feat(Output): support flipping, dynamic font size

Author: jstarpl

packages/apps/backend/src/data-stores/OutputSettingsStore.ts

@@ -7,16 +7,16 @@ export class OutputSettingsStore {
 		// _id: '',
 
 		// TODO: load these from persistent store upon startup?
-		fontSize: 10,
+		fontSize: 7,
 
 		mirrorHorizontally: false,
 		mirrorVertically: false,
 
 		focusPosition: 'center',
 		showFocusPosition: false,
 
-		marginHorizontal: 5,
-		marginVertical: 5,
+		marginHorizontal: 1,
+		marginVertical: 1,
 
 		activeRundownPlaylistId: null,
 	})

packages/apps/client/src/PrompterStyles.css

@@ -20,6 +20,14 @@
 
 	font-size: var(--prompter-font-size-base);
 	line-height: var(--prompter-line-height);
+
+	/* These are needed to maintain compatibility with Prose-mirror's text layout */
+	word-wrap: break-word;
+	white-space: pre-wrap;
+	white-space: break-spaces;
+	-webkit-font-variant-ligatures: none;
+	font-variant-ligatures: none;
+	font-feature-settings: 'liga' 0;
 }
 
 .Prompter p {

packages/apps/client/src/components/CurrentRundown/CurrentRundown.tsx

@@ -37,9 +37,9 @@ const CurrentRundown = observer((): React.JSX.Element => {
 				</Button>
 			</p>
 			<SystemStatusAlertBars />
-			<ul className={classes.SegmentLineList}>
+			<ul className={classes.SegmentLineList} role="tree">
 				{openRundown.segmentsInOrder.map((segment) => (
-					<li key={segment.id} data-segment-id={segment.id} className={classes.SegmentContainer}>
+					<li key={segment.id} data-segment-id={segment.id} className={classes.SegmentContainer} role="tree">
 						<Segment segment={segment} />
 					</li>
 				))}

packages/apps/client/src/components/CurrentRundown/Segment.tsx

@@ -13,21 +13,25 @@ const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Elemen
 		return lineId === RootAppStore.uiStore.selectedLineId
 	}
 
-	function onClick(e: React.MouseEvent<HTMLLIElement>) {
+	function onFocus(e: React.FocusEvent<HTMLLIElement>) {
 		const lineId = e.currentTarget.dataset['lineId'] as UILineId
 		RootAppStore.uiStore.setSelectedLineId(lineId)
 	}
 
 	return (
 		<>
-			<div className={classes.SegmentIdentifier}>{segment.name}</div>
+			<div className={classes.SegmentIdentifier} role="heading">
+				{segment.name}
+			</div>
 			<ul className={classes.LineContainer}>
 				{segment.linesInOrder.map((line) => (
 					<li
 						key={line.id}
 						className={isSelected(line.id) ? classes.LineSelected : classes.Line}
-						onClickCapture={onClick}
+						onFocus={onFocus}
 						data-line-id={line.id}
+						tabIndex={0}
+						role="treeitem"
 					>
 						<Line line={line} />
 					</li>

packages/apps/client/src/index.scss

@@ -34,3 +34,13 @@ $theme-colors: (
 	--color-dark-1: #{$dark-1};
 	--color-dark-2: #{$dark-2};
 }
+
+/* Remove outline for non-keyboard :focus */
+*:focus:not(:focus-visible) {
+	outline: none;
+}
+
+/* Optional: Customize .focus-visible */
+:focus-visible {
+	outline: $primary solid 2px;
+}

packages/apps/client/src/stores/RundownStore.ts

@@ -97,8 +97,7 @@ export class RundownStore {
 	sendRundownToOutput = (id: RundownPlaylistId) => {
 		if (!this.outputSettings) return
 		// TODO: This really shouldn't require the entire outputSettings object to be available first
-		this.connection.outputSettings.update(null, {
-			...this.outputSettings,
+		this.connection.outputSettings.patch(null, {
 			activeRundownPlaylistId: id,
 		})
 	}

packages/apps/client/src/views/Output/Output.module.scss

@@ -0,0 +1,8 @@
+.Output {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	overflow: auto;
+}

packages/apps/client/src/views/Output/Output.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { observer } from 'mobx-react-lite'
 import { RootAppStore } from 'src/stores/RootAppStore.ts'
 
@@ -8,7 +8,10 @@ import { Helmet } from 'react-helmet-async'
 import { getCurrentTime } from 'src/lib/getCurrentTime'
 import { useQueryParam } from 'src/lib/useQueryParam'
 
+import classes from './Output.module.scss'
+
 const Output = observer(function Output(): React.ReactElement {
+	const rootEl = useRef<HTMLDivElement>(null)
 	const speed = useRef(0)
 
 	const isPrimary = useQueryParam('primary') !== null
@@ -26,7 +29,7 @@ const Output = observer(function Output(): React.ReactElement {
 
 		// don't do this, it's just for testing:
 		const interval = setInterval(() => {
-			window.scrollBy(0, speed.current)
+			rootEl.current?.scrollBy(0, speed.current)
 		}, 1000 / 60)
 
 		return () => {
@@ -139,19 +142,34 @@ const Output = observer(function Output(): React.ReactElement {
 
 	*/
 
+	const fontSize = RootAppStore.outputSettingsStore.outputSettings.fontSize
+	const scaleVertical = RootAppStore.outputSettingsStore.outputSettings.mirrorVertically ? '-1' : '1'
+	const scaleHorizontal = RootAppStore.outputSettingsStore.outputSettings.mirrorHorizontally ? '-1' : '1'
+
+	const styleVariables = useMemo(
+		() =>
+			({
+				'--prompter-font-size-base': `${fontSize}vw`,
+				transform: `scale(${scaleHorizontal}, ${scaleVertical})`,
+			} as React.CSSProperties),
+		[fontSize, scaleVertical, scaleHorizontal]
+	)
+
+	const className = `Prompter ${classes.Output}`
+
 	if (!rundown) {
 		return (
 			<>
 				{GLOBAL_SETTINGS}
-				<div className="Prompter"></div>
+				<div className={className}></div>
 			</>
 		)
 	}
 
 	return (
 		<>
 			{GLOBAL_SETTINGS}
-			<div className="Prompter">
+			<div className={className} style={styleVariables} ref={rootEl}>
 				<h1>{rundown.name}</h1>
 				{rundown.segmentsInOrder.map((segment) => (
 					<Segment key={segment.id} segment={segment} />