Skip to content

Commit 75e2a66

Browse files
jstarpljstarpl
committed
chore: merge bbc:upstream/presenter-timing-part-segment-remaining
2 parents f432efa + 1da5770 commit 75e2a66

File tree

14 files changed

+186
-161
lines changed

14 files changed

+186
-161
lines changed

‎packages/blueprints-integration/src/content.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,17 +73,20 @@ export interface GraphicsContent extends BaseContent {
7373

7474
export interface CameraContent extends BaseContent {
7575
studioLabel: string
76+
studioLabelShort?: string
7677
switcherInput: number | string
7778
}
7879

7980
export interface RemoteContent extends BaseContent {
8081
studioLabel: string
82+
studioLabelShort?: string
8183
switcherInput: number | string
8284
}
8385

8486
/** Content description for the EVS variant of a LOCAL source */
8587
export interface EvsContent extends BaseContent {
8688
studioLabel: string
89+
studioLabelShort?: string
8790
/** Switcher input for the EVS channel */
8891
switcherInput: number | string
8992
/** Name of the EVS channel as used in the studio */
@@ -161,6 +164,7 @@ export interface NoraContent extends BaseContent {
161164
export interface SplitsContentBoxProperties {
162165
type: SourceLayerType
163166
studioLabel: string
167+
studioLabelShort?: string
164168
switcherInput: number | string
165169
/** Geometry information for a given box item in the Split. X,Y are relative to center of Box, Scale is 0...1, where 1 is Full-Screen */
166170
geometry?: {

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,10 @@ $hold-status-color: $liveline-timecode-color;
118118
padding: 0 0.2em;
119119
line-height: 1em;
120120

121+
> .overtime {
122+
color: $general-late-color;
123+
}
124+
121125
> img.freeze-icon {
122126
width: 0.9em;
123127
height: 0.9em;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ input {
100100
@import '../ui/SegmentList/LinePartTransitionPiece/LinePartTransitionPiece.scss';
101101
@import '../ui/SegmentList/LinePartSecondaryPiece/LinePartSecondaryPiece.scss';
102102
@import '../ui/PieceIcons/IconColors.scss';
103+
@import '../ui/PieceIcons/PieceIcons';
103104
@import '../ui/ClockView/CameraScreen/CameraScreen.scss';
104105
@import '../ui/RundownView/MediaStatusPopUp/MediaStatusPopUpItem.scss';
105106
@import '../ui/RundownView/MediaStatusPopUp/MediaStatusPopUp.scss';

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { PieceIconContainer } from '../PieceIcons/PieceIcon'
1313
import { PieceNameContainer } from '../PieceIcons/PieceName'
1414
import { Timediff } from './Timediff'
1515
import { RundownUtils } from '../../lib/rundown'
16-
import { PieceLifespan } from '@sofie-automation/blueprints-integration'
16+
import { CountdownType, PieceLifespan } from '@sofie-automation/blueprints-integration'
1717
import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
1818
import { PieceCountdownContainer } from '../PieceIcons/PieceCountdown'
1919
import { PlaylistTiming } from '@sofie-automation/corelib/dist/playout/rundownTiming'
@@ -41,6 +41,7 @@ import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
4141
import { useSetDocumentClass } from '../util/useSetDocumentClass'
4242
import { useRundownAndShowStyleIdsForPlaylist } from '../util/useRundownAndShowStyleIdsForPlaylist'
4343
import { RundownPlaylistClientUtil } from '../../lib/rundownPlaylistUtil'
44+
import { CurrentPartOrSegmentRemaining } from '../RundownView/RundownTiming/CurrentPartOrSegmentRemaining'
4445

4546
interface SegmentUi extends DBSegment {
4647
items: Array<PartUi>
@@ -460,17 +461,24 @@ function PresenterScreenContentDefaultLayout({
460461
/>
461462
</div>
462463
<div className="presenter-screen__part__piece-countdown">
463-
<PieceCountdownContainer
464-
partInstanceId={currentPartInstance.instance._id}
465-
showStyleBaseId={currentShowStyleBaseId}
466-
rundownIds={rundownIds}
467-
partAutoNext={currentPartInstance.instance.part.autoNext || false}
468-
partExpectedDuration={calculatePartInstanceExpectedDurationWithTransition(
469-
currentPartInstance.instance
470-
)}
471-
partStartedPlayback={currentPartInstance.instance.timings?.plannedStartedPlayback}
472-
playlistActivationId={playlist?.activationId}
473-
/>
464+
{currentSegment?.segmentTiming?.countdownType === CountdownType.SEGMENT_BUDGET_DURATION ? (
465+
<CurrentPartOrSegmentRemaining
466+
currentPartInstanceId={currentPartInstance.instance._id}
467+
heavyClassName="overtime"
468+
/>
469+
) : (
470+
<PieceCountdownContainer
471+
partInstanceId={currentPartInstance.instance._id}
472+
showStyleBaseId={currentShowStyleBaseId}
473+
rundownIds={rundownIds}
474+
partAutoNext={currentPartInstance.instance.part.autoNext || false}
475+
partExpectedDuration={calculatePartInstanceExpectedDurationWithTransition(
476+
currentPartInstance.instance
477+
)}
478+
partStartedPlayback={currentPartInstance.instance.timings?.plannedStartedPlayback}
479+
playlistActivationId={playlist?.activationId}
480+
/>
481+
)}
474482
</div>
475483
<div className="presenter-screen__part__part-countdown">
476484
<Timediff time={currentPartOrSegmentCountdown} />

‎packages/webui/src/client/ui/PieceIcons/PieceIcon.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const PieceIcon = (props: {
5050
const rmContent = piece ? (piece.content as RemoteContent | undefined) : undefined
5151
return (
5252
<RemoteInputIcon
53-
inputIndex={rmContent ? rmContent.studioLabel : undefined}
53+
inputIndex={rmContent ? rmContent.studioLabelShort || rmContent.studioLabel : undefined}
5454
abbreviation={props.sourceLayer.abbreviation}
5555
/>
5656
)
@@ -62,7 +62,7 @@ export const PieceIcon = (props: {
6262
const localContent = piece ? (piece.content as EvsContent | undefined) : undefined
6363
return (
6464
<LocalInputIcon
65-
inputIndex={localContent ? localContent.studioLabel : undefined}
65+
inputIndex={localContent ? localContent.studioLabelShort || localContent.studioLabel : undefined}
6666
abbreviation={props.sourceLayer.abbreviation}
6767
/>
6868
)
@@ -75,7 +75,7 @@ export const PieceIcon = (props: {
7575
const camContent = piece ? (piece.content as CameraContent | undefined) : undefined
7676
return (
7777
<CamInputIcon
78-
inputIndex={camContent ? camContent.studioLabel : undefined}
78+
inputIndex={camContent ? camContent.studioLabelShort || camContent.studioLabel : undefined}
7979
abbreviation={props.sourceLayer.abbreviation}
8080
/>
8181
)

‎packages/webui/src/client/ui/PieceIcons/PieceIcons.scss‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
// Variables
2+
$text-color: #ffffff;
3+
$font-size-base: 70px;
4+
$text-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
5+
$letter-spacing: 0.02em;
6+
7+
// Base icon styles
8+
.piece-icon {
9+
.camera {
10+
@include item-type-colors-svg();
11+
rx: 4;
12+
ry: 4;
13+
}
14+
15+
.live-speak {
16+
fill: url(#background-gradient);
17+
rx: 4;
18+
ry: 4;
19+
}
20+
21+
22+
.graphics {
23+
@include item-type-colors-svg();
24+
rx: 4;
25+
ry: 4;
26+
}
27+
28+
.local {
29+
@include item-type-colors-svg();
30+
rx: 4;
31+
ry: 4;
32+
}
33+
34+
.remote {
35+
@include item-type-colors-svg();
36+
rx: 4;
37+
ry: 4;
38+
}
39+
40+
.vt {
41+
@include item-type-colors-svg();
42+
rx: 4;
43+
ry: 4;
44+
}
45+
46+
.unknown {
47+
@include item-type-colors-svg();
48+
rx: 4;
49+
ry: 4;
50+
}
51+
52+
// Gradient styles for live-speak
53+
#background-gradient {
54+
.stop1 {
55+
stop-color: #954c4c;
56+
}
57+
.stop2 {
58+
stop-color: #4c954c;
59+
}
60+
}
61+
62+
// Split view specific styles
63+
.upper, .lower {
64+
rx: 4;
65+
ry: 4;
66+
67+
&.camera {
68+
@include item-type-colors-svg();
69+
}
70+
&.remote {
71+
@include item-type-colors-svg();
72+
}
73+
&.remote.second {
74+
@include item-type-colors-svg();
75+
}
76+
}
77+
78+
// Common text styles
79+
.piece-icon-text {
80+
fill: $text-color;
81+
font-family: Roboto Condensed, Roboto, sans-serif;
82+
font-size: 40px;
83+
84+
filter: drop-shadow($text-shadow);
85+
86+
.label {
87+
fill: $text-color;
88+
font-family: Roboto Condensed, Roboto, sans-serif;
89+
font-size: $font-size-base;
90+
font-weight: 300;
91+
letter-spacing: $letter-spacing;
92+
}
93+
}
94+
}

‎packages/webui/src/client/ui/PieceIcons/Renderers/CamInputIcon.tsx‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,19 @@ export function CamInputIcon({
77
abbreviation?: string
88
}): JSX.Element {
99
return (
10-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
10+
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
1111
<rect width="126.5" height="89" className="camera" />
1212
<text
13-
x="9.6414976"
14-
textLength="106.5"
13+
x="63.25"
1514
y="71.513954"
16-
style={{
17-
fill: '#ffffff',
18-
fontFamily: 'open-sans',
19-
fontSize: '40px',
20-
letterSpacing: '0px',
21-
lineHeight: '1.25',
22-
wordSpacing: '0px',
23-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
24-
}}
15+
textAnchor="middle"
16+
textLength="126.5"
17+
className="piece-icon-text"
2518
xmlSpace="preserve"
2619
>
27-
<tspan
28-
x="9.6414976"
29-
y="71.513954"
30-
textLength="107.21"
31-
lengthAdjust="spacing"
32-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
33-
className="label"
34-
>
35-
{abbreviation ? abbreviation : 'C'}
36-
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>
37-
{inputIndex !== undefined ? inputIndex : ''}
38-
</tspan>
20+
<tspan lengthAdjust="spacing" className="label">
21+
{abbreviation !== undefined ? abbreviation : 'C'}
22+
<tspan>{inputIndex !== undefined ? inputIndex : ''}</tspan>
3923
</tspan>
4024
</text>
4125
</svg>

‎packages/webui/src/client/ui/PieceIcons/Renderers/GraphicsInputIcon.tsx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,17 @@
11
export function GraphicsInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
3-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
3+
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
44
<rect width="126.5" height="89" className="graphics" />
55
<text
6-
x="37.5"
6+
x="63.25"
77
y="71.513954"
8-
style={{
9-
fill: '#ffffff',
10-
fontFamily: 'open-sans',
11-
fontSize: '40px',
12-
letterSpacing: '0px',
13-
lineHeight: '1.25',
14-
wordSpacing: '0px',
15-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
16-
}}
8+
textAnchor="middle"
9+
textLength="126.5"
10+
className="piece-icon-text"
1711
xmlSpace="preserve"
1812
>
19-
<tspan
20-
x="37.5"
21-
y="71.513954"
22-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
23-
className="label"
24-
>
25-
{abbreviation ? abbreviation : 'G'}
13+
<tspan lengthAdjust="spacing" className="label">
14+
{abbreviation !== undefined ? abbreviation : 'G'}
2615
</tspan>
2716
</text>
2817
</svg>

‎packages/webui/src/client/ui/PieceIcons/Renderers/LiveSpeakInputIcon.tsx‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,21 @@
11
export function LiveSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
3-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4-
<rect width="126.5" height="89" className="live-speak" />
3+
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
54
<linearGradient id="background-gradient" gradientTransform="rotate(90)">
65
<stop className="stop1" offset={0.5} />
76
<stop className="stop2" offset={0.5} />
87
</linearGradient>
8+
<rect width="126.5" height="89" className="live-speak" />
99
<text
10-
x="5"
11-
y="66.514"
12-
textLength="116.5"
13-
style={{
14-
fill: '#ffffff',
15-
fontFamily: 'open-sans',
16-
fontSize: '40px',
17-
letterSpacing: '0px',
18-
lineHeight: '1.25',
19-
wordSpacing: '0px',
20-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
21-
}}
10+
x="63.25"
11+
y="71.513954"
12+
textAnchor="middle"
13+
textLength="126.5"
14+
className="piece-icon-text"
2215
xmlSpace="preserve"
2316
>
24-
<tspan
25-
x="5"
26-
y="66.514"
27-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
28-
className="label"
29-
>
30-
{abbreviation ? abbreviation : 'LSK'}
17+
<tspan lengthAdjust="spacing" className="label">
18+
{abbreviation !== undefined ? abbreviation : 'LSK'}
3119
</tspan>
3220
</text>
3321
</svg>

‎packages/webui/src/client/ui/PieceIcons/Renderers/LocalInputIcon.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { BaseRemoteInputIcon } from './RemoteInputIcon'
22

33
export default function LocalInputIcon(props: Readonly<{ inputIndex?: string; abbreviation?: string }>): JSX.Element {
4-
return <BaseRemoteInputIcon className="local">{props.abbreviation ? props.abbreviation : 'EVS'}</BaseRemoteInputIcon>
4+
return (
5+
<BaseRemoteInputIcon className="local">
6+
{props.abbreviation !== undefined ? props.abbreviation : 'EVS'}
7+
<tspan>{props.inputIndex ?? ''}</tspan>
8+
</BaseRemoteInputIcon>
9+
)
510
}

0 commit comments

Comments
 (0)