feat(CurrentRundown): implement filtering out Lines without a script

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

@@ -3,7 +3,7 @@ import { action } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { RootAppStore } from 'src/stores/RootAppStore'
 import { Segment } from './Segment'
-import { Button } from 'react-bootstrap'
+import { Button, ButtonGroup, ToggleButton } from 'react-bootstrap'
 import classes from './CurrentRundown.module.scss'
 import { useNavigate } from 'react-router-dom'
 import { SystemStatusAlertBars } from 'src/components/SystemStatusAlertBars/SystemStatusAlertBars'
@@ -86,24 +86,48 @@ const CurrentRundown = observer((): React.JSX.Element => {
 		[segmentLineListEl]
 	)
 
+	const onShowOnlyLinesWithScriptToggle = () => {
+		if (!openRundown) return
+		const oldState = openRundown.filter ?? null
+
+		if (oldState === null) {
+			openRundown.setFilter('onlyScript')
+			return
+		}
+
+		openRundown.setFilter(null)
+	}
+
 	if (!openRundown) {
 		return <p>No open rundown</p>
 	}
 
 	return (
 		<>
 			<h1>{openRundown.name}</h1>
-			<p>
+			<div>
 				<Button variant="secondary" onClick={onClose}>
 					Close
 				</Button>
 				<Button variant="primary" onClick={onSendToOutput}>
 					Send to Output
 				</Button>
-			</p>
+				<ButtonGroup>
+					<ToggleButton
+						variant="secondary"
+						type="checkbox"
+						value={'1'}
+						checked={!!openRundown.filter}
+						id="rundown-filter-toggle-button"
+						onChange={onShowOnlyLinesWithScriptToggle}
+					>
+						Show only Lines with script
+					</ToggleButton>
+				</ButtonGroup>
+			</div>
 			<SystemStatusAlertBars />
 			<ul className={classes.SegmentLineList} role="tree" ref={setSegmentLineListEl} onKeyDown={onKeyDown}>
-				{openRundown.segmentsInOrder.map((segment) => (
+				{openRundown.segmentsInOrderFiltered.map((segment) => (
 					<Segment segment={segment} key={segment.id} />
 				))}
 			</ul>

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

@@ -9,6 +9,8 @@ import { UILineId } from 'src/model/UILine'
 const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Element | null => {
 	if (!segment) return null
 
+	const isRundownFilterEnabled = (RootAppStore.rundownStore.openRundown?.filter ?? null) !== null
+
 	function isSelected(lineId: UILineId) {
 		return lineId === RootAppStore.uiStore.selectedLineId
 	}
@@ -18,13 +20,17 @@ const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Elemen
 		RootAppStore.uiStore.setSelectedLineId(lineId)
 	}
 
+	const filteredLines = segment.linesInOrderFiltered
+
+	if (filteredLines.length === 0 && isRundownFilterEnabled) return null
+
 	return (
 		<li data-segment-id={segment.id} className={classes.SegmentContainer} role="tree">
 			<div className={classes.SegmentIdentifier} role="heading">
 				{segment.name}
 			</div>
 			<ul className={classes.LineContainer}>
-				{segment.linesInOrder.map((line) => (
+				{filteredLines.map((line) => (
 					<Line key={line.id} line={line} selected={isSelected(line.id)} onFocus={onFocus} />
 				))}
 			</ul>

packages/apps/client/src/hooks/useKeepRundownOutputInPosition.ts

@@ -52,7 +52,7 @@ export function useKeepRundownOutputInPosition(
 				const els = getAllAnchorElements()
 				const [anchorOffset, anchorEl] = findClosestElement(els, focusPosition, positionRef.current)
 
-				console.log('Chosen anchor is: ', anchorOffset, anchorEl, 'position is: ', positionRef.current)
+				// console.log('Chosen anchor is: ', anchorOffset, anchorEl, 'position is: ', positionRef.current)
 
 				const beforeTime = Number(document.timeline.currentTime)
 
@@ -74,7 +74,7 @@ export function useKeepRundownOutputInPosition(
 						behavior: 'instant',
 					})
 
-					console.log('Position now is: ', positionRef.current, diff)
+					// console.log('Position now is: ', positionRef.current, diff)
 
 					onUpdate?.({
 						element: anchorEl,
@@ -94,8 +94,13 @@ function observeUIRundown(rundown: UIRundown | null, clb: Lambda): Lambda {
 	const destructors: Lambda[] = []
 
 	destructors.push(
-		observe(rundown, () => {
-			// console.log('rundown', change)
+		observe(rundown, 'name', () => {
+			// console.log('rundown:name', change)
+
+			clb()
+		}),
+		observe(rundown, 'ready', () => {
+			// console.log('rundown:ready', change)
 
 			clb()
 		})
@@ -175,22 +180,22 @@ function observeUILine(line: UILine | null, clb: Lambda): Lambda {
 
 	destructors.push(
 		observe(line, 'identifier', () => {
-			// console.log('line:identifier', change)
+			// console.log('line:identifier')
 
 			clb()
 		}),
 		observe(line, 'slug', () => {
-			// console.log('line:slug', change)
+			// console.log('line:slug')
 
 			clb()
 		}),
 		observe(line, 'rank', () => {
-			// console.log('line:rank', change)
+			// console.log('line:rank')
 
 			clb()
 		}),
 		observe(line, 'script', () => {
-			// console.log('line:script', change)
+			// console.log('line:script')
 
 			clb()
 		})

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

@@ -14,6 +14,8 @@ import { RundownStore } from '../stores/RundownStore'
 
 export type UIRundownId = RundownPlaylistId
 
+type UIRundownFilter = 'onlyScript' | null
+
 export class UIRundown {
 	name: string = ''
 
@@ -23,11 +25,11 @@ export class UIRundown {
 
 	private rundowns = observable.map<RundownId, Rundown>()
 
+	filter: UIRundownFilter = null
+
 	constructor(private store: RundownStore, public id: UIRundownId) {
 		makeAutoObservable(this, {
-			updateFromJson: action,
 			segmentsInOrder: computed,
-			close: action,
 		})
 		this.init().catch(console.error)
 	}
@@ -101,10 +103,10 @@ export class UIRundown {
 		this.store.connection.segment.on('created', this.onSegmentCreated)
 	}
 
-	updateFromJson(json: RundownPlaylist) {
+	updateFromJson = action((json: RundownPlaylist) => {
 		this.name = json.label
 		this.ready = true
-	}
+	})
 
 	get segmentsInOrder(): UISegment[] {
 		return Array.from(this.segments.values()).sort((a, b) => {
@@ -115,12 +117,20 @@ export class UIRundown {
 		})
 	}
 
-	close(): void {
+	get segmentsInOrderFiltered(): UISegment[] {
+		return this.segmentsInOrder
+	}
+
+	setFilter = action((filter: UIRundownFilter) => {
+		this.filter = filter
+	})
+
+	close = action(() => {
 		this.store.openRundown = null
 
 		this.store.connection.rundown.unSubscribeFromRundownsInPlaylist(this.id).catch(console.error)
 		this.dispose()
-	}
+	})
 
 	dispose(): void {
 		// unregister event handlers from services

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

@@ -63,6 +63,22 @@ export class UISegment {
 			.sort((a, b) => a.rank - b.rank)
 	}
 
+	get linesInOrderFiltered(): UILine[] {
+		return Array.from(this.lines.values())
+			.slice()
+			.filter(this.doesLineMatchFilter)
+			.sort((a, b) => a.rank - b.rank)
+	}
+
+	private doesLineMatchFilter = (line: UILine): boolean => {
+		if (this.owner.filter === null) return true
+		if (this.owner.filter === 'onlyScript') {
+			if (line.script === null || line.script.trim() === '') return false
+			return true
+		}
+		return true
+	}
+
 	private onPartCreated = action('onPartCreated', (json: Part) => {
 		if (json.segmentId !== this.id) return