feat: Rundown view, rundown header, and presenter view customization

meteor/client/lib/ReactMeteorData/ReactMeteorData.tsx

@@ -336,7 +336,7 @@ export function useTracker<T, K extends undefined | T = undefined>(
  * @param {...any[]} args A list of arugments for the subscription. This is used for optimizing the subscription across
  * 		renders so that it isn't torn down and created for every render.
  */
-export function useSubscription(sub: PubSub, ...args: any[]) {
+export function useSubscription(sub: PubSub, ...args: any[]): boolean {
 	const [ready, setReady] = useState<boolean>(false)
 
 	useEffect(() => {

meteor/client/lib/reactiveData/reactiveDataHelper.ts

@@ -54,6 +54,23 @@ const isolatedAutorunsMem: {
 	}
 } = {}
 
+/**
+ * Create a reactive computation that will be run independently of the outer one. If the same function (using the same
+ * name and parameters) will be used again, this computation will only be computed once on invalidation and it's
+ * result will be memoized and reused on every other call.
+ *
+ * The function will be considered "same", if `functionName` and `params` match.
+ *
+ * If the `fnc` computation is invalidated, the outer computations will only be invalidated if the value returned from
+ * `fnc` fails a deep equality check (_.isEqual).
+ *
+ * @export
+ * @template T
+ * @param {T} fnc The computation function to be memoized and calculated separately from the outer one.
+ * @param {string} functionName The name of this computation function
+ * @param {...Parameters<T>} params Params `fnc` depends on from the outer scope. All parameters will be passed through to the function.
+ * @return {*}  {ReturnType<T>}
+ */
 export function memoizedIsolatedAutorun<T extends (...args: any) => any>(
 	fnc: T,
 	functionName: string,
@@ -105,14 +122,22 @@ export function memoizedIsolatedAutorun<T extends (...args: any) => any>(
 	return result
 }
 
-export function slowDownReactivity<T extends (...args: any) => any>(
-	fnc: T,
-	delay: number,
-	...params: Parameters<T>
-): ReturnType<T> {
+/**
+ * Slow down the reactivity of the inner function `fnc` to the outer computation.
+ *
+ * This is essentially a `throttle` for reactivity. If the inner `fnc` computation is invalidated, it will wait `delay`
+ * time to invalidate the outer computation.
+ *
+ * @export
+ * @template T
+ * @param {T} fnc The wrapped computation
+ * @param {number} delay The amount of time to wait before invalidating the outer function
+ * @return {*}  {ReturnType<T>}
+ */
+export function slowDownReactivity<T extends (...args: any) => any>(fnc: T, delay: number): ReturnType<T> {
 	// if the delay is <= 0, call straight away and register a direct dependency
 	if (delay <= 0) {
-		return fnc(...(params as any))
+		return fnc()
 	}
 
 	// if the delay is > 0, slow down the reactivity
@@ -125,7 +150,7 @@ export function slowDownReactivity<T extends (...args: any) => any>(
 	const parentComputation = Tracker.currentComputation
 	const computation = Tracker.nonreactive(() => {
 		const computation = Tracker.autorun(() => {
-			result = fnc(...(params as any))
+			result = fnc()
 		})
 		computation.onInvalidate(() => {
 			// if the parent hasn't been invalidated and there is no scheduled invalidation

meteor/client/lib/rundownLayouts.ts

@@ -0,0 +1,131 @@
+import _ from 'underscore'
+import { PartInstanceId } from '../../lib/collections/PartInstances'
+import { PieceInstance, PieceInstances } from '../../lib/collections/PieceInstances'
+import { RequiresActiveLayers } from '../../lib/collections/RundownLayouts'
+import { RundownPlaylist } from '../../lib/collections/RundownPlaylists'
+import { getCurrentTime } from '../../lib/lib'
+import { invalidateAt } from './invalidatingTime'
+
+/**
+ * If the conditions of the filter are met, activePieceInstance will include the first piece instance found that matches the filter, otherwise it will be undefined.
+ */
+export function getIsFilterActive(
+	playlist: RundownPlaylist,
+	panel: RequiresActiveLayers
+): { active: boolean; activePieceInstance: PieceInstance | undefined } {
+	const unfinishedPieces = getUnfinishedPieceInstancesReactive(playlist, true)
+	let activePieceInstance: PieceInstance | undefined
+	const activeLayers = unfinishedPieces.map((p) => p.piece.sourceLayerId)
+	const containsEveryRequiredLayer = panel.requireAllAdditionalSourcelayers
+		? panel.additionalLayers?.length && panel.additionalLayers.every((s) => activeLayers.includes(s))
+		: false
+	const containsRequiredLayer = containsEveryRequiredLayer
+		? true
+		: panel.additionalLayers && panel.additionalLayers.length
+		? panel.additionalLayers.some((s) => activeLayers.includes(s))
+		: false
+
+	if (
+		(!panel.requireAllAdditionalSourcelayers || containsEveryRequiredLayer) &&
+		(!panel.additionalLayers?.length || containsRequiredLayer)
+	) {
+		activePieceInstance =
+			panel.requiredLayerIds && panel.requiredLayerIds.length
+				? _.flatten(Object.values(unfinishedPieces)).find((piece: PieceInstance) => {
+						return (
+							(panel.requiredLayerIds || []).indexOf(piece.piece.sourceLayerId) !== -1 &&
+							piece.partInstanceId === playlist.currentPartInstanceId
+						)
+				  })
+				: undefined
+	}
+	return {
+		active:
+			activePieceInstance !== undefined || (!panel.requiredLayerIds?.length && !panel.additionalLayers?.length),
+		activePieceInstance,
+	}
+}
+
+export function getUnfinishedPieceInstancesReactive(playlist: RundownPlaylist, includeNonAdLibPieces: boolean) {
+	let prospectivePieces: PieceInstance[] = []
+	const now = getCurrentTime()
+	if (playlist.activationId && playlist.currentPartInstanceId) {
+		prospectivePieces = PieceInstances.find({
+			startedPlayback: {
+				$exists: true,
+			},
+			playlistActivationId: playlist.activationId,
+			$and: [
+				{
+					$or: [
+						{
+							stoppedPlayback: {
+								$eq: 0,
+							},
+						},
+						{
+							stoppedPlayback: {
+								$exists: false,
+							},
+						},
+					],
+				},
+				!includeNonAdLibPieces
+					? {
+							$or: [
+								{
+									adLibSourceId: {
+										$exists: true,
+									},
+								},
+								{
+									'piece.tags': {
+										$exists: true,
+									},
+								},
+							],
+					  }
+					: {},
+				{
+					$or: [
+						{
+							userDuration: {
+								$exists: false,
+							},
+						},
+						{
+							'userDuration.end': {
+								$exists: false,
+							},
+						},
+					],
+				},
+			],
+		}).fetch()
+
+		let nearestEnd = Number.POSITIVE_INFINITY
+		prospectivePieces = prospectivePieces.filter((pieceInstance) => {
+			const piece = pieceInstance.piece
+			const end: number | undefined =
+				pieceInstance.userDuration && typeof pieceInstance.userDuration.end === 'number'
+					? pieceInstance.userDuration.end
+					: typeof piece.enable.duration === 'number'
+					? piece.enable.duration + pieceInstance.startedPlayback!
+					: undefined
+
+			if (end !== undefined) {
+				if (end > now) {
+					nearestEnd = nearestEnd > end ? end : nearestEnd
+					return true
+				} else {
+					return false
+				}
+			}
+			return true
+		})
+
+		if (Number.isFinite(nearestEnd)) invalidateAt(nearestEnd)
+	}
+
+	return prospectivePieces
+}

meteor/client/lib/triggers/TriggersHandler.tsx

@@ -265,12 +265,20 @@ export const TriggersHandler: React.FC<IProps> = function TriggersHandler(
 					ordered: 'modifiersFirst',
 					preventDefaultPartials: false,
 				})
+				localSorensen.bind(['F5', 'Control+F5'], preventDefault, {
+					global: true,
+					exclusive: true,
+					ordered: false,
+					preventDefaultPartials: false,
+				})
 			}
 		}
 
 		return () => {
 			localSorensen.unbind('Escape', poisonHotkeys)
 			localSorensen.unbind('Control+KeyF', preventDefault)
+			localSorensen.unbind('F5', preventDefault)
+			localSorensen.unbind('Control+F5', preventDefault)
 		}
 	}, [initialized]) // run once once Sorensen is initialized
 

meteor/client/lib/ui/scriptPreview.ts

@@ -0,0 +1,32 @@
+const BREAK_SCRIPT_BREAKPOINT = 620
+const SCRIPT_PART_LENGTH = 250
+
+interface ScriptPreview {
+	startOfScript: string
+	endOfScript: string
+	breakScript: boolean
+}
+
+export function getScriptPreview(fullScript: string): ScriptPreview {
+	let startOfScript = fullScript
+	let cutLength = startOfScript.length
+	if (startOfScript.length > SCRIPT_PART_LENGTH) {
+		startOfScript = startOfScript.substring(0, startOfScript.substr(0, SCRIPT_PART_LENGTH).lastIndexOf(' '))
+		cutLength = startOfScript.length
+	}
+	let endOfScript = fullScript
+	if (endOfScript.length > SCRIPT_PART_LENGTH) {
+		endOfScript = endOfScript.substring(
+			endOfScript.indexOf(' ', Math.max(cutLength, endOfScript.length - SCRIPT_PART_LENGTH)),
+			endOfScript.length
+		)
+	}
+
+	const breakScript = fullScript.length > BREAK_SCRIPT_BREAKPOINT
+
+	return {
+		startOfScript,
+		endOfScript,
+		breakScript,
+	}
+}

meteor/client/lib/userAction.ts

@@ -72,6 +72,8 @@ function userActionToLabel(userAction: UserAction, t: i18next.TFunction) {
 			return t('Aborting all Media Workflows')
 		case UserAction.PACKAGE_MANAGER_RESTART_WORK:
 			return t('Package Manager: Restart work')
+		case UserAction.PACKAGE_MANAGER_RESTART_PACKAGE_CONTAINER:
+			return t('Package Manager: Restart Package Container')
 		case UserAction.GENERATE_RESTART_TOKEN:
 			return t('Generating restart token')
 		case UserAction.RESTART_CORE:

meteor/client/styles/_header.scss

@@ -25,6 +25,11 @@
 			margin-top: -0.5em;
 		}
 	}
+
+	.dashboard {
+		flex: 1 1;
+		position: unset;
+	}
 }
 
 .super-dark {