Skip to content

Commit 240f0fa

Browse files
olzzonolzzon
committed
feat: directors screen keep showing countdown if first part is untimed
1 parent a5ada36 commit 240f0fa

File tree

1 file changed

+87
-80
lines changed

1 file changed

+87
-80
lines changed

‎packages/webui/src/client/ui/ClockView/DirectorScreen.tsx‎

Lines changed: 87 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -367,8 +367,9 @@ function DirectorScreenRender({
367367

368368
const overUnderClock = getPlaylistTimingDiff(playlist, timingDurations) ?? 0
369369

370+
// Show countdown if it is the first segment and the current part is untimed:
370371
const currentSegmentIsFirst = currentSegment?._rank === 0
371-
const firstPieceNoDuration =
372+
const isFirstPieceAndNoDuration =
372373
(currentSegmentIsFirst && currentPartInstance?.instance.part.untimed) ||
373374
(currentSegment === undefined && nextPartInstance?.instance.part.untimed)
374375

@@ -410,95 +411,101 @@ function DirectorScreenRender({
410411
// Current Part:
411412
}
412413
<div className="director-screen__body__part">
413-
<div
414-
className={ClassNames('director-screen__body__segment-name', {
415-
live: currentSegment !== undefined,
416-
})}
417-
>
418-
<AdjustLabelFit
419-
label={currentSegment?.name || ''}
420-
width={'80vw'}
421-
fontFamily="Roboto Flex"
422-
fontSize="0.9em"
423-
minFontWidth={70}
424-
defaultWidth={100}
425-
defaultOpticalSize={100}
426-
useLetterSpacing={false}
427-
hardCutText={true}
428-
/>
429-
{playlist.currentPartInfo?.partInstanceId ? (
430-
<span className="director-screen__body__segment__countdown">
431-
<CurrentPartOrSegmentRemaining
432-
currentPartInstanceId={playlist.currentPartInfo?.partInstanceId || null}
433-
heavyClassName="overtime"
434-
preferSegmentTime={true}
435-
/>
436-
</span>
437-
) : null}
438-
</div>
439-
{currentPartInstance && currentShowStyleBaseId ? (
414+
{!isFirstPieceAndNoDuration ? (
440415
<>
441-
<div className="director-screen__body__part__piece-icon">
442-
<PieceIconContainer
443-
partInstanceId={currentPartInstance.instance._id}
444-
showStyleBaseId={currentShowStyleBaseId}
445-
rundownIds={rundownIds}
446-
playlistActivationId={playlist?.activationId}
416+
<div
417+
className={ClassNames('director-screen__body__segment-name', {
418+
live: currentSegment !== undefined,
419+
})}
420+
>
421+
<AdjustLabelFit
422+
label={currentSegment?.name || ''}
423+
width={'80vw'}
424+
fontFamily="Roboto Flex"
425+
fontSize="0.9em"
426+
minFontWidth={70}
427+
defaultWidth={100}
428+
defaultOpticalSize={100}
429+
useLetterSpacing={false}
430+
hardCutText={true}
447431
/>
432+
{playlist.currentPartInfo?.partInstanceId ? (
433+
<span className="director-screen__body__segment__countdown">
434+
<CurrentPartOrSegmentRemaining
435+
currentPartInstanceId={playlist.currentPartInfo?.partInstanceId || null}
436+
heavyClassName="overtime"
437+
preferSegmentTime={true}
438+
/>
439+
</span>
440+
) : null}
448441
</div>
449-
<div className="director-screen__body__part__piece-content">
450-
<div className="director-screen__body__part__piece-name">
451-
<PieceNameContainer
452-
partName={currentPartInstance.instance.part.title}
453-
partInstanceId={currentPartInstance.instance._id}
454-
showStyleBaseId={currentShowStyleBaseId}
455-
rundownIds={rundownIds}
456-
playlistActivationId={playlist?.activationId}
457-
autowidth={{
458-
label: '',
459-
width: '90vw',
460-
fontFamily: 'Roboto Flex',
461-
fontSize: '1.5em',
462-
minFontWidth: 55,
463-
defaultWidth: 100,
464-
useLetterSpacing: false,
465-
defaultOpticalSize: 100,
466-
}}
467-
/>
468-
</div>
469-
<div className="director-screen__body__part__piece-countdown">
470-
<CurrentPartOrSegmentRemaining
471-
currentPartInstanceId={playlist.currentPartInfo?.partInstanceId ?? null}
472-
heavyClassName="overtime"
473-
/>
474-
<span className="auto-next-status">
475-
<AutoNextStatus />
476-
</span>{' '}
477-
<span className="freeze-counter">
478-
<PieceFreezeContainer
442+
443+
{currentPartInstance && currentShowStyleBaseId && (
444+
<>
445+
<div className="director-screen__body__part__piece-icon">
446+
<PieceIconContainer
479447
partInstanceId={currentPartInstance.instance._id}
480448
showStyleBaseId={currentShowStyleBaseId}
481449
rundownIds={rundownIds}
482-
partAutoNext={currentPartInstance.instance.part.autoNext || false}
483-
partExpectedDuration={calculatePartInstanceExpectedDurationWithTransition(
484-
currentPartInstance.instance
485-
)}
486-
partStartedPlayback={currentPartInstance.instance.timings?.plannedStartedPlayback}
487450
playlistActivationId={playlist?.activationId}
488451
/>
489-
</span>
490-
</div>
491-
</div>
452+
</div>
453+
<div className="director-screen__body__part__piece-content">
454+
<div className="director-screen__body__part__piece-name">
455+
<PieceNameContainer
456+
partName={currentPartInstance.instance.part.title}
457+
partInstanceId={currentPartInstance.instance._id}
458+
showStyleBaseId={currentShowStyleBaseId}
459+
rundownIds={rundownIds}
460+
playlistActivationId={playlist?.activationId}
461+
autowidth={{
462+
label: '',
463+
width: '90vw',
464+
fontFamily: 'Roboto Flex',
465+
fontSize: '1.5em',
466+
minFontWidth: 55,
467+
defaultWidth: 100,
468+
useLetterSpacing: false,
469+
defaultOpticalSize: 100,
470+
}}
471+
/>
472+
</div>
473+
<div className="director-screen__body__part__piece-countdown">
474+
<CurrentPartOrSegmentRemaining
475+
currentPartInstanceId={playlist.currentPartInfo?.partInstanceId ?? null}
476+
heavyClassName="overtime"
477+
/>
478+
<span className="auto-next-status">
479+
<AutoNextStatus />
480+
</span>{' '}
481+
<span className="freeze-counter">
482+
<PieceFreezeContainer
483+
partInstanceId={currentPartInstance.instance._id}
484+
showStyleBaseId={currentShowStyleBaseId}
485+
rundownIds={rundownIds}
486+
partAutoNext={currentPartInstance.instance.part.autoNext || false}
487+
partExpectedDuration={calculatePartInstanceExpectedDurationWithTransition(
488+
currentPartInstance.instance
489+
)}
490+
partStartedPlayback={currentPartInstance.instance.timings?.plannedStartedPlayback}
491+
playlistActivationId={playlist?.activationId}
492+
/>
493+
</span>
494+
</div>
495+
</div>
496+
</>
497+
)}
492498
</>
493-
) : expectedStart ? (
494-
<div className="director-screen__body__part__timeto-content">
495-
<div className="director-screen__body__part__timeto-countdown">
496-
{/* <Timediff time={expectedStart - getCurrentTime()} /> */}
497-
<Timediff time={100000} />
499+
) : (
500+
expectedStart && (
501+
<div className="director-screen__body__part__timeto-content">
502+
<div className="director-screen__body__part__timeto-countdown">
503+
<Timediff time={expectedStart - getCurrentTime()} />
504+
</div>
505+
<div className="director-screen__body__part__timeto-name">Time to planned start</div>
498506
</div>
499-
<div className="director-screen__body__part__timeto-name">Time to planned start</div>
500-
</div>
501-
) : null}
507+
)
508+
)}
502509
</div>
503510
{
504511
// Next Part:

0 commit comments

Comments
 (0)