Skip to content

Commit 7eb12a5

Browse files
olzzonolzzon
committed
wip: move additionalPreviewContent inside popPpPreview content
1 parent 9eff487 commit 7eb12a5

File tree

6 files changed

+95
-80
lines changed

6 files changed

+95
-80
lines changed

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

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -8,54 +8,6 @@ export type WithTimeline<T extends BaseContent> = T & {
88
timelineObjects: TimelineObjectCoreExt<TSR.TSRTimelineContent>[]
99
}
1010

11-
// The PreviewContent types are a partly replica of the types in PreviewPopUpContext.tsx
12-
export type PreviewContent =
13-
| {
14-
type: 'iframe'
15-
href: string
16-
postMessage?: any
17-
dimensions?: { width: number; height: number }
18-
}
19-
| {
20-
type: 'image'
21-
src: string
22-
}
23-
| {
24-
type: 'video'
25-
src: string
26-
}
27-
| {
28-
type: 'script'
29-
script?: string
30-
firstWords?: string
31-
lastWords?: string
32-
comment?: string
33-
lastModified?: number
34-
}
35-
| {
36-
type: 'title'
37-
content: string
38-
}
39-
| {
40-
type: 'inOutWords'
41-
in?: string
42-
out: string
43-
}
44-
| {
45-
type: 'layerInfo'
46-
layerType: SourceLayerType
47-
text: Array<string>
48-
inTime?: number | string
49-
outTime?: number | string
50-
}
51-
| {
52-
type: 'separationLine'
53-
}
54-
| {
55-
type: 'data'
56-
content: { key: string; value: string }[]
57-
}
58-
5911
export interface BaseContent {
6012
editable?: BaseEditableParameters
6113

@@ -73,10 +25,6 @@ export interface BaseContent {
7325
* Overwrite any default hover previews in Sofie
7426
*/
7527
popUpPreview?: PopupPreview
76-
/**
77-
* Add custom content preview content
78-
*/
79-
additionalPreviewContent?: Array<PreviewContent>
8028
}
8129

8230
// eslint-disable-next-line @typescript-eslint/no-empty-object-type

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

Lines changed: 53 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,54 @@ 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+
}
66+
| {
67+
type: 'separationLine'
68+
}
69+
| {
70+
type: 'data'
71+
content: { key: string; value: string }[]
72+
}
73+
2274
interface PreviewBase {
2375
type: PreviewType
2476
}

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,28 @@
5858

5959
.preview-popUp__element-with-time-info {
6060
width: 100%;
61+
display: flex;
62+
margin-bottom: 0px;
6163

6264
.preview-popUp__element-with-time-info__layer-color {
63-
width: 20px;
64-
font-size: 1.2em;
65+
width: 25px;
66+
height: 20px;
67+
margin-top: 5px;
68+
margin-left: 5px;
69+
margin-right: 5px;
70+
font-size: 1.4em;
6571
@include item-type-colors();
6672
}
6773
}
6874

75+
.preview-popup__separation-line {
76+
width: 90%;
77+
margin-left: 5%;
78+
background-color: #5b5b5b;
79+
margin-top: 5px;
80+
margin-bottom: 5px;
81+
}
82+
6983
.preview-popUp__warning {
7084
width: 100%;
7185

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export function PreviewPopUpContent({ content, time }: PreviewPopUpContentProps)
6363
case 'layerInfo':
6464
return <LayerInfoPreview {...content} />
6565
case 'separationLine':
66-
return <hr className="separation-line" />
66+
return <hr className="preview-popup__separation-line" />
6767
case 'boxLayout':
6868
return <BoxLayoutPreview content={content} />
6969
case 'warning':

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,12 +121,12 @@ export function convertSourceLayerItemToPreview(
121121
}
122122
break
123123
}
124+
// Add any additional preview content to the popup:
125+
popupPreview.additionalPreviewContent?.forEach((content) => {
126+
contents.push(content as PreviewContentUI)
127+
})
124128
}
125129

126-
item.content.additionalPreviewContent?.forEach((content) => {
127-
contents.push(content as PreviewContentUI)
128-
})
129-
130130
if (popupPreview.warnings) {
131131
contents.push(...popupPreview.warnings.map((w): PreviewContentUI => ({ type: 'warning', content: w.reason })))
132132
}

‎packages/webui/src/client/ui/PreviewPopUp/Previews/LayerInfoPreview.tsx‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,28 @@ export function LayerInfoPreview(content: layerInfoContent): React.ReactElement
1212

1313
return (
1414
<div className="preview-popUp__element-with-time-info">
15-
<span className={classNames('preview-popUp__element-with-time-info__layer-color', sourceLayerClassName)}>
16-
{'◼️'}
17-
</span>
18-
{content.text.map((line, index) => (
19-
<div key={index} className="mini-inspector__full-text">
20-
{line}
15+
<div className={classNames('preview-popUp__element-with-time-info__layer-color', sourceLayerClassName)}> </div>
16+
<div>
17+
{content.text.map((line, index) => (
18+
<div key={index} className="mini-inspector__full-text">
19+
{line}
20+
</div>
21+
))}
22+
<div className="preview-popUp__timing">
23+
{content.inTime && (
24+
<>
25+
<span className="label">IN: </span>{' '}
26+
{RundownUtils.formatTimeToShortTime((content.inTime as any as number) || 0)}
27+
</>
28+
)}
29+
&nbsp;{' '}
30+
{content.outTime && (
31+
<>
32+
<span className="label">{t('DURATION: ')}</span>
33+
{RundownUtils.formatTimeToShortTime((content.outTime as any as number) || 0)}
34+
</>
35+
)}
2136
</div>
22-
))}
23-
<div className="preview-popUp__timing">
24-
{content.inTime && (
25-
<>
26-
<span className="label">IN: </span> {RundownUtils.formatTimeToShortTime((content.inTime as any as number) || 0)}
27-
</>
28-
)}
29-
&nbsp;{' '}
30-
{content.outTime && (
31-
<>
32-
<span className="label">{t('DURATION: ')}</span>
33-
{RundownUtils.formatTimeToShortTime((content.outTime as any as number) || 0)}
34-
</>
35-
)}
3637
</div>
3738
</div>
3839
)

0 commit comments

Comments
 (0)