@zync/zync-screnplay-player 0.1.189 → 0.1.190

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

@@ -5,10 +5,10 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 export var getHandoffNametagConfig = function getHandoffNametagConfig(width) {
   return {
     portrait: {
-      targetImageHeights: [130, 230, 200, 170, 200, 170, 170, 170, 170, 170],
+      targetImageHeights: [130, 230, 200, 170, 200, 170, 170, 170],
       targetImageTranslateY: _defineProperty(_defineProperty({}, "first-left", [770, 160, 160, 160, 110, 0, 0, 0, 0, 0]), "second-right", [770, 160, 160, 160, 110, 0, 0, 0, 0, 0]),
       opacity: [0.1, 0.5, 0.7, 1, 1, 1, 1, 1, 1, 0],
-      targetImageWidths: [60, 60, 170, 170, 170, 170, 170, 170, 170, 170],
+      targetImageWidths: [60, 60, 170, 170, 170, 170, 170, 170],
       rotation: [180, 180, 180, 360, 360, 360, 360, 360, 360, 360],
       targetTextOpacity: [1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
       textContainerWidth: width - 15 - 170 - 20,
@@ -16,42 +16,45 @@ export var getHandoffNametagConfig = function getHandoffNametagConfig(width) {
       lineJustifyContent: _defineProperty(_defineProperty({}, "first-left", "flex-start"), "second-right", "flex-end"),
       fullNameMaxFontSize: 42,
       titleMaxFontSize: 30,
-      targetContainerTops: _defineProperty(_defineProperty({}, "first-left", [700, 700, 700, 700, 700, 700, 700, 700, 700, 700]), "second-right", [1050, 1050, 1050, 1050, 1050, 1050, 1050, 1050, 1050, 1050]),
-      containerLeft: _defineProperty(_defineProperty({}, "first-left", 70), "second-right", -120),
+      targetContainerBottoms: _defineProperty(_defineProperty({}, "first-left", [200, 200, 200, 200, 200, 200, 200, 200]), "second-right", [200, 200, 200, 200, 200, 200, 200, 200]),
+      containerLeft: _defineProperty(_defineProperty({}, "first-left", 70), "second-right", undefined),
+      containerRight: _defineProperty(_defineProperty({}, "first-left", undefined), "second-right", 70),
       containerFlexDirection: _defineProperty(_defineProperty({}, "first-left", "row"), "second-right", "row-reverse"),
       containerAlignItems: _defineProperty(_defineProperty({}, "first-left", "center"), "second-right", "center")
     },
     landscape: {
-      targetImageHeights: [130, 230, 200, 170, 200, 170, 170, 170],
-      targetImageTranslateY: _defineProperty(_defineProperty({}, "first-left", [-770, -160, -160, -160, -110, 0, 0, 0]), "second-right", [-770, -160, -160, -160, -110, 0, 0, 0]),
+      targetImageHeights: [110, 110, 110, 110, 110, 110, 110, 110],
+      targetImageTranslateY: _defineProperty(_defineProperty({}, "first-left", [-300, -160, -160, -160, -110, 0, 0, 0]), "second-right", [-300, -160, -160, -160, -110, 0, 0, 0]),
       opacity: [0.1, 0.5, 0.7, 1, 1, 1, 1, 0],
-      targetImageWidths: [60, 60, 170, 170, 170, 170, 170, 170],
-      rotation: [180, 180, 180, 360, 360, 360, 360, 360],
+      targetImageWidths: [110, 110, 110, 110, 110, 110, 110, 110],
+      rotation: [360, 360, 360, 360, 360, 360, 360, 360],
       targetTextOpacity: [1, 1, 1, 1, 1, 1, 1, 0],
-      textContainerWidth: width / 2 - 15 - 170 - 20,
+      textContainerWidth: width * 0.375,
       textContainerHeight: 170,
       lineJustifyContent: _defineProperty(_defineProperty({}, "first-left", "flex-start"), "second-right", "flex-end"),
-      fullNameMaxFontSize: 42,
-      titleMaxFontSize: 30,
-      targetContainerTops: _defineProperty(_defineProperty({}, "first-left", [600, 600, 600, 600, 600, 600, 600, 600]), "second-right", [600, 600, 600, 600, 600, 600, 600, 600]),
-      containerLeft: _defineProperty(_defineProperty({}, "first-left", 75), "second-right", -75),
+      fullNameMaxFontSize: 46,
+      titleMaxFontSize: 35,
+      targetContainerBottoms: _defineProperty(_defineProperty({}, "first-left", [200, 200, 200, 200, 200, 200, 200, 200]), "second-right", [200, 200, 200, 200, 200, 200, 200, 200]),
+      containerLeft: _defineProperty(_defineProperty({}, "first-left", 75), "second-right", undefined),
+      containerRight: _defineProperty(_defineProperty({}, "first-left", undefined), "second-right", 75),
       containerFlexDirection: _defineProperty(_defineProperty({}, "first-left", "row"), "second-right", "row-reverse"),
       containerAlignItems: _defineProperty(_defineProperty({}, "first-left", "center"), "second-right", "center")
     },
     square: {
-      targetImageHeights: [130, 180, 150, 120, 150, 120, 120, 120],
-      targetImageTranslateY: _defineProperty(_defineProperty({}, "first-left", [-770, -160, -160, -160, -110, 0, 0, 0]), "second-right", [-770, -160, -160, -160, -110, 0, 0, 0]),
+      targetImageHeights: [90, 90, 90, 90, 90, 90, 90, 90],
+      targetImageTranslateY: _defineProperty(_defineProperty({}, "first-left", [-300, -160, -160, -160, -110, 0, 0, 0]), "second-right", [-300, -160, -160, -160, -110, 0, 0, 0]),
       opacity: [0.1, 0.5, 0.7, 1, 1, 1, 1, 0],
-      targetImageWidths: [60, 60, 120, 120, 120, 120, 120, 120],
+      targetImageWidths: [90, 90, 90, 90, 90, 90, 90, 90],
       rotation: [180, 180, 180, 360, 360, 360, 360, 360],
       targetTextOpacity: [1, 1, 1, 1, 1, 1, 1, 0],
-      textContainerWidth: width / 2 - 15 - 170 - 20 - 20,
+      textContainerWidth: width * 0.375,
       textContainerHeight: 170,
       lineJustifyContent: _defineProperty(_defineProperty({}, "first-left", "flex-start"), "second-right", "flex-end"),
-      fullNameMaxFontSize: 36,
-      titleMaxFontSize: 24,
-      targetContainerTops: _defineProperty(_defineProperty({}, "first-left", [750, 750, 750, 750, 750, 750, 750, 750]), "second-right", [750, 750, 750, 750, 750, 750, 750, 750]),
-      containerLeft: _defineProperty(_defineProperty({}, "first-left", 50), "second-right", 580),
+      fullNameMaxFontSize: 24,
+      titleMaxFontSize: 18,
+      targetContainerBottoms: _defineProperty(_defineProperty({}, "first-left", [200, 200, 200, 200, 200, 200, 200, 200]), "second-right", [200, 200, 200, 200, 200, 200, 200, 200]),
+      containerLeft: _defineProperty(_defineProperty({}, "first-left", 50), "second-right", undefined),
+      containerRight: _defineProperty(_defineProperty({}, "first-left", undefined), "second-right", 50),
       containerFlexDirection: _defineProperty(_defineProperty({}, "first-left", "row"), "second-right", "row-reverse"),
       containerAlignItems: _defineProperty(_defineProperty({}, "first-left", "center"), "second-right", "center")
     }

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

@@ -1,3 +1,9 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
 import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
 import { loadFont } from "@remotion/google-fonts/Roboto";
@@ -9,6 +15,26 @@ import React from "react";
 import PausableImg from "../../../components/utils/PausableImg";
 var _loadFont = loadFont(),
   fontFamily = _loadFont.fontFamily;
+var withAlpha = function withAlpha(color, alpha) {
+  if (!color || typeof color !== "string" || !color.startsWith("#")) {
+    return color;
+  }
+  var hex = color.replace("#", "");
+  if (![3, 6].includes(hex.length)) {
+    return color;
+  }
+  var normalizedHex = hex.length === 3 ? hex.split("").map(function (_char) {
+    return _char + _char;
+  }).join("") : hex;
+  var intValue = Number.parseInt(normalizedHex, 16);
+  if (Number.isNaN(intValue)) {
+    return color;
+  }
+  var r = intValue >> 16 & 255;
+  var g = intValue >> 8 & 255;
+  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,
@@ -17,10 +43,13 @@ export var HandoffNametag = function HandoffNametag(_ref) {
     duration = _ref.duration;
   var _useVideoConfig = useVideoConfig(),
     fps = _useVideoConfig.fps,
-    width = _useVideoConfig.width;
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
   var _useTheme = useTheme(),
     primaryColor = _useTheme.primaryColor,
-    primaryContrast = _useTheme.primaryContrast;
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
   var frame = useCurrentFrame();
   var _useOrientationBased = useOrientationBased(getHandoffNametagConfig(width)),
     targetImageHeights = _useOrientationBased.targetImageHeights,
@@ -33,13 +62,14 @@ export var HandoffNametag = function HandoffNametag(_ref) {
     titleMaxFontSize = _useOrientationBased.titleMaxFontSize,
     targetImageTranslateY = _useOrientationBased.targetImageTranslateY,
     containerLeft = _useOrientationBased.containerLeft,
-    targetContainerTops = _useOrientationBased.targetContainerTops,
+    containerRight = _useOrientationBased.containerRight,
+    targetContainerBottoms = _useOrientationBased.targetContainerBottoms,
     containerFlexDirection = _useOrientationBased.containerFlexDirection,
     orientation = _useOrientationBased.orientation,
     containerAlignItems = _useOrientationBased.containerAlignItems,
     lineJustifyContent = _useOrientationBased.lineJustifyContent;
+  console.log(targetContainerBottoms);
   var isPortrait = orientation === "portrait";
-  var isSquare = orientation === "square";
   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);
@@ -47,46 +77,113 @@ export var HandoffNametag = function HandoffNametag(_ref) {
   var imageOpacity = useTimeInterpolate(inputRangeInSeconds, opacity, DEFAULT_TIME_INTERPOLATE_OPTIONS);
   var imageWidths = useTimeInterpolate(inputRangeInSeconds, targetImageWidths, DEFAULT_TIME_INTERPOLATE_OPTIONS);
   var imageRotation = useTimeInterpolate(inputRangeInSeconds, rotation, DEFAULT_TIME_INTERPOLATE_OPTIONS);
-  var containerTop = useTimeInterpolate(inputRangeInSeconds, targetContainerTops[alignment], DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  var containerBottom = useTimeInterpolate(inputRangeInSeconds, targetContainerBottoms[alignment], DEFAULT_TIME_INTERPOLATE_OPTIONS);
+  console.log(containerBottom);
   var maxTimeInFrames = 0.2 * fps;
-  var splitFullName = fullName.split(" ");
-  var fullNameDelayBetweenWords = maxTimeInFrames / splitFullName.length;
-  var _distributeTextToFit = distributeTextToFit(fullName, textContainerWidth, textContainerHeight / 2, fullNameMaxFontSize),
+  var sanitizedFullName = (fullName === null || fullName === void 0 ? void 0 : fullName.trim()) || "";
+  var sanitizedTitle = (title === null || title === void 0 ? void 0 : title.trim()) || "";
+  var hasName = Boolean(sanitizedFullName.length);
+  var hasTitle = Boolean(sanitizedTitle.length);
+  var hasPicture = Boolean(pictureUrl);
+  var shouldShowInitial = hasName && hasTitle && !hasPicture;
+  var shouldRenderMedia = 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 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 = title !== null && title !== void 0 && title.length ? title.split(" ") : null;
+  var splitTitle = hasTitle ? sanitizedTitle.split(/\s+/) : null;
   var titleDelayBetweenWords = splitTitle ? maxTimeInFrames / splitTitle.length : 0;
-  var _distributeTextToFit2 = distributeTextToFit(title || "", textContainerWidth, textContainerHeight / 2, titleMaxFontSize),
+  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),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var mediaEntranceTranslateY = interpolate(mediaEntranceFrame, [0, 12], [25, 0], {
+    easing: Easing.out(Easing.ease),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var titleAnimationFrame = Math.max(frame - maxTimeInFrames * 0.5, 0);
+  var titleOpacity = interpolate(titleAnimationFrame, [0, 12], [0, 1], {
+    easing: Easing.out(Easing.ease),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var titleTranslateY = interpolate(titleAnimationFrame, [0, 12], [20, 0], {
+    easing: Easing.out(Easing.ease),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var numericImageHeight = Number(imageHeight);
+  var numericImageWidth = Number(imageWidths);
+  var candidateSizes = [numericImageHeight, numericImageWidth].filter(function (size) {
+    return Number.isFinite(size) && size > 0;
+  });
+  var mediaBaseSize = candidateSizes.length ? Math.min.apply(Math, _toConsumableArray(candidateSizes)) : 60;
+  var initialsFontSize = Math.max(Math.round(mediaBaseSize * 0.45), 22);
   return /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
-      flexDirection: containerFlexDirection[alignment],
-      left: containerLeft[alignment],
-      top: containerTop,
-      height: "min-content",
-      alignItems: containerAlignItems[alignment],
-      gap: isSquare ? "5px" : "20px",
+      height: height,
       opacity: imageOpacity,
-      width: isSquare ? "min-content" : "100%"
+      width: "100%",
+      display: "flex",
+      alignItems: containerAlignItems[alignment]
     }
-  }, pictureUrl && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: containerLeft[alignment],
+      right: containerRight[alignment],
+      bottom: containerBottom,
+      borderRadius: "10px",
+      padding: shouldRenderMedia || hasTitle ? "12px 18px" : "10px 22px",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: pillBackground,
+      borderRadius: "20px",
+      border: "1px solid ".concat(pillBorderColor),
+      padding: shouldRenderMedia || hasTitle ? "18px 32px" : "16px 36px",
+      display: "flex",
+      flexDirection: shouldRenderMedia ? containerFlexDirection[alignment] : "column",
+      alignItems: shouldRenderMedia ? containerAlignItems[alignment] : "center",
+      gap: shouldRenderMedia ? "20px" : "6px",
+      boxShadow: "0 20px 45px rgba(0, 0, 0, 0.35)",
+      maxWidth: textContainerWidth
+    }
+  }, shouldRenderMedia && /*#__PURE__*/React.createElement("div", {
     style: {
       height: imageHeight,
       width: imageWidths,
-      backgroundColor: primaryColor,
+      backgroundColor: withAlpha(primaryContrast || "#ffffff", 0.15) || primaryContrast || "rgba(255,255,255,0.15)",
       borderRadius: "9999px",
-      opacity: imageOpacity,
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
       maxHeight: imageHeight,
       maxWidth: imageWidths,
+      minHeight: "".concat(mediaBaseSize, "px"),
+      minWidth: "".concat(mediaBaseSize, "px"),
       overflow: "hidden",
-      border: "10px solid ".concat(primaryColor),
-      transform: "translateY(".concat(imageTranslateY, "px)")
+      border: "4px solid ".concat(pillBorderColor),
+      transform: "translateY(".concat(Number(imageTranslateY) + mediaEntranceTranslateY, "px)"),
+      boxShadow: "0 12px 28px rgba(0, 0, 0, 0.45)",
+      opacity: imageOpacity * mediaEntranceOpacity
     }
-  }, frame >= 4 && /*#__PURE__*/React.createElement(PausableImg, {
+  }, hasPicture && frame >= 4 ? /*#__PURE__*/React.createElement(PausableImg, {
     delayRenderTimeoutInMilliseconds: 62000,
     src: pictureUrl,
     style: {
@@ -95,11 +192,20 @@ export var HandoffNametag = function HandoffNametag(_ref) {
       height: "100%",
       transform: "rotate(".concat(imageRotation, "deg)")
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  }) : /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: fontFamily,
+      color: initialColor,
+      fontSize: "".concat(initialsFontSize, "px"),
+      fontWeight: 700
+    }
+  }, fullNameInitial)), /*#__PURE__*/React.createElement("div", {
     style: {
       fontFamily: fontFamily,
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      maxWidth: textContainerWidth,
+      gap: 10
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -107,7 +213,6 @@ export var HandoffNametag = function HandoffNametag(_ref) {
       fontWeight: 900,
       color: primaryContrast,
       display: "flex",
-      textTransform: "uppercase",
       flexDirection: "column"
     }
   }, fullNameLines.map(function (line, lineIndex) {
@@ -116,6 +221,7 @@ export var HandoffNametag = function HandoffNametag(_ref) {
       style: {
         display: "flex",
         gap: "10px",
+        flexWrap: "wrap",
         justifyContent: lineJustifyContent[alignment]
       },
       key: "fullname-line-".concat(lineIndex)
@@ -141,37 +247,13 @@ export var HandoffNametag = function HandoffNametag(_ref) {
   })), splitTitle && /*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: "".concat(titleFontSize, "px"),
-      fontWeight: 900,
-      color: primaryColor,
+      fontWeight: 700,
+      color: subtitleColor,
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      width: "100%",
+      opacity: titleOpacity,
+      transform: "translateY(".concat(titleTranslateY, "px)")
     }
-  }, titleLines.map(function (line, lineIndex) {
-    var index = 0;
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "flex",
-        gap: "10px",
-        justifyContent: lineJustifyContent[alignment]
-      },
-      key: "title-line-".concat(lineIndex)
-    }, line.split(" ").map(function (word, wordIndex) {
-      var delay = Math.min(index * titleDelayBetweenWords, maxTimeInFrames);
-      var opacity = interpolate(frame - delay, [0, 15], [0, 1], {
-        easing: Easing["in"](Easing.ease),
-        extrapolateRight: "clamp"
-      });
-      var translateY = interpolate(frame - delay, [0, 15], [50, 0], {
-        easing: Easing["in"](Easing.ease),
-        extrapolateRight: "clamp"
-      });
-      return /*#__PURE__*/React.createElement("span", {
-        style: {
-          opacity: opacity,
-          transform: "translateY(".concat(translateY, "px)")
-        },
-        key: "title-word-".concat(lineIndex, "-").concat(wordIndex)
-      }, word);
-    }));
-  }))));
+  }, sanitizedTitle)))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zync/zync-screnplay-player",
-  "version": "0.1.189",
+  "version": "0.1.190",
   "files": [
     "dist"
   ],