feat(Output/Editor): try and match prompter font size in the editor

Author: jstarpl

packages/apps/client/src/PrompterStyles.css

@@ -28,6 +28,7 @@
 	-webkit-font-variant-ligatures: none;
 	font-variant-ligatures: none;
 	font-feature-settings: 'liga' 0;
+	font-kerning: none;
 }
 
 .Prompter p {

packages/apps/client/src/components/ScriptEditor/ScriptEditor.module.scss

@@ -0,0 +1,3 @@
+.ScriptEditor {
+	container-type: inline-size;
+}

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

@@ -1,12 +1,70 @@
-import React from 'react'
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { Editor } from './Editor'
 
 import 'src/PrompterStyles.css'
+import classes from './ScriptEditor.module.scss'
+import { observer } from 'mobx-react-lite'
+import { RootAppStore } from 'src/stores/RootAppStore'
+import { useDebouncedCallback } from 'src/lib/lib'
+
+export const ScriptEditor = observer(function ScriptEditor(): React.JSX.Element {
+	const [fontSize, setFontSize] = useState(10)
+	const [width, setWidth] = useState<number | null>(null)
+
+	const rootEl = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		RootAppStore.outputSettingsStore.initialize()
+	}, [])
+
+	const viewportFontSize = RootAppStore.outputSettingsStore.outputSettings.fontSize
+
+	useEffect(() => {
+		if (width === null) return
+
+		setFontSize((width * viewportFontSize) / 100)
+	}, [viewportFontSize, width])
+
+	const dividerSplitPosition = RootAppStore.uiStore.viewDividerPosition
+
+	const onResize = useDebouncedCallback(
+		function onResize() {
+			if (!rootEl.current) return
+			const { width: elementWidth } = rootEl.current.getBoundingClientRect()
+
+			setWidth(elementWidth)
+		},
+		[],
+		{
+			delay: 100,
+		}
+	)
+
+	useLayoutEffect(() => {
+		void dividerSplitPosition
+		onResize()
+	}, [dividerSplitPosition, onResize])
+
+	useEffect(() => {
+		window.addEventListener('resize', onResize)
+
+		return () => {
+			window.removeEventListener('resize', onResize)
+		}
+	}, [onResize])
+
+	const style = useMemo(
+		() =>
+			({
+				'--prompter-font-size-base': `${fontSize}px`,
+			} as React.CSSProperties),
+		[fontSize]
+	)
 
-export function ScriptEditor(): React.JSX.Element {
 	return (
-		<>
-			<Editor className="bg-black Prompter" />
-		</>
+		<div className={`bg-black Prompter ${classes.ScriptEditor}`} style={style} ref={rootEl}>
+			<Editor />
+		</div>
 	)
-}
+})
+ScriptEditor.displayName = 'ScriptEditor'

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

@@ -1,5 +1,41 @@
+import React, { useCallback, useEffect, useRef } from 'react'
 import { v4 } from 'uuid'
 
 export function randomId() {
 	return v4()
 }
+
+export function useMergedRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
+	return useCallback((node) => {
+		for (const ref of refs) {
+			if (ref === null) continue
+			if (typeof ref === 'function') {
+				ref(node)
+				continue
+			}
+			//@ts-expect-error React's typings prohibit writing to the ref, but it's actually OK
+			ref.current = node
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, refs)
+}
+
+export function useDebouncedCallback(clb: () => void, deps: React.DependencyList, opts: { delay: number }) {
+	const debounce = useRef<number | null>(null)
+
+	useEffect(() => {
+		return () => {
+			if (debounce.current) window.clearTimeout(debounce.current)
+		}
+	}, [])
+
+	return useCallback(() => {
+		if (debounce.current) window.clearTimeout(debounce.current)
+
+		debounce.current = window.setTimeout(() => {
+			debounce.current = null
+			clb()
+		}, opts.delay)
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, deps)
+}

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { ChangeEvent, useEffect, useRef } from 'react'
 import { observer } from 'mobx-react-lite'
 import classes from './RundownScript.module.scss'
 import { CurrentRundown } from 'src/components/CurrentRundown/CurrentRundown'
@@ -20,6 +20,10 @@ const RundownScript = observer((): React.JSX.Element => {
 		RootAppStore.rundownStore.loadRundown(playlistId)
 	}, [playlistId])
 
+	function onChange(e: { value: number }) {
+		RootAppStore.uiStore.setViewDividerPosition(e.value)
+	}
+
 	return (
 		<>
 			<Helmet>
@@ -28,7 +32,7 @@ const RundownScript = observer((): React.JSX.Element => {
 			</Helmet>
 			<SplitPanel
 				position={RootAppStore.uiStore.viewDividerPosition}
-				onChange={(e) => RootAppStore.uiStore.setViewDividerPosition(e.value)}
+				onChange={onChange}
 				className={classes.RundownScript}
 				childrenBegin={<CurrentRundown />}
 				childrenEnd={<ScriptEditor />}