@zync/zync-screnplay-player 0.1.241 → 0.1.243

package/dist/screenplay/RemotionRenderer/theme/themes/boxwipe/Nametag.js

@@ -42,7 +42,7 @@ export var BoxwipeNametag = function BoxwipeNametag(_ref) {
         borderWidth: clamp(width * 0.004, 5, 8),
         boxHeight: height * 0.092,
         boxWidth: width * 0.62,
-        containerBottom: height * 0.12,
+        containerBottom: height * 0.22,
         containerLeft: width * 0.045,
         maxNameFontSize: width * 0.066,
         maxTitleFontSize: width * 0.024,
@@ -52,7 +52,7 @@ export var BoxwipeNametag = function BoxwipeNametag(_ref) {
         borderWidth: clamp(width * 0.01, 5, 8),
         boxHeight: height * 0.058,
         boxWidth: width * 0.78,
-        containerBottom: height * 0.2,
+        containerBottom: height * 0.3,
         containerLeft: width * 0.07,
         maxNameFontSize: width * 0.092,
         maxTitleFontSize: width * 0.038,
@@ -62,7 +62,7 @@ export var BoxwipeNametag = function BoxwipeNametag(_ref) {
         borderWidth: clamp(width * 0.007, 5, 8),
         boxHeight: height * 0.072,
         boxWidth: width * 0.74,
-        containerBottom: height * 0.15,
+        containerBottom: height * 0.22,
         containerLeft: width * 0.06,
         maxNameFontSize: width * 0.078,
         maxTitleFontSize: width * 0.033,
@@ -85,16 +85,18 @@ export var BoxwipeNametag = function BoxwipeNametag(_ref) {
   var titleBackgroundColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.primaryColor) || primaryColor || "#000000";
   var titleTextColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.primaryContrast) || getContrastColor(titleBackgroundColor) || primaryContrast || "#FFFFFF";
   var horizontalPadding = borderWidth;
+  var titleHorizontalPadding = borderWidth * 2.5;
   var nameFontSize = fitSingleLineFontSize(displayName, boxWidth - horizontalPadding, boxHeight * 0.84, maxNameFontSize);
   var fittedBoxWidth = clamp(estimateTextWidth(displayName, nameFontSize) + horizontalPadding, boxWidth * 0.42, boxWidth);
-  var titleFontSize = fitSingleLineFontSize(displayTitle, fittedBoxWidth, boxHeight * 0.45, maxTitleFontSize);
-  var widthGrowEnd = Math.round(fps * 0.65);
-  var heightGrowStart = widthGrowEnd + Math.round(fps * 0.06);
-  var heightGrowEnd = heightGrowStart + Math.round(fps * 0.45);
-  var sweepStart = heightGrowEnd + Math.round(fps * 0.08);
-  var sweepEnd = sweepStart + Math.round(fps * 1.05);
-  var finishStart = sweepEnd + Math.round(fps * 0.04);
-  var finishEnd = finishStart + Math.round(fps * 0.35);
+  var titleFontSize = fitSingleLineFontSize(displayTitle, boxWidth - titleHorizontalPadding, boxHeight * 0.45, maxTitleFontSize);
+  var fittedTitleBoxWidth = clamp(estimateTextWidth(displayTitle, titleFontSize) + titleHorizontalPadding, boxWidth * 0.28, boxWidth);
+  var widthGrowEnd = Math.round(fps * 0.5);
+  var heightGrowStart = widthGrowEnd + Math.round(fps * 0.04);
+  var heightGrowEnd = heightGrowStart + Math.round(fps * 0.34);
+  var sweepStart = heightGrowEnd + Math.round(fps * 0.06);
+  var sweepEnd = sweepStart + Math.round(fps * 0.82);
+  var finishStart = sweepEnd + Math.round(fps * 0.03);
+  var finishEnd = finishStart + Math.round(fps * 0.28);
   var widthProgress = interpolate(frame, [0, widthGrowEnd], [0, 1], {
     easing: Easing.out(Easing.cubic),
     extrapolateLeft: "clamp",
@@ -169,14 +171,15 @@ export var BoxwipeNametag = function BoxwipeNametag(_ref) {
       letterSpacing: "0.1em",
       lineHeight: 1.1,
       marginBottom: titleGap,
-      maxWidth: fittedBoxWidth,
+      maxWidth: boxWidth,
       opacity: finishProgress,
       overflow: "hidden",
-      padding: "0 ".concat(borderWidth * 1.25, "px"),
+      padding: "0 ".concat(titleHorizontalPadding / 2, "px"),
       textShadow: "0 2px 7px rgba(0, 0, 0, 0.65)",
       textOverflow: "clip",
       transform: "translateY(".concat(titleTranslateY, "px)"),
-      whiteSpace: "nowrap"
+      whiteSpace: "nowrap",
+      width: fittedTitleBoxWidth
     }
   }, displayTitle), /*#__PURE__*/React.createElement("div", {
     style: {

package/dist/screenplay/RemotionRenderer/theme/themes/centerline/Nametag.js

@@ -44,7 +44,7 @@ export var CenterlineNametag = function CenterlineNametag(_ref) {
     accentContrast = _useTheme.accentContrast;
   var _useOrientationBased = useOrientationBased({
       landscape: {
-        containerBottom: height * 0.13,
+        containerBottom: height * 0.2,
         containerWidth: width * 0.76,
         lineHeight: clamp(height * 0.008, 5, 9),
         lineOffset: height * 0.01,
@@ -55,7 +55,7 @@ export var CenterlineNametag = function CenterlineNametag(_ref) {
         titleInset: width * 0.01
       },
       portrait: {
-        containerBottom: height * 0.22,
+        containerBottom: height * 0.29,
         containerWidth: width * 0.86,
         lineHeight: clamp(height * 0.005, 5, 8),
         lineOffset: height * 0.008,
@@ -66,7 +66,7 @@ export var CenterlineNametag = function CenterlineNametag(_ref) {
         titleInset: width * 0.014
       },
       square: {
-        containerBottom: height * 0.16,
+        containerBottom: height * 0.23,
         containerWidth: width * 0.82,
         lineHeight: clamp(height * 0.007, 5, 8),
         lineOffset: height * 0.008,
@@ -94,11 +94,11 @@ export var CenterlineNametag = function CenterlineNametag(_ref) {
   var nameFit = distributeTextToFit(displayName, containerWidth, nameHeight, maxNameFontSize);
   var nametagWidth = clamp(estimateLineWidth(displayName, nameFit.fontSize), containerWidth * 0.35, containerWidth);
   var titleFontSize = fitSingleLineFontSize(displayTitle, nametagWidth - titleInset * 2, titleBarHeight * 0.74, maxTitleFontSize);
-  var titleGrowEnd = Math.round(fps * 1.45);
-  var lineFillStart = Math.round(fps * 0.6);
-  var lineFillEnd = lineFillStart + Math.round(fps * 1.15);
-  var nameRevealStart = lineFillEnd + Math.round(fps * 0.28);
-  var nameRevealEnd = nameRevealStart + Math.round(fps * 1.25);
+  var titleGrowEnd = Math.round(fps * 1.2);
+  var lineFillStart = Math.round(fps * 0.5);
+  var lineFillEnd = lineFillStart + Math.round(fps * 0.95);
+  var nameRevealStart = lineFillEnd + Math.round(fps * 0.22);
+  var nameRevealEnd = nameRevealStart + Math.round(fps * 1.05);
   var baseScale = interpolate(frame, [0, titleGrowEnd], [0, 1], {
     easing: Easing.out(Easing.cubic),
     extrapolateLeft: "clamp",

package/dist/screenplay/RemotionRenderer/theme/themes/rightslide/Nametag.js

@@ -36,8 +36,8 @@ export var RightslideNametag = function RightslideNametag(_ref) {
     accentColor = _useTheme.accentColor;
   var _useOrientationBased = useOrientationBased({
       landscape: {
-        containerBottom: height * 0.11,
-        containerLeft: width * 0.04,
+        containerBottom: height * 0.21,
+        containerRight: width * 0.04,
         lineWidth: clamp(width * 0.004, 5, 8),
         maxNameBoxWidth: width * 0.62,
         maxNameFontSize: width * 0.07,
@@ -47,7 +47,7 @@ export var RightslideNametag = function RightslideNametag(_ref) {
         titleGap: height * 0.012
       },
       portrait: {
-        containerBottom: height * 0.2,
+        containerBottom: height * 0.3,
         containerLeft: width * 0.07,
         lineWidth: clamp(width * 0.01, 5, 8),
         maxNameBoxWidth: width * 0.84,
@@ -58,8 +58,8 @@ export var RightslideNametag = function RightslideNametag(_ref) {
         titleGap: height * 0.008
       },
       square: {
-        containerBottom: height * 0.15,
-        containerLeft: width * 0.06,
+        containerBottom: height * 0.22,
+        containerRight: width * 0.06,
         lineWidth: clamp(width * 0.007, 5, 8),
         maxNameBoxWidth: width * 0.78,
         maxNameFontSize: width * 0.095,
@@ -71,6 +71,7 @@ export var RightslideNametag = function RightslideNametag(_ref) {
     }),
     containerBottom = _useOrientationBased.containerBottom,
     containerLeft = _useOrientationBased.containerLeft,
+    containerRight = _useOrientationBased.containerRight,
     lineWidth = _useOrientationBased.lineWidth,
     maxNameBoxWidth = _useOrientationBased.maxNameBoxWidth,
     maxNameFontSize = _useOrientationBased.maxNameFontSize,
@@ -148,6 +149,7 @@ export var RightslideNametag = function RightslideNametag(_ref) {
       fontFamily: fontFamily,
       left: containerLeft,
       position: "absolute",
+      right: containerRight,
       width: maxNameBoxWidth + lineWidth
     }
   }, /*#__PURE__*/React.createElement("div", {

package/dist/screenplay/RemotionRenderer/theme/themes/stackfill/Nametag.js

@@ -36,7 +36,7 @@ export var StackfillNametag = function StackfillNametag(_ref) {
     accentColor = _useTheme.accentColor;
   var _useOrientationBased = useOrientationBased({
       landscape: {
-        containerBottom: height * 0.11,
+        containerBottom: height * 0.21,
         containerLeft: width * 0.04,
         maxNameBoxWidth: width * 0.62,
         maxNameFontSize: width * 0.07,
@@ -46,7 +46,7 @@ export var StackfillNametag = function StackfillNametag(_ref) {
         titleGap: height * 0.012
       },
       portrait: {
-        containerBottom: height * 0.2,
+        containerBottom: height * 0.3,
         containerLeft: width * 0.07,
         maxNameBoxWidth: width * 0.84,
         maxNameFontSize: width * 0.12,
@@ -56,7 +56,7 @@ export var StackfillNametag = function StackfillNametag(_ref) {
         titleGap: height * 0.008
       },
       square: {
-        containerBottom: height * 0.15,
+        containerBottom: height * 0.22,
         containerLeft: width * 0.06,
         maxNameBoxWidth: width * 0.78,
         maxNameFontSize: width * 0.095,

package/package.json

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