Skip to content

Commit 9e55968

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

File tree

8 files changed

+115
-26
lines changed

8 files changed

+115
-26
lines changed

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

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,28 @@
2929

3030
.preview-popUp__preview {
3131
width: 100%;
32+
font-family: 'Roboto Condensed';
33+
font-size: 0.9375rem; // 15px;
3234

33-
.preview-popUp__script {
35+
.preview-popUp__script,
36+
.preview-popUp__script-comment,
37+
.preview-popUp__script-last-modified {
3438
padding: 0.3em;
3539
font-style: italic;
3640
}
3741

42+
.preview-popUp__script-comment,
43+
.preview-popUp__script-last-modified {
44+
text-align: right;
45+
color: #aaa;
46+
}
47+
3848
.preview-popUp__title {
3949
width: 100%;
4050

41-
color: #aaa;
42-
font-style: italic;
51+
color: #adadad;
52+
font-size: 0.875rem; // 14px;
53+
font-weight: 400;
4354

4455
padding: 5px;
4556
}
@@ -84,9 +95,17 @@
8495
right: 0;
8596
padding: 2px;
8697

87-
background-color: #00000033;
88-
color: #fff;
98+
background-color: #00000066;
8999
font-size: 0.8em;
100+
101+
color: #fff;
102+
text-shadow: 0px 0px 2px #000;
103+
font-family: Roboto;
104+
font-size: 0.78125rem; // 12.5px;
105+
font-weight: 500;
106+
letter-spacing: 0.125px;
107+
108+
border-radius: 0px 0px 0px 3px;
90109
}
91110

92111
.preview-popUp__video-frame-marker {
@@ -151,10 +170,8 @@
151170
.preview-popUp__in-out-words {
152171
font-size: 0.8em;
153172
letter-spacing: 0em;
154-
line-height: 80%;
155173

156174
width: 100%;
157-
// width: stretch;
158175
overflow: hidden;
159176
text-overflow: ellipsis;
160177
white-space: nowrap;
@@ -256,4 +273,9 @@
256273
text-align: center;
257274
}
258275
}
276+
277+
.preview-popUp__step-count {
278+
padding: 5px;
279+
font-weight: 700;
280+
}
259281
}

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
66
import { VTPreviewElement } from './Previews/VTPreview'
77
import { IFramePreview } from './Previews/IFramePreview'
88
import { BoxLayoutPreview } from './Previews/BoxLayoutPreview'
9+
import { ScriptPreview } from './Previews/ScriptPreview'
910

1011
interface PreviewPopUpContentProps {
1112
content: PreviewContent
@@ -27,7 +28,7 @@ export function PreviewPopUpContent({ content, time }: PreviewPopUpContentProps)
2728
case 'video':
2829
return <VTPreviewElement time={time} content={content} />
2930
case 'script':
30-
return <div className="preview-popUp__script">{content.content}</div>
31+
return <ScriptPreview content={content} />
3132
case 'title':
3233
return <div className="preview-popUp__title">{content.content}</div>
3334
case 'inOutWords':
@@ -64,6 +65,13 @@ export function PreviewPopUpContent({ content, time }: PreviewPopUpContentProps)
6465
<div className="content">{translateMessage(content.content, t)}</div>
6566
</div>
6667
)
68+
case 'stepCount':
69+
return (
70+
<div className="preview-popUp__step-count">
71+
{content.current}
72+
{content.total && '/' + content.total}
73+
</div>
74+
)
6775
default:
6876
return <></>
6977
}

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

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,13 @@ export function convertSourceLayerItemToPreview(
112112
} else if (sourceLayerType === SourceLayerType.SCRIPT) {
113113
const content = piece.instance.piece.content as ScriptContent
114114
return [
115-
{ type: 'script', content: content.fullScript ?? content.firstWords ?? content.lastWords ?? content.comment },
115+
{
116+
type: 'script',
117+
script: content.fullScript,
118+
lastWords: content.lastWords,
119+
comment: content.comment,
120+
lastModified: content.lastModified ?? undefined,
121+
},
116122
]
117123
} else if (sourceLayerType === SourceLayerType.SPLITS) {
118124
const content = piece.instance.piece.content as SplitsContent
@@ -126,7 +132,6 @@ export type PreviewContent =
126132
| {
127133
type: 'iframe'
128134
href: string
129-
// awaitMessage?: any
130135
postMessage?: any
131136
}
132137
| {
@@ -139,7 +144,10 @@ export type PreviewContent =
139144
}
140145
| {
141146
type: 'script'
142-
content: string
147+
script?: string
148+
lastWords?: string
149+
comment?: string
150+
lastModified?: number
143151
}
144152
| {
145153
type: 'title'
@@ -152,17 +160,23 @@ export type PreviewContent =
152160
}
153161
| {
154162
type: 'data'
155-
content: Record<string, string> // todo - translateable? 👀
163+
content: Record<string, string>
156164
}
157165
| {
158166
type: 'boxLayout'
159-
// content: unknown
160167
boxSourceConfiguration: (SplitsContentBoxContent & SplitsContentBoxProperties)[]
168+
showLabels?: boolean
169+
backgroundArt?: string
161170
}
162171
| {
163172
type: 'warning'
164173
content: ITranslatableMessage
165174
}
175+
| {
176+
type: 'stepCount'
177+
current: number
178+
total?: number
179+
}
166180

167181
export interface IPreviewPopUpSession {
168182
/**
@@ -191,7 +205,8 @@ interface PreviewRequestOptions {
191205
size?: 'small' | 'large'
192206
/** Set this to the time the pointer is */
193207
time?: number
194-
startX?: number
208+
/** */
209+
startCoordinate?: number
195210
}
196211

197212
interface IPreviewPopUpContext {
@@ -242,7 +257,7 @@ export function PreviewPopUpContextProvider({ children }: React.PropsWithChildre
242257
padding: opts?.padding ?? 0,
243258
placement: opts?.placement ?? 'top',
244259
size: opts?.size ?? 'small',
245-
startCoordinate: opts?.startX,
260+
startCoordinate: opts?.startCoordinate,
246261
})
247262
setPreviewContent(content)
248263

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { getSplitPreview, SplitRole } from '../../../lib/ui/splitPreview'
77
interface BoxLayoutPreviewProps {
88
content: {
99
type: 'boxLayout'
10-
// content: unknown
1110
boxSourceConfiguration: (SplitsContentBoxContent & SplitsContentBoxProperties)[]
1211
showLabels?: boolean
1312
backgroundArt?: string

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { getScriptPreview } from '../../../lib/ui/scriptPreview'
2+
import { useTranslation } from 'react-i18next'
3+
import Moment from 'react-moment'
4+
5+
interface ScriptPreviewProps {
6+
content: {
7+
type: 'script'
8+
script?: string
9+
lastWords?: string
10+
comment?: string
11+
lastModified?: number
12+
}
13+
}
14+
15+
export function ScriptPreview({ content }: ScriptPreviewProps): React.ReactElement {
16+
const { t } = useTranslation()
17+
const { startOfScript, endOfScript, breakScript } = getScriptPreview(content.script ?? '')
18+
19+
return (
20+
<div>
21+
<div className="preview-popUp__script">
22+
{content?.script ? (
23+
breakScript ? (
24+
<>
25+
<span className="mini-inspector__full-text text-broken">{startOfScript + '\u2026'}</span>
26+
<span className="mini-inspector__full-text text-broken text-end">{'\u2026' + endOfScript}</span>
27+
</>
28+
) : (
29+
<span className="mini-inspector__full-text">{content.script}</span>
30+
)
31+
) : content.lastWords ? (
32+
<span className="mini-inspector__full-text">{'\u2026' + content.lastWords}</span>
33+
) : !content?.comment ? (
34+
<span className="mini-inspector__system">{t('Script is empty')}</span>
35+
) : null}
36+
</div>
37+
{content?.comment && <div className="preview-popUp__script-comment">{content.comment}</div>}
38+
{content.lastModified && (
39+
<div className="preview-popUp__script-last-modified">
40+
<span className="mini-inspector__changed">
41+
<Moment date={content.lastModified} calendar={true} />
42+
</span>
43+
</div>
44+
)}
45+
</div>
46+
)
47+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export function VTPreviewElement({ content, time }: VTPreviewProps): React.React
5454
<div
5555
className={classNames('preview-popUp__video-frame-marker', {
5656
'preview-popUp__video-frame-marker--first-frame': offsetTimePosition === 0,
57-
'preview-popUp__video-frame-marker--last-frame': offsetTimePosition >= itemDuration,
57+
'preview-popUp__video-frame-marker--last-frame': itemDuration > 0 && offsetTimePosition >= itemDuration,
5858
})}
5959
>
6060
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

‎packages/webui/src/client/ui/SegmentTimeline/Renderers/MicSourceRenderer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -233,15 +233,15 @@ export const MicSourceRenderer = withTranslation()(
233233
</span>
234234
</>
235235
)}
236-
{/* {content && (
236+
{content && (
237237
<MicFloatingInspector
238238
content={content}
239239
position={this.getFloatingInspectorStyle()}
240240
itemElement={this.props.itemElement}
241241
showMiniInspector={this.props.showMiniInspector}
242242
typeClass={this.props.typeClass}
243243
/>
244-
)} */}
244+
)}
245245
</>
246246
)
247247
}

‎packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -199,11 +199,11 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
199199
const previewSession = useRef<IPreviewPopUpSession | null>(null)
200200
const toggleMiniInspectorOn = useCallback(
201201
(e: React.MouseEvent) => toggleMiniInspector(e, true),
202-
[piece, cursorTimePosition, contentStatus]
202+
[piece, cursorTimePosition, contentStatus, timeScale]
203203
)
204204
const toggleMiniInspectorOff = useCallback(
205205
(e: React.MouseEvent) => toggleMiniInspector(e, false),
206-
[piece, cursorTimePosition, contentStatus]
206+
[piece, cursorTimePosition, contentStatus, timeScale]
207207
)
208208
const updatePos = useCallback(() => {
209209
const elementPos = getElementDocumentOffset(itemElementRef.current) || {
@@ -226,14 +226,12 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
226226
}
227227

228228
animFrameHandle.current = requestAnimationFrame(updatePos)
229-
}, [piece, contentStatus])
229+
}, [piece, contentStatus, timeScale])
230230
const toggleMiniInspector = useCallback(
231231
(e: React.MouseEvent, v: boolean) => {
232232
if (!v && previewSession.current) {
233233
previewSession.current.close()
234234
previewSession.current = null
235-
236-
return
237235
} else if (piece.instance.piece.content.popUpPreview) {
238236
previewSession.current = previewContext.requestPreview(
239237
e.target as any,
@@ -245,7 +243,7 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
245243
if (previewContents.length) {
246244
previewSession.current = previewContext.requestPreview(e.target as any, previewContents, {
247245
time: cursorTimePosition,
248-
startX: e.screenX,
246+
startCoordinate: e.screenX,
249247
})
250248
} else {
251249
setShowMiniInspector(v)
@@ -263,7 +261,7 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele
263261
cancelAnimationFrame(animFrameHandle.current)
264262
}
265263
},
266-
[piece, cursorTimePosition, contentStatus]
264+
[piece, cursorTimePosition, contentStatus, timeScale]
267265
)
268266
const moveMiniInspector = useCallback((e: MouseEvent | any) => {
269267
cursorRawPosition.current = {

0 commit comments

Comments
 (0)