Skip to content

Commit 56ddfff

Browse files
JulusianJulusian
committed
wip: rundown header
1 parent 9ae66b7 commit 56ddfff

File tree

3 files changed

+93
-68
lines changed

3 files changed

+93
-68
lines changed

‎packages/webui/src/client/styles/rundownView.scss‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,23 @@ body.no-overflow {
245245
width: 100%;
246246
text-align: center;
247247

248+
display: grid;
249+
grid-template-columns: 1fr auto 1fr;
250+
251+
.timing__header__left {
252+
text-align: left;
253+
}
254+
.timing__header__right {
255+
display: grid;
256+
grid-template-columns: auto auto;
257+
text-align: right;
258+
vertical-align: middle;
259+
260+
.timing__header__right__right {
261+
align-content: end;
262+
}
263+
}
264+
248265
.timing-clock {
249266
display: inline;
250267
position: relative;
@@ -275,11 +292,7 @@ body.no-overflow {
275292
}
276293

277294
&.time-now {
278-
position: absolute;
279-
top: 0.05em;
280-
left: 50%;
281-
transform: translateX(-50%);
282-
margin-top: 0px;
295+
margin-top: 0.05em;
283296
margin-right: 0;
284297
font-size: 2.3em;
285298
font-weight: 100;

‎packages/webui/src/client/ui/RundownView.tsx‎

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -317,40 +317,50 @@ const TimingDisplay = withTiming<ITimingDisplayProps, {}>()(function TimingDispl
317317
!(timingDurations.breakIsLastRundown && layout.lastRundownIsNotBreak)
318318

319319
return (
320-
<div className="timing mod">
321-
<PlaylistStartTiming rundownPlaylist={rundownPlaylist} hideDiff={true} />
322-
<RundownName rundownPlaylist={rundownPlaylist} currentRundown={currentRundown} rundownCount={rundownCount} />
323-
<TimeOfDay />
324-
{rundownPlaylist.currentPartInfo && (
325-
<span className="timing-clock current-remaining">
326-
<CurrentPartOrSegmentRemaining
327-
currentPartInstanceId={rundownPlaylist.currentPartInfo.partInstanceId}
328-
heavyClassName="overtime"
329-
preferSegmentTime={true}
330-
/>
331-
<AutoNextStatus />
332-
{rundownPlaylist.holdState && rundownPlaylist.holdState !== RundownHoldState.COMPLETE ? (
333-
<div className="rundown__header-status rundown__header-status--hold">{t('Hold')}</div>
320+
<div className="timing">
321+
<div className="timing__header__left">
322+
<PlaylistStartTiming rundownPlaylist={rundownPlaylist} hideDiff={true} />
323+
<RundownName rundownPlaylist={rundownPlaylist} currentRundown={currentRundown} rundownCount={rundownCount} />
324+
</div>
325+
<div className="timing__header__center">
326+
<TimeOfDay />
327+
</div>
328+
<div className="timing__header__right">
329+
<div className="timing__header__right__left">
330+
{rundownPlaylist.currentPartInfo && (
331+
<span className="timing-clock current-remaining">
332+
<CurrentPartOrSegmentRemaining
333+
currentPartInstanceId={rundownPlaylist.currentPartInfo.partInstanceId}
334+
heavyClassName="overtime"
335+
preferSegmentTime={true}
336+
/>
337+
<AutoNextStatus />
338+
{rundownPlaylist.holdState && rundownPlaylist.holdState !== RundownHoldState.COMPLETE ? (
339+
<div className="rundown__header-status rundown__header-status--hold">{t('Hold')}</div>
340+
) : null}
341+
</span>
342+
)}
343+
</div>
344+
<div className="timing__header__right__right">
345+
{showNextBreakTiming ? (
346+
<NextBreakTiming
347+
rundownsBeforeBreak={timingDurations.rundownsBeforeNextBreak!}
348+
breakText={layout?.nextBreakText}
349+
lastChild={!showEndTiming}
350+
/>
334351
) : null}
335-
</span>
336-
)}
337-
{showEndTiming ? (
338-
<PlaylistEndTiming
339-
rundownPlaylist={rundownPlaylist}
340-
loop={isLoopRunning(rundownPlaylist)}
341-
expectedStart={expectedStart}
342-
expectedEnd={expectedEnd}
343-
expectedDuration={expectedDuration}
344-
endLabel={layout?.plannedEndText}
345-
/>
346-
) : null}
347-
{showNextBreakTiming ? (
348-
<NextBreakTiming
349-
rundownsBeforeBreak={timingDurations.rundownsBeforeNextBreak!}
350-
breakText={layout?.nextBreakText}
351-
lastChild={!showEndTiming}
352-
/>
353-
) : null}
352+
{showEndTiming ? (
353+
<PlaylistEndTiming
354+
rundownPlaylist={rundownPlaylist}
355+
loop={isLoopRunning(rundownPlaylist)}
356+
expectedStart={expectedStart}
357+
expectedEnd={expectedEnd}
358+
expectedDuration={expectedDuration}
359+
endLabel={layout?.plannedEndText}
360+
/>
361+
) : null}
362+
</div>
363+
</div>
354364
</div>
355365
)
356366
})
@@ -1190,7 +1200,7 @@ const RundownHeader = withTranslation()(
11901200
/>
11911201
<div className="header-row flex-row first-row super-dark">
11921202
<div className="flex-col left horizontal-align-left">
1193-
<div className="badge-sofie my-3 mx-4">
1203+
<div className="badge-sofie mt-4 mb-3 mx-4">
11941204
<Tooltip
11951205
overlay={t('Add ?studio=1 to the URL to enter studio mode')}
11961206
visible={getHelpMode() && !this.props.userPermissions.studio}

‎packages/webui/src/client/ui/RundownView/RundownTiming/PlaylistEndTiming.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,42 @@ export const PlaylistEndTiming = withTiming<IEndTimingProps, {}>()(function Play
4444

4545
return (
4646
<React.Fragment>
47+
{!hideDiff ? (
48+
timingDurations ? (
49+
<span
50+
className={ClassNames('timing-clock heavy-light ', {
51+
heavy: overUnderClock < 0,
52+
light: overUnderClock >= 0,
53+
})}
54+
role="timer"
55+
>
56+
{!hideDiffLabel && <span className="timing-clock-label right">{t('Diff')}</span>}
57+
{RundownUtils.formatDiffToTimecode(overUnderClock, true, false, true, true, true, undefined, true, true)}
58+
</span>
59+
) : null
60+
) : null}
61+
62+
{!loop &&
63+
!hideCountdown &&
64+
(expectedEnd ? (
65+
<span className="timing-clock countdown plan-end" role="timer">
66+
{RundownUtils.formatDiffToTimecode(now - expectedEnd, true, true, true)}
67+
</span>
68+
) : expectedStart && expectedDuration ? (
69+
<span className="timing-clock countdown plan-end" role="timer">
70+
{RundownUtils.formatDiffToTimecode(getCurrentTime() - (expectedStart + expectedDuration), true, true, true)}
71+
</span>
72+
) : null)}
73+
4774
{!hidePlannedEnd ? (
4875
expectedEnd ? (
4976
!rundownPlaylist.startedPlayback ? (
50-
<span className="timing-clock plan-end right visual-last-child" role="timer">
77+
<span className="timing-clock plan-end visual-last-child" role="timer">
5178
{!hidePlannedEndLabel && <span className="timing-clock-label right">{endLabel ?? t('Planned End')}</span>}
5279
<Moment interval={0} format="HH:mm:ss" date={expectedEnd} />
5380
</span>
5481
) : (
55-
<span className="timing-clock plan-end right visual-last-child" role="timer">
82+
<span className="timing-clock plan-end visual-last-child" role="timer">
5683
{!hidePlannedEndLabel && (
5784
<span className="timing-clock-label right">{endLabel ?? t('Expected End')}</span>
5885
)}
@@ -62,7 +89,7 @@ export const PlaylistEndTiming = withTiming<IEndTimingProps, {}>()(function Play
6289
) : timingDurations ? (
6390
isLoopRunning(rundownPlaylist) ? (
6491
timingDurations.partCountdown && rundownPlaylist.activationId && rundownPlaylist.currentPartInfo ? (
65-
<span className="timing-clock plan-end right visual-last-child" role="timer">
92+
<span className="timing-clock plan-end visual-last-child" role="timer">
6693
{!hidePlannedEndLabel && <span className="timing-clock-label right">{t('Next Loop at')}</span>}
6794
<Moment
6895
interval={0}
@@ -72,7 +99,7 @@ export const PlaylistEndTiming = withTiming<IEndTimingProps, {}>()(function Play
7299
</span>
73100
) : null
74101
) : (
75-
<span className="timing-clock plan-end right visual-last-child" role="timer">
102+
<span className="timing-clock plan-end visual-last-child" role="timer">
76103
{!hidePlannedEndLabel && (
77104
<span className="timing-clock-label right">{endLabel ?? t('Expected End')}</span>
78105
)}
@@ -85,31 +112,6 @@ export const PlaylistEndTiming = withTiming<IEndTimingProps, {}>()(function Play
85112
)
86113
) : null
87114
) : null}
88-
{!loop &&
89-
!hideCountdown &&
90-
(expectedEnd ? (
91-
<span className="timing-clock countdown plan-end right" role="timer">
92-
{RundownUtils.formatDiffToTimecode(now - expectedEnd, true, true, true)}
93-
</span>
94-
) : expectedStart && expectedDuration ? (
95-
<span className="timing-clock countdown plan-end right" role="timer">
96-
{RundownUtils.formatDiffToTimecode(getCurrentTime() - (expectedStart + expectedDuration), true, true, true)}
97-
</span>
98-
) : null)}
99-
{!hideDiff ? (
100-
timingDurations ? (
101-
<span
102-
className={ClassNames('timing-clock heavy-light right', {
103-
heavy: overUnderClock < 0,
104-
light: overUnderClock >= 0,
105-
})}
106-
role="timer"
107-
>
108-
{!hideDiffLabel && <span className="timing-clock-label right">{t('Diff')}</span>}
109-
{RundownUtils.formatDiffToTimecode(overUnderClock, true, false, true, true, true, undefined, true, true)}
110-
</span>
111-
) : null
112-
) : null}
113115
</React.Fragment>
114116
)
115117
})

0 commit comments

Comments
 (0)