feat: director screen improvements

[anteeek]

About the Contributor

This pull request is posted on behalf of the BBC.

Type of Contribution

This is a: Feature

Current Behavior

Countdown to start
The counter in the Director Screen counts to the planned start, and stops counting when the first part is taken, regardless if it's untimed or not.

Rehearsal timing
The counter counts to the planned end which is unhelpful if you're rehearsing an hour before the planned start (or practicing with an old running order)

New Behavior

Countdown to start
When the countdown to planned start is shown in the On-Air part area (before the first take command has occurred) a label has been added to show "Time to planned start"

If the first part(s) are untimed then it retains the countdown to start rather than showing the on-air part.
As the first part(s) are untimed the start time is still very relevant for knowing when to take the first timed part.

Rehearsal timing
After the first timed part is taken, the Time to Planned End countdown in the top portion of the Director Screen shows a Time to Rehearsal End countdown.

It counts towards the end of the program duration (I.E. End = Time of first timed take + program duration)

Testing

• I have added one or more unit tests for this PR
• I have updated the relevant unit tests
• No unit test changes are needed for this PR

Affected areas

Director Screen

Time Frame

Not urgent, but we would like to get this merged into the in-development release.

Other Information

Status

• PR is ready to be reviewed.
• The functionality has been tested by the author.
• Relevant unit tests has been added / updated.
• Relevant documentation (code comments, system documentation) has been added / updated.

[Copilot]

Pull request overview

This PR enhances the Director Screen to provide better timing information in rehearsal and for untimed first parts. It refactors the top section into a separate component, adds logic to handle "rehearsal end" timing, and improves the countdown display for untimed first parts.

Changes:

• Extracted director screen top section into a separate DirectorScreenTop component
• Added support for "rehearsal end" timing that counts from the first timed part's take time plus program duration
• Modified the countdown logic to retain "Time to planned start" when the first part(s) are untimed

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
DirectorScreenTop.tsx	New component handling top section with rehearsal timing logic
DirectorScreen.tsx	Refactored to use new component, added logic to show countdown for untimed first parts, updated to use partInstanceToCountTimeFrom
ClockView.tsx	Updated import path for DirectorScreen
counterComponents.scss	Removed text alignment styles from time-to-planned-end counter
director.scss	Added styles for countdown display and updated text alignment for planned-to labels
rundownPlaylistUtil.ts	Added logic to find the first taken timed/untimed part instance for countdown purposes

Comments suppressed due to low confidence (1)

packages/webui/src/client/ui/ClockView/DirectorScreen/DirectorScreen.tsx:491

• This string should be wrapped in the translation function t() for internationalization consistency, like all other user-facing strings in this component.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The variable name areAllPartsTimed is misleading. This query checks if ANY part is timed (not untimed), not if ALL parts are timed. Consider renaming to anyTimedPartExists or hasTimedParts to better reflect what the query actually checks.

[Copilot]

The logic here is incorrect. When areAllPartsTimed is true (meaning a timed part exists), the query searches for parts where part.untimed is not equal to true, which returns timed parts. When areAllPartsTimed is false (no timed parts exist), it searches for parts where part.untimed is not equal to false, which returns untimed parts. This logic seems inverted and confusing. Based on the PR description, you want to find the first timed part if any exist, otherwise the first untimed part. The query should be: ['part.untimed']: { $ne: !!areAllPartsTimed } or better yet, restructure with clearer logic using two separate queries.

Suggested change

	const areAllPartsTimed = !!UIPartInstances.findOne({
	rundownId: { $in: unorderedRundownIds },
	['part.untimed']: { $ne: true },
	})
	const partInstanceToCountTimeFrom = UIPartInstances.findOne(
	{
	rundownId: { $in: unorderedRundownIds },
	reset: { $ne: true },
	takeCount: { $exists: true },
	['part.untimed']: { $ne: areAllPartsTimed },
	},
	{ sort: { takeCount: 1 } }
	)
	const hasTimedParts = !!UIPartInstances.findOne({
	rundownId: { $in: unorderedRundownIds },
	['part.untimed']: { $ne: true },
	})
	const partInstanceQuery: MongoQuery<PartInstance> = {
	rundownId: { $in: unorderedRundownIds },
	reset: { $ne: true },
	takeCount: { $exists: true },
	}
	partInstanceQuery['part.untimed'] = { $ne: hasTimedParts ? true : false }
	const partInstanceToCountTimeFrom = UIPartInstances.findOne(partInstanceQuery, {
	sort: { takeCount: 1 },
	})

[Copilot]

The magic number -13vw for margin-left lacks explanation. Consider adding a comment explaining why this specific offset is needed for centering or layout purposes.

Suggested change

	width: 100vw;
	width: 100vw;
	// Compensate for the 100vw width so the content appears centered within the grid column on director screens.