@zync/zync-screnplay-player 0.1.200 → 0.1.202
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.js +1 -1
- package/dist/screenplay/RemotionRenderer/RemotionRenderer.js +17 -13
- package/dist/screenplay/RemotionRenderer/components/layouts/KeyPointOverlayDepth.js +2 -2
- package/dist/screenplay/RemotionRenderer/development.js +2184 -159
- package/dist/screenplay/RemotionRenderer/theme/themes/default/HandoffNametag/handoffNametagConfig.js +3 -0
- package/dist/screenplay/RemotionRenderer/theme/themes/default/HandoffNametag.js +203 -26
- package/package.json +1 -1
package/dist/screenplay/RemotionRenderer/theme/themes/default/HandoffNametag/handoffNametagConfig.js
CHANGED
|
@@ -17,6 +17,7 @@ export var getHandoffNametagConfig = function getHandoffNametagConfig(width) {
|
|
|
17
17
|
fullNameMaxFontSize: 42,
|
|
18
18
|
titleMaxFontSize: 30,
|
|
19
19
|
targetContainerBottoms: _defineProperty(_defineProperty({}, "first-left", [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000]), "second-right", [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]),
|
|
20
|
+
containerTop: _defineProperty(_defineProperty({}, "first-left", 100), "second-right", undefined),
|
|
20
21
|
containerLeft: _defineProperty(_defineProperty({}, "first-left", 70), "second-right", undefined),
|
|
21
22
|
containerRight: _defineProperty(_defineProperty({}, "first-left", undefined), "second-right", 70),
|
|
22
23
|
containerFlexDirection: _defineProperty(_defineProperty({}, "first-left", "row"), "second-right", "row-reverse"),
|
|
@@ -35,6 +36,7 @@ export var getHandoffNametagConfig = function getHandoffNametagConfig(width) {
|
|
|
35
36
|
fullNameMaxFontSize: 46,
|
|
36
37
|
titleMaxFontSize: 35,
|
|
37
38
|
targetContainerBottoms: _defineProperty(_defineProperty({}, "first-left", [200, 200, 200, 200, 200, 200, 200, 200]), "second-right", [200, 200, 200, 200, 200, 200, 200, 200]),
|
|
39
|
+
containerTop: _defineProperty(_defineProperty({}, "first-left", undefined), "second-right", undefined),
|
|
38
40
|
containerLeft: _defineProperty(_defineProperty({}, "first-left", 75), "second-right", undefined),
|
|
39
41
|
containerRight: _defineProperty(_defineProperty({}, "first-left", undefined), "second-right", 75),
|
|
40
42
|
containerFlexDirection: _defineProperty(_defineProperty({}, "first-left", "row"), "second-right", "row-reverse"),
|
|
@@ -53,6 +55,7 @@ export var getHandoffNametagConfig = function getHandoffNametagConfig(width) {
|
|
|
53
55
|
fullNameMaxFontSize: 24,
|
|
54
56
|
titleMaxFontSize: 18,
|
|
55
57
|
targetContainerBottoms: _defineProperty(_defineProperty({}, "first-left", [200, 200, 200, 200, 200, 200, 200, 200]), "second-right", [200, 200, 200, 200, 200, 200, 200, 200]),
|
|
58
|
+
containerTop: _defineProperty(_defineProperty({}, "first-left", undefined), "second-right", undefined),
|
|
56
59
|
containerLeft: _defineProperty(_defineProperty({}, "first-left", 50), "second-right", undefined),
|
|
57
60
|
containerRight: _defineProperty(_defineProperty({}, "first-left", undefined), "second-right", 50),
|
|
58
61
|
containerFlexDirection: _defineProperty(_defineProperty({}, "first-left", "row"), "second-right", "row-reverse"),
|
|
@@ -15,6 +15,14 @@ import React from "react";
|
|
|
15
15
|
import PausableImg from "../../../components/utils/PausableImg";
|
|
16
16
|
var _loadFont = loadFont(),
|
|
17
17
|
fontFamily = _loadFont.fontFamily;
|
|
18
|
+
var HANDOFF_NAMETAG_VARIANTS = {
|
|
19
|
+
BOXED: "boxed",
|
|
20
|
+
HIGHLIGHT: "highlight"
|
|
21
|
+
};
|
|
22
|
+
var HIGHLIGHT_FONT_SCALE = 1.5;
|
|
23
|
+
var TYPEWRITER_DELAY_FRAMES = 6;
|
|
24
|
+
var TYPEWRITER_TARGET_SECONDS = 2;
|
|
25
|
+
var TYPEWRITER_END_BUFFER_SECONDS = 0.4;
|
|
18
26
|
var withAlpha = function withAlpha(color, alpha) {
|
|
19
27
|
if (!color || typeof color !== "string" || !color.startsWith("#")) {
|
|
20
28
|
return color;
|
|
@@ -35,12 +43,126 @@ var withAlpha = function withAlpha(color, alpha) {
|
|
|
35
43
|
var b = intValue & 255;
|
|
36
44
|
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
|
|
37
45
|
};
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
var getTextFit = function getTextFit(text, maxWidth, maxHeight, maxFontSize) {
|
|
47
|
+
if (!text) {
|
|
48
|
+
return {
|
|
49
|
+
lines: [],
|
|
50
|
+
fontSize: maxFontSize
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
return distributeTextToFit(text, maxWidth, maxHeight, maxFontSize);
|
|
54
|
+
};
|
|
55
|
+
var getVisibleTextFit = function getVisibleTextFit(_ref) {
|
|
56
|
+
var fullText = _ref.fullText,
|
|
57
|
+
visibleText = _ref.visibleText,
|
|
58
|
+
maxWidth = _ref.maxWidth,
|
|
59
|
+
maxHeight = _ref.maxHeight,
|
|
60
|
+
maxFontSize = _ref.maxFontSize;
|
|
61
|
+
var baseFit = getTextFit(fullText, maxWidth, maxHeight, maxFontSize);
|
|
62
|
+
if (!visibleText) {
|
|
63
|
+
return {
|
|
64
|
+
lines: [],
|
|
65
|
+
fontSize: baseFit.fontSize
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
return getTextFit(visibleText, maxWidth, maxHeight, baseFit.fontSize);
|
|
69
|
+
};
|
|
70
|
+
var revealText = function revealText(text, elapsedFrames, durationFrames) {
|
|
71
|
+
if (!text) {
|
|
72
|
+
return "";
|
|
73
|
+
}
|
|
74
|
+
if (durationFrames <= 0 || elapsedFrames >= durationFrames) {
|
|
75
|
+
return text;
|
|
76
|
+
}
|
|
77
|
+
var progress = Math.max(0, Math.min(1, elapsedFrames / durationFrames));
|
|
78
|
+
return text.slice(0, Math.round(progress * text.length));
|
|
79
|
+
};
|
|
80
|
+
var getTypewriterState = function getTypewriterState(_ref2) {
|
|
81
|
+
var frame = _ref2.frame,
|
|
82
|
+
fps = _ref2.fps,
|
|
83
|
+
duration = _ref2.duration,
|
|
84
|
+
sanitizedFullName = _ref2.sanitizedFullName,
|
|
85
|
+
sanitizedTitle = _ref2.sanitizedTitle;
|
|
86
|
+
var durationInFrames = Number.isFinite(duration) ? Math.max(Math.round(duration * fps), 1) : Math.round(TYPEWRITER_TARGET_SECONDS * fps);
|
|
87
|
+
var maxTypingFrames = Math.max(1, durationInFrames - Math.round(TYPEWRITER_END_BUFFER_SECONDS * fps));
|
|
88
|
+
var totalTypingFrames = Math.min(Math.round(TYPEWRITER_TARGET_SECONDS * fps), maxTypingFrames);
|
|
89
|
+
var typingFrame = Math.max(frame - TYPEWRITER_DELAY_FRAMES, 0);
|
|
90
|
+
var nameCharacters = sanitizedFullName.length;
|
|
91
|
+
var titleCharacters = sanitizedTitle.length;
|
|
92
|
+
if (!nameCharacters && !titleCharacters) {
|
|
93
|
+
return {
|
|
94
|
+
visibleFullName: "",
|
|
95
|
+
visibleTitle: ""
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
if (!nameCharacters) {
|
|
99
|
+
return {
|
|
100
|
+
visibleFullName: "",
|
|
101
|
+
visibleTitle: revealText(sanitizedTitle, typingFrame, totalTypingFrames)
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
if (!titleCharacters) {
|
|
105
|
+
return {
|
|
106
|
+
visibleFullName: revealText(sanitizedFullName, typingFrame, totalTypingFrames),
|
|
107
|
+
visibleTitle: ""
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
var totalCharacters = nameCharacters + titleCharacters;
|
|
111
|
+
var nameTypingFrames = Math.max(1, Math.round(totalTypingFrames * (nameCharacters / totalCharacters)));
|
|
112
|
+
var titleTypingFrames = Math.max(1, totalTypingFrames - nameTypingFrames);
|
|
113
|
+
return {
|
|
114
|
+
visibleFullName: revealText(sanitizedFullName, typingFrame, nameTypingFrames),
|
|
115
|
+
visibleTitle: revealText(sanitizedTitle, Math.max(typingFrame - nameTypingFrames, 0), titleTypingFrames)
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
var HighlightLines = function HighlightLines(_ref3) {
|
|
119
|
+
var lines = _ref3.lines,
|
|
120
|
+
fontSize = _ref3.fontSize,
|
|
121
|
+
fontWeight = _ref3.fontWeight,
|
|
122
|
+
color = _ref3.color,
|
|
123
|
+
backgroundColor = _ref3.backgroundColor,
|
|
124
|
+
alignItems = _ref3.alignItems,
|
|
125
|
+
_ref3$opacity = _ref3.opacity,
|
|
126
|
+
opacity = _ref3$opacity === void 0 ? 1 : _ref3$opacity,
|
|
127
|
+
transform = _ref3.transform;
|
|
128
|
+
if (!lines.length) {
|
|
129
|
+
return null;
|
|
130
|
+
}
|
|
131
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
132
|
+
style: {
|
|
133
|
+
display: "flex",
|
|
134
|
+
flexDirection: "column",
|
|
135
|
+
alignItems: alignItems,
|
|
136
|
+
gap: 8,
|
|
137
|
+
opacity: opacity,
|
|
138
|
+
transform: transform
|
|
139
|
+
}
|
|
140
|
+
}, lines.map(function (line, index) {
|
|
141
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
142
|
+
key: "highlight-line-".concat(fontSize, "-").concat(index),
|
|
143
|
+
style: {
|
|
144
|
+
width: "fit-content",
|
|
145
|
+
maxWidth: "100%",
|
|
146
|
+
fontFamily: fontFamily,
|
|
147
|
+
fontSize: "".concat(fontSize, "px"),
|
|
148
|
+
fontWeight: fontWeight,
|
|
149
|
+
color: color,
|
|
150
|
+
backgroundColor: backgroundColor,
|
|
151
|
+
padding: "8px 16px",
|
|
152
|
+
borderRadius: "14px",
|
|
153
|
+
boxShadow: "0 10px 24px rgba(0, 0, 0, 0.24)"
|
|
154
|
+
}
|
|
155
|
+
}, line);
|
|
156
|
+
}));
|
|
157
|
+
};
|
|
158
|
+
export var HandoffNametag = function HandoffNametag(_ref4) {
|
|
159
|
+
var pictureUrl = _ref4.pictureUrl,
|
|
160
|
+
fullName = _ref4.fullName,
|
|
161
|
+
title = _ref4.title,
|
|
162
|
+
alignment = _ref4.alignment,
|
|
163
|
+
duration = _ref4.duration,
|
|
164
|
+
_ref4$handoffNametagV = _ref4.handoffNametagVariant,
|
|
165
|
+
handoffNametagVariant = _ref4$handoffNametagV === void 0 ? HANDOFF_NAMETAG_VARIANTS.BOXED : _ref4$handoffNametagV;
|
|
44
166
|
var _useVideoConfig = useVideoConfig(),
|
|
45
167
|
fps = _useVideoConfig.fps,
|
|
46
168
|
width = _useVideoConfig.width,
|
|
@@ -61,6 +183,7 @@ export var HandoffNametag = function HandoffNametag(_ref) {
|
|
|
61
183
|
fullNameMaxFontSize = _useOrientationBased.fullNameMaxFontSize,
|
|
62
184
|
titleMaxFontSize = _useOrientationBased.titleMaxFontSize,
|
|
63
185
|
targetImageTranslateY = _useOrientationBased.targetImageTranslateY,
|
|
186
|
+
containerTop = _useOrientationBased.containerTop,
|
|
64
187
|
containerLeft = _useOrientationBased.containerLeft,
|
|
65
188
|
containerRight = _useOrientationBased.containerRight,
|
|
66
189
|
targetContainerBottoms = _useOrientationBased.targetContainerBottoms,
|
|
@@ -69,6 +192,11 @@ export var HandoffNametag = function HandoffNametag(_ref) {
|
|
|
69
192
|
containerAlignItems = _useOrientationBased.containerAlignItems,
|
|
70
193
|
lineJustifyContent = _useOrientationBased.lineJustifyContent;
|
|
71
194
|
var isPortrait = orientation === "portrait";
|
|
195
|
+
var variant = handoffNametagVariant === HANDOFF_NAMETAG_VARIANTS.HIGHLIGHT ? HANDOFF_NAMETAG_VARIANTS.HIGHLIGHT : HANDOFF_NAMETAG_VARIANTS.BOXED;
|
|
196
|
+
var isHighlightVariant = variant === HANDOFF_NAMETAG_VARIANTS.HIGHLIGHT;
|
|
197
|
+
var fontScale = isHighlightVariant ? HIGHLIGHT_FONT_SCALE : 1;
|
|
198
|
+
var effectiveFullNameMaxFontSize = Math.round(fullNameMaxFontSize * fontScale);
|
|
199
|
+
var effectiveTitleMaxFontSize = Math.round(titleMaxFontSize * fontScale);
|
|
72
200
|
var phaseDurationsInSeconds = isPortrait ? [0.1, 0.05, 0.05, 0.05, 0.05, 3.75, 0.4, duration - 3.75, 0.25] : [0.1, 0.05, 0.05, 0.05, 0.05, duration, 0.25];
|
|
73
201
|
var inputRangeInSeconds = calculateInputRangeInPhases(phaseDurationsInSeconds, 0);
|
|
74
202
|
var imageHeight = useTimeInterpolate(inputRangeInSeconds, targetImageHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS);
|
|
@@ -83,23 +211,21 @@ export var HandoffNametag = function HandoffNametag(_ref) {
|
|
|
83
211
|
var hasName = Boolean(sanitizedFullName.length);
|
|
84
212
|
var hasTitle = Boolean(sanitizedTitle.length);
|
|
85
213
|
var hasPicture = Boolean(pictureUrl);
|
|
86
|
-
var shouldShowInitial = hasName && hasTitle && !hasPicture;
|
|
87
|
-
var shouldRenderMedia = hasPicture || shouldShowInitial;
|
|
214
|
+
var shouldShowInitial = !isHighlightVariant && hasName && hasTitle && !hasPicture;
|
|
215
|
+
var shouldRenderMedia = !isHighlightVariant && (hasPicture || shouldShowInitial);
|
|
88
216
|
var fullNameInitial = sanitizedFullName.charAt(0).toUpperCase();
|
|
89
217
|
var pillBackground = withAlpha(primaryColor || "#1c1036", 0.65) || "#1c1036";
|
|
90
218
|
var pillBorderColor = withAlpha(accentColor || "#ffffff", 0.8) || "#ffffff";
|
|
91
219
|
var subtitleColor = withAlpha(primaryContrast || "#ffffff", 0.75) || "#ffffff";
|
|
92
220
|
var initialColor = accentContrast || primaryContrast || "#ffffff";
|
|
221
|
+
var highlightNameBackground = accentColor || "#E7FF0F";
|
|
222
|
+
var highlightNameText = accentContrast || "#000000";
|
|
223
|
+
var highlightTitleBackground = withAlpha(primaryColor || "#1c1036", 0.84) || "#1c1036";
|
|
224
|
+
var highlightTitleText = primaryContrast || "#ffffff";
|
|
225
|
+
var fullNameFit = getTextFit(sanitizedFullName, textContainerWidth, textContainerHeight / 2, effectiveFullNameMaxFontSize);
|
|
226
|
+
var titleFit = getTextFit(sanitizedTitle, isHighlightVariant ? textContainerWidth : textContainerWidth - 72, textContainerHeight / 2 - 40, effectiveTitleMaxFontSize);
|
|
93
227
|
var splitFullName = sanitizedFullName ? sanitizedFullName.split(/\s+/) : [];
|
|
94
228
|
var fullNameDelayBetweenWords = splitFullName.length ? maxTimeInFrames / splitFullName.length : maxTimeInFrames;
|
|
95
|
-
var _distributeTextToFit = distributeTextToFit(sanitizedFullName, textContainerWidth, textContainerHeight / 2, fullNameMaxFontSize),
|
|
96
|
-
fullNameLines = _distributeTextToFit.lines,
|
|
97
|
-
fullNameFontSize = _distributeTextToFit.fontSize;
|
|
98
|
-
var splitTitle = hasTitle ? sanitizedTitle.split(/\s+/) : null;
|
|
99
|
-
var titleDelayBetweenWords = splitTitle ? maxTimeInFrames / splitTitle.length : 0;
|
|
100
|
-
var _distributeTextToFit2 = distributeTextToFit(sanitizedTitle, textContainerWidth - 72, textContainerHeight / 2 - 40, titleMaxFontSize),
|
|
101
|
-
titleLines = _distributeTextToFit2.lines,
|
|
102
|
-
titleFontSize = _distributeTextToFit2.fontSize;
|
|
103
229
|
var mediaEntranceFrame = Math.max(frame - 5, 0);
|
|
104
230
|
var mediaEntranceOpacity = interpolate(mediaEntranceFrame, [0, 12], [0, 1], {
|
|
105
231
|
easing: Easing.out(Easing.ease),
|
|
@@ -129,6 +255,31 @@ export var HandoffNametag = function HandoffNametag(_ref) {
|
|
|
129
255
|
});
|
|
130
256
|
var mediaBaseSize = candidateSizes.length ? Math.min.apply(Math, _toConsumableArray(candidateSizes)) : 60;
|
|
131
257
|
var initialsFontSize = Math.max(Math.round(mediaBaseSize * 0.45), 22);
|
|
258
|
+
var contentAlignItems = lineJustifyContent[alignment] === "flex-end" ? "flex-end" : "flex-start";
|
|
259
|
+
var staticContainerTop = containerTop === null || containerTop === void 0 ? void 0 : containerTop[alignment];
|
|
260
|
+
var _getTypewriterState = getTypewriterState({
|
|
261
|
+
frame: frame,
|
|
262
|
+
fps: fps,
|
|
263
|
+
duration: duration,
|
|
264
|
+
sanitizedFullName: sanitizedFullName,
|
|
265
|
+
sanitizedTitle: sanitizedTitle
|
|
266
|
+
}),
|
|
267
|
+
visibleFullName = _getTypewriterState.visibleFullName,
|
|
268
|
+
visibleTitle = _getTypewriterState.visibleTitle;
|
|
269
|
+
var visibleFullNameFit = getVisibleTextFit({
|
|
270
|
+
fullText: sanitizedFullName,
|
|
271
|
+
visibleText: visibleFullName,
|
|
272
|
+
maxWidth: textContainerWidth,
|
|
273
|
+
maxHeight: textContainerHeight / 2,
|
|
274
|
+
maxFontSize: effectiveFullNameMaxFontSize
|
|
275
|
+
});
|
|
276
|
+
var visibleTitleFit = getVisibleTextFit({
|
|
277
|
+
fullText: sanitizedTitle,
|
|
278
|
+
visibleText: visibleTitle,
|
|
279
|
+
maxWidth: textContainerWidth,
|
|
280
|
+
maxHeight: textContainerHeight / 2 - 40,
|
|
281
|
+
maxFontSize: effectiveTitleMaxFontSize
|
|
282
|
+
});
|
|
132
283
|
return /*#__PURE__*/React.createElement(AbsoluteFill, {
|
|
133
284
|
style: {
|
|
134
285
|
height: height,
|
|
@@ -140,16 +291,42 @@ export var HandoffNametag = function HandoffNametag(_ref) {
|
|
|
140
291
|
}, /*#__PURE__*/React.createElement("div", {
|
|
141
292
|
style: {
|
|
142
293
|
position: "absolute",
|
|
294
|
+
top: staticContainerTop,
|
|
143
295
|
left: containerLeft[alignment],
|
|
144
296
|
right: containerRight[alignment],
|
|
145
|
-
bottom: containerBottom,
|
|
297
|
+
bottom: typeof staticContainerTop === "number" ? undefined : containerBottom,
|
|
146
298
|
borderRadius: "10px",
|
|
147
|
-
padding: shouldRenderMedia || hasTitle ? "12px 18px" : "10px 22px",
|
|
299
|
+
padding: isHighlightVariant ? "0px" : shouldRenderMedia || hasTitle ? "12px 18px" : "10px 22px",
|
|
148
300
|
display: "flex",
|
|
149
301
|
flexDirection: "column",
|
|
150
|
-
alignItems:
|
|
302
|
+
alignItems: contentAlignItems,
|
|
303
|
+
maxWidth: textContainerWidth
|
|
151
304
|
}
|
|
152
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
305
|
+
}, isHighlightVariant ? /*#__PURE__*/React.createElement("div", {
|
|
306
|
+
style: {
|
|
307
|
+
display: "flex",
|
|
308
|
+
flexDirection: "column",
|
|
309
|
+
alignItems: contentAlignItems,
|
|
310
|
+
gap: 10,
|
|
311
|
+
maxWidth: textContainerWidth
|
|
312
|
+
}
|
|
313
|
+
}, /*#__PURE__*/React.createElement(HighlightLines, {
|
|
314
|
+
lines: visibleFullNameFit.lines,
|
|
315
|
+
fontSize: visibleFullNameFit.fontSize,
|
|
316
|
+
fontWeight: 900,
|
|
317
|
+
color: highlightNameText,
|
|
318
|
+
backgroundColor: highlightNameBackground,
|
|
319
|
+
alignItems: contentAlignItems
|
|
320
|
+
}), hasTitle && /*#__PURE__*/React.createElement(HighlightLines, {
|
|
321
|
+
lines: visibleTitleFit.lines,
|
|
322
|
+
fontSize: visibleTitleFit.fontSize,
|
|
323
|
+
fontWeight: 700,
|
|
324
|
+
color: highlightTitleText,
|
|
325
|
+
backgroundColor: highlightTitleBackground,
|
|
326
|
+
alignItems: contentAlignItems,
|
|
327
|
+
opacity: titleOpacity,
|
|
328
|
+
transform: "translateY(".concat(titleTranslateY, "px)")
|
|
329
|
+
})) : /*#__PURE__*/React.createElement("div", {
|
|
153
330
|
style: {
|
|
154
331
|
backgroundColor: pillBackground,
|
|
155
332
|
borderRadius: "20px",
|
|
@@ -207,13 +384,13 @@ export var HandoffNametag = function HandoffNametag(_ref) {
|
|
|
207
384
|
}
|
|
208
385
|
}, /*#__PURE__*/React.createElement("div", {
|
|
209
386
|
style: {
|
|
210
|
-
fontSize: "".concat(
|
|
387
|
+
fontSize: "".concat(fullNameFit.fontSize, "px"),
|
|
211
388
|
fontWeight: 900,
|
|
212
389
|
color: primaryContrast,
|
|
213
390
|
display: "flex",
|
|
214
391
|
flexDirection: "column"
|
|
215
392
|
}
|
|
216
|
-
},
|
|
393
|
+
}, fullNameFit.lines.map(function (line, lineIndex) {
|
|
217
394
|
var index = 0;
|
|
218
395
|
return /*#__PURE__*/React.createElement("div", {
|
|
219
396
|
style: {
|
|
@@ -226,7 +403,7 @@ export var HandoffNametag = function HandoffNametag(_ref) {
|
|
|
226
403
|
}, line.split(" ").map(function (word, wordIndex) {
|
|
227
404
|
var delay = Math.min(index * fullNameDelayBetweenWords, maxTimeInFrames);
|
|
228
405
|
index++;
|
|
229
|
-
var
|
|
406
|
+
var wordOpacity = interpolate(frame - delay, [0, 15], [0, 1], {
|
|
230
407
|
easing: Easing["in"](Easing.ease),
|
|
231
408
|
extrapolateRight: "clamp"
|
|
232
409
|
});
|
|
@@ -236,15 +413,15 @@ export var HandoffNametag = function HandoffNametag(_ref) {
|
|
|
236
413
|
});
|
|
237
414
|
return /*#__PURE__*/React.createElement("span", {
|
|
238
415
|
style: {
|
|
239
|
-
opacity:
|
|
416
|
+
opacity: wordOpacity,
|
|
240
417
|
transform: "translateY(".concat(translateY, "px)")
|
|
241
418
|
},
|
|
242
419
|
key: "fullname-word-".concat(lineIndex, "-").concat(wordIndex)
|
|
243
420
|
}, word);
|
|
244
421
|
}));
|
|
245
|
-
})),
|
|
422
|
+
})), hasTitle && /*#__PURE__*/React.createElement("div", {
|
|
246
423
|
style: {
|
|
247
|
-
fontSize: "".concat(
|
|
424
|
+
fontSize: "".concat(titleFit.fontSize, "px"),
|
|
248
425
|
fontWeight: 700,
|
|
249
426
|
color: subtitleColor,
|
|
250
427
|
display: "flex",
|