Skip to content

Commit 83f5032

Browse files
olzzonolzzon
committed
Merge branch 'upstream/feat/additional-layinfo-on-hover' into bbc-release53
2 parents 6b778ca + 6fece09 commit 83f5032

File tree

8 files changed

+290
-72
lines changed

8 files changed

+290
-72
lines changed

‎meteor/server/publications/pieceContentStatusUI/checkPieceContentStatus.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ export async function checkPieceContentStatusAndDependencies(
240240
blacks: [],
241241
scenes: [],
242242

243-
thumbnailUrl: undefined,
243+
thumbnailUrl: '/dev/fakeThumbnail.png',
244244
previewUrl: '/dev/fakePreview.mp4',
245245

246246
packageName: null,

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

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
import { SplitsContentBoxContent, SplitsContentBoxProperties } from './content.js'
1+
import { SourceLayerType, SplitsContentBoxContent, SplitsContentBoxProperties } from './content.js'
22
import { NoteSeverity } from './lib.js'
33
import { ITranslatableMessage } from './translations.js'
44

55
export interface PopupPreview<P extends Previews = Previews> {
66
name?: string
77
preview?: P
88
warnings?: InvalidPreview[]
9+
/**
10+
* Add custom content preview content
11+
*/
12+
additionalPreviewContent?: Array<PreviewContent>
913
}
1014
export type Previews = TablePreview | ScriptPreview | HTMLPreview | SplitPreview | VTPreview | BlueprintImagePreview
1115

@@ -19,6 +23,55 @@ export enum PreviewType {
1923
BlueprintImage = 'blueprintImage',
2024
}
2125

26+
// The PreviewContent types are a partly replica of the types in PreviewPopUpContext.tsx
27+
export type PreviewContent =
28+
| {
29+
type: 'iframe'
30+
href: string
31+
postMessage?: any
32+
dimensions?: { width: number; height: number }
33+
}
34+
| {
35+
type: 'image'
36+
src: string
37+
}
38+
| {
39+
type: 'video'
40+
src: string
41+
}
42+
| {
43+
type: 'script'
44+
script?: string
45+
firstWords?: string
46+
lastWords?: string
47+
comment?: string
48+
lastModified?: number
49+
}
50+
| {
51+
type: 'title'
52+
content: string
53+
}
54+
| {
55+
type: 'inOutWords'
56+
in?: string
57+
out: string
58+
}
59+
| {
60+
type: 'layerInfo'
61+
layerType: SourceLayerType
62+
text: Array<string>
63+
inTime?: number | string
64+
outTime?: number | string
65+
duration?: number | string
66+
}
67+
| {
68+
type: 'separationLine'
69+
}
70+
| {
71+
type: 'data'
72+
content: { key: string; value: string }[]
73+
}
74+
2275
interface PreviewBase {
2376
type: PreviewType
2477
}

‎packages/webui/public/dev/fakeThumbnail.png‎

1.13 MB
Loading

‎packages/webui/src/client/styles/shelf/dashboard-rundownView.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
}
1212

1313
.dashboard-panel__panel__button {
14+
margin-top: 10px;
15+
height: 110px;
16+
max-width: 170px !important;
1417
> .dashboard-panel__panel__button__content {
1518
display: grid;
1619
grid-template-columns: 1fr min-content;
@@ -31,7 +34,7 @@
3134

3235
> .dashboard-panel__panel__button__thumbnail {
3336
position: relative;
34-
height: auto;
37+
height: 85px;
3538
z-index: 1;
3639
overflow: hidden;
3740
grid-column: auto / span 2;

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

Lines changed: 145 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@
33
.preview-popUp {
44
border: 1px solid var(--sofie-segment-layer-hover-popup-border);
55
background: var(--sofie-segment-layer-hover-popup-background);
6-
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
6+
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8);
77
border-radius: 5px;
88
overflow: hidden;
99
pointer-events: none;
1010

11-
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
12-
1311
z-index: 9999;
1412

1513
&--large {
1614
width: 482px;
15+
padding-bottom: 10px;
1716
--preview-max-dimension: 480;
1817
}
1918

@@ -25,18 +24,65 @@
2524
&--hidden {
2625
visibility: none;
2726
}
27+
28+
font-family: Roboto Flex;
29+
30+
font-style: normal;
31+
font-weight: 500;
32+
font-size: 16px;
33+
line-height: 110%;
34+
/* identical to box height, or 15px */
35+
letter-spacing: 0.02em;
36+
font-feature-settings:
37+
'tnum',
38+
'liga' off;
39+
color: #ffffff;
40+
font-variation-settings:
41+
'GRAD' 0,
42+
'opsz' 15,
43+
'slnt' 0,
44+
'wdth' 30,
45+
'XOPQ' 96,
46+
'XTRA' 468,
47+
'YOPQ' 79,
48+
'YTAS' 750,
49+
'YTDE' -203,
50+
'YTFI' 738,
51+
'YTLC' 548,
52+
'YTUC' 712;
2853
}
2954

3055
.preview-popUp__preview {
3156
width: 100%;
32-
font-family: 'Roboto Condensed';
33-
font-size: 0.9375rem; // 15px;
3457

3558
.preview-popUp__script,
3659
.preview-popUp__script-comment,
3760
.preview-popUp__script-last-modified {
38-
padding: 0.4em 0.4em 0.4em 0.6em;
39-
font-style: italic;
61+
padding: 5px;
62+
padding-left: 2%;
63+
padding-right: 2%;
64+
font-weight: 300;
65+
font-size: 16px;
66+
line-height: 120%;
67+
letter-spacing: 0.03em;
68+
font-feature-settings:
69+
'tnum',
70+
'liga' off;
71+
72+
color: #ffffff;
73+
font-variation-settings:
74+
'GRAD' 0,
75+
'opsz' 16,
76+
'slnt' -10,
77+
'wdth' 75,
78+
'XOPQ' 96,
79+
'XTRA' 468,
80+
'YOPQ' 79,
81+
'YTAS' 750,
82+
'YTDE' -203,
83+
'YTFI' 738,
84+
'YTLC' 548,
85+
'YTUC' 712;
4086
}
4187

4288
.preview-popUp__script-comment,
@@ -54,6 +100,72 @@
54100
letter-spacing: 0.02rem;
55101

56102
padding: 5px;
103+
padding-left: 2%;
104+
}
105+
106+
.preview-popUp__element-with-time-info {
107+
width: 100%;
108+
display: flex;
109+
110+
margin-bottom: 7px;
111+
112+
.preview-popUp__element-with-time-info__layer-color {
113+
height: 13px;
114+
aspect-ratio: 1;
115+
margin-left: 2%;
116+
margin-top: 7px;
117+
flex-shrink: 0;
118+
@include item-type-colors();
119+
}
120+
121+
.preview-popUp__element-with-time-info__text {
122+
margin: 5px;
123+
width: calc(100% - 35px);
124+
flex-grow: 1;
125+
}
126+
127+
.preview-popUp__element-with-time-info__timing {
128+
margin-left: 5px;
129+
overflow: none;
130+
white-space: nowrap;
131+
text-overflow: ellipsis;
132+
font-feature-settings: 'liga' off;
133+
134+
font-weight: 500;
135+
line-height: 100%; /* 15px */
136+
137+
.label {
138+
font-weight: 100;
139+
line-height: 100%;
140+
/* identical to box height, or 15px */
141+
letter-spacing: 0.02em;
142+
font-feature-settings:
143+
'tnum',
144+
'liga' off;
145+
color: #b2b2b2;
146+
font-variation-settings:
147+
'GRAD' 0,
148+
'opsz' 30,
149+
'slnt' 0,
150+
'wdth' 25,
151+
'XOPQ' 96,
152+
'XTRA' 468,
153+
'YOPQ' 79,
154+
'YTAS' 750,
155+
'YTDE' -203,
156+
'YTFI' 738,
157+
'YTLC' 548,
158+
'YTUC' 712;
159+
}
160+
}
161+
}
162+
163+
.preview-popup__separation-line {
164+
width: 96%;
165+
margin-left: 2%;
166+
background-color: #5b5b5b;
167+
margin-top: 0px;
168+
margin-bottom: 0px;
57169
}
58170

59171
.preview-popUp__warning {
@@ -174,21 +286,42 @@
174286
}
175287

176288
.preview-popUp__in-out-words {
177-
letter-spacing: 0em;
289+
font-weight: 300;
290+
font-size: 16px;
291+
line-height: 100%;
292+
letter-spacing: 0.02em;
293+
font-feature-settings:
294+
'tnum',
295+
'liga' off;
296+
color: #ffffff;
297+
font-variation-settings:
298+
'GRAD' 0,
299+
'opsz' 16,
300+
'slnt' -10,
301+
'wdth' 75,
302+
'XOPQ' 96,
303+
'XTRA' 468,
304+
'YOPQ' 79,
305+
'YTAS' 750,
306+
'YTDE' -203,
307+
'YTFI' 738,
308+
'YTLC' 548,
309+
'YTUC' 712;
178310

179311
width: 100%;
180312
overflow: hidden;
181313
text-overflow: clip;
182314
white-space: nowrap;
183315

184-
margin-top: -25px; //Pull up the in/out words a bit
185-
padding: 7px;
316+
padding: 5px;
317+
padding-left: 2%;
318+
padding-right: 2%;
186319

187320
.separation-line {
188321
width: 100%;
189322
height: 1px;
190323
background-color: #5b5b5b;
191-
margin-bottom: 5px;
324+
margin-bottom: 7px;
192325
}
193326

194327
.in-words,
@@ -201,7 +334,7 @@
201334
}
202335

203336
.out-words {
204-
direction: rtl;
337+
text-align: right;
205338
}
206339
}
207340

‎packages/webui/src/client/ui/PreviewPopUp/PreviewPopUpContent.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react'
2-
import { PreviewContent } from './PreviewPopUpContext.js'
32
import { WarningIconSmall } from '../../lib/ui/icons/notifications.js'
43
import { translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
54
import { TFunction, useTranslation } from 'react-i18next'
@@ -11,9 +10,11 @@ import { RundownUtils } from '../../lib/rundown.js'
1110
import { PieceInstancePiece } from '@sofie-automation/corelib/dist/dataModel/PieceInstance'
1211
import { ReadonlyObjectDeep } from 'type-fest/source/readonly-deep'
1312
import { PieceLifespan } from '@sofie-automation/blueprints-integration'
13+
import { LayerInfoPreview } from './Previews/LayerInfoPreview.js'
14+
import { PreviewContentUI } from './PreviewPopUpContext.js'
1415

1516
interface PreviewPopUpContentProps {
16-
content: PreviewContent
17+
content: PreviewContentUI
1718
time: number | null
1819
}
1920

@@ -38,7 +39,6 @@ export function PreviewPopUpContent({ content, time }: PreviewPopUpContentProps)
3839
case 'inOutWords':
3940
return (
4041
<div className="preview-popUp__in-out-words">
41-
<hr className="separation-line" />
4242
<div className="in-words">{content.in}</div>
4343
<div className="out-words">{content.out}</div>
4444
</div>
@@ -59,6 +59,10 @@ export function PreviewPopUpContent({ content, time }: PreviewPopUpContentProps)
5959
</table>
6060
</div>
6161
)
62+
case 'layerInfo':
63+
return <LayerInfoPreview {...content} />
64+
case 'separationLine':
65+
return <hr className="preview-popup__separation-line" />
6266
case 'boxLayout':
6367
return <BoxLayoutPreview content={content} />
6468
case 'warning':
@@ -108,17 +112,17 @@ function getDurationText(
108112
function getLifeSpanText(t: TFunction, lifespan: PieceLifespan): string {
109113
switch (lifespan) {
110114
case PieceLifespan.WithinPart:
111-
return t('Until next take')
115+
return t('Until Next Take')
112116
case PieceLifespan.OutOnSegmentChange:
113-
return t('Until next segment')
117+
return t('Until Next Segment')
114118
case PieceLifespan.OutOnSegmentEnd:
115-
return t('Until end of segment')
119+
return t('Until End of Segment')
116120
case PieceLifespan.OutOnRundownChange:
117-
return t('Until next rundown')
121+
return t('Until Next Rundown')
118122
case PieceLifespan.OutOnRundownEnd:
119-
return t('Until end of rundown')
123+
return t('Until End of Rundown')
120124
case PieceLifespan.OutOnShowStyleEnd:
121-
return t('Until end of showstyle')
125+
return t('Until End of Showstyle')
122126
default:
123127
return ''
124128
}

0 commit comments

Comments
 (0)