feat: add output position feedback in CurrentRundown

packages/apps/client/src/components/CurrentRundown/Line.module.scss

@@ -38,6 +38,7 @@
 
 .LineFlagNew {
 	composes: LineFlag;
+	color: #ffff00;
 }
 
 .LineFlagCaret {
@@ -46,6 +47,7 @@
 
 .LineFlagOutput {
 	composes: LineFlag;
+	color: #ff0000;
 }
 
 .LineIdentifier {

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

@@ -8,12 +8,14 @@ import { removeMarkdownish } from '@sofie-prompter-editor/shared-lib'
 import classes from './Line.module.scss'
 import ENPS from '../icons/ENPS'
 import LetterWithPencil from '../icons/LetterWithPencil'
+import { FocusTriangle } from '../icons/FocusTriangle'
 
 const Line = observer(
 	({
 		segmentName,
 		line,
 		edited,
+		output,
 		onFocus,
 		selected,
 		onRecall,
@@ -22,6 +24,7 @@ const Line = observer(
 		line: UILine | undefined
 		selected: boolean
 		edited: boolean
+		output: boolean
 		onFocus?: React.FocusEventHandler<HTMLElement>
 		onRecall?: React.EventHandler<SyntheticEvent>
 	}): React.JSX.Element | null => {
@@ -54,7 +57,7 @@ const Line = observer(
 			>
 				<div className={classes.LineFlagNew}>{line.isNew ? <ENPS /> : null}</div>
 				<div className={classes.LineFlagCaret}>{edited ? <LetterWithPencil /> : null}</div>
-				<div className={classes.LineFlagOutput}></div>
+				<div className={classes.LineFlagOutput}>{output ? <FocusTriangle /> : null}</div>
 				<div className={classes.LineSegmentName}>{segmentName}</div>
 				<div className={classes.LineFlagOnAir}></div>
 				<div className={classes.LineIdentifier}>{line.identifier}</div>

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

@@ -18,6 +18,10 @@ const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Elemen
 		return lineId === RootAppStore.rundownStore.openRundown?.editorCaretPositionLineId
 	}
 
+	function isOutput(lineId: UILineId) {
+		return lineId === RootAppStore.rundownStore.openRundown?.outputPositionLineId
+	}
+
 	function onFocus(e: React.FocusEvent<HTMLLIElement>) {
 		const lineId = e.currentTarget.dataset['objId'] as UILineId
 		RootAppStore.uiStore.setSelectedLineId(lineId)
@@ -51,6 +55,7 @@ const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Elemen
 					line={line}
 					selected={isSelected(line.id)}
 					edited={isEdited(line.id)}
+					output={isOutput(line.id)}
 					onFocus={onFocus}
 					onRecall={onRecall}
 				/>

packages/apps/client/src/components/icons/FocusTriangle.tsx

@@ -0,0 +1,9 @@
+import classes from './IconComponent.module.scss'
+
+export function FocusTriangle() {
+	return (
+		<svg className={classes.IconComponent} viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M8.3418 6L2.3418 11.1962L2.3418 0.803848L8.3418 6Z" fill="currentColor" />
+		</svg>
+	)
+}

packages/apps/client/src/model/UIRundown.ts

@@ -32,6 +32,8 @@ export class UIRundown {
 
 	editorCaretPositionLineId: UILineId | null = null
 
+	outputPositionLineId: UILineId | null = null
+
 	reactions: IReactionDisposer[] = []
 
 	constructor(private store: RundownStore, public id: UIRundownId) {
@@ -151,6 +153,10 @@ export class UIRundown {
 		this.editorCaretPositionLineId = partId
 	})
 
+	updatePartInOutput = action('updatePartInOutput', (partId: PartId | null) => {
+		this.outputPositionLineId = partId
+	})
+
 	async updatePartScript(partId: PartId, script: ScriptContents): Promise<void> {
 		await this.store.connection.part.updateScript({
 			partId,

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

@@ -8,6 +8,10 @@ import { useSize } from 'src/lib/useSize'
 import { useControllerMessages } from 'src/hooks/useControllerMessages'
 import { useKeepRundownOutputInPosition } from 'src/hooks/useKeepRundownOutputInPosition'
 import { combineDisposers } from 'src/lib/lib'
+import { getAllAnchorElementsByType, getAnchorAbovePositionIndex } from 'src/lib/anchorElements'
+import { PartId, protectString } from '@sofie-prompter-editor/shared-model'
+
+const PREVIEW_SAMPLE_RATE = 250
 
 export const PreviewPanel = observer(function PreviewPanel(): React.ReactNode {
 	const rootEl = useRef<HTMLDivElement>(null)
@@ -38,6 +42,8 @@ export const PreviewPanel = observer(function PreviewPanel(): React.ReactNode {
 
 	const fontSizePx = (previewWidth * fontSize) / 100
 
+	const focusPosition = 0
+
 	const {
 		setBaseViewPortState: setBaseState,
 		scrolledPosition,
@@ -46,7 +52,7 @@ export const PreviewPanel = observer(function PreviewPanel(): React.ReactNode {
 	} = useControllerMessages(rootEl, fontSizePx, {
 		enableControl: rundownIsInOutput,
 	})
-	useKeepRundownOutputInPosition(rootEl, rundown, fontSizePx, speed, scrolledPosition, position, 0)
+	useKeepRundownOutputInPosition(rootEl, rundown, fontSizePx, speed, scrolledPosition, position, focusPosition)
 
 	useEffect(() => {
 		if (!lastKnownState) return
@@ -72,6 +78,27 @@ export const PreviewPanel = observer(function PreviewPanel(): React.ReactNode {
 		[fontSize, previewWidth]
 	)
 
+	useEffect(() => {
+		const interval = setInterval(() => {
+			if (!rundown) return
+			if (!rootEl.current) return
+			const els = Array.from(getAllAnchorElementsByType(rootEl.current, 'line'))
+			const anchorAbovePositionIndex = getAnchorAbovePositionIndex(focusPosition, els)
+
+			const selectedEl = els[anchorAbovePositionIndex]
+			if (!selectedEl || !(selectedEl instanceof HTMLElement)) {
+				rundown.updatePartInOutput(null)
+				return
+			}
+			const uiLineId = protectString<PartId>(selectedEl.dataset['objId']) ?? null
+			rundown.updatePartInOutput(uiLineId)
+		}, PREVIEW_SAMPLE_RATE)
+
+		return () => {
+			clearInterval(interval)
+		}
+	}, [rundown])
+
 	return (
 		<>
 			<div className={`Prompter ${classes.PreviewPanel} bg-black`} ref={rootEl} style={style}>