Skip to content

Commit ced212f

Browse files
olzzonolzzon
committed
wip: move countdown just under part/piece name
1 parent 14194fa commit ced212f

File tree

2 files changed

+101
-93
lines changed

2 files changed

+101
-93
lines changed

‎packages/webui/src/client/styles/countdown/director.scss‎

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ $hold-status-color: $liveline-timecode-color;
6969
grid-template:
7070
24em
7171
60em
72-
30em / #{'min(13vw, 27vh)'} auto;
72+
30em / min(13vw, 27vh) auto;
7373
white-space: nowrap;
7474

7575
.director-screen__body__segment-name {
@@ -83,7 +83,7 @@ $hold-status-color: $liveline-timecode-color;
8383
position: relative;
8484
font-weight: 700;
8585
font-size: 90px;
86-
line-height: 110%;
86+
line-height: 100%;
8787
/* or 110px */
8888
letter-spacing: 0.01em;
8989
font-feature-settings: 'pnum' on, 'lnum' on;
@@ -115,20 +115,12 @@ $hold-status-color: $liveline-timecode-color;
115115
position: absolute;
116116
font-size: 110px;
117117
top: 0;
118-
right: 0;
118+
right: 3vw;
119119
height: 100%;
120120
width: 20vw;
121-
color: #ff5218;
122121
float: right;
123122
text-align: right;
124123
padding-right: 10px;
125-
background: linear-gradient(
126-
90deg,
127-
rgba(223, 0, 0, 0) 0%,
128-
#df0000 7.86%,
129-
rgba(116, 0, 0, 0.808) 16.21%,
130-
rgba(0, 0, 0, 0.6) 24.94%
131-
);
132124
}
133125
}
134126

@@ -160,42 +152,54 @@ $hold-status-color: $liveline-timecode-color;
160152
}
161153
}
162154

163-
.director-screen__body__part__piece-name {
155+
.director-screen__body__part__piece-content {
164156
grid-row: 2;
165157
grid-column: 2;
166-
text-align: left;
167-
font-size: 13em;
168-
overflow: hidden;
169-
white-space: nowrap;
170-
padding-left: 0.2em;
171-
172158
display: flex;
173-
align-items: top;
174-
margin-top: 20px;
159+
flex-direction: column;
160+
text-align: left;
175161

176-
.director-screen__part__auto-next-icon {
177-
display: block;
178-
min-width: 1em;
179-
max-width: 1em;
162+
.director-screen__body__part__piece-name {
163+
font-size: 13em;
164+
overflow: hidden;
165+
white-space: nowrap;
166+
padding-left: 0.2em;
167+
margin-top: 20px;
168+
display: flex;
169+
align-items: top;
180170
}
181-
}
182171

183-
.director-screen__body__part__piece-countdown {
184-
text-align: left;
185-
font-size: 13em; // Allow a fallback for CasparCG
186-
font-size: #{'min(13em, 8vw)'};
187-
padding: 0 0.2em;
188-
line-height: 1em;
172+
.director-screen__body__part__piece-content .director-screen__body__part__piece-countdown {
173+
font-size: 13em;
174+
padding: 0 0.2em;
175+
line-height: 1em;
176+
margin-top: 10px;
177+
color: $general-countdown-to-next-color;
178+
}
189179

190-
> .overtime {
191-
color: $general-late-color;
180+
/* Update next part styling if needed */
181+
.director-screen__body__part--next-part .director-screen__body__part__piece-content {
182+
grid-row: 2 / 4; /* Span both rows as in the original design */
192183
}
193184

194-
> img.freeze-icon {
195-
width: 0.9em;
196-
height: 0.9em;
197-
margin-left: -0.05em;
198-
margin-top: -0.05em;
185+
.director-screen__body__part__piece-countdown {
186+
grid-row: inherit;
187+
text-align: left;
188+
font-size: 13em; // Allow a fallback for CasparCG
189+
font-size: #{'min(13em, 8vw)'};
190+
padding: 0 0.2em;
191+
line-height: 1em;
192+
193+
> .overtime {
194+
color: $general-late-color;
195+
}
196+
197+
> img.freeze-icon {
198+
width: 0.9em;
199+
height: 0.9em;
200+
margin-left: -0.05em;
201+
margin-top: -0.05em;
202+
}
199203
}
200204
}
201205

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

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -405,7 +405,7 @@ function DirectorScreenRender({
405405
label={currentSegment?.name || ''}
406406
width={'80vw'}
407407
fontFamily="Roboto Flex"
408-
fontSize="0.8em"
408+
fontSize="0.7em"
409409
minFontWidth={70}
410410
maxFontWidth={90}
411411
minLetterSpacing={0}
@@ -429,43 +429,45 @@ function DirectorScreenRender({
429429
playlistActivationId={playlist?.activationId}
430430
/>
431431
</div>
432-
<div className="director-screen__body__part__piece-name">
433-
<PieceNameContainer
434-
partName={currentPartInstance.instance.part.title}
435-
partInstanceId={currentPartInstance.instance._id}
436-
showStyleBaseId={currentShowStyleBaseId}
437-
rundownIds={rundownIds}
438-
playlistActivationId={playlist?.activationId}
439-
autowidth={{
440-
label: '',
441-
width: '90vw',
442-
fontFamily: 'Roboto Flex',
443-
fontSize: '1.6em',
444-
minFontWidth: 20,
445-
maxFontWidth: 90,
446-
minLetterSpacing: 2,
447-
}}
448-
/>
449-
</div>
450-
<div className="director-screen__body__part__piece-countdown">
451-
{currentSegment?.segmentTiming?.countdownType === CountdownType.SEGMENT_BUDGET_DURATION ? (
452-
<CurrentPartOrSegmentRemaining
453-
currentPartInstanceId={currentPartInstance.instance._id}
454-
heavyClassName="overtime"
455-
/>
456-
) : (
457-
<PieceCountdownContainer
432+
<div className="director-screen__body__part__piece-content">
433+
<div className="director-screen__body__part__piece-name">
434+
<PieceNameContainer
435+
partName={currentPartInstance.instance.part.title}
458436
partInstanceId={currentPartInstance.instance._id}
459437
showStyleBaseId={currentShowStyleBaseId}
460438
rundownIds={rundownIds}
461-
partAutoNext={currentPartInstance.instance.part.autoNext || false}
462-
partExpectedDuration={calculatePartInstanceExpectedDurationWithTransition(
463-
currentPartInstance.instance
464-
)}
465-
partStartedPlayback={currentPartInstance.instance.timings?.plannedStartedPlayback}
466439
playlistActivationId={playlist?.activationId}
440+
autowidth={{
441+
label: '',
442+
width: '90vw',
443+
fontFamily: 'Roboto Flex',
444+
fontSize: '1.4em',
445+
minFontWidth: 20,
446+
maxFontWidth: 90,
447+
minLetterSpacing: 2,
448+
}}
467449
/>
468-
)}
450+
</div>
451+
<div className="director-screen__body__part__piece-countdown">
452+
{currentSegment?.segmentTiming?.countdownType === CountdownType.SEGMENT_BUDGET_DURATION ? (
453+
<CurrentPartOrSegmentRemaining
454+
currentPartInstanceId={currentPartInstance.instance._id}
455+
heavyClassName="overtime"
456+
/>
457+
) : (
458+
<PieceCountdownContainer
459+
partInstanceId={currentPartInstance.instance._id}
460+
showStyleBaseId={currentShowStyleBaseId}
461+
rundownIds={rundownIds}
462+
partAutoNext={currentPartInstance.instance.part.autoNext || false}
463+
partExpectedDuration={calculatePartInstanceExpectedDurationWithTransition(
464+
currentPartInstance.instance
465+
)}
466+
partStartedPlayback={currentPartInstance.instance.timings?.plannedStartedPlayback}
467+
playlistActivationId={playlist?.activationId}
468+
/>
469+
)}
470+
</div>
469471
</div>
470472
</>
471473
) : expectedStart ? (
@@ -489,7 +491,7 @@ function DirectorScreenRender({
489491
label={nextSegment?.name || ''}
490492
width={'80vw'}
491493
fontFamily="Roboto Flex"
492-
fontSize="0.8em"
494+
fontSize="0.7em"
493495
minFontWidth={70}
494496
maxFontWidth={90}
495497
minLetterSpacing={0}
@@ -512,27 +514,29 @@ function DirectorScreenRender({
512514
playlistActivationId={playlist?.activationId}
513515
/>
514516
</div>
515-
<div className="director-screen__body__part__piece-name">
516-
{nextPartInstance && nextShowStyleBaseId && nextPartInstance.instance.part.title ? (
517-
<PieceNameContainer
518-
partName={nextPartInstance.instance.part.title}
519-
partInstanceId={nextPartInstance.instance._id}
520-
showStyleBaseId={nextShowStyleBaseId}
521-
rundownIds={rundownIds}
522-
playlistActivationId={playlist?.activationId}
523-
autowidth={{
524-
label: '',
525-
width: '90vw',
526-
fontFamily: 'Roboto Flex',
527-
fontSize: '1.6em',
528-
minFontWidth: 20,
529-
maxFontWidth: 90,
530-
minLetterSpacing: 2,
531-
}}
532-
/>
533-
) : (
534-
'_'
535-
)}
517+
<div className="director-screen__body__part__piece-content">
518+
<div className="director-screen__body__part__piece-name">
519+
{nextPartInstance && nextShowStyleBaseId && nextPartInstance.instance.part.title ? (
520+
<PieceNameContainer
521+
partName={nextPartInstance.instance.part.title}
522+
partInstanceId={nextPartInstance.instance._id}
523+
showStyleBaseId={nextShowStyleBaseId}
524+
rundownIds={rundownIds}
525+
playlistActivationId={playlist?.activationId}
526+
autowidth={{
527+
label: '',
528+
width: '90vw',
529+
fontFamily: 'Roboto Flex',
530+
fontSize: '1.4em',
531+
minFontWidth: 20,
532+
maxFontWidth: 90,
533+
minLetterSpacing: 2,
534+
}}
535+
/>
536+
) : (
537+
'_'
538+
)}
539+
</div>
536540
</div>
537541
</>
538542
) : null}

0 commit comments

Comments
 (0)