@zync/zync-screnplay-player 0.1.247 → 0.1.249

package/dist/screenplay/RemotionRenderer/fontRegistry.js

@@ -118,6 +118,7 @@ var DIRECT_COMPONENT_DEPENDENCIES = Object.freeze({
   CaptionColor: [FONT_FAMILIES.POPPINS],
   CaptionColorInverse: [FONT_FAMILIES.POPPINS],
   CaptionColorShadow: [FONT_FAMILIES.MONTSERRAT],
+  CaptionBold: [FONT_FAMILIES.MONTSERRAT],
   CaptionElegant: [FONT_FAMILIES.MONTSERRAT, FONT_FAMILIES.ROCHESTER],
   CaptionEmphasis: [FONT_FAMILIES.MONTSERRAT],
   CaptionPunctuated: [FONT_FAMILIES.POPPINS],

package/dist/screenplay/RemotionRenderer/registeredComponents.js

@@ -32,6 +32,7 @@ import { CaptionWordBubble } from "./theme/themes/default/CaptionWordBubble";
 import { CaptionWordPopup } from "./theme/themes/default/CaptionWordPopup";
 import { CaptionEmphasis } from "./theme/themes/default/CaptionEmphasis";
 import { CaptionElegant } from "./theme/themes/default/CaptionElegant";
+import { CaptionBold } from "./theme/themes/default/CaptionBold";
 import { BrollGreenScreen } from "./components/layouts/BrollGreenScreen";
 import { IntroVideo } from "./components/layouts/IntroVideo";
 import StretchText from "./components/utils/StretchText";
@@ -100,6 +101,7 @@ export var RegisteredComponents = {
   CaptionWordBubble: CaptionWordBubble,
   CaptionWordPopup: CaptionWordPopup,
   CaptionElegant: CaptionElegant,
+  CaptionBold: CaptionBold,
   CaptionColor: CaptionColor,
   CaptionColorInverse: CaptionColorInverse,
   CaptionColorShadow: CaptionColorShadow,

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

@@ -0,0 +1,80 @@
+import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
+import React from "react";
+import { FONT_FAMILIES } from "../../../fontRegistry.js";
+import { useOrientationBased } from "../../../hooks/useOrientationBased.js";
+import { distributeTextToFit } from "./Sentence/SentenceSimple.helpers.js";
+import { CAPTION_PORTRAIT_BOTTOM_OFFSET } from "./constants";
+var fontFamily = FONT_FAMILIES.MONTSERRAT;
+var getWordLength = function getWordLength(word) {
+  var sanitizedLength = word.replace(/[^A-Za-z0-9]/g, "").length;
+  return sanitizedLength || word.length;
+};
+export var CaptionBold = function CaptionBold(_ref) {
+  var transcripts = _ref.transcripts;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _useOrientationBased = useOrientationBased({
+      portrait: {
+        fontSize: 75,
+        bottom: CAPTION_PORTRAIT_BOTTOM_OFFSET
+      },
+      landscape: {
+        fontSize: 60,
+        bottom: 110
+      },
+      square: {
+        fontSize: 75,
+        bottom: 110
+      }
+    }),
+    bottom = _useOrientationBased.bottom,
+    fontSize = _useOrientationBased.fontSize;
+  var containerWidth = width * 0.8;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, null, transcripts.map(function (transcript, index) {
+    var _distributeTextToFit = distributeTextToFit(transcript.text, width * 0.7, fontSize * 1.6, fontSize),
+      textFontSize = _distributeTextToFit.fontSize;
+    var words = transcript.text.split(/\s+/).filter(Boolean);
+    var longestWordIndex = words.reduce(function (longestIndex, word, wordIndex) {
+      if (longestIndex === -1) {
+        return wordIndex;
+      }
+      return getWordLength(word) > getWordLength(words[longestIndex]) ? wordIndex : longestIndex;
+    }, -1);
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: transcript.from,
+      durationInFrames: transcript.durationInFrames
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: fontSize * 1.6,
+        position: "absolute",
+        bottom: bottom,
+        left: "50%",
+        width: containerWidth,
+        margin: "0 auto",
+        transform: "translateX(-50%)",
+        color: "white",
+        fontSize: textFontSize,
+        fontFamily: fontFamily,
+        fontWeight: 900,
+        textTransform: "uppercase",
+        letterSpacing: "-1px",
+        textShadow: "-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0px 4px 5px rgba(0, 0, 0, 0.75)",
+        textAlign: "center",
+        lineHeight: 1,
+        textWrap: "nowrap"
+      }
+    }, words.map(function (word, wordIndex) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: "".concat(word, "-").concat(wordIndex),
+        style: {
+          color: wordIndex === longestWordIndex ? "#ffff00" : "white",
+          marginRight: wordIndex < words.length - 1 ? textFontSize * 0.28 : 0
+        }
+      }, word);
+    })));
+  }));
+};

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

@@ -17,7 +17,7 @@ export var getHandoffNametagConfig = function getHandoffNametagConfig(width) {
       fullNameMaxFontSize: 42,
       titleMaxFontSize: 30,
       targetContainerBottoms: _defineProperty(_defineProperty({}, "first-left", [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000]), "second-right", [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]),
-      containerTop: _defineProperty(_defineProperty({}, "first-left", 100), "second-right", undefined),
+      containerTop: _defineProperty(_defineProperty({}, "first-left", undefined), "second-right", 1000),
       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"),

package/package.json

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