11import ClassNames from 'classnames'
22import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
3- import { PartUi } from '../SegmentTimeline/SegmentTimelineContainer.js'
3+ import { PartUi } from '../../ SegmentTimeline/SegmentTimelineContainer.js'
44import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
55import { Rundown } from '@sofie-automation/corelib/dist/dataModel/Rundown'
6- import { useTiming } from '../RundownView/RundownTiming/withTiming.js'
76import {
87 useSubscription ,
98 useSubscriptions ,
109 useTracker ,
1110 withTracker ,
12- } from '../../lib/ReactMeteorData/ReactMeteorData.js'
13- import { getCurrentTime } from '../../lib/systemTime.js'
11+ } from '../../../ lib/ReactMeteorData/ReactMeteorData.js'
12+ import { getCurrentTime } from '../../../ lib/systemTime.js'
1413import { PartInstance } from '@sofie-automation/meteor-lib/dist/collections/PartInstances'
1514import { MeteorPubSub } from '@sofie-automation/meteor-lib/dist/api/pubsub'
16- import { PieceIconContainer } from './ClockViewPieceIcons/ClockViewPieceIcon.js'
17- import { PieceNameContainer } from './ClockViewPieceIcons/ClockViewPieceName.js'
18- import { Timediff } from './Timediff.js'
19- import { RundownUtils } from '../../lib/rundown.js'
15+ import { PieceIconContainer } from '.. /ClockViewPieceIcons/ClockViewPieceIcon.js'
16+ import { PieceNameContainer } from '.. /ClockViewPieceIcons/ClockViewPieceName.js'
17+ import { Timediff } from '.. /Timediff.js'
18+ import { RundownUtils } from '../../../ lib/rundown.js'
2019import { PieceLifespan } from '@sofie-automation/blueprints-integration'
2120import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
22- import { PieceFreezeContainer } from './ClockViewPieceIcons/ClockViewFreezeCount.js'
21+ import { PieceFreezeContainer } from '.. /ClockViewPieceIcons/ClockViewFreezeCount.js'
2322import { PlaylistTiming } from '@sofie-automation/corelib/dist/playout/rundownTiming'
2423import {
2524 RundownId ,
@@ -30,26 +29,27 @@ import {
3029} from '@sofie-automation/corelib/dist/dataModel/Ids'
3130import { DBShowStyleVariant } from '@sofie-automation/corelib/dist/dataModel/ShowStyleVariant'
3231import { calculatePartInstanceExpectedDurationWithTransition } from '@sofie-automation/corelib/dist/playout/timings'
33- import { getPlaylistTimingDiff } from '../../lib/rundownTiming.js'
3432import { UIShowStyleBase } from '@sofie-automation/meteor-lib/dist/api/showStyles'
35- import { UIShowStyleBases , UIStudios } from '../Collections.js'
33+ import { UIShowStyleBases , UIStudios } from '../../ Collections.js'
3634import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios'
37- import { PieceInstances , RundownPlaylists , Rundowns , ShowStyleVariants } from '../../collections/index.js'
38- import { RundownPlaylistCollectionUtil } from '../../collections/rundownPlaylistUtil.js'
39- import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
40- import { useSetDocumentClass } from '../util/useSetDocumentClass.js'
41- import { useRundownAndShowStyleIdsForPlaylist } from '../util/useRundownAndShowStyleIdsForPlaylist.js'
42- import { RundownPlaylistClientUtil } from '../../lib/rundownPlaylistUtil.js'
43- import { CurrentPartOrSegmentRemaining } from '../RundownView/RundownTiming/CurrentPartOrSegmentRemaining.js'
4435import {
45- OverUnderClockComponent ,
46- PlannedEndComponent ,
47- TimeSincePlannedEndComponent ,
48- TimeToPlannedEndComponent ,
49- } from '../../lib/Components/CounterComponents.js'
50- import { AdjustLabelFit } from '../util/AdjustLabelFit.js'
51- import { AutoNextStatus } from '../RundownView/RundownTiming/AutoNextStatus.js'
36+ PartInstances ,
37+ PieceInstances ,
38+ RundownPlaylists ,
39+ Rundowns ,
40+ ShowStyleVariants ,
41+ } from '../../../collections/index.js'
42+ import { RundownPlaylistCollectionUtil } from '../../../collections/rundownPlaylistUtil.js'
43+ import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
44+ import { useSetDocumentClass } from '../../util/useSetDocumentClass.js'
45+ import { useRundownAndShowStyleIdsForPlaylist } from '../../util/useRundownAndShowStyleIdsForPlaylist.js'
46+ import { RundownPlaylistClientUtil } from '../../../lib/rundownPlaylistUtil.js'
47+ import { CurrentPartOrSegmentRemaining } from '../../RundownView/RundownTiming/CurrentPartOrSegmentRemaining.js'
48+
49+ import { AdjustLabelFit } from '../../util/AdjustLabelFit.js'
50+ import { AutoNextStatus } from '../../RundownView/RundownTiming/AutoNextStatus.js'
5251import { useTranslation } from 'react-i18next'
52+ import { DirectorScreenTop } from './DirectorScreenTop.js'
5353
5454interface SegmentUi extends DBSegment {
5555 items : Array < PartUi >
@@ -80,6 +80,7 @@ export interface DirectorScreenTrackedProps {
8080 nextShowStyleBaseId : ShowStyleBaseId | undefined
8181 showStyleBaseIds : ShowStyleBaseId [ ]
8282 rundownIds : RundownId [ ]
83+ firstTakenPartInstance : PartInstance | undefined
8384}
8485
8586function getShowStyleBaseIdSegmentPartUi (
@@ -185,6 +186,7 @@ const getDirectorScreenReactive = (props: DirectorScreenProps): DirectorScreenTr
185186 restoredFromSnapshotId : 0 ,
186187 } ,
187188 } )
189+
188190 const segments : Array < SegmentUi > = [ ]
189191 let showStyleBaseIds : ShowStyleBaseId [ ] = [ ]
190192 let rundowns : Rundown [ ] = [ ]
@@ -200,17 +202,24 @@ const getDirectorScreenReactive = (props: DirectorScreenProps): DirectorScreenTr
200202 let nextSegment : SegmentUi | undefined = undefined
201203 let nextPartInstanceUi : PartUi | undefined = undefined
202204 let nextShowStyleBaseId : ShowStyleBaseId | undefined = undefined
205+ let firstTakenPartInstanceUi : PartInstance | undefined = undefined
203206
204207 if ( playlist ) {
205208 rundowns = RundownPlaylistCollectionUtil . getRundownsOrdered ( playlist )
209+
206210 const orderedSegmentsAndParts = RundownPlaylistClientUtil . getSegmentsAndPartsSync ( playlist )
207211 rundownIds = rundowns . map ( ( rundown ) => rundown . _id )
208212 const rundownsToShowstyles : Map < RundownId , ShowStyleBaseId > = new Map ( )
209213 for ( const rundown of rundowns ) {
210214 rundownsToShowstyles . set ( rundown . _id , rundown . showStyleBaseId )
211215 }
216+
212217 showStyleBaseIds = rundowns . map ( ( rundown ) => rundown . showStyleBaseId )
213- const { currentPartInstance, nextPartInstance } = RundownPlaylistClientUtil . getSelectedPartInstances ( playlist )
218+ const { currentPartInstance, nextPartInstance, firstTakenPartInstance } =
219+ RundownPlaylistClientUtil . getSelectedPartInstances ( playlist )
220+
221+ firstTakenPartInstanceUi = firstTakenPartInstance
222+
214223 const partInstance = currentPartInstance ?? nextPartInstance
215224 if ( partInstance ) {
216225 // This is to register a reactive dependency on Rundown-spanning PieceInstances, that we may miss otherwise.
@@ -262,6 +271,7 @@ const getDirectorScreenReactive = (props: DirectorScreenProps): DirectorScreenTr
262271 }
263272 }
264273 }
274+
265275 return {
266276 studio,
267277 segments,
@@ -278,6 +288,7 @@ const getDirectorScreenReactive = (props: DirectorScreenProps): DirectorScreenTr
278288 nextSegment,
279289 nextPartInstance : nextPartInstanceUi ,
280290 nextShowStyleBaseId,
291+ firstTakenPartInstance : firstTakenPartInstanceUi ,
281292 }
282293}
283294
@@ -309,7 +320,7 @@ function useDirectorScreenSubscriptions(props: DirectorScreenProps): void {
309320 useSubscription ( CorelibPubSub . showStyleVariants , null , showStyleVariantIds )
310321 useSubscription ( MeteorPubSub . rundownLayouts , showStyleBaseIds )
311322
312- const { currentPartInstance, nextPartInstance } = useTracker (
323+ const { currentPartInstance, nextPartInstance, firstTakenPartInstance } = useTracker (
313324 ( ) => {
314325 const playlist = RundownPlaylists . findOne ( props . playlistId , {
315326 fields : {
@@ -323,16 +334,27 @@ function useDirectorScreenSubscriptions(props: DirectorScreenProps): void {
323334 if ( playlist ) {
324335 return RundownPlaylistClientUtil . getSelectedPartInstances ( playlist )
325336 } else {
326- return { currentPartInstance : undefined , nextPartInstance : undefined , previousPartInstance : undefined }
337+ return {
338+ currentPartInstance : undefined ,
339+ nextPartInstance : undefined ,
340+ previousPartInstance : undefined ,
341+ firstTakenPartInstance : undefined ,
342+ }
327343 }
328344 } ,
329345 [ props . playlistId ] ,
330- { currentPartInstance : undefined , nextPartInstance : undefined , previousPartInstance : undefined }
346+ {
347+ currentPartInstance : undefined ,
348+ nextPartInstance : undefined ,
349+ previousPartInstance : undefined ,
350+ firstTakenPartInstance : undefined ,
351+ }
331352 )
332353
333354 useSubscriptions ( CorelibPubSub . pieceInstances , [
334355 currentPartInstance && [ [ currentPartInstance . rundownId ] , [ currentPartInstance . _id ] , { } ] ,
335356 nextPartInstance && [ [ nextPartInstance . rundownId ] , [ nextPartInstance . _id ] , { } ] ,
357+ firstTakenPartInstance && [ [ firstTakenPartInstance . rundownId ] , [ firstTakenPartInstance . _id ] , { } ] ,
336358 ] )
337359}
338360
@@ -353,19 +375,13 @@ function DirectorScreenRender({
353375 nextPartInstance,
354376 nextSegment,
355377 rundownIds,
378+ firstTakenPartInstance,
356379} : Readonly < DirectorScreenProps & DirectorScreenTrackedProps > ) {
357380 useSetDocumentClass ( 'dark' , 'xdark' )
358381 const { t } = useTranslation ( )
359382
360- const timingDurations = useTiming ( )
361-
362383 if ( playlist && playlistId && segments ) {
363384 const expectedStart = PlaylistTiming . getExpectedStart ( playlist . timing ) || 0
364- const expectedEnd = PlaylistTiming . getExpectedEnd ( playlist . timing )
365- const expectedDuration = PlaylistTiming . getExpectedDuration ( playlist . timing ) || 0
366- const now = timingDurations . currentTime ?? getCurrentTime ( )
367-
368- const overUnderClock = getPlaylistTimingDiff ( playlist , timingDurations ) ?? 0
369385
370386 // Show countdown if it is the first segment and the current part is untimed:
371387 const currentSegmentIsFirst = currentSegment ?. _rank === 0
@@ -375,37 +391,7 @@ function DirectorScreenRender({
375391
376392 return (
377393 < div className = "director-screen" >
378- < div className = "director-screen__top" >
379- { expectedEnd ? (
380- < div className = "director-screen__top__planned-end" >
381- < div >
382- < PlannedEndComponent value = { expectedEnd } />
383- </ div >
384- { t ( 'Planned End' ) }
385- </ div >
386- ) : null }
387- { expectedEnd ? (
388- < div className = "director-screen__top__time-to director-screen__top__planned-container" >
389- < div >
390- < TimeToPlannedEndComponent value = { now - expectedEnd } />
391- </ div >
392- < span className = "director-screen__top__planned-to" > { t ( 'Time to planned end' ) } </ span >
393- </ div >
394- ) : (
395- < div >
396- < div className = "director-screen__top__planned-container" >
397- < TimeSincePlannedEndComponent value = { getCurrentTime ( ) - ( expectedStart + expectedDuration ) } />
398- < span className = "director-screen__top__planned-since" > { t ( 'Time since planned end' ) } </ span >
399- </ div >
400- </ div >
401- ) }
402- < div >
403- < div >
404- < OverUnderClockComponent value = { overUnderClock } />
405- </ div >
406- < span className = "director-screen__top__over-under" > { t ( 'Over/Under' ) } </ span >
407- </ div >
408- </ div >
394+ < DirectorScreenTop firstTakenPartInstance = { firstTakenPartInstance } playlist = { playlist } />
409395 < div className = "director-screen__body" >
410396 {
411397 // Current Part:
0 commit comments