fix: segment scrolling (#1681)

* fix: unable to scroll segment once past expected duration

* chore: convert to functional component

Author: Julusian

packages/webui/src/client/lib/rundownTiming.ts

@@ -25,7 +25,8 @@ import { Settings } from '../lib/Settings.js'
 import { Rundown } from '@sofie-automation/corelib/dist/dataModel/Rundown'
 import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
 import { CountdownType } from '@sofie-automation/blueprints-integration'
-import { isLoopDefined, isEntirePlaylistLooping, isLoopRunning } from '../lib/RundownResolver.js'
+import { isLoopDefined, isEntirePlaylistLooping, isLoopRunning, PartExtended } from '../lib/RundownResolver.js'
+import { RundownUtils } from './rundown.js'
 
 // Minimum duration that a part can be assigned. Used by gap parts to allow them to "compress" to indicate time running out.
 const MINIMAL_NONZERO_DURATION = 1
@@ -784,23 +785,21 @@ export interface RundownTimingContext {
  */
 export function computeSegmentDuration(
 	timingDurations: RundownTimingContext,
-	partIds: PartId[],
+	parts: PartExtended[],
 	display?: boolean
 ): number {
-	const partDurations = timingDurations.partDurations
-
-	if (partDurations === undefined) return 0
-
-	return partIds.reduce((memo, partId) => {
-		const pId = unprotectString(partId)
-		let partDuration = 0
-		if (partDurations && partDurations[pId] !== undefined) {
-			partDuration = partDurations[pId]
-		}
-		if (!partDuration && display) {
-			partDuration = Settings.defaultDisplayDuration
-		}
-		return memo + partDuration
+	const partDisplayDurations = timingDurations?.partDisplayDurations
+
+	if (!partDisplayDurations) return RundownUtils.getSegmentDuration(parts, display)
+
+	return parts.reduce((memo, partExtended) => {
+		// total += durations.partDurations ? durations.partDurations[item._id] : (item.duration || item.renderedDuration || 1)
+		const partInstanceTimingId = getPartInstanceTimingId(partExtended.instance)
+		const duration = Math.max(
+			partExtended.instance.timings?.duration || partExtended.renderedDuration || 0,
+			partDisplayDurations?.[partInstanceTimingId] || (display ? Settings.defaultDisplayDuration : 0)
+		)
+		return memo + duration
 	}, 0)
 }
 

packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { WithTranslation, withTranslation } from 'react-i18next'
 
 import ClassNames from 'classnames'
@@ -36,7 +36,7 @@ import { wrapPartToTemporaryInstance } from '@sofie-automation/meteor-lib/dist/c
 
 import { SegmentTimelineSmallPartFlag } from './SmallParts/SegmentTimelineSmallPartFlag.js'
 import { UIStateStorage } from '../../lib/UIStateStorage.js'
-import { getPartInstanceTimingId, RundownTimingContext } from '../../lib/rundownTiming.js'
+import { computeSegmentDuration, getPartInstanceTimingId, RundownTimingContext } from '../../lib/rundownTiming.js'
 import { IOutputLayer, ISourceLayer, NoteSeverity, UserEditingType } from '@sofie-automation/blueprints-integration'
 import { SegmentTimelineZoomButtons } from './SegmentTimelineZoomButtons.js'
 import { SegmentViewMode } from '../SegmentContainer/SegmentViewModes.js'
@@ -51,7 +51,6 @@ import {
 	TimingTickResolution,
 	TimingDataResolution,
 	WithTiming,
-	RundownTimingProviderContext,
 } from '../RundownView/RundownTiming/withTiming.js'
 import { SegmentTimeAnchorTime } from '../RundownView/RundownTiming/SegmentTimeAnchorTime.js'
 import { logger } from '../../lib/logging.js'
@@ -121,100 +120,61 @@ interface IStateHeader {
 	// isSelected: boolean
 }
 
-interface IZoomPropsHeader {
+interface SegmentTimelineZoomProps extends IProps {
 	onZoomDblClick: (e: React.MouseEvent) => void
 	timelineWidth: number
+	timingDurations: RundownTimingContext
 }
-interface IZoomStateHeader {
-	totalSegmentDuration: number
+
+function computeSegmentDurationFromProps(props: SegmentTimelineZoomProps): number {
+	return computeSegmentDuration(props.timingDurations, props.parts, true)
 }
 
-const SegmentTimelineZoom = class SegmentTimelineZoom extends React.Component<
-	IProps & IZoomPropsHeader,
-	IZoomStateHeader
-> {
-	static contextType = RundownTimingProviderContext
-	declare context: React.ContextType<typeof RundownTimingProviderContext>
+function SegmentTimelineZoom(props: SegmentTimelineZoomProps): JSX.Element {
+	const [totalSegmentDuration, setTotalSegmentDuration] = useState(() => computeSegmentDurationFromProps(props))
 
-	constructor(props: IProps & IZoomPropsHeader, context: any) {
-		super(props, context)
-		this.state = {
-			totalSegmentDuration: 10,
-		}
-	}
+	// Store the props into a ref so that the checkTimingChange can access the latest props without needing to be re-created on every render
+	const propsRef = useRef(props)
+	propsRef.current = props
 
-	componentDidMount(): void {
-		this.checkTimingChange()
-		window.addEventListener(RundownTiming.Events.timeupdateHighResolution, this.onTimeupdate)
-	}
-
-	componentWillUnmount(): void {
-		window.removeEventListener(RundownTiming.Events.timeupdateHighResolution, this.onTimeupdate)
-	}
-
-	onTimeupdate = () => {
-		if (!this.props.isLiveSegment) {
-			this.checkTimingChange()
-		}
-	}
-
-	checkTimingChange = () => {
-		const total = this.calculateSegmentDuration()
-		if (total !== this.state.totalSegmentDuration) {
-			this.setState({
-				totalSegmentDuration: total,
-			})
+	useEffect(() => {
+		const onTimeupdate = () => {
+			if (!propsRef.current.isLiveSegment) {
+				setTotalSegmentDuration(computeSegmentDurationFromProps(propsRef.current))
+			}
 		}
-	}
 
-	calculateSegmentDuration(): number {
-		let total = 0
-		if (this.context?.durations) {
-			const durations = this.context.durations
-			this.props.parts.forEach((partExtended) => {
-				// total += durations.partDurations ? durations.partDurations[item._id] : (item.duration || item.renderedDuration || 1)
-				const partInstanceTimingId = getPartInstanceTimingId(partExtended.instance)
-				const duration = Math.max(
-					partExtended.instance.timings?.duration || partExtended.renderedDuration || 0,
-					durations.partDisplayDurations?.[partInstanceTimingId] || Settings.defaultDisplayDuration
-				)
-				total += duration
-			})
-		} else {
-			total = RundownUtils.getSegmentDuration(this.props.parts, true)
+		window.addEventListener(RundownTiming.Events.timeupdateHighResolution, onTimeupdate)
+		return () => {
+			window.removeEventListener(RundownTiming.Events.timeupdateHighResolution, onTimeupdate)
 		}
-		return total
-	}
+	}, [])
 
-	getSegmentDuration(): number {
-		return this.props.isLiveSegment ? this.calculateSegmentDuration() : this.state.totalSegmentDuration
-	}
+	const segmentDuration = props.isLiveSegment ? computeSegmentDurationFromProps(props) : totalSegmentDuration
 
-	render(): JSX.Element {
-		return (
-			<div
-				className={ClassNames('segment-timeline__zoom-area-container', {
-					hidden:
-						this.props.scrollLeft === 0 &&
-						(this.props.showingAllSegment || this.props.timeScale === this.props.maxTimeScale) &&
-						!this.props.isLiveSegment,
-				})}
-			>
-				<div className="segment-timeline__zoom-area" onDoubleClick={(e) => this.props.onZoomDblClick(e)}>
-					<SegmentTimelineZoomControls
-						scrollLeft={this.props.scrollLeft}
-						scrollWidth={this.props.timelineWidth / this.props.timeScale}
-						onScroll={this.props.onScroll}
-						segmentDuration={this.getSegmentDuration()}
-						liveLineHistorySize={this.props.liveLineHistorySize}
-						timeScale={this.props.timeScale}
-						maxTimeScale={this.props.maxTimeScale}
-						onZoomChange={this.props.onZoomChange}
-					/>
-				</div>
+	return (
+		<div
+			className={ClassNames('segment-timeline__zoom-area-container', {
+				hidden:
+					props.scrollLeft === 0 &&
+					(props.showingAllSegment || props.timeScale === props.maxTimeScale) &&
+					!props.isLiveSegment,
+			})}
+		>
+			<div className="segment-timeline__zoom-area" onDoubleClick={props.onZoomDblClick}>
+				<SegmentTimelineZoomControls
+					scrollLeft={props.scrollLeft}
+					scrollWidth={props.timelineWidth / props.timeScale}
+					onScroll={props.onScroll}
+					segmentDuration={segmentDuration}
+					liveLineHistorySize={props.liveLineHistorySize}
+					timeScale={props.timeScale}
+					maxTimeScale={props.maxTimeScale}
+					onZoomChange={props.onZoomChange}
+				/>
 			</div>
-		)
-	}
+		</div>
+	)
 }
 
 export const SEGMENT_TIMELINE_ELEMENT_ID = 'rundown__segment__'

packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx

@@ -407,11 +407,7 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 					0,
 					Math.min(
 						scrollLeft,
-						(computeSegmentDuration(
-							this.context.durations,
-							this.props.parts.map((i) => i.instance.part._id),
-							true
-						) || 1) -
+						(computeSegmentDuration(this.context.durations, this.props.parts, true) || 1) -
 							LIVELINE_HISTORY_SIZE / this.state.timeScale
 					)
 				),