Skip to content

Commit 8a83cf0

Browse files
olzzonolzzon
committed
Feat: director screen initial commit
1 parent 1da5770 commit 8a83cf0

File tree

4 files changed

+831
-0
lines changed

4 files changed

+831
-0
lines changed

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

Lines changed: 347 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,347 @@
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+
position: fixed;
18+
top: 0;
19+
bottom: 0;
20+
left: 0;
21+
right: 0;
22+
23+
font-size: 0.4vh;
24+
25+
display: grid;
26+
grid-template: 4fr 3fr fit-content(1em) / auto;
27+
28+
overflow: hidden;
29+
white-space: nowrap;
30+
31+
.director-screen__part {
32+
display: grid;
33+
grid-template:
34+
10em
35+
4fr
36+
6fr / 13vw auto; // allow a fallback for CasparCG
37+
grid-template:
38+
10em
39+
4fr
40+
6fr / #{'min(13vw, 27vh)'} auto;
41+
42+
.director-screen__segment-name {
43+
grid-row: 1;
44+
grid-column: 1 / -1;
45+
text-align: center;
46+
font-size: 8em;
47+
font-weight: bold;
48+
49+
&.live {
50+
background: $general-live-color;
51+
color: #fff;
52+
border-top: 0.1em solid #fff;
53+
-webkit-text-stroke: black;
54+
-webkit-text-stroke-width: 0.025em;
55+
text-shadow: 0px 0px 20px #00000044;
56+
}
57+
58+
&.next {
59+
background: $general-next-color;
60+
color: #000;
61+
border-top: 0.1em solid #fff;
62+
}
63+
}
64+
65+
.director-screen__rundown-countdown {
66+
grid-row: 2 / -1;
67+
grid-column: 1 / -1;
68+
69+
text-align: center;
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
74+
font-size: 12vw;
75+
}
76+
77+
.director-screen__part__piece-icon {
78+
grid-row: 2;
79+
grid-column: 1;
80+
padding: 0em;
81+
82+
text-align: center;
83+
display: flex;
84+
align-items: center;
85+
justify-content: center;
86+
87+
> svg {
88+
flex-grow: 1;
89+
}
90+
}
91+
92+
.director-screen__part__piece-name {
93+
grid-row: 2;
94+
grid-column: 2;
95+
text-align: left;
96+
font-size: 13em;
97+
overflow: hidden;
98+
white-space: nowrap;
99+
padding-left: 0.2em;
100+
101+
display: flex;
102+
align-items: center;
103+
104+
.director-screen__part__auto-next-icon {
105+
display: block;
106+
min-width: 1em;
107+
max-width: 1em;
108+
}
109+
}
110+
111+
.director-screen__part__piece-countdown {
112+
text-align: left;
113+
114+
display: flex;
115+
align-items: center;
116+
font-size: 13em; // Allow a fallback for CasparCG
117+
font-size: #{'min(13em, 8vw)'};
118+
padding: 0 0.2em;
119+
line-height: 1em;
120+
121+
> .overtime {
122+
color: $general-late-color;
123+
}
124+
125+
> img.freeze-icon {
126+
width: 0.9em;
127+
height: 0.9em;
128+
margin-left: -0.05em;
129+
margin-top: -0.05em;
130+
}
131+
}
132+
133+
.director-screen__part__part-countdown {
134+
text-align: right;
135+
136+
display: flex;
137+
align-items: center;
138+
justify-content: flex-end;
139+
font-size: 13em;
140+
padding: 0 0.2em;
141+
line-height: 1em;
142+
143+
> span {
144+
font-size: 2em; // Allow a fallback for CasparCG
145+
font-size: #{'min(2em, 20vw)'};
146+
}
147+
}
148+
149+
.director-screen__part__piece-countdown,
150+
.director-screen__part__part-countdown {
151+
grid-row: 3;
152+
grid-column: 2;
153+
color: $general-countdown-to-next-color;
154+
}
155+
156+
&.director-screen__part--next-part {
157+
.director-screen__part__piece-icon,
158+
.director-screen__part__piece-name {
159+
grid-row: 2 / -1;
160+
}
161+
}
162+
}
163+
164+
.director-screen__rundown-status-bar {
165+
display: grid;
166+
grid-template-columns: auto fit-content(5em);
167+
grid-template-rows: fit-content(1em);
168+
font-size: 6em;
169+
color: #888;
170+
padding: 0 0.2em;
171+
172+
.director-screen__rundown-status-bar__rundown-name {
173+
overflow: hidden;
174+
white-space: nowrap;
175+
text-overflow: ellipsis;
176+
line-height: 1.44em;
177+
}
178+
179+
.director-screen__rundown-status-bar__countdown {
180+
white-space: nowrap;
181+
182+
color: $general-countdown-to-next-color;
183+
184+
font-weight: 600;
185+
font-size: 1.2em;
186+
187+
&.over {
188+
color: $general-late-color;
189+
}
190+
}
191+
}
192+
193+
.director-screen__part + .director-screen__part {
194+
border-top: solid 0.8em #454545;
195+
}
196+
197+
.clocks-segment-countdown-red {
198+
color: $general-late-color;
199+
}
200+
201+
.clocks-counter-heavy {
202+
font-weight: 600;
203+
}
204+
205+
.dashboard {
206+
.timing {
207+
margin: 0 0;
208+
min-width: auto;
209+
width: 100%;
210+
text-align: center;
211+
212+
.timing-clock {
213+
position: relative;
214+
margin-right: 1em;
215+
font-weight: 100;
216+
color: $general-clock;
217+
font-size: 1.5em;
218+
margin-top: 0.8em;
219+
word-break: keep-all;
220+
white-space: nowrap;
221+
222+
&.visual-last-child {
223+
margin-right: 0;
224+
}
225+
226+
&.countdown {
227+
font-weight: 400;
228+
}
229+
230+
&.playback-started {
231+
display: inline-block;
232+
width: 25%;
233+
}
234+
235+
&.left {
236+
text-align: left;
237+
}
238+
239+
&.time-now {
240+
position: absolute;
241+
top: 0.05em;
242+
left: 50%;
243+
transform: translateX(-50%);
244+
margin-top: 0px;
245+
margin-right: 0;
246+
font-size: 2.3em;
247+
font-weight: 100;
248+
text-align: center;
249+
}
250+
251+
&.current-remaining {
252+
position: absolute;
253+
left: calc(50% + 3.5em);
254+
text-align: left;
255+
color: $liveline-timecode-color;
256+
font-weight: 500;
257+
258+
.overtime {
259+
color: $general-fast-color;
260+
text-shadow: 0px 0px 6px $general-fast-color--shadow;
261+
}
262+
}
263+
264+
.timing-clock-label {
265+
position: absolute;
266+
top: -1em;
267+
color: #b8b8b8;
268+
text-transform: uppercase;
269+
white-space: nowrap;
270+
font-weight: 300;
271+
font-size: 0.5em;
272+
273+
&.left {
274+
left: 0;
275+
right: auto;
276+
text-align: left;
277+
}
278+
279+
&.right {
280+
right: 0;
281+
left: auto;
282+
text-align: right;
283+
}
284+
285+
&.hide-overflow {
286+
overflow: hidden;
287+
text-overflow: ellipsis;
288+
width: 100%;
289+
}
290+
291+
&.rundown-name {
292+
width: auto;
293+
max-width: calc(40vw - 138px);
294+
min-width: 100%;
295+
296+
> strong {
297+
margin-right: 0.4em;
298+
}
299+
300+
> svg.icon.looping {
301+
width: 1.4em;
302+
height: 1.4em;
303+
}
304+
}
305+
}
306+
307+
&.heavy-light {
308+
font-weight: 600;
309+
310+
&.heavy {
311+
// color: $general-late-color;
312+
color: #ffe900;
313+
background: none;
314+
}
315+
316+
&.light {
317+
color: $general-fast-color;
318+
text-shadow: 0px 0px 6px $general-fast-color--shadow;
319+
background: none;
320+
}
321+
}
322+
}
323+
324+
.rundown__header-status {
325+
position: absolute;
326+
font-size: 0.7rem;
327+
text-transform: uppercase;
328+
background: #fff;
329+
border-radius: 1rem;
330+
line-height: 1em;
331+
font-weight: 700;
332+
color: #000;
333+
top: 2.4em;
334+
left: 0;
335+
padding: 2px 5px 1px;
336+
337+
&.rundown__header-status--hold {
338+
background: $hold-status-color;
339+
}
340+
}
341+
342+
.timing-clock-header-label {
343+
font-weight: 100px;
344+
}
345+
}
346+
}
347+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ input {
4646

4747
@import 'countdown/overlay';
4848
@import 'countdown/presenter';
49+
@import 'countdown/director';
4950

5051
@import 'customizations/nrk/shelf/taPanel';
5152

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { RundownTimingProvider } from '../RundownView/RundownTiming/RundownTimin
55

66
import { StudioScreenSaver } from '../StudioScreenSaver/StudioScreenSaver'
77
import { PresenterScreen } from './PresenterScreen'
8+
import { DirectorScreen } from './DirectorScreen'
89
import { OverlayScreen } from './OverlayScreen'
910
import { OverlayScreenSaver } from './OverlayScreenSaver'
1011
import { RundownPlaylists } from '../../collections'
@@ -35,6 +36,15 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
3536
<StudioScreenSaver studioId={studioId} ownBackground={true} />
3637
)}
3738
</Route>
39+
<Route path="/countdowns/:studioId/director">
40+
{playlist ? (
41+
<RundownTimingProvider playlist={playlist}>
42+
<DirectorScreen playlistId={playlist._id} studioId={studioId} />
43+
</RundownTimingProvider>
44+
) : (
45+
<StudioScreenSaver studioId={studioId} ownBackground={true} />
46+
)}
47+
</Route>
3848
<Route path="/countdowns/:studioId/overlay">
3949
{playlist ? (
4050
<RundownTimingProvider playlist={playlist}>

0 commit comments

Comments
 (0)