Skip to content

Commit 0b94816

Browse files
author
Mint de Wit
committed
chore: wip
1 parent fd23e9c commit 0b94816

File tree

11 files changed

+758
-112
lines changed

11 files changed

+758
-112
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { JSONBlob } from '@sofie-automation/shared-lib/dist/lib/JSONBlob'
22
import { Time } from './common'
33
import { TSR, TimelineObjectCoreExt } from './timeline'
44
import { SourceLayerType } from '@sofie-automation/shared-lib/dist/core/model/ShowStyle'
5+
import { Previews } from './previews'
56

67
export type WithTimeline<T extends BaseContent> = T & {
78
timelineObjects: TimelineObjectCoreExt<TSR.TSRTimelineContent>[]
@@ -19,6 +20,10 @@ export interface BaseContent {
1920
ignoreBlackFrames?: boolean
2021
ignoreFreezeFrame?: boolean
2122
ignoreAudioFormat?: boolean
23+
24+
popUpPreview?: Previews
25+
// note - should we allow multiple previews?
26+
// note - what properties can be removed from the main content object now?
2227
}
2328

2429
// eslint-disable-next-line @typescript-eslint/no-empty-interface

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export * from './util'
2121
export * from './translations'
2222
export * from './triggers'
2323
export * from './userEditing'
24+
export * from './previews'
2425

2526
export { MOS } from '@sofie-automation/shared-lib/dist/mos'
2627

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { NoteSeverity } from './lib'
2+
3+
export type Previews =
4+
| InvalidPreview
5+
| TablePreview
6+
| ScriptPreview
7+
| HTMLPreview
8+
| SplitPreview
9+
| VTPreview
10+
| BlueprintImagePreview
11+
12+
export enum PreviewType {
13+
Invalid = 'invalid',
14+
Table = 'table',
15+
Script = 'script',
16+
HTML = 'html',
17+
Split = 'split',
18+
VT = 'vt',
19+
BlueprintImage = 'blueprintImage',
20+
}
21+
22+
interface PreviewBase {
23+
type: PreviewType
24+
}
25+
26+
export interface InvalidPreview extends PreviewBase {
27+
// todo - is this required or would we just pull this from the piece warning anyway
28+
type: PreviewType.Invalid
29+
30+
severity: NoteSeverity
31+
reason: string // todo - translate
32+
}
33+
export interface TablePreview extends PreviewBase {
34+
// todo - translations
35+
type: PreviewType.Table
36+
37+
heading: string
38+
subheading?: string
39+
entries: { key: string; value: string }[]
40+
}
41+
export interface ScriptPreview extends PreviewBase {
42+
type: PreviewType.Script
43+
44+
fullText?: string
45+
lastWords?: string
46+
comment?: string
47+
lastModified?: number
48+
}
49+
export interface HTMLPreview extends PreviewBase {
50+
// todo - steps and how to control them
51+
type: PreviewType.HTML
52+
53+
previewUrl: string
54+
55+
previewDimension?: { width: number; height: number }
56+
hasSteps?: boolean
57+
58+
postMessageOnLoad?: any
59+
}
60+
export interface SplitPreview extends PreviewBase {
61+
type: PreviewType.Split
62+
63+
background?: string // file asset upload?
64+
boxes: any // todo
65+
}
66+
export interface VTPreview extends PreviewBase {
67+
type: PreviewType.VT
68+
69+
// note: the info required for the preview follows from package manager so there's nothing for blueprins here
70+
// note: if we want to allow a preview for different media than saved on the piece (because perhaps the media is in a non-primary piece) should we allow to specifiy the package to preview?
71+
// todo - turn this into a "PackagePreview"?
72+
}
73+
export interface BlueprintImagePreview extends PreviewBase {
74+
type: PreviewType.BlueprintImage
75+
76+
image?: string // to be put in as asset
77+
}

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

Lines changed: 224 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
1-
.preview-popUp {
2-
display: grid;
3-
grid-template-columns: 1fr;
4-
grid-template-rows: repeat(4, auto);
5-
grid-template-areas:
6-
'preview'
7-
'controls'
8-
'content-info'
9-
'warnings';
1+
@import '../../styles/itemTypeColors';
102

3+
.preview-popUp {
114
border: 1px solid var(--sofie-segment-layer-hover-popup-border);
125
background: var(--sofie-segment-layer-hover-popup-background);
136
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
@@ -21,10 +14,12 @@
2114

2215
&--large {
2316
width: 480px;
17+
--preview-max-dimension: 480;
2418
}
2519

2620
&--small {
2721
width: 320px;
22+
--preview-max-dimension: 320;
2823
}
2924

3025
&--hidden {
@@ -33,31 +28,232 @@
3328
}
3429

3530
.preview-popUp__preview {
36-
grid-area: 'preview';
31+
width: 100%;
3732

38-
.script {
33+
.preview-popUp__script {
3934
padding: 0.3em;
4035
font-style: italic;
4136
}
42-
}
4337

44-
.preview-popUp__controls {
45-
grid-area: 'controls';
46-
}
38+
.preview-popUp__title {
39+
width: 100%;
4740

48-
.preview-popUp__content-info {
49-
grid-area: 'content-info';
50-
}
41+
color: #aaa;
42+
font-style: italic;
5143

52-
.preview-popUp__warnings {
53-
grid-area: 'warnings';
54-
display: grid;
55-
grid-template-columns: 1fr;
56-
grid-auto-rows: auto;
57-
}
44+
padding: 5px;
45+
}
46+
47+
.preview-popUp__warning {
48+
width: 100%;
49+
50+
display: flex;
51+
// gap: 5px;
52+
53+
.icon,
54+
.content {
55+
padding: 5px;
56+
}
57+
.icon {
58+
width: 25px;
59+
height: 25px;
60+
61+
.type-warning {
62+
width: 1.2em;
63+
height: 1.2em;
64+
}
65+
}
66+
67+
&::before {
68+
content: ' ';
69+
position: absolute;
70+
height: 1px;
71+
background-color: #5b5b5b;
72+
left: 10px;
73+
right: 10px;
74+
// top: -5px;
75+
}
76+
}
77+
78+
.preview-popUp__video {
79+
position: relative;
80+
81+
.time {
82+
position: absolute;
83+
top: 0;
84+
right: 0;
85+
padding: 2px;
86+
87+
background-color: #00000033;
88+
color: #fff;
89+
font-size: 0.8em;
90+
}
91+
92+
.preview-popUp__video-frame-marker {
93+
display: block;
94+
position: absolute;
95+
bottom: 1px;
96+
97+
&.preview-popUp__video-frame-marker--first-frame {
98+
left: 6px;
99+
}
100+
101+
&.preview-popUp__video-frame-marker--last-frame {
102+
left: auto;
103+
right: 6px;
104+
transform: scaleX(-1);
105+
}
106+
}
107+
}
108+
109+
.preview-popUp__table {
110+
padding: 5px;
111+
112+
table {
113+
> tbody {
114+
> tr {
115+
> td {
116+
&.mini-inspector__row--timing {
117+
padding-top: 0.5em;
118+
}
119+
}
120+
}
121+
> tr:first-child {
122+
> td {
123+
&.mini-inspector__row--timing {
124+
padding-top: 0em;
125+
}
126+
}
127+
}
128+
}
129+
}
130+
131+
.preview-popup__label {
132+
font-weight: 200;
133+
font-size: 0.8em;
134+
letter-spacing: 0.05em;
135+
text-transform: capitalize;
136+
padding-right: 0.5em;
137+
}
138+
.preview-popup__value {
139+
font-weight: 200;
140+
font-size: 0.8em;
141+
letter-spacing: 0em;
142+
line-height: 80%;
143+
max-width: 60vw;
144+
overflow: hidden;
145+
text-overflow: ellipsis;
146+
word-break: break-all;
147+
white-space: normal;
148+
}
149+
}
150+
151+
.preview-popUp__in-out-words {
152+
font-size: 0.8em;
153+
letter-spacing: 0em;
154+
line-height: 80%;
155+
156+
width: 100%;
157+
// width: stretch;
158+
overflow: hidden;
159+
text-overflow: ellipsis;
160+
white-space: nowrap;
161+
162+
display: flex;
163+
justify-content: space-between;
164+
165+
padding: 7px;
166+
167+
.in-words,
168+
.out-words {
169+
white-space: nowrap;
170+
overflow: hidden;
171+
text-overflow: ellipsis;
172+
}
173+
174+
.out-words {
175+
direction: rtl;
176+
}
177+
}
178+
179+
.preview-popUp__iframe {
180+
// set-up default values:
181+
--preview-render-width: 1920;
182+
--preview-render-height: 1080;
183+
184+
// note: --preview-max-dimension is set up in the parent so it corresponds to the correct width
185+
--preview-scale: calc(
186+
var(--preview-max-dimension) / max(var(--preview-render-width), var(--preview-render-height))
187+
);
188+
189+
width: calc(var(--preview-render-width) * var(--preview-scale) * 1px);
190+
height: calc(var(--preview-render-height) * var(--preview-scale) * 1px);
191+
192+
> .preview {
193+
transform: translate(-50%, 0rem) scale(var(--preview-scale));
194+
width: calc(var(--preview-render-width) * 1px);
195+
height: calc(var(--preview-render-height) * 1px);
58196

59-
.preview-popUp__warning-row {
60-
display: grid;
61-
grid-template-columns: 2em auto;
62-
grid-auto-rows: auto;
197+
position: relative;
198+
left: 50%;
199+
top: 0;
200+
transform-origin: center top;
201+
202+
img {
203+
object-fit: cover;
204+
object-position: center bottom;
205+
206+
width: calc(var(--preview-render-width) * 1px);
207+
height: calc(var(--preview-render-height) * 1px);
208+
}
209+
210+
> iframe {
211+
position: absolute;
212+
left: 50%;
213+
top: 50%;
214+
transform: translate(-50%, -50%);
215+
transform-origin: center center;
216+
border: 0;
217+
218+
width: calc(var(--preview-render-width) * 1px);
219+
height: calc(var(--preview-render-height) * 1px);
220+
}
221+
}
222+
}
223+
224+
.preview-popUp__box-layout {
225+
height: 180px;
226+
227+
position: relative;
228+
overflow: hidden;
229+
background-color: #000;
230+
231+
> .background {
232+
position: absolute;
233+
top: 0;
234+
bottom: 0;
235+
left: 0;
236+
right: 0;
237+
}
238+
239+
> .box {
240+
position: absolute;
241+
transform: translate(-50%, -50%);
242+
}
243+
244+
& > * {
245+
@include item-type-colors();
246+
}
247+
248+
.video-preview__label {
249+
position: absolute;
250+
top: auto;
251+
left: 0;
252+
right: 0;
253+
bottom: 0;
254+
font-weight: 400;
255+
text-shadow: 0 0 2px rgba(0, 0, 0, 0.75);
256+
text-align: center;
257+
}
258+
}
63259
}

0 commit comments

Comments
 (0)