@zync/zync-screnplay-player 0.1.240 → 0.1.242

package/dist/screenplay/RemotionRenderer/theme/hooks/useThemedComponents.js

@@ -26,6 +26,10 @@ import { NoneNametag } from "../themes/none/Nametag";
 import { NoneTitle } from "../themes/none/Title";
 import { Title as CollabIntroTitle } from "../themes/collabintro/Title";
 import { Nametag as CollabIntroNametag } from "../themes/collabintro/Nametag";
+import { CenterlineNametag } from "../themes/centerline/Nametag";
+import { BoxwipeNametag } from "../themes/boxwipe/Nametag";
+import { StackfillNametag } from "../themes/stackfill/Nametag";
+import { RightslideNametag } from "../themes/rightslide/Nametag";
 import { KeyPointOverlayDepth } from "../../components/layouts/KeyPointOverlayDepth";
 
 /** Always update this when adding a new theme and/or components. */
@@ -75,6 +79,18 @@ var themedComponents = {
     Title: CollabIntroTitle,
     Nametag: CollabIntroNametag
   },
+  centerline: {
+    Nametag: CenterlineNametag
+  },
+  boxwipe: {
+    Nametag: BoxwipeNametag
+  },
+  stackfill: {
+    Nametag: StackfillNametag
+  },
+  rightslide: {
+    Nametag: RightslideNametag
+  },
   depth: {
     Sentence: KeyPointOverlayDepth
   }

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

@@ -0,0 +1,254 @@
+import React from "react";
+import { Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { getContrastColor } from "../../../helpers/getContrastColor";
+var _loadFont = loadFont("normal", {
+    subsets: ["latin"],
+    weights: ["400", "500", "600", "700"]
+  }),
+  fontFamily = _loadFont.fontFamily;
+var clamp = function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+};
+var estimateTextWidth = function estimateTextWidth(text, fontSize) {
+  return text.length * fontSize * 0.64;
+};
+var fitSingleLineFontSize = function fitSingleLineFontSize(text, maxWidth, maxHeight, maxFontSize) {
+  if (!text) {
+    return maxFontSize;
+  }
+  return Math.floor(clamp(maxWidth / (text.length * 0.64), 1, Math.min(maxFontSize, maxHeight)));
+};
+var splitCharacters = function splitCharacters(text) {
+  return Array.from(text || "");
+};
+export var BoxwipeNametag = function BoxwipeNametag(_ref) {
+  var name = _ref.name,
+    title = _ref.title,
+    themeSettings = _ref.themeSettings;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps,
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        borderWidth: clamp(width * 0.004, 5, 8),
+        boxHeight: height * 0.092,
+        boxWidth: width * 0.62,
+        containerBottom: height * 0.12,
+        containerLeft: width * 0.045,
+        maxNameFontSize: width * 0.066,
+        maxTitleFontSize: width * 0.024,
+        titleGap: height * 0.008
+      },
+      portrait: {
+        borderWidth: clamp(width * 0.01, 5, 8),
+        boxHeight: height * 0.058,
+        boxWidth: width * 0.78,
+        containerBottom: height * 0.2,
+        containerLeft: width * 0.07,
+        maxNameFontSize: width * 0.092,
+        maxTitleFontSize: width * 0.038,
+        titleGap: height * 0.006
+      },
+      square: {
+        borderWidth: clamp(width * 0.007, 5, 8),
+        boxHeight: height * 0.072,
+        boxWidth: width * 0.74,
+        containerBottom: height * 0.15,
+        containerLeft: width * 0.06,
+        maxNameFontSize: width * 0.078,
+        maxTitleFontSize: width * 0.033,
+        titleGap: height * 0.007
+      }
+    }),
+    borderWidth = _useOrientationBased.borderWidth,
+    boxHeight = _useOrientationBased.boxHeight,
+    boxWidth = _useOrientationBased.boxWidth,
+    containerBottom = _useOrientationBased.containerBottom,
+    containerLeft = _useOrientationBased.containerLeft,
+    maxNameFontSize = _useOrientationBased.maxNameFontSize,
+    maxTitleFontSize = _useOrientationBased.maxTitleFontSize,
+    titleGap = _useOrientationBased.titleGap;
+  var displayName = (name || "").toLocaleUpperCase();
+  var displayTitle = (title || "").toLocaleUpperCase();
+  var nameCharacters = splitCharacters(displayName);
+  var boxColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.secondaryColor) || accentColor || primaryColor || "#ff6a00";
+  var nameTextColor = getContrastColor(boxColor) || "#FFFFFF";
+  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, boxWidth - titleHorizontalPadding, boxHeight * 0.45, maxTitleFontSize);
+  var fittedTitleBoxWidth = clamp(estimateTextWidth(displayTitle, titleFontSize) + titleHorizontalPadding, boxWidth * 0.28, boxWidth);
+  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 widthProgress = interpolate(frame, [0, widthGrowEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var heightProgress = interpolate(frame, [heightGrowStart, heightGrowEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var sweepProgress = interpolate(frame, [sweepStart, sweepEnd], [0, 1], {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var finishProgress = interpolate(frame, [finishStart, finishEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var boxWidthProgress = interpolate(widthProgress, [0, 1], [0, 100], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var currentBoxHeight = interpolate(heightProgress, [0, 1], [borderWidth, boxHeight], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var boxTranslateY = interpolate(heightProgress, [0, 1], [(boxHeight - borderWidth) / 2, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var sweepOpacity = interpolate(frame, [sweepStart, sweepStart + Math.round(fps * 0.08), sweepEnd, finishEnd], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var shadowOpacity = interpolate(heightProgress, [0.5, 1], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var titleTranslateY = interpolate(finishProgress, [0, 1], [-boxHeight * 0.28, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var backplateOffset = borderWidth * 1.4;
+  var backplateTranslate = interpolate(finishProgress, [0, 1], [-backplateOffset, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var backplateOpacity = interpolate(finishProgress, [0, 0.35, 1], [0, 1, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      bottom: containerBottom,
+      fontFamily: fontFamily,
+      left: containerLeft,
+      position: "absolute",
+      width: fittedBoxWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignItems: "center",
+      backgroundColor: titleBackgroundColor,
+      boxSizing: "border-box",
+      color: titleTextColor,
+      display: "inline-flex",
+      fontSize: titleFontSize,
+      fontWeight: 500,
+      justifyContent: "center",
+      letterSpacing: "0.1em",
+      lineHeight: 1.1,
+      marginBottom: titleGap,
+      maxWidth: boxWidth,
+      opacity: finishProgress,
+      overflow: "hidden",
+      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",
+      width: fittedTitleBoxWidth
+    }
+  }, displayTitle), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: boxHeight,
+      position: "relative",
+      width: fittedBoxWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: titleTextColor,
+      bottom: -backplateOffset,
+      boxShadow: "0 4px 8px rgba(0, 0, 0, 0.38)",
+      height: boxHeight,
+      opacity: backplateOpacity,
+      position: "absolute",
+      right: -backplateOffset,
+      transform: "translate(".concat(backplateTranslate, "px, ").concat(backplateTranslate, "px)"),
+      width: fittedBoxWidth
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: boxColor,
+      boxShadow: "0 5px 8px rgba(0, 0, 0, ".concat(0.4 * shadowOpacity, ")"),
+      height: currentBoxHeight,
+      overflow: "hidden",
+      position: "absolute",
+      left: "50%",
+      top: 0,
+      transform: "translate(-50%, ".concat(boxTranslateY, "px)"),
+      width: "".concat(boxWidthProgress, "%")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: "rgba(255, 255, 255, 0.55)",
+      height: "100%",
+      left: "".concat(sweepProgress * 100, "%"),
+      opacity: sweepOpacity,
+      position: "absolute",
+      top: 0,
+      transform: "translateX(-50%)",
+      width: borderWidth
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignItems: "center",
+      display: "flex",
+      height: boxHeight,
+      left: horizontalPadding / 2,
+      position: "absolute",
+      top: 0,
+      whiteSpace: "pre"
+    }
+  }, nameCharacters.map(function (character, index) {
+    var characterRevealStart = index / nameCharacters.length;
+    var characterRevealEnd = (index + 0.65) / nameCharacters.length;
+    var opacity = interpolate(sweepProgress, [characterRevealStart, characterRevealEnd], [0, 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      key: "".concat(character, "-").concat(index),
+      style: {
+        color: nameTextColor,
+        fontSize: nameFontSize,
+        fontWeight: 400,
+        lineHeight: 1,
+        opacity: opacity,
+        textShadow: "0 1px 5px rgba(0, 0, 0, 0.26)"
+      }
+    }, character);
+  })))));
+};

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

@@ -0,0 +1,209 @@
+import React from "react";
+import { Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont } from "@remotion/google-fonts/Kanit";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { getContrastColor } from "../../../helpers/getContrastColor";
+import { distributeTextToFit } from "../default/Sentence/SentenceSimple.helpers.js";
+var _loadFont = loadFont("normal", {
+    subsets: ["latin"],
+    weights: ["400", "500", "600", "700"]
+  }),
+  fontFamily = _loadFont.fontFamily;
+var clamp = function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+};
+var estimateLineWidth = function estimateLineWidth(text, fontSize) {
+  return text.length * fontSize * 0.6;
+};
+var fitSingleLineFontSize = function fitSingleLineFontSize(text, maxWidth, maxHeight, maxFontSize) {
+  if (!text) {
+    return maxFontSize;
+  }
+  return Math.floor(clamp(maxWidth / (text.length * 0.6), 1, Math.min(maxFontSize, maxHeight)));
+};
+var getReadableColor = function getReadableColor(preferredColor, backgroundColor, fallbackColor) {
+  if (preferredColor && preferredColor !== backgroundColor) {
+    return preferredColor;
+  }
+  return getContrastColor(backgroundColor) || fallbackColor;
+};
+export var CenterlineNametag = function CenterlineNametag(_ref) {
+  var name = _ref.name,
+    title = _ref.title,
+    themeSettings = _ref.themeSettings;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    fps = _useVideoConfig.fps,
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height;
+  var _useTheme = useTheme(),
+    primaryColor = _useTheme.primaryColor,
+    primaryContrast = _useTheme.primaryContrast,
+    accentColor = _useTheme.accentColor,
+    accentContrast = _useTheme.accentContrast;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        containerBottom: height * 0.13,
+        containerWidth: width * 0.76,
+        lineHeight: clamp(height * 0.008, 5, 9),
+        lineOffset: height * 0.01,
+        maxNameFontSize: width * 0.09,
+        maxTitleFontSize: width * 0.029,
+        nameHeight: height * 0.115,
+        titleBarHeight: height * 0.052,
+        titleInset: width * 0.01
+      },
+      portrait: {
+        containerBottom: height * 0.22,
+        containerWidth: width * 0.86,
+        lineHeight: clamp(height * 0.005, 5, 8),
+        lineOffset: height * 0.008,
+        maxNameFontSize: width * 0.13,
+        maxTitleFontSize: width * 0.052,
+        nameHeight: height * 0.075,
+        titleBarHeight: height * 0.038,
+        titleInset: width * 0.014
+      },
+      square: {
+        containerBottom: height * 0.16,
+        containerWidth: width * 0.82,
+        lineHeight: clamp(height * 0.007, 5, 8),
+        lineOffset: height * 0.008,
+        maxNameFontSize: width * 0.105,
+        maxTitleFontSize: width * 0.04,
+        nameHeight: height * 0.085,
+        titleBarHeight: height * 0.046,
+        titleInset: width * 0.012
+      }
+    }),
+    containerBottom = _useOrientationBased.containerBottom,
+    containerWidth = _useOrientationBased.containerWidth,
+    lineHeight = _useOrientationBased.lineHeight,
+    lineOffset = _useOrientationBased.lineOffset,
+    maxNameFontSize = _useOrientationBased.maxNameFontSize,
+    maxTitleFontSize = _useOrientationBased.maxTitleFontSize,
+    nameHeight = _useOrientationBased.nameHeight,
+    titleBarHeight = _useOrientationBased.titleBarHeight,
+    titleInset = _useOrientationBased.titleInset;
+  var displayName = (name || "").toLocaleUpperCase();
+  var displayTitle = (title || "").toLocaleUpperCase();
+  var brandColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.secondaryColor) || accentColor || primaryColor || "#ff6a00";
+  var nameTextColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.primaryContrast) || primaryContrast || "#FFFFFF";
+  var titleTextColor = !(themeSettings !== null && themeSettings !== void 0 && themeSettings.secondaryColor) && brandColor === accentColor ? getReadableColor(accentContrast, brandColor, "#FFFFFF") : getContrastColor(brandColor) || "#FFFFFF";
+  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 baseScale = interpolate(frame, [0, titleGrowEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var fillScale = interpolate(frame, [lineFillStart, lineFillEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var nameReveal = interpolate(frame, [nameRevealStart, nameRevealEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var nameTranslateY = interpolate(nameReveal, [0, 1], [-nameHeight, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var titleClipInset = interpolate(baseScale, [0, 1], [50, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: containerBottom,
+      left: "50%",
+      width: containerWidth,
+      transform: "translateX(-50%)",
+      fontFamily: fontFamily,
+      textAlign: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: lineHeight,
+      margin: "0 auto ".concat(lineOffset, "px"),
+      position: "relative",
+      width: nametagWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: "#FFFFFF",
+      height: "100%",
+      left: 0,
+      position: "absolute",
+      top: 0,
+      transform: "scaleX(".concat(baseScale, ")"),
+      transformOrigin: "center",
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: brandColor,
+      height: "100%",
+      left: 0,
+      position: "absolute",
+      top: 0,
+      transform: "scaleX(".concat(fillScale, ")"),
+      transformOrigin: "center",
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: nameHeight,
+      margin: "0 auto",
+      overflow: "hidden",
+      position: "relative",
+      width: nametagWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: nameTextColor,
+      fontSize: nameFit.fontSize,
+      fontWeight: 400,
+      lineHeight: "".concat(nameHeight, "px"),
+      textShadow: "0 2px 8px rgba(0, 0, 0, 0.55)",
+      transform: "translateY(".concat(nameTranslateY, "px)"),
+      whiteSpace: "nowrap"
+    }
+  }, displayName)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignItems: "center",
+      backgroundColor: brandColor,
+      borderRadius: titleBarHeight / 2,
+      display: "flex",
+      height: titleBarHeight,
+      justifyContent: "center",
+      margin: "0 auto",
+      overflow: "hidden",
+      padding: "0 ".concat(titleInset, "px"),
+      clipPath: "inset(0 ".concat(titleClipInset, "% 0 ").concat(titleClipInset, "% round ").concat(titleBarHeight / 2, "px)"),
+      width: nametagWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: titleTextColor,
+      fontSize: titleFontSize,
+      fontWeight: 400,
+      lineHeight: 1,
+      opacity: baseScale,
+      overflow: "hidden",
+      textOverflow: "clip",
+      textShadow: "0 1px 3px rgba(0, 0, 0, 0.28)",
+      whiteSpace: "nowrap"
+    }
+  }, displayTitle)));
+};