@zync/zync-screnplay-player 0.1.212 → 0.1.214

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

@@ -16,6 +16,7 @@ var Square = function Square(_ref) {
     logoUrl = _ref.logoUrl,
     logoLeft = _ref.logoLeft,
     logoTop = _ref.logoTop,
+    logoPosition = _ref.logoPosition,
     frameColor = _ref.frameColor,
     startVideoFrom = _ref.startVideoFrom,
     noBackgroundVideoUrl = _ref.noBackgroundVideoUrl,
@@ -164,7 +165,7 @@ var Square = function Square(_ref) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: logoPosition || "fixed",
       left: logoLeft,
       top: logoTop,
       padding: 20,
@@ -189,6 +190,7 @@ var Portrait = function Portrait(_ref2) {
     logoUrl = _ref2.logoUrl,
     logoLeft = _ref2.logoLeft,
     logoTop = _ref2.logoTop,
+    logoPosition = _ref2.logoPosition,
     frameColor = _ref2.frameColor,
     startVideoFrom = _ref2.startVideoFrom,
     noBackgroundVideoUrl = _ref2.noBackgroundVideoUrl,
@@ -334,7 +336,7 @@ var Portrait = function Portrait(_ref2) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: logoPosition || "fixed",
       left: logoLeft,
       top: logoTop,
       padding: 20,
@@ -359,6 +361,7 @@ var Landscape = function Landscape(_ref3) {
     logoUrl = _ref3.logoUrl,
     logoLeft = _ref3.logoLeft,
     logoTop = _ref3.logoTop,
+    logoPosition = _ref3.logoPosition,
     frameColor = _ref3.frameColor,
     startVideoFrom = _ref3.startVideoFrom,
     noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
@@ -501,7 +504,7 @@ var Landscape = function Landscape(_ref3) {
     }
   }, children), logoUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: logoPosition || "fixed",
       left: logoLeft,
       top: logoTop,
       padding: 20,
@@ -518,6 +521,7 @@ var Landscape = function Landscape(_ref3) {
   })) : null);
 };
 var BrollStudioBackdrop = function BrollStudioBackdrop(_ref4) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var videoUrl = _ref4.videoUrl,
     startVideoFrom = _ref4.startVideoFrom,
     brollUrl = _ref4.brollUrl,
@@ -530,11 +534,22 @@ var BrollStudioBackdrop = function BrollStudioBackdrop(_ref4) {
     noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
     durationInFrames = _ref4.durationInFrames,
     faceMetadata = _ref4.faceMetadata,
-    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects;
+    noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
+    _ref4$useSquareInLand = _ref4.useSquareInLandscape,
+    useSquareInLandscape = _ref4$useSquareInLand === void 0 ? false : _ref4$useSquareInLand;
   var _useVideoConfig = useVideoConfig(),
-    width = _useVideoConfig.width,
-    height = _useVideoConfig.height,
-    fps = _useVideoConfig.fps;
+    outputWidth = _useVideoConfig.width,
+    outputHeight = _useVideoConfig.height,
+    fps = _useVideoConfig.fps,
+    _useVideoConfig$props = _useVideoConfig.props,
+    compositionProps = _useVideoConfig$props === void 0 ? {} : _useVideoConfig$props;
+  var outputOrientation = (compositionProps === null || compositionProps === void 0 ? void 0 : (_compositionProps$out = compositionProps.output) === null || _compositionProps$out === void 0 ? void 0 : _compositionProps$out.orientation) || (typeof window !== "undefined" ? (_window = window) === null || _window === void 0 ? void 0 : (_window$screenplayPro = _window.screenplayProps) === null || _window$screenplayPro === void 0 ? void 0 : (_window$screenplayPro2 = _window$screenplayPro.output) === null || _window$screenplayPro2 === void 0 ? void 0 : _window$screenplayPro2.orientation : undefined);
+  var shouldUseSquareInLandscape = Boolean(useSquareInLandscape) && outputOrientation === "landscape";
+  var squareSize = 1080;
+  var width = shouldUseSquareInLandscape ? squareSize : outputWidth;
+  var height = shouldUseSquareInLandscape ? squareSize : outputHeight;
+  var renderOffsetX = shouldUseSquareInLandscape ? (outputWidth - squareSize) / 2 : 0;
+  var orientationOverride = shouldUseSquareInLandscape ? "square" : undefined;
   var frame = useCurrentFrame();
   var _useVirtualBackground = useVirtualBackground(),
     isVirtual = _useVirtualBackground.isVirtual,
@@ -557,7 +572,7 @@ var BrollStudioBackdrop = function BrollStudioBackdrop(_ref4) {
         logoLeft: CHROME_PADDING * 2,
         BrollStudioBackdropComponent: Square
       }
-    }),
+    }, orientationOverride),
     BrollStudioBackdropComponent = _useOrientationBased.BrollStudioBackdropComponent,
     logoTop = _useOrientationBased.logoTop,
     logoLeft = _useOrientationBased.logoLeft;
@@ -595,7 +610,7 @@ var BrollStudioBackdrop = function BrollStudioBackdrop(_ref4) {
     // Middle section - fully visible
     brollSpringProgress = 1;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, !disableTransitionSounds && /*#__PURE__*/React.createElement(Audio, {
     src: "https://cdn.zync.ai/assets/static/swoosh.mp3",
     volume: 0.25
   }), /*#__PURE__*/React.createElement(BrollStudioBackdropComponent, {
@@ -610,11 +625,30 @@ var BrollStudioBackdrop = function BrollStudioBackdrop(_ref4) {
     sourceVideoOrientation: sourceVideoOrientation,
     logoLeft: logoLeft,
     logoTop: logoTop,
+    logoPosition: shouldUseSquareInLandscape ? "absolute" : "fixed",
     videoUrl: videoUrl,
     faceMetadata: faceMetadata,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     showVirtual: showVirtual,
     virtualBgUrl: virtualBgUrl
   }, children));
+  if (!shouldUseSquareInLandscape) {
+    return content;
+  }
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: outputWidth,
+      height: outputHeight,
+      backgroundColor: "black"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      width: width,
+      height: height,
+      left: renderOffsetX,
+      top: 0,
+      overflow: "hidden"
+    }
+  }, content));
 };
 export { BrollStudioBackdrop };

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

@@ -167,7 +167,9 @@ export var HandoffNametag = function HandoffNametag(_ref4) {
     _ref4$useSquareInLand = _ref4.useSquareInLandscapeFirstVideo,
     useSquareInLandscapeFirstVideo = _ref4$useSquareInLand === void 0 ? false : _ref4$useSquareInLand,
     _ref4$useSquareInLand2 = _ref4.useSquareInLandscapeSecondVideo,
-    useSquareInLandscapeSecondVideo = _ref4$useSquareInLand2 === void 0 ? false : _ref4$useSquareInLand2;
+    useSquareInLandscapeSecondVideo = _ref4$useSquareInLand2 === void 0 ? false : _ref4$useSquareInLand2,
+    _ref4$noShift = _ref4.noShift,
+    noShift = _ref4$noShift === void 0 ? false : _ref4$noShift;
   var videoConfig = useVideoConfig();
   var fps = videoConfig.fps,
     width = videoConfig.width,
@@ -273,7 +275,7 @@ export var HandoffNametag = function HandoffNametag(_ref4) {
   var holdCenteredFrames = 3.2 * fps;
   var slideLeftFrames = 0.5 * fps;
   var containerLeftPosition = shouldShiftFirstLeftInLandscape ? interpolate(frame, [0, holdCenteredFrames, holdCenteredFrames + slideLeftFrames], [initialStartLeft, initialStartLeft, baseContainerLeft], DEFAULT_TIME_INTERPOLATE_OPTIONS) : baseContainerLeft;
-  var shouldShiftSecondLeftInLandscape = Boolean(useSquareInLandscapeSecondVideo) && outputOrientation === "landscape" && (alignment === null || alignment === void 0 ? void 0 : alignment.startsWith("second"));
+  var shouldShiftSecondLeftInLandscape = Boolean(useSquareInLandscapeSecondVideo) && !Boolean(noShift) && outputOrientation === "landscape" && (alignment === null || alignment === void 0 ? void 0 : alignment.startsWith("second"));
   var secondSlideStartFrames = 2.5 * fps;
   var secondSlideDistance = -380;
   var secondContainerTranslateX = shouldShiftSecondLeftInLandscape ? interpolate(frame, [0, secondSlideStartFrames, secondSlideStartFrames + slideLeftFrames], [0, 0, secondSlideDistance], DEFAULT_TIME_INTERPOLATE_OPTIONS) : 0;

package/package.json

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