Skip to content

Commit 12e4793

Browse files
olzzonolzzon
committed
Merge branch 'upstream/presenter-timing-part-segment-remaining' into bbc-release53
2 parents 5fb1e89 + 1da5770 commit 12e4793

File tree

11 files changed

+128
-54
lines changed

11 files changed

+128
-54
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/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/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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function CamInputIcon({
3232
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
3333
className="label"
3434
>
35-
{abbreviation ? abbreviation : 'C'}
35+
{abbreviation !== undefined ? abbreviation : 'C'}
3636
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>
3737
{inputIndex !== undefined ? inputIndex : ''}
3838
</tspan>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export function GraphicsInputIcon({ abbreviation }: { abbreviation?: string }):
2222
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
2323
className="label"
2424
>
25-
{abbreviation ? abbreviation : 'G'}
25+
{abbreviation !== undefined ? abbreviation : 'G'}
2626
</tspan>
2727
</text>
2828
</svg>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function LiveSpeakInputIcon({ abbreviation }: { abbreviation?: string }):
2727
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
2828
className="label"
2929
>
30-
{abbreviation ? abbreviation : 'LSK'}
30+
{abbreviation !== undefined ? abbreviation : 'LSK'}
3131
</tspan>
3232
</text>
3333
</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
}

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

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,17 @@ import React from 'react'
22

33
export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ className: string }>>): JSX.Element {
44
return (
5-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
5+
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
66
<rect width="126.5" height="89" className={props.className} />
77
<text
8-
x="5"
9-
y="66.514"
10-
textLength="116.5"
11-
lengthAdjust="spacing"
12-
style={{
13-
fill: '#ffffff',
14-
fontFamily: 'open-sans',
15-
fontSize: '40px',
16-
letterSpacing: '0px',
17-
lineHeight: '1.25',
18-
wordSpacing: '0px',
19-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
20-
}}
8+
x="63.25"
9+
y="71.513954"
10+
textAnchor="middle"
11+
textLength="126.5"
12+
className="piece-icon-text"
2113
xmlSpace="preserve"
2214
>
23-
<tspan
24-
x="5"
25-
y="66.514"
26-
textLength="116.5"
27-
lengthAdjust="spacing"
28-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
29-
className="label"
30-
>
15+
<tspan lengthAdjust="spacing" className="label">
3116
{props.children}
3217
</tspan>
3318
</text>
@@ -44,7 +29,7 @@ export function RemoteInputIcon({
4429
}): JSX.Element {
4530
return (
4631
<BaseRemoteInputIcon className="remote">
47-
{abbreviation ? abbreviation : 'LIVE'}
32+
{abbreviation !== undefined ? abbreviation : 'LIVE'}
4833
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>{inputIndex ?? ''}</tspan>
4934
</BaseRemoteInputIcon>
5035
)

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

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@ export default class SplitInputIcon extends React.Component<{
1717
const c = piece.content as SplitsContent
1818
const camera = c.boxSourceConfiguration.find((i) => i.type === SourceLayerType.CAMERA)
1919
if (camera && camera.studioLabel) {
20-
const label = camera.studioLabel.match(/([a-zA-Z]+)?(\d+)/)
20+
const label = camera.studioLabelShort || camera.studioLabel.match(/([a-zA-Z]+)?(\d+)/)
2121
return (
2222
<React.Fragment>
2323
{label && label[1] ? label[1].substr(0, 1).toUpperCase() + ' ' : ''}
2424
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>{label ? label[2] : ''}</tspan>
2525
</React.Fragment>
2626
)
2727
} else {
28-
return this.props.abbreviation ? this.props.abbreviation : 'Spl'
28+
return this.props.abbreviation !== undefined ? this.props.abbreviation : 'Spl'
2929
}
3030
} else {
31-
return this.props.abbreviation ? this.props.abbreviation : 'Spl'
31+
return this.props.abbreviation !== undefined ? this.props.abbreviation : 'Spl'
3232
}
3333
}
3434

@@ -54,7 +54,7 @@ export default class SplitInputIcon extends React.Component<{
5454
render(): JSX.Element {
5555
return (
5656
<svg
57-
className="piece_icon"
57+
className="piece-icon"
5858
version="1.1"
5959
viewBox="0 0 126.5 89"
6060
xmlns="http://www.w3.org/2000/svg"
@@ -69,29 +69,14 @@ export default class SplitInputIcon extends React.Component<{
6969
/>
7070
{!this.props.hideLabel && (
7171
<text
72-
x="9.6414976"
73-
textLength="106.5"
72+
x="63.25"
7473
y="71.513954"
7574
textAnchor="middle"
76-
style={{
77-
fill: '#ffffff',
78-
fontFamily: 'open-sans',
79-
fontSize: '40px',
80-
letterSpacing: '0px',
81-
lineHeight: '1.25',
82-
wordSpacing: '0px',
83-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
84-
}}
75+
textLength="126.5"
76+
className="piece-icon-text"
8577
xmlSpace="preserve"
86-
className="label"
8778
>
88-
<tspan
89-
x="63.25"
90-
y="71.513954"
91-
textLength="106.5"
92-
lengthAdjust="spacingAndGlyphs"
93-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
94-
>
79+
<tspan lengthAdjust="spacing" className="label">
9580
{this.getCameraLabel(this.props.piece)}
9681
</tspan>
9782
</text>

0 commit comments

Comments
 (0)