@zync/zync-screnplay-player 0.1.250 → 0.1.252

package/dist/screenplay/RemotionRenderer/assets/wordObjects/manifest.json

@@ -0,0 +1,67 @@
+{
+  "upstream": "https://github.com/microsoft/fluentui-emoji",
+  "commit": "1ffb34c752ecf5d402f04cfb4b392c77f57c54bc",
+  "license": "MIT",
+  "assets": {
+    "plane": {
+      "sourcePath": "assets/Airplane/3D/airplane_3d.png",
+      "sha256": "dda8d8e9ccaca71973f4ee75fcab085dcffbb89f3987a9d2cc5401f186268fa1",
+      "bytes": 39468
+    },
+    "clock": {
+      "sourcePath": "assets/Alarm clock/3D/alarm_clock_3d.png",
+      "sha256": "1aa6929e1baa440db535fd321868dc76ddd888bf3e4f4333d37800ff2ec41c74",
+      "bytes": 42751
+    },
+    "light_bulb": {
+      "sourcePath": "assets/Light bulb/3D/light_bulb_3d.png",
+      "sha256": "df7b09aa18301507e6fb8c279df66d9afa465b6fed3e63d2efa84dacebdbbf79",
+      "bytes": 22450
+    },
+    "money": {
+      "sourcePath": "assets/Money bag/3D/money_bag_3d.png",
+      "sha256": "cec19b9cf0beac5bbd27a07dcbe1e68c54b04112b4641165705ccb920f230292",
+      "bytes": 34132
+    },
+    "rocket": {
+      "sourcePath": "assets/Rocket/3D/rocket_3d.png",
+      "sha256": "4636925a1dfc76a45dc83c08b983699d39143a0978f794a4e2dfb6cbffdcd7ab",
+      "bytes": 36274
+    },
+    "target": {
+      "sourcePath": "assets/Bullseye/3D/bullseye_3d.png",
+      "sha256": "2b2a2d9eec76c5649b8207b050f9135ce666c9d94694e5577aade50c53768437",
+      "bytes": 42883
+    },
+    "phone": {
+      "sourcePath": "assets/Mobile phone/3D/mobile_phone_3d.png",
+      "sha256": "c72cf9f888cb74cb8852679184e0dac945ed0340839c98a86c653f51e1e3504d",
+      "bytes": 26886
+    },
+    "computer": {
+      "sourcePath": "assets/Laptop/3D/laptop_3d.png",
+      "sha256": "3b8a267f6c3d2721af925782bdbc11c4e1bc9ae806c5c875557b100393665aab",
+      "bytes": 29028
+    },
+    "book": {
+      "sourcePath": "assets/Books/3D/books_3d.png",
+      "sha256": "36f75eaa1e1a849fc950f43962b447c206d96244858468240a6a81beaa97f7be",
+      "bytes": 26332
+    },
+    "key": {
+      "sourcePath": "assets/Key/3D/key_3d.png",
+      "sha256": "ae59ce2b8dcfaa1afcdfe91bde7cc88cf06a8493686a6676706d1c891bb349eb",
+      "bytes": 22458
+    },
+    "globe": {
+      "sourcePath": "assets/Globe showing europe-africa/3D/globe_showing_europe-africa_3d.png",
+      "sha256": "a69baec3cc48ed5206d171f5f494e3ab06665277ec4a3acc7e6bf3962ee460ad",
+      "bytes": 42555
+    },
+    "chart": {
+      "sourcePath": "assets/Chart increasing/3D/chart_increasing_3d.png",
+      "sha256": "dd5e6b29aa4067c5a4d9e152119497832d70e094b380998e5f5b0c51abbb3a64",
+      "bytes": 42157
+    }
+  }
+}

package/dist/screenplay/RemotionRenderer/components/effects/CaptionWordObjectOverlay.js

@@ -0,0 +1,243 @@
+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 _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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from "react";
+import { AbsoluteFill, Img, Sequence, continueRender, delayRender, useCurrentFrame, useCurrentScale, useVideoConfig } from "remotion";
+import { WORD_OBJECT_IMAGES } from "../../assets/wordObjects/images.js";
+import { isEnabledWordObject } from "../../helpers/captionWordObjects.js";
+import { getWordObjectMotion, placeCaptionWordObject, projectFaceRects } from "../../helpers/captionWordObjectGeometry.js";
+import { cleanFacemetadata } from "../../helpers/cleanFacemetadata.js";
+import { calculateFaceCenteredTranslation } from "../utils/FaceCenteredVideo";
+var WordObject = function WordObject(_ref) {
+  var _props$output;
+  var event = _ref.event,
+    renderSource = _ref.renderSource,
+    geometry = _ref.geometry,
+    fontFamily = _ref.fontFamily,
+    color = _ref.color;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    height = _useVideoConfig.height,
+    fps = _useVideoConfig.fps,
+    props = _useVideoConfig.props;
+  var playerScale = useCurrentScale();
+  var lineRef = React.useRef(null);
+  var rootRef = React.useRef(null);
+  var measurementRootRef = React.useRef(null);
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    measurement = _React$useState2[0],
+    setMeasurement = _React$useState2[1];
+  var orientation = (props === null || props === void 0 ? void 0 : (_props$output = props.output) === null || _props$output === void 0 ? void 0 : _props$output.orientation) || (width === height ? "square" : "portrait");
+  React.useEffect(function () {
+    var _document$fonts;
+    var handle = delayRender("Measure caption word object source");
+    var cancelled = false;
+    var measure = function measure() {
+      var _faceMetadata$metadat, _faceMetadata$metadat2, _faceMetadata$metadat3, _faceMetadata$metadat4;
+      if (cancelled) return;
+      var line = lineRef.current;
+      var word = line === null || line === void 0 ? void 0 : line.querySelector("[data-word-index=\"".concat(event.punctuation.index, "\"]"));
+      var root = rootRef.current;
+      if (!line || !word || !root) {
+        setMeasurement({
+          placement: null
+        });
+        continueRender(handle);
+        return;
+      }
+      var rootRect = root.getBoundingClientRect();
+      var convert = function convert(rect) {
+        return {
+          left: (rect.left - rootRect.left) / playerScale,
+          top: (rect.top - rootRect.top) / playerScale,
+          right: (rect.right - rootRect.left) / playerScale,
+          bottom: (rect.bottom - rootRect.top) / playerScale
+        };
+      };
+      var anchor = convert(word.getBoundingClientRect());
+      var faceMetadata = cleanFacemetadata(geometry === null || geometry === void 0 ? void 0 : geometry.faceMetadata);
+      var videoProperties = faceMetadata === null || faceMetadata === void 0 ? void 0 : (_faceMetadata$metadat = faceMetadata.metadata) === null || _faceMetadata$metadat === void 0 ? void 0 : _faceMetadata$metadat.videoProperties;
+      var rawBoxes = ((faceMetadata === null || faceMetadata === void 0 ? void 0 : (_faceMetadata$metadat2 = faceMetadata.metadata) === null || _faceMetadata$metadat2 === void 0 ? void 0 : _faceMetadata$metadat2.frames) || []).map(function (f) {
+        var _f$face_data;
+        return (_f$face_data = f.face_data) === null || _f$face_data === void 0 ? void 0 : _f$face_data.face_bbox;
+      }).filter(Boolean);
+      var averageBox = faceMetadata === null || faceMetadata === void 0 ? void 0 : (_faceMetadata$metadat3 = faceMetadata.metadata) === null || _faceMetadata$metadat3 === void 0 ? void 0 : (_faceMetadata$metadat4 = _faceMetadata$metadat3.averageFaceData) === null || _faceMetadata$metadat4 === void 0 ? void 0 : _faceMetadata$metadat4.face_bbox;
+      if (averageBox) rawBoxes.push(averageBox);
+      var translation = faceMetadata ? calculateFaceCenteredTranslation({
+        faceMetadata: faceMetadata,
+        containerWidth: width,
+        containerHeight: height,
+        currentFrame: 0,
+        useAveragePosition: true,
+        centerHorizontally: false,
+        orientation: orientation
+      }) : null;
+      var sameSize = (videoProperties === null || videoProperties === void 0 ? void 0 : videoProperties.width) === width && (videoProperties === null || videoProperties === void 0 ? void 0 : videoProperties.height) === height;
+      var projection = sameSize ? {
+        scale: 1,
+        translateX: 0,
+        translateY: 0,
+        originX: 0,
+        originY: 0
+      } : translation === null || translation === void 0 ? void 0 : translation.projection;
+      var faceRects = projectFaceRects({
+        boxes: rawBoxes,
+        projection: projection,
+        width: width,
+        height: height,
+        videoZoom: geometry === null || geometry === void 0 ? void 0 : geometry.videoZoom,
+        framePadding: geometry === null || geometry === void 0 ? void 0 : geometry.framePadding
+      });
+      var wordRects = _toConsumableArray(measurementRootRef.current.querySelectorAll("[data-word-index]")).map(function (node) {
+        return convert(node.getBoundingClientRect());
+      });
+      // Measure the active-word envelope of every phrase in this segment so an
+      // object that outlives its source phrase also clears subsequent captions.
+      var captionTop = Math.min.apply(Math, _toConsumableArray(wordRects.map(function (r) {
+        return r.top;
+      })));
+      var placement = placeCaptionWordObject({
+        width: width,
+        height: height,
+        anchor: anchor,
+        captionTop: captionTop,
+        faceRects: faceRects
+      });
+      setMeasurement({
+        placement: placement,
+        anchor: anchor,
+        sourceStyle: window.getComputedStyle(word)
+      });
+      continueRender(handle);
+    };
+    Promise.resolve((_document$fonts = document.fonts) === null || _document$fonts === void 0 ? void 0 : _document$fonts.ready).then(measure)["catch"](function () {
+      if (!cancelled) setMeasurement({
+        placement: null
+      });
+      continueRender(handle);
+    });
+    return function () {
+      cancelled = true;
+      continueRender(handle);
+    };
+  }, [event, geometry, width, height, orientation, playerScale]);
+  var placement = measurement === null || measurement === void 0 ? void 0 : measurement.placement;
+  var motion = getWordObjectMotion({
+    frame: frame,
+    fps: fps,
+    durationInFrames: event.durationInFrames,
+    assetId: event.punctuation.wordObject.assetId
+  });
+  var scale = width / 1080;
+  var wordX = placement ? placement.startX + (placement.x - placement.startX) * motion.rise : 0;
+  var wordY = placement ? placement.startY + (placement.y - placement.startY) * motion.rise : 0;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    ref: rootRef,
+    style: {
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    ref: measurementRootRef,
+    style: {
+      visibility: "hidden"
+    },
+    "aria-hidden": "true"
+  }, renderSource(event.transcript, event.punctuation.index, event.punctuation.start, lineRef), event.sourceTranscripts.filter(function (transcript) {
+    return transcript !== event.transcript;
+  }).map(function (transcript, index) {
+    var _transcript$punctuati, _transcript$punctuati2, _transcript$punctuati3;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, renderSource(transcript, 0, (_transcript$punctuati = (_transcript$punctuati2 = transcript.punctuations) === null || _transcript$punctuati2 === void 0 ? void 0 : (_transcript$punctuati3 = _transcript$punctuati2[0]) === null || _transcript$punctuati3 === void 0 ? void 0 : _transcript$punctuati3.start) !== null && _transcript$punctuati !== void 0 ? _transcript$punctuati : transcript.from, {
+      current: null
+    }));
+  })), placement ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-word-object-copy": true,
+    style: {
+      position: "absolute",
+      left: wordX,
+      top: wordY,
+      transform: "translate(-50%, -50%) ".concat(measurement.sourceStyle.transform === "none" ? "" : measurement.sourceStyle.transform),
+      opacity: motion.wordOpacity,
+      fontFamily: fontFamily,
+      fontSize: measurement.sourceStyle.fontSize,
+      fontWeight: measurement.sourceStyle.fontWeight,
+      lineHeight: measurement.sourceStyle.lineHeight,
+      padding: measurement.sourceStyle.padding,
+      backgroundColor: measurement.sourceStyle.backgroundColor,
+      borderRadius: measurement.sourceStyle.borderRadius,
+      textTransform: "uppercase",
+      whiteSpace: "nowrap",
+      color: color || measurement.sourceStyle.color,
+      textShadow: measurement.sourceStyle.textShadow
+    }
+  }, event.word), /*#__PURE__*/React.createElement(Img, {
+    "data-word-object": event.punctuation.wordObject.assetId,
+    src: WORD_OBJECT_IMAGES[event.punctuation.wordObject.assetId],
+    style: {
+      position: "absolute",
+      left: placement.x,
+      top: placement.y + motion.hover * scale,
+      width: placement.size,
+      height: placement.size,
+      objectFit: "contain",
+      opacity: motion.opacity,
+      transform: "translate(-50%, -50%) rotate(".concat(motion.rotation, "deg) scale(").concat(motion.scale, ")"),
+      filter: motion.glow ? "drop-shadow(0 0 ".concat(12 * scale, "px rgba(255,220,90,").concat(motion.glow, "))") : "drop-shadow(0 ".concat(3 * scale, "px ").concat(4 * scale, "px rgba(0,0,0,0.35))")
+    }
+  })) : null);
+};
+export var CaptionWordObjectOverlay = function CaptionWordObjectOverlay(_ref2) {
+  var transcripts = _ref2.transcripts,
+    renderSource = _ref2.renderSource,
+    geometry = _ref2.geometry,
+    fontFamily = _ref2.fontFamily,
+    color = _ref2.color;
+  var _useVideoConfig2 = useVideoConfig(),
+    width = _useVideoConfig2.width,
+    height = _useVideoConfig2.height,
+    fps = _useVideoConfig2.fps;
+  var events = React.useMemo(function () {
+    return transcripts.flatMap(function (transcript) {
+      return (transcript.punctuations || []).filter(function (p) {
+        return isEnabledWordObject(p.wordObject) && !p.__wordObjectSuppressed && !p.__wordObjectOnsetClipped && Number.isInteger(p.__wordObjectDurationInFrames) && p.__wordObjectDurationInFrames > 0 && Number.isFinite(p.start);
+      }).map(function (punctuation) {
+        return {
+          transcript: transcript,
+          punctuation: punctuation,
+          word: transcript.text.split(" ")[punctuation.index],
+          durationInFrames: punctuation.__wordObjectDurationInFrames,
+          sourceTranscripts: transcripts
+        };
+      });
+    });
+  }, [transcripts, fps]);
+  if (width > height) return null;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 20,
+      pointerEvents: "none"
+    }
+  }, events.map(function (event, index) {
+    return /*#__PURE__*/React.createElement(Sequence, {
+      key: index,
+      from: event.punctuation.start,
+      durationInFrames: event.durationInFrames
+    }, /*#__PURE__*/React.createElement(WordObject, {
+      event: event,
+      renderSource: renderSource,
+      geometry: geometry,
+      fontFamily: fontFamily,
+      color: color
+    }));
+  }));
+};

package/dist/screenplay/RemotionRenderer/components/effects/Sentence.js

@@ -1,12 +1,16 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from "react";
 import { useThemedComponents } from "../../theme/hooks/useThemedComponents.js";
 import { useVideoConfig } from "remotion";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
 import { distributeTextToFit } from "../../theme/themes/default/Sentence/SentenceSimple.helpers.js";
 import { KeyPointOverlayDepth } from "../layouts/KeyPointOverlayDepth";
+import { getHeadingColors } from "../../helpers/headingColors.js";
 export var Sentence = function Sentence(_ref) {
   var sentence = _ref.sentence,
-    theme = _ref.theme;
+    theme = _ref.theme,
+    headingTextColor = _ref.headingTextColor,
+    headingBackgroundColor = _ref.headingBackgroundColor;
   var Sentence = useThemedComponents("Sentence", theme);
   var _useVideoConfig = useVideoConfig(),
     width = _useVideoConfig.width,
@@ -40,11 +44,14 @@ export var Sentence = function Sentence(_ref) {
   var _distributeTextToFit = distributeTextToFit(sentence, maxWidth - sentencePadding * 2, maxHeight - sentencePadding * 2, maxFontSize),
     lines = _distributeTextToFit.lines,
     fontSize = _distributeTextToFit.fontSize;
-  return /*#__PURE__*/React.createElement(Sentence, {
+  return /*#__PURE__*/React.createElement(Sentence, _extends({
     sentence: sentence,
     lines: lines,
     fontSize: fontSize,
     maxHeight: maxHeight,
     maxWidth: maxWidth
-  });
+  }, getHeadingColors({
+    headingTextColor: headingTextColor,
+    headingBackgroundColor: headingBackgroundColor
+  })));
 };

package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabConversationSpine.js

@@ -240,7 +240,7 @@ export var CreatorCollabConversationSpine = function CreatorCollabConversationSp
     guestNameMaxFontSize = _useOrientationBased.guestNameMaxFontSize,
     guestRoleMaxFontSize = _useOrientationBased.guestRoleMaxFontSize;
   var isVerticalSpine = spineAxis === 'vertical';
-  var accent = accentColor || '#38bdf8';
+  var accent = accentColor || primaryColor || '#ffffff';
   var textColor = primaryContrast || '#ffffff';
   var introOpacity = interpolateWithClamp(frame, [0, fps * 0.9], [0, 1]) * interpolateWithClamp(frame, [fps * 1.85, fps * 2.6], [1, 0]);
   var introTranslateY = interpolateWithClamp(frame, [0, fps * 0.9, fps * 2.6], [24, 0, -18], Easing.out(Easing.cubic));

package/dist/screenplay/RemotionRenderer/components/layouts/CreatorCollabRackFocus.js

@@ -240,7 +240,7 @@ export var CreatorCollabRackFocus = function CreatorCollabRackFocus(_ref) {
   var layerIn = interpolateWithClamp(frame, [fps * 1.9, fps * 3.1], [0, 1]);
   var layerTranslateY = interpolateWithClamp(frame, [fps * 1.9, fps * 3.1], [18, 0], Easing.out(Easing.cubic));
   var layerTranslateX = interpolateWithClamp(frame, [fps * 1.9, fps * 3.1], [34, 0], Easing.out(Easing.cubic));
-  var accent = accentColor || '#6ec8ff';
+  var accent = accentColor || primaryColor || '#ffffff';
   var textColor = primaryContrast || '#ffffff';
   var mutedTextColor = withAlpha(textColor, 0.68) || textColor;
   var softTextColor = withAlpha(textColor, 0.8) || textColor;

package/dist/screenplay/RemotionRenderer/components/layouts/MotionStillInset.js

@@ -1,8 +1,10 @@
 import React from "react";
 import { AbsoluteFill, Audio, Easing, Img, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from "remotion";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { useVirtualBackground } from "../../hooks/useVirtualBackground";
 import { useTheme } from "../../theme/hooks/useTheme.js";
 import FaceCenteredVideo from "../utils/FaceCenteredVideo";
+import { VirtualBackgroundUnderlay } from "../backgrounds/VirtualBackgroundUnderlay";
 var ANIMATION_SECONDS = 1.2;
 var INSET_ASPECT_RATIO = 9 / 16;
 var getInsetProgress = function getInsetProgress(_ref) {
@@ -48,6 +50,8 @@ var getInsetMetrics = function getInsetMetrics(_ref2) {
 var SourceVideo = function SourceVideo(_ref3) {
   var faceMetadata = _ref3.faceMetadata,
     height = _ref3.height,
+    _ref3$muted = _ref3.muted,
+    muted = _ref3$muted === void 0 ? false : _ref3$muted,
     noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
     sourceVideoOrientation = _ref3.sourceVideoOrientation,
     src = _ref3.src,
@@ -67,7 +71,7 @@ var SourceVideo = function SourceVideo(_ref3) {
       useAveragePosition: true,
       centerHorizontally: false,
       transparent: transparent,
-      muted: false,
+      muted: muted,
       noBackgroundVideoEffects: noBackgroundVideoEffects,
       style: {
         filter: transparent && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
@@ -78,7 +82,7 @@ var SourceVideo = function SourceVideo(_ref3) {
     pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: src,
-    muted: false,
+    muted: muted,
     transparent: transparent,
     style: {
       filter: transparent && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined,
@@ -97,6 +101,7 @@ var MotionStillInsetContent = function MotionStillInsetContent(_ref4) {
     frameColor = _ref4.frameColor,
     height = _ref4.height,
     imageUrl = _ref4.imageUrl,
+    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
     noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
     outputOrientation = _ref4.outputOrientation,
     sourceVideoOrientation = _ref4.sourceVideoOrientation,
@@ -112,7 +117,13 @@ var MotionStillInsetContent = function MotionStillInsetContent(_ref4) {
     fps: fps
   });
   var _useTheme = useTheme(),
-    accentColor = _useTheme.accentColor;
+    accentColor = _useTheme.accentColor,
+    primaryColor = _useTheme.primaryColor;
+  var _useVirtualBackground = useVirtualBackground(),
+    isVirtual = _useVirtualBackground.isVirtual,
+    virtualBgUrl = _useVirtualBackground.url;
+  var showVirtual = isVirtual && !!noBackgroundVideoUrl;
+  var borderColor = accentColor || primaryColor;
   var inset = getInsetMetrics({
     width: width,
     height: height,
@@ -153,7 +164,7 @@ var MotionStillInsetContent = function MotionStillInsetContent(_ref4) {
   }) : null, /*#__PURE__*/React.createElement("div", {
     style: {
       borderRadius: sourceBorderRadius,
-      border: accentColor ? "4px solid ".concat(accentColor) : undefined,
+      border: borderColor ? "4px solid ".concat(borderColor) : undefined,
       boxShadow: progress > 0 ? "0 ".concat(16 * progress, "px ").concat(44 * progress, "px rgba(0, 0, 0, ").concat(0.34 * progress, ")") : undefined,
       height: sourceHeight,
       left: sourceLeft,
@@ -164,16 +175,49 @@ var MotionStillInsetContent = function MotionStillInsetContent(_ref4) {
       width: sourceWidth,
       zIndex: 2
     }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "100%",
+      inset: 0,
+      position: "absolute",
+      width: "100%",
+      zIndex: 0
+    }
   }, /*#__PURE__*/React.createElement(SourceVideo, {
     faceMetadata: faceMetadata,
     height: sourceHeight,
+    muted: false,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     sourceVideoOrientation: sourceVideoOrientation,
     src: videoUrl,
     startVideoFrom: startVideoFrom,
     transparent: false,
     width: sourceWidth
-  })), /*#__PURE__*/React.createElement(AbsoluteFill, {
+  })), showVirtual && virtualBgUrl ? /*#__PURE__*/React.createElement(VirtualBackgroundUnderlay, {
+    url: virtualBgUrl,
+    width: "100%",
+    height: "100%",
+    borderRadius: sourceBorderRadius,
+    zIndex: 1
+  }) : null, showVirtual ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "100%",
+      inset: 0,
+      position: "absolute",
+      width: "100%",
+      zIndex: 2
+    }
+  }, /*#__PURE__*/React.createElement(SourceVideo, {
+    faceMetadata: faceMetadata,
+    height: sourceHeight,
+    muted: true,
+    noBackgroundVideoEffects: noBackgroundVideoEffects,
+    sourceVideoOrientation: sourceVideoOrientation,
+    src: noBackgroundVideoUrl,
+    startVideoFrom: startVideoFrom,
+    transparent: true,
+    width: sourceWidth
+  })) : null), /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       zIndex: 3
     }
@@ -188,6 +232,7 @@ export var MotionStillInset = function MotionStillInset(_ref5) {
     faceMetadata = _ref5.faceMetadata,
     frameColor = _ref5.frameColor,
     imageUrl = _ref5.imageUrl,
+    noBackgroundVideoUrl = _ref5.noBackgroundVideoUrl,
     noBackgroundVideoEffects = _ref5.noBackgroundVideoEffects,
     sourceVideoOrientation = _ref5.sourceVideoOrientation,
     startVideoFrom = _ref5.startVideoFrom,
@@ -225,6 +270,7 @@ export var MotionStillInset = function MotionStillInset(_ref5) {
     frameColor: frameColor,
     height: height,
     imageUrl: imageUrl,
+    noBackgroundVideoUrl: noBackgroundVideoUrl,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     outputOrientation: activeOrientation,
     sourceVideoOrientation: sourceVideoOrientation,

package/dist/screenplay/RemotionRenderer/components/layouts/SimpleFrameSentence.js

@@ -12,6 +12,8 @@ export var SimpleFrameSentence = function SimpleFrameSentence(props) {
   }
   return /*#__PURE__*/React.createElement(SimpleFrame, props, /*#__PURE__*/React.createElement(Sentence, {
     theme: props.theme,
-    sentence: props.sentenceText
+    sentence: props.sentenceText,
+    headingTextColor: props.headingTextColor,
+    headingBackgroundColor: props.headingBackgroundColor
   }), props.children);
 };

package/dist/screenplay/RemotionRenderer/components/utils/FaceCenteredVideo.js

@@ -194,6 +194,14 @@ var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation
   return {
     transform: transform,
     transformOrigin: transformOrigin,
+    // Exact numeric projection for overlays sharing this video's coordinate system.
+    projection: {
+      scale: scale,
+      translateX: (finalTranslateX + horizontalOffset) * scale,
+      translateY: finalTranslateY * scale,
+      originX: faceX,
+      originY: anchorToBottom ? sourceHeight : faceY
+    },
     debugInfo: {
       frameIndex: useAveragePosition ? "AVERAGE" : frameIndex,
       relativeFaceX: relativeFaceX.toFixed(3),
@@ -569,4 +577,5 @@ export var FaceCenteredVideo = function FaceCenteredVideo(_ref2) {
     }
   }, "Error: ", debugInfo.error)));
 };
+export { calculateFaceCenteredTranslation };
 export default FaceCenteredVideo;