Skip to content

Commit f279a2d

Browse files
olzzonolzzon
committed
Merge branch 'upstream/directors-screen' into bbc-release53
2 parents 73d261a + 5bd486e commit f279a2d

33 files changed

+2070
-101
lines changed

‎packages/blueprints-integration/src/documents/pieceGeneric.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export interface IBlueprintPieceGeneric<TPrivateData = unknown, TPublicData = un
3434
externalId: string
3535
/** User-presentable name for the timeline item */
3636
name: string
37+
3738
/** Arbitraty data storage for internal use in the blueprints */
3839
privateData?: TPrivateData
3940
/** Arbitraty data relevant for other systems, made available to them through APIs */

‎packages/webui/src/client/lib/Components/CounterComponents.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Moment from 'react-moment'
2+
import { RundownUtils } from '../rundown'
3+
4+
interface OverUnderProps {
5+
value: number
6+
}
7+
8+
export const OverUnderClockComponent = (props: OverUnderProps): JSX.Element => {
9+
return (
10+
<div className="counter-component__over-under">
11+
<span className={props.value < 0 ? 'under' : 'over'}>
12+
{RundownUtils.formatDiffToTimecode(props.value, true, false, true, true, true, undefined, true, true)}
13+
</span>
14+
</div>
15+
)
16+
}
17+
18+
export const PlannedEndComponent = (props: OverUnderProps): JSX.Element => {
19+
return (
20+
<span className="counter-component__planned-end">
21+
<Moment interval={0} format="HH:mm:ss" date={props.value} />
22+
</span>
23+
)
24+
}
25+
26+
export const TimeToPlannedEndComponent = (props: OverUnderProps): JSX.Element => {
27+
return (
28+
<span className="counter-component__time-to-planned-end">
29+
{RundownUtils.formatDiffToTimecode(props.value, true, false, true, true, true, undefined, true, true)}
30+
</span>
31+
)
32+
}
33+
34+
export const TimeSincePlannedEndComponent = (props: OverUnderProps): JSX.Element => {
35+
return (
36+
<span className="counter-component__time-since-planned-end">
37+
{RundownUtils.formatDiffToTimecode(props.value, true, false, true, true, true, undefined, true, true)}
38+
</span>
39+
)
40+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
// color variables are defined in defaultColors.scss
32

43
$color-status-good: var(--color-status-good);
@@ -23,6 +22,7 @@ $general-late-color: var(--general-late-color);
2322
$general-fast-color: var(--general-fast-color);
2423
$general-fast-color--shadow: var(--general-fast-color--shadow);
2524
$general-countdown-to-next-color: var(--general-countdown-to-next-color);
25+
$general-freeze-color: var(--general-freeze-color);
2626

2727
$general-clock: var(--general-clock);
2828

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

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
@import '../colorScheme';
2+
$liveline-timecode-color: $general-countdown-to-next-color; //$general-live-color;
3+
$hold-status-color: $liveline-timecode-color;
4+
5+
.piece__label__colored-mark {
6+
display: inline-block;
7+
background-color: currentColor;
8+
border-radius: 100%;
9+
width: 0.75em;
10+
height: 0.75em;
11+
margin-right: 0.125em;
12+
margin-left: 0.125em;
13+
line-height: 0.75em;
14+
}
15+
16+
.director-screen {
17+
font-family: Roboto Flex;
18+
font-style: normal;
19+
20+
.director-screen__top {
21+
position: fixed;
22+
top: 0;
23+
left: 0;
24+
right: 0;
25+
height: 19vh;
26+
padding-left: 10px;
27+
padding-top: 0px;
28+
display: flex;
29+
flex-direction: row;
30+
justify-content: space-between;
31+
align-items: center;
32+
background-color: #3f3f3f;
33+
color: #888;
34+
font-size: 2.6em;
35+
padding: 0 0.2em;
36+
37+
.director-screen__top__planned-end {
38+
text-align: left;
39+
}
40+
41+
.director-screen__top__planned-to {
42+
text-align: left;
43+
}
44+
.director-screen__top__planned-since {
45+
margin-left: -50px;
46+
}
47+
48+
.director-screen__top__over-under {
49+
margin-left: 5vw;
50+
}
51+
}
52+
53+
.director-screen__body {
54+
position: fixed;
55+
top: 19vh;
56+
bottom: 0;
57+
left: 0;
58+
right: 0;
59+
60+
font-size: 0.4vh;
61+
62+
display: grid;
63+
grid-template: 4fr 3fr fit-content(1em) / auto;
64+
65+
overflow: hidden;
66+
white-space: nowrap;
67+
68+
.director-screen__body__part {
69+
display: grid;
70+
grid-template:
71+
24em
72+
80em
73+
20em / min(13vw, 27vh) auto;
74+
white-space: nowrap;
75+
76+
.director-screen__body__segment-name {
77+
grid-row: 1;
78+
grid-column: 1 / -1;
79+
text-align: left;
80+
text-indent: 5px;
81+
letter-spacing: 0%;
82+
align-items: center;
83+
color: #fff;
84+
position: relative;
85+
font-size: 100px;
86+
height: 11vh;
87+
letter-spacing: 0.01em;
88+
font-feature-settings: 'tnum' on, 'liga' off;
89+
90+
color: #ffffff;
91+
92+
// Default Roboto Flex settings:
93+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
94+
'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 100, 'wght' 550;
95+
96+
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
97+
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);
98+
z-index: 1;
99+
100+
&.live {
101+
background: $general-live-color;
102+
text-shadow: 0px 0px 6px #000000;
103+
}
104+
105+
&.next {
106+
background: $general-next-color;
107+
text-shadow: 0px 0px 6px #000000;
108+
}
109+
&.notext {
110+
background: $general-next-color;
111+
height: 2.2vh;
112+
margin-top: 8.7vh;
113+
text-shadow: 0px 0px 6px #000000;
114+
}
115+
.director-screen__body__segment__countdown {
116+
position: absolute;
117+
top: 0;
118+
right: 0px;
119+
height: 100%;
120+
width: 25vw;
121+
text-align: right;
122+
display: flex;
123+
justify-content: flex-end;
124+
align-items: center;
125+
padding-right: 30px;
126+
127+
font-size: 110px;
128+
color: $general-countdown-to-next-color;
129+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
130+
'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
131+
132+
background: linear-gradient(
133+
90deg,
134+
rgba(223, 0, 0, 0) 0%,
135+
#df000000 7.86%,
136+
rgba(116, 0, 0, 0.808) 16.21%,
137+
rgba(0, 0, 0, 0.8) 24.94%
138+
);
139+
.overtime {
140+
color: $general-fast-color;
141+
//text-shadow: 0px 0px 6px $general-fast-color--shadow;
142+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
143+
'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
144+
}
145+
}
146+
}
147+
148+
.director-screen__body__rundown-countdown {
149+
grid-row: 2 / -1;
150+
grid-column: 1 / -1;
151+
152+
text-align: center;
153+
display: flex;
154+
align-items: center;
155+
justify-content: center;
156+
157+
font-size: 12vw;
158+
}
159+
160+
.director-screen__body__part__piece-icon {
161+
grid-row: 2;
162+
grid-column: 1;
163+
padding: 0em;
164+
margin-left: 10px;
165+
margin-top: 1.4vh;
166+
167+
text-align: center;
168+
display: flex;
169+
align-items: top;
170+
justify-content: left;
171+
172+
> svg {
173+
flex-grow: 1;
174+
}
175+
}
176+
177+
.director-screen__body__part__piece-content {
178+
grid-row: 2;
179+
grid-column: 2;
180+
display: flex;
181+
flex-direction: column;
182+
text-align: left;
183+
width: 87vw;
184+
185+
.director-screen__body__part__piece-name {
186+
font-size: 13em;
187+
overflow: hidden;
188+
white-space: nowrap;
189+
padding-left: 0.2em;
190+
margin-top: 2.95vh;
191+
display: flex;
192+
align-items: top;
193+
}
194+
195+
.director-screen__body__part__piece-content {
196+
font-size: 13em;
197+
padding: 0 0.2em;
198+
line-height: 1em;
199+
margin-top: 10px;
200+
color: $general-countdown-to-next-color;
201+
}
202+
203+
/* Update next part styling if needed */
204+
.director-screen__body__part--next-part .director-screen__body__part__piece-content {
205+
grid-row: 2 / 4; /* Span both rows as in the original design */
206+
}
207+
208+
.director-screen__body__part__piece-countdown {
209+
grid-row: inherit;
210+
text-align: left;
211+
font-size: 25em;
212+
font-feature-settings: 'liga' off, 'tnum' on;
213+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
214+
'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
215+
padding: 0 0.1em;
216+
line-height: 1em;
217+
display: flex;
218+
align-items: center;
219+
220+
> .overtime {
221+
color: $general-late-color;
222+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
223+
'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
224+
}
225+
226+
.auto-next-status {
227+
font-size: 0.5em;
228+
margin-left: 0.2em;
229+
margin-top: -4vh;
230+
color: $general-next-color;
231+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
232+
'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' -20, 'wdth' 70, 'wght' 600;
233+
}
234+
235+
.freeze-counter {
236+
color: $general-freeze-color;
237+
margin-left: 4vw;
238+
display: flex;
239+
align-items: center;
240+
}
241+
242+
img.freeze-counter-icon {
243+
margin-top: -0.3em;
244+
width: 1em;
245+
height: 1em;
246+
vertical-align: middle;
247+
display: inline-block;
248+
}
249+
}
250+
}
251+
252+
.director-screen__body__part__part-countdown {
253+
text-align: right;
254+
255+
align-items: center;
256+
font-size: 13em;
257+
padding: 0 0.2em;
258+
line-height: 1em;
259+
260+
> span {
261+
font-size: 2em;
262+
font-size: #{'min(2em, 20vw)'};
263+
}
264+
}
265+
266+
.director-screen__body__part__piece-countdown,
267+
.director-screen__body__part__part-countdown {
268+
grid-column: 2;
269+
color: $general-countdown-to-next-color;
270+
}
271+
272+
&.director-screen__body__part--next-part {
273+
.director-screen__body__part__piece-icon,
274+
.director-screen__body__part__piece-name {
275+
grid-row: 2;
276+
}
277+
}
278+
279+
.director-screen__body__part__next-icon {
280+
clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
281+
// font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
282+
// 'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 3;
283+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
284+
'YTLC' 514, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 50, 'wght' 700;
285+
}
286+
.director-screen__body__part__auto-icon {
287+
border-radius: 0 25px 25px 0;
288+
// font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
289+
// 'YTLC' 548, 'YTUC' 712, 'slnt' -7, 'opsz' 3;
290+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
291+
'YTLC' 514, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 50, 'wght' 700;
292+
}
293+
.director-screen__body__part__next-icon,
294+
.director-screen__body__part__auto-icon {
295+
background-color: $general-next-color;
296+
justify-content: left;
297+
position: relative;
298+
grid-row: 1;
299+
grid-column: 1;
300+
margin-top: -50px;
301+
text-align: left;
302+
font-size: 2.2rem;
303+
font-weight: 900;
304+
color: #000;
305+
padding-top: 5px;
306+
padding-left: 8px;
307+
padding-right: 20px;
308+
width: fit-content;
309+
max-height: 50px;
310+
z-index: 1;
311+
font-stretch: 25;
312+
}
313+
.director-screen__body__part__next-icon--notext,
314+
.director-screen__body__part__auto-icon--notext {
315+
margin-top: 4.08vh !important; /* Override the default -50px when notext is true */
316+
}
317+
}
318+
319+
.clocks-segment-countdown-red {
320+
color: $general-late-color;
321+
}
322+
323+
.clocks-counter-heavy {
324+
font-weight: 600;
325+
}
326+
}
327+
}

0 commit comments

Comments
 (0)