@zync/zync-screnplay-player 0.1.239 → 0.1.241

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

@@ -0,0 +1,262 @@
+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"]
+  }),
+  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.62;
+};
+var fitSingleLineFontSize = function fitSingleLineFontSize(text, maxWidth, maxHeight, maxFontSize) {
+  if (!text) {
+    return maxFontSize;
+  }
+  var estimatedWidthAtOnePixel = estimateTextWidth(text, 1);
+  return Math.floor(clamp(maxWidth / estimatedWidthAtOnePixel, 1, Math.min(maxFontSize, maxHeight)));
+};
+export var RightslideNametag = function RightslideNametag(_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,
+    accentColor = _useTheme.accentColor;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        containerBottom: height * 0.11,
+        containerLeft: width * 0.04,
+        lineWidth: clamp(width * 0.004, 5, 8),
+        maxNameBoxWidth: width * 0.62,
+        maxNameFontSize: width * 0.07,
+        maxTitleFontSize: width * 0.032,
+        nameBoxHeight: height * 0.102,
+        titleBoxHeight: height * 0.052,
+        titleGap: height * 0.012
+      },
+      portrait: {
+        containerBottom: height * 0.2,
+        containerLeft: width * 0.07,
+        lineWidth: clamp(width * 0.01, 5, 8),
+        maxNameBoxWidth: width * 0.84,
+        maxNameFontSize: width * 0.12,
+        maxTitleFontSize: width * 0.056,
+        nameBoxHeight: height * 0.066,
+        titleBoxHeight: height * 0.038,
+        titleGap: height * 0.008
+      },
+      square: {
+        containerBottom: height * 0.15,
+        containerLeft: width * 0.06,
+        lineWidth: clamp(width * 0.007, 5, 8),
+        maxNameBoxWidth: width * 0.78,
+        maxNameFontSize: width * 0.095,
+        maxTitleFontSize: width * 0.045,
+        nameBoxHeight: height * 0.078,
+        titleBoxHeight: height * 0.046,
+        titleGap: height * 0.01
+      }
+    }),
+    containerBottom = _useOrientationBased.containerBottom,
+    containerLeft = _useOrientationBased.containerLeft,
+    lineWidth = _useOrientationBased.lineWidth,
+    maxNameBoxWidth = _useOrientationBased.maxNameBoxWidth,
+    maxNameFontSize = _useOrientationBased.maxNameFontSize,
+    maxTitleFontSize = _useOrientationBased.maxTitleFontSize,
+    nameBoxHeight = _useOrientationBased.nameBoxHeight,
+    titleBoxHeight = _useOrientationBased.titleBoxHeight,
+    titleGap = _useOrientationBased.titleGap;
+  var displayName = (name || "").toLocaleUpperCase();
+  var displayTitle = (title || "").toLocaleUpperCase();
+  var boxColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.secondaryColor) || accentColor || primaryColor || "#ff6a00";
+  var textColor = getContrastColor(boxColor) || "#FFFFFF";
+  var namePadding = nameBoxHeight * 0.22;
+  var titlePadding = titleBoxHeight * 0.26;
+  var nameFontSize = fitSingleLineFontSize(displayName, maxNameBoxWidth - namePadding * 2, nameBoxHeight * 0.82, maxNameFontSize);
+  var titleFontSize = fitSingleLineFontSize(displayTitle, maxNameBoxWidth - titlePadding * 2, titleBoxHeight * 0.66, maxTitleFontSize);
+  var titleBoxMaxWidth = maxNameBoxWidth;
+  var fullHeight = nameBoxHeight + titleGap + titleBoxHeight;
+  var lineEnd = Math.round(fps * 0.28);
+  var boxStart = lineEnd;
+  var boxEnd = boxStart + Math.round(fps * 1.3);
+  var whiteEnd = boxEnd;
+  var nameRevealStart = boxStart + Math.round(fps * 0.2);
+  var nameRevealEnd = nameRevealStart + Math.round(fps * 0.9);
+  var titleEnd = boxStart + Math.round(fps * 0.62);
+  var lineProgress = interpolate(frame, [0, lineEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var nameBoxProgress = interpolate(frame, [boxStart, boxEnd], [0, 1], {
+    easing: Easing.inOut(Easing.quad),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var whiteMoveProgress = interpolate(frame, [boxStart, whiteEnd], [0, 1], {
+    easing: Easing.out(Easing.quad),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var whiteWidth = interpolate(whiteMoveProgress, [0, 0.5, 1], [lineWidth * 1.4, nameBoxHeight * 1.45, lineWidth], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var whiteLeft = interpolate(whiteMoveProgress, [0, 0.5, 1], [100, 42, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var whiteOpacity = interpolate(frame, [boxStart, boxStart + 1], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var nameReveal = interpolate(frame, [nameRevealStart, nameRevealEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var visibleNameProgress = Math.min(nameReveal, nameBoxProgress);
+  var titleProgress = interpolate(frame, [boxStart, titleEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var titleTextProgress = interpolate(titleProgress, [0.16, 1], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var titleTextTranslate = interpolate(titleTextProgress, [0, 1], [-titleBoxHeight * 1.15, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      bottom: containerBottom,
+      fontFamily: fontFamily,
+      left: containerLeft,
+      position: "absolute",
+      width: maxNameBoxWidth + lineWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: fullHeight,
+      position: "relative",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: "#FFFFFF",
+      height: "100%",
+      position: "absolute",
+      right: 0,
+      top: 0,
+      transform: "scaleY(".concat(lineProgress, ")"),
+      transformOrigin: "top",
+      width: lineWidth
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      boxSizing: "border-box",
+      height: nameBoxHeight,
+      maxWidth: maxNameBoxWidth,
+      overflow: "hidden",
+      padding: "0 ".concat(namePadding, "px"),
+      position: "absolute",
+      right: lineWidth,
+      top: 0,
+      width: "fit-content"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: boxColor,
+      height: "100%",
+      position: "absolute",
+      right: 0,
+      top: 0,
+      transform: "scaleX(".concat(nameBoxProgress, ")"),
+      transformOrigin: "right",
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: "#FFFFFF",
+      height: "100%",
+      left: "".concat(whiteLeft, "%"),
+      opacity: whiteOpacity,
+      position: "absolute",
+      top: 0,
+      width: whiteWidth,
+      zIndex: 2
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignItems: "center",
+      clipPath: "inset(0 0 0 ".concat((1 - visibleNameProgress) * 100, "%)"),
+      color: textColor,
+      display: "flex",
+      fontSize: nameFontSize,
+      fontWeight: 400,
+      height: "100%",
+      lineHeight: 1,
+      overflow: "hidden",
+      position: "relative",
+      textShadow: "0 1px 5px rgba(0, 0, 0, 0.32)",
+      whiteSpace: "nowrap",
+      zIndex: 1
+    }
+  }, displayName)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      boxSizing: "border-box",
+      height: titleBoxHeight,
+      maxWidth: titleBoxMaxWidth,
+      overflow: "hidden",
+      padding: "0 ".concat(titlePadding, "px"),
+      position: "absolute",
+      right: lineWidth,
+      top: nameBoxHeight + titleGap,
+      width: "fit-content"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: boxColor,
+      height: "100%",
+      position: "absolute",
+      right: 0,
+      top: 0,
+      transform: "scaleX(".concat(titleProgress, ")"),
+      transformOrigin: "right",
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignItems: "center",
+      clipPath: "inset(0 0 0 ".concat((1 - titleProgress) * 100, "%)"),
+      color: textColor,
+      display: "flex",
+      fontSize: titleFontSize,
+      fontWeight: 400,
+      height: "100%",
+      letterSpacing: "0.08em",
+      lineHeight: 1,
+      overflow: "hidden",
+      position: "relative",
+      textShadow: "0 1px 4px rgba(0, 0, 0, 0.28)",
+      transform: "translateX(".concat(titleTextTranslate, "px)"),
+      whiteSpace: "nowrap",
+      zIndex: 1
+    }
+  }, displayTitle))));
+};

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

@@ -0,0 +1,212 @@
+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"]
+  }),
+  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.62;
+};
+var fitSingleLineFontSize = function fitSingleLineFontSize(text, maxWidth, maxHeight, maxFontSize) {
+  if (!text) {
+    return maxFontSize;
+  }
+  var estimatedWidthAtOnePixel = estimateTextWidth(text, 1);
+  return Math.floor(clamp(maxWidth / estimatedWidthAtOnePixel, 1, Math.min(maxFontSize, maxHeight)));
+};
+export var StackfillNametag = function StackfillNametag(_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,
+    accentColor = _useTheme.accentColor;
+  var _useOrientationBased = useOrientationBased({
+      landscape: {
+        containerBottom: height * 0.11,
+        containerLeft: width * 0.04,
+        maxNameBoxWidth: width * 0.62,
+        maxNameFontSize: width * 0.07,
+        maxTitleFontSize: width * 0.033,
+        nameBoxHeight: height * 0.102,
+        titleBoxHeight: height * 0.052,
+        titleGap: height * 0.012
+      },
+      portrait: {
+        containerBottom: height * 0.2,
+        containerLeft: width * 0.07,
+        maxNameBoxWidth: width * 0.84,
+        maxNameFontSize: width * 0.12,
+        maxTitleFontSize: width * 0.058,
+        nameBoxHeight: height * 0.066,
+        titleBoxHeight: height * 0.038,
+        titleGap: height * 0.008
+      },
+      square: {
+        containerBottom: height * 0.15,
+        containerLeft: width * 0.06,
+        maxNameBoxWidth: width * 0.78,
+        maxNameFontSize: width * 0.095,
+        maxTitleFontSize: width * 0.046,
+        nameBoxHeight: height * 0.078,
+        titleBoxHeight: height * 0.046,
+        titleGap: height * 0.01
+      }
+    }),
+    containerBottom = _useOrientationBased.containerBottom,
+    containerLeft = _useOrientationBased.containerLeft,
+    maxNameBoxWidth = _useOrientationBased.maxNameBoxWidth,
+    maxNameFontSize = _useOrientationBased.maxNameFontSize,
+    maxTitleFontSize = _useOrientationBased.maxTitleFontSize,
+    nameBoxHeight = _useOrientationBased.nameBoxHeight,
+    titleBoxHeight = _useOrientationBased.titleBoxHeight,
+    titleGap = _useOrientationBased.titleGap;
+  var displayName = (name || "").toLocaleUpperCase();
+  var displayTitle = (title || "").toLocaleUpperCase();
+  var boxColor = (themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.secondaryColor) || accentColor || primaryColor || "#ff6a00";
+  var textColor = getContrastColor(boxColor) || "#FFFFFF";
+  var namePadding = nameBoxHeight * 0.22;
+  var titlePadding = titleBoxHeight * 0.22;
+  var nameFontSize = fitSingleLineFontSize(displayName, maxNameBoxWidth - namePadding * 2, nameBoxHeight * 0.84, maxNameFontSize);
+  var titleFontSize = fitSingleLineFontSize(displayTitle, maxNameBoxWidth - titlePadding * 2, titleBoxHeight * 0.66, maxTitleFontSize);
+  var widthEnd = Math.round(fps * 0.7);
+  var titleBoxShowStart = widthEnd + Math.round(fps * 0.08);
+  var fillStart = titleBoxShowStart + Math.round(fps * 0.08);
+  var fillEnd = fillStart + Math.round(fps * 0.7);
+  var widthProgress = interpolate(frame, [0, widthEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var fillProgress = interpolate(frame, [fillStart, fillEnd], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var titleBoxOpacity = interpolate(frame, [titleBoxShowStart, titleBoxShowStart + 1], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var textProgress = interpolate(fillProgress, [0.5, 1], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var nameTranslateY = interpolate(textProgress, [0, 1], [nameBoxHeight * 0.44, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      bottom: containerBottom,
+      fontFamily: fontFamily,
+      left: containerLeft,
+      position: "absolute",
+      width: maxNameBoxWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      boxSizing: "border-box",
+      height: nameBoxHeight,
+      maxWidth: maxNameBoxWidth,
+      overflow: "hidden",
+      padding: "0 ".concat(namePadding, "px"),
+      position: "relative",
+      width: "fit-content"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: "#FFFFFF",
+      height: "100%",
+      left: 0,
+      position: "absolute",
+      top: 0,
+      transform: "scaleX(".concat(widthProgress, ")"),
+      transformOrigin: "left",
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: boxColor,
+      height: "".concat(fillProgress * 88, "%"),
+      left: 0,
+      position: "absolute",
+      top: 0,
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignItems: "center",
+      color: textColor,
+      display: "flex",
+      fontSize: nameFontSize,
+      fontWeight: 400,
+      height: "88%",
+      lineHeight: 1,
+      opacity: textProgress,
+      overflow: "hidden",
+      position: "relative",
+      textShadow: "0 1px 5px rgba(0, 0, 0, 0.32)",
+      transform: "translateY(".concat(nameTranslateY, "px)"),
+      whiteSpace: "nowrap",
+      zIndex: 1
+    }
+  }, displayName)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      boxSizing: "border-box",
+      height: titleBoxHeight,
+      marginTop: titleGap,
+      maxWidth: maxNameBoxWidth,
+      opacity: titleBoxOpacity,
+      overflow: "hidden",
+      padding: "0 ".concat(titlePadding, "px"),
+      position: "relative",
+      width: "fit-content"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: boxColor,
+      height: "".concat(fillProgress * 100, "%"),
+      left: 0,
+      position: "absolute",
+      top: 0,
+      width: "100%"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignItems: "center",
+      color: textColor,
+      display: "flex",
+      fontSize: titleFontSize,
+      fontWeight: 400,
+      height: "".concat(fillProgress * 100, "%"),
+      letterSpacing: "0.08em",
+      lineHeight: 1,
+      opacity: titleBoxOpacity,
+      overflow: "hidden",
+      position: "relative",
+      textShadow: "0 1px 4px rgba(0, 0, 0, 0.28)",
+      whiteSpace: "nowrap",
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      alignItems: "center",
+      display: "flex",
+      height: titleBoxHeight
+    }
+  }, displayTitle))));
+};

package/package.json

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

package/dist/screenplay/RemotionRenderer/main/lib/layouts/TextFullCoverLayout.js

@@ -1,22 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import { TextWithVideoLayout } from "./TextWithVideoLayout.js";
-export var TextFullCoverLayout = /*#__PURE__*/function (_TextWithVideoLayout) {
-  function TextFullCoverLayout() {
-    _classCallCheck(this, TextFullCoverLayout);
-    return _callSuper(this, TextFullCoverLayout, arguments);
-  }
-  _inherits(TextFullCoverLayout, _TextWithVideoLayout);
-  return _createClass(TextFullCoverLayout);
-}(TextWithVideoLayout);