feat(Output): Primary ViewPort width feedback

packages/apps/client/src/PrompterStyles.css

@@ -3,6 +3,9 @@
 	--foreground-color: #fff;
 	--header-color: #999;
 
+	--prompter-font-size-base: 16px;
+	--prompter-line-height: calc(var(--prompter-font-size-base) * 1.4);
+
 	color: var(--foreground-color);
 	background: var(--background-color);
 
@@ -15,8 +18,8 @@
 	overflow: auto;
 	box-sizing: border-box;
 
-	font-size: 16px;
-	line-height: 21px;
+	font-size: var(--prompter-font-size-base);
+	line-height: var(--prompter-line-height);
 }
 
 .Prompter p {
@@ -55,6 +58,21 @@
 	margin: 1em 0;
 }
 
+.Prompter h1 {
+	font-size: calc(var(--prompter-font-size-base) * 2);
+	line-height: 1.4;
+}
+
+.Prompter h2 {
+	font-size: calc(var(--prompter-font-size-base) * 1);
+	line-height: 1.4;
+}
+
+.Prompter h3 {
+	font-size: calc(var(--prompter-font-size-base) * 1);
+	line-height: 1.4;
+}
+
 .Prompter .ProseMirror {
 	outline: none;
 }

packages/apps/client/src/lib/getCurrentTime.ts

@@ -0,0 +1,5 @@
+export function getCurrentTime(): Time {
+	return Date.now()
+}
+
+export type Time = number

packages/apps/client/src/lib/useQueryParam.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
+
+export function useQueryParam(paramName: string): string | null {
+	const location = useLocation()
+
+	const params = useMemo(() => new URLSearchParams(location.search), [location.search])
+
+	return params.get(paramName)
+}

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

@@ -1,14 +1,18 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import { observer } from 'mobx-react-lite'
 import { RootAppStore } from 'src/stores/RootAppStore.ts'
 
 import 'src/PrompterStyles.css'
 import { Segment } from './Segment'
 import { Helmet } from 'react-helmet-async'
+import { getCurrentTime } from 'src/lib/getCurrentTime'
+import { useQueryParam } from 'src/lib/useQueryParam'
 
 const Output = observer(function Output(): React.ReactElement {
 	const speed = useRef(0)
 
+	const isPrimary = useQueryParam('primary') !== null
+
 	// On startup
 	useEffect(() => {
 		RootAppStore.outputSettingsStore.initialize() // load and subscribe
@@ -31,6 +35,33 @@ const Output = observer(function Output(): React.ReactElement {
 		}
 	}, [])
 
+	const onViewPortSizeChanged = useCallback(() => {
+		if (!isPrimary) return
+
+		RootAppStore.connection.viewPort.update('', {
+			_id: '',
+			width: window.innerWidth / window.innerHeight,
+			// TODO: This should return the actual lastKnownState
+			lastKnownState: {
+				timestamp: getCurrentTime(),
+				controllerMessage: {
+					offset: null,
+					speed: 0,
+				},
+			},
+		})
+	}, [isPrimary])
+
+	useEffect(() => {
+		window.addEventListener('resize', onViewPortSizeChanged)
+
+		onViewPortSizeChanged()
+
+		return () => {
+			window.removeEventListener('resize', onViewPortSizeChanged)
+		}
+	}, [onViewPortSizeChanged])
+
 	const outputSettings = RootAppStore.outputSettingsStore.outputSettings
 
 	const activeRundownPlaylistId = outputSettings?.activeRundownPlaylistId