@zync/zync-screnplay-player 0.1.201 → 0.1.203

package/dist/screenplay/RemotionRenderer/theme/themes/default/HandoffNametag.js

@@ -15,6 +15,14 @@ import React from "react";
 import PausableImg from "../../../components/utils/PausableImg";
 var _loadFont = loadFont(),
   fontFamily = _loadFont.fontFamily;
+var HANDOFF_NAMETAG_VARIANTS = {
+  BOXED: "boxed",
+  HIGHLIGHT: "highlight"
+};
+var HIGHLIGHT_FONT_SCALE = 1.5;
+var TYPEWRITER_DELAY_FRAMES = 6;
+var TYPEWRITER_TARGET_SECONDS = 2;
+var TYPEWRITER_END_BUFFER_SECONDS = 0.4;
 var withAlpha = function withAlpha(color, alpha) {
   if (!color || typeof color !== "string" || !color.startsWith("#")) {
     return color;
@@ -35,12 +43,126 @@ var withAlpha = function withAlpha(color, alpha) {
   var b = intValue & 255;
   return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
 };
-export var HandoffNametag = function HandoffNametag(_ref) {
-  var pictureUrl = _ref.pictureUrl,
-    fullName = _ref.fullName,
-    title = _ref.title,
-    alignment = _ref.alignment,
-    duration = _ref.duration;
+var getTextFit = function getTextFit(text, maxWidth, maxHeight, maxFontSize) {
+  if (!text) {
+    return {
+      lines: [],
+      fontSize: maxFontSize
+    };
+  }
+  return distributeTextToFit(text, maxWidth, maxHeight, maxFontSize);
+};
+var getVisibleTextFit = function getVisibleTextFit(_ref) {
+  var fullText = _ref.fullText,
+    visibleText = _ref.visibleText,
+    maxWidth = _ref.maxWidth,
+    maxHeight = _ref.maxHeight,
+    maxFontSize = _ref.maxFontSize;
+  var baseFit = getTextFit(fullText, maxWidth, maxHeight, maxFontSize);
+  if (!visibleText) {
+    return {
+      lines: [],
+      fontSize: baseFit.fontSize
+    };
+  }
+  return getTextFit(visibleText, maxWidth, maxHeight, baseFit.fontSize);
+};
+var revealText = function revealText(text, elapsedFrames, durationFrames) {
+  if (!text) {
+    return "";
+  }
+  if (durationFrames <= 0 || elapsedFrames >= durationFrames) {
+    return text;
+  }
+  var progress = Math.max(0, Math.min(1, elapsedFrames / durationFrames));
+  return text.slice(0, Math.round(progress * text.length));
+};
+var getTypewriterState = function getTypewriterState(_ref2) {
+  var frame = _ref2.frame,
+    fps = _ref2.fps,
+    duration = _ref2.duration,
+    sanitizedFullName = _ref2.sanitizedFullName,
+    sanitizedTitle = _ref2.sanitizedTitle;
+  var durationInFrames = Number.isFinite(duration) ? Math.max(Math.round(duration * fps), 1) : Math.round(TYPEWRITER_TARGET_SECONDS * fps);
+  var maxTypingFrames = Math.max(1, durationInFrames - Math.round(TYPEWRITER_END_BUFFER_SECONDS * fps));
+  var totalTypingFrames = Math.min(Math.round(TYPEWRITER_TARGET_SECONDS * fps), maxTypingFrames);
+  var typingFrame = Math.max(frame - TYPEWRITER_DELAY_FRAMES, 0);
+  var nameCharacters = sanitizedFullName.length;
+  var titleCharacters = sanitizedTitle.length;
+  if (!nameCharacters && !titleCharacters) {
+    return {
+      visibleFullName: "",
+      visibleTitle: ""
+    };
+  }
+  if (!nameCharacters) {
+    return {
+      visibleFullName: "",
+      visibleTitle: revealText(sanitizedTitle, typingFrame, totalTypingFrames)
+    };
+  }
+  if (!titleCharacters) {
+    return {
+      visibleFullName: revealText(sanitizedFullName, typingFrame, totalTypingFrames),
+      visibleTitle: ""
+    };
+  }
+  var totalCharacters = nameCharacters + titleCharacters;
+  var nameTypingFrames = Math.max(1, Math.round(totalTypingFrames * (nameCharacters / totalCharacters)));
+  var titleTypingFrames = Math.max(1, totalTypingFrames - nameTypingFrames);
+  return {
+    visibleFullName: revealText(sanitizedFullName, typingFrame, nameTypingFrames),
+    visibleTitle: revealText(sanitizedTitle, Math.max(typingFrame - nameTypingFrames, 0), titleTypingFrames)
+  };
+};
+var HighlightLines = function HighlightLines(_ref3) {
+  var lines = _ref3.lines,
+    fontSize = _ref3.fontSize,
+    fontWeight = _ref3.fontWeight,
+    color = _ref3.color,
+    backgroundColor = _ref3.backgroundColor,
+    alignItems = _ref3.alignItems,
+    _ref3$opacity = _ref3.opacity,
+    opacity = _ref3$opacity === void 0 ? 1 : _ref3$opacity,
+    transform = _ref3.transform;
+  if (!lines.length) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: alignItems,
+      gap: 8,
+      opacity: opacity,
+      transform: transform
+    }
+  }, lines.map(function (line, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: "highlight-line-".concat(fontSize, "-").concat(index),
+      style: {
+        width: "fit-content",
+        maxWidth: "100%",
+        fontFamily: fontFamily,
+        fontSize: "".concat(fontSize, "px"),
+        fontWeight: fontWeight,
+        color: color,
+        backgroundColor: backgroundColor,
+        padding: "8px 16px",
+        borderRadius: "14px",
+        boxShadow: "0 10px 24px rgba(0, 0, 0, 0.24)"
+      }
+    }, line);
+  }));
+};
+export var HandoffNametag = function HandoffNametag(_ref4) {
+  var pictureUrl = _ref4.pictureUrl,
+    fullName = _ref4.fullName,
+    title = _ref4.title,
+    alignment = _ref4.alignment,
+    duration = _ref4.duration,
+    _ref4$handoffNametagV = _ref4.handoffNametagVariant,
+    handoffNametagVariant = _ref4$handoffNametagV === void 0 ? HANDOFF_NAMETAG_VARIANTS.BOXED : _ref4$handoffNametagV;
   var _useVideoConfig = useVideoConfig(),
     fps = _useVideoConfig.fps,
     width = _useVideoConfig.width,
@@ -61,6 +183,7 @@ export var HandoffNametag = function HandoffNametag(_ref) {
     fullNameMaxFontSize = _useOrientationBased.fullNameMaxFontSize,
     titleMaxFontSize = _useOrientationBased.titleMaxFontSize,
     targetImageTranslateY = _useOrientationBased.targetImageTranslateY,
+    containerTop = _useOrientationBased.containerTop,
     containerLeft = _useOrientationBased.containerLeft,
     containerRight = _useOrientationBased.containerRight,
     targetContainerBottoms = _useOrientationBased.targetContainerBottoms,
@@ -69,6 +192,11 @@ export var HandoffNametag = function HandoffNametag(_ref) {
     containerAlignItems = _useOrientationBased.containerAlignItems,
     lineJustifyContent = _useOrientationBased.lineJustifyContent;
   var isPortrait = orientation === "portrait";
+  var variant = handoffNametagVariant === HANDOFF_NAMETAG_VARIANTS.HIGHLIGHT ? HANDOFF_NAMETAG_VARIANTS.HIGHLIGHT : HANDOFF_NAMETAG_VARIANTS.BOXED;
+  var isHighlightVariant = variant === HANDOFF_NAMETAG_VARIANTS.HIGHLIGHT;
+  var fontScale = isHighlightVariant ? HIGHLIGHT_FONT_SCALE : 1;
+  var effectiveFullNameMaxFontSize = Math.round(fullNameMaxFontSize * fontScale);
+  var effectiveTitleMaxFontSize = Math.round(titleMaxFontSize * fontScale);
   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];
   var inputRangeInSeconds = calculateInputRangeInPhases(phaseDurationsInSeconds, 0);
   var imageHeight = useTimeInterpolate(inputRangeInSeconds, targetImageHeights, DEFAULT_TIME_INTERPOLATE_OPTIONS);
@@ -83,23 +211,21 @@ export var HandoffNametag = function HandoffNametag(_ref) {
   var hasName = Boolean(sanitizedFullName.length);
   var hasTitle = Boolean(sanitizedTitle.length);
   var hasPicture = Boolean(pictureUrl);
-  var shouldShowInitial = hasName && hasTitle && !hasPicture;
-  var shouldRenderMedia = hasPicture || shouldShowInitial;
+  var shouldShowInitial = !isHighlightVariant && hasName && hasTitle && !hasPicture;
+  var shouldRenderMedia = !isHighlightVariant && (hasPicture || shouldShowInitial);
   var fullNameInitial = sanitizedFullName.charAt(0).toUpperCase();
   var pillBackground = withAlpha(primaryColor || "#1c1036", 0.65) || "#1c1036";
   var pillBorderColor = withAlpha(accentColor || "#ffffff", 0.8) || "#ffffff";
   var subtitleColor = withAlpha(primaryContrast || "#ffffff", 0.75) || "#ffffff";
   var initialColor = accentContrast || primaryContrast || "#ffffff";
+  var highlightNameBackground = accentColor || "#E7FF0F";
+  var highlightNameText = accentContrast || "#000000";
+  var highlightTitleBackground = withAlpha(primaryColor || "#1c1036", 0.84) || "#1c1036";
+  var highlightTitleText = primaryContrast || "#ffffff";
+  var fullNameFit = getTextFit(sanitizedFullName, textContainerWidth, textContainerHeight / 2, effectiveFullNameMaxFontSize);
+  var titleFit = getTextFit(sanitizedTitle, isHighlightVariant ? textContainerWidth : textContainerWidth - 72, textContainerHeight / 2 - 40, effectiveTitleMaxFontSize);
   var splitFullName = sanitizedFullName ? sanitizedFullName.split(/\s+/) : [];
   var fullNameDelayBetweenWords = splitFullName.length ? maxTimeInFrames / splitFullName.length : maxTimeInFrames;
-  var _distributeTextToFit = distributeTextToFit(sanitizedFullName, textContainerWidth, textContainerHeight / 2, fullNameMaxFontSize),
-    fullNameLines = _distributeTextToFit.lines,
-    fullNameFontSize = _distributeTextToFit.fontSize;
-  var splitTitle = hasTitle ? sanitizedTitle.split(/\s+/) : null;
-  var titleDelayBetweenWords = splitTitle ? maxTimeInFrames / splitTitle.length : 0;
-  var _distributeTextToFit2 = distributeTextToFit(sanitizedTitle, textContainerWidth - 72, textContainerHeight / 2 - 40, titleMaxFontSize),
-    titleLines = _distributeTextToFit2.lines,
-    titleFontSize = _distributeTextToFit2.fontSize;
   var mediaEntranceFrame = Math.max(frame - 5, 0);
   var mediaEntranceOpacity = interpolate(mediaEntranceFrame, [0, 12], [0, 1], {
     easing: Easing.out(Easing.ease),
@@ -129,6 +255,31 @@ export var HandoffNametag = function HandoffNametag(_ref) {
   });
   var mediaBaseSize = candidateSizes.length ? Math.min.apply(Math, _toConsumableArray(candidateSizes)) : 60;
   var initialsFontSize = Math.max(Math.round(mediaBaseSize * 0.45), 22);
+  var contentAlignItems = lineJustifyContent[alignment] === "flex-end" ? "flex-end" : "flex-start";
+  var staticContainerTop = containerTop === null || containerTop === void 0 ? void 0 : containerTop[alignment];
+  var _getTypewriterState = getTypewriterState({
+      frame: frame,
+      fps: fps,
+      duration: duration,
+      sanitizedFullName: sanitizedFullName,
+      sanitizedTitle: sanitizedTitle
+    }),
+    visibleFullName = _getTypewriterState.visibleFullName,
+    visibleTitle = _getTypewriterState.visibleTitle;
+  var visibleFullNameFit = getVisibleTextFit({
+    fullText: sanitizedFullName,
+    visibleText: visibleFullName,
+    maxWidth: textContainerWidth,
+    maxHeight: textContainerHeight / 2,
+    maxFontSize: effectiveFullNameMaxFontSize
+  });
+  var visibleTitleFit = getVisibleTextFit({
+    fullText: sanitizedTitle,
+    visibleText: visibleTitle,
+    maxWidth: textContainerWidth,
+    maxHeight: textContainerHeight / 2 - 40,
+    maxFontSize: effectiveTitleMaxFontSize
+  });
   return /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       height: height,
@@ -140,16 +291,42 @@ export var HandoffNametag = function HandoffNametag(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       position: "absolute",
+      top: staticContainerTop,
       left: containerLeft[alignment],
       right: containerRight[alignment],
-      bottom: containerBottom,
+      bottom: typeof staticContainerTop === "number" ? undefined : containerBottom,
       borderRadius: "10px",
-      padding: shouldRenderMedia || hasTitle ? "12px 18px" : "10px 22px",
+      padding: isHighlightVariant ? "0px" : shouldRenderMedia || hasTitle ? "12px 18px" : "10px 22px",
       display: "flex",
       flexDirection: "column",
-      alignItems: "center"
+      alignItems: contentAlignItems,
+      maxWidth: textContainerWidth
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, isHighlightVariant ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: contentAlignItems,
+      gap: 10,
+      maxWidth: textContainerWidth
+    }
+  }, /*#__PURE__*/React.createElement(HighlightLines, {
+    lines: visibleFullNameFit.lines,
+    fontSize: visibleFullNameFit.fontSize,
+    fontWeight: 900,
+    color: highlightNameText,
+    backgroundColor: highlightNameBackground,
+    alignItems: contentAlignItems
+  }), hasTitle && /*#__PURE__*/React.createElement(HighlightLines, {
+    lines: visibleTitleFit.lines,
+    fontSize: visibleTitleFit.fontSize,
+    fontWeight: 700,
+    color: highlightTitleText,
+    backgroundColor: highlightTitleBackground,
+    alignItems: contentAlignItems,
+    opacity: titleOpacity,
+    transform: "translateY(".concat(titleTranslateY, "px)")
+  })) : /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor: pillBackground,
       borderRadius: "20px",
@@ -207,13 +384,13 @@ export var HandoffNametag = function HandoffNametag(_ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "".concat(fullNameFontSize, "px"),
+      fontSize: "".concat(fullNameFit.fontSize, "px"),
       fontWeight: 900,
       color: primaryContrast,
       display: "flex",
       flexDirection: "column"
     }
-  }, fullNameLines.map(function (line, lineIndex) {
+  }, fullNameFit.lines.map(function (line, lineIndex) {
     var index = 0;
     return /*#__PURE__*/React.createElement("div", {
       style: {
@@ -226,7 +403,7 @@ export var HandoffNametag = function HandoffNametag(_ref) {
     }, line.split(" ").map(function (word, wordIndex) {
       var delay = Math.min(index * fullNameDelayBetweenWords, maxTimeInFrames);
       index++;
-      var opacity = interpolate(frame - delay, [0, 15], [0, 1], {
+      var wordOpacity = interpolate(frame - delay, [0, 15], [0, 1], {
         easing: Easing["in"](Easing.ease),
         extrapolateRight: "clamp"
       });
@@ -236,15 +413,15 @@ export var HandoffNametag = function HandoffNametag(_ref) {
       });
       return /*#__PURE__*/React.createElement("span", {
         style: {
-          opacity: opacity,
+          opacity: wordOpacity,
           transform: "translateY(".concat(translateY, "px)")
         },
         key: "fullname-word-".concat(lineIndex, "-").concat(wordIndex)
       }, word);
     }));
-  })), splitTitle && /*#__PURE__*/React.createElement("div", {
+  })), hasTitle && /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "".concat(titleFontSize, "px"),
+      fontSize: "".concat(titleFit.fontSize, "px"),
       fontWeight: 700,
       color: subtitleColor,
       display: "flex",

package/dist/screenplay/RemotionRenderer/tracks/LayoutVideoTrack.js

@@ -23,26 +23,26 @@ var transitionThemes = {
   }
 };
 
-/*
-const UseMotionBlur = ({ children, componentName }) => {
-  const {
-    props: {
-      output: { theme = "default" } = {
-        theme: window.screenplayProps.output.theme,
-      },
-    },
-  } = useVideoConfig();
-
-  if (motionBlurComponents[componentName] && motionBlurThemes[theme]) {
-    return (
-      <CameraMotionBlur shutterAngle={180} samples={5}>
-        {children}
-      </CameraMotionBlur>
-    );
-  }
-
-  return children;
-};
+/*
+const UseMotionBlur = ({ children, componentName }) => {
+  const {
+    props: {
+      output: { theme = "default" } = {
+        theme: window.screenplayProps.output.theme,
+      },
+    },
+  } = useVideoConfig();
+
+  if (motionBlurComponents[componentName] && motionBlurThemes[theme]) {
+    return (
+      <CameraMotionBlur shutterAngle={180} samples={5}>
+        {children}
+      </CameraMotionBlur>
+    );
+  }
+
+  return children;
+};
  */
 
 var NestedEffects = function NestedEffects(_ref) {

package/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "@zync/zync-screnplay-player",
-  "version": "0.1.201",
-  "files": [
-    "dist"
-  ],
-  "main": "dist/bundle.js",
-  "module": "dist/index.js",
-  "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/bundle.js"
-  },
-  "scripts": {
-    "clean": "rimraf dist",
-    "build": "npm run clean && babel src --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --copy-files && webpack",
-    "publish-lib": "npm run build && npm publish --access public"
-  },
-  "dependencies": {
-    "@remotion/google-fonts": "4.0.208",
-    "@remotion/lottie": "4.0.208",
-    "@remotion/motion-blur": "4.0.208",
-    "@remotion/player": "4.0.208",
-    "@remotion/transitions": "4.0.208",
-    "remotion": "4.0.208"
-  },
-  "peerDependencies": {
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "7.21.5",
-    "@babel/core": "7.21.5",
-    "@babel/preset-env": "7.21.5",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "^7.26.0",
-    "babel-loader": "^9.2.1",
-    "terser-webpack-plugin": "^5.3.11",
-    "ts-loader": "^9.5.2",
-    "typescript": "^5.7.3",
-    "webpack": "^5.97.1",
-    "webpack-cli": "^6.0.1",
-    "rimraf": "^5.0.7"
-  },
-  "browser": {
-    "fs": false
-  }
-}
+{
+  "name": "@zync/zync-screnplay-player",
+  "version": "0.1.203",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/bundle.js",
+  "module": "dist/index.js",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/bundle.js"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && babel src --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --copy-files && webpack",
+    "publish-lib": "npm run build && npm publish --access public"
+  },
+  "dependencies": {
+    "@remotion/google-fonts": "4.0.208",
+    "@remotion/lottie": "4.0.208",
+    "@remotion/motion-blur": "4.0.208",
+    "@remotion/player": "4.0.208",
+    "@remotion/transitions": "4.0.208",
+    "remotion": "4.0.208"
+  },
+  "peerDependencies": {
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.21.5",
+    "@babel/core": "7.21.5",
+    "@babel/preset-env": "7.21.5",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "^7.26.0",
+    "babel-loader": "^9.2.1",
+    "terser-webpack-plugin": "^5.3.11",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "rimraf": "^5.0.7"
+  },
+  "browser": {
+    "fs": false
+  }
+}