@zync/zync-screnplay-player 0.1.203 → 0.1.204

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

@@ -27,7 +27,7 @@ export var HandoffLayout = /*#__PURE__*/function (_Layout) {
   return _createClass(HandoffLayout, [{
     key: "getVideoProps",
     value: function getVideoProps(props) {
-      var _props$data$sourceVid, _props$data, _props$data2, _props$data3, _props$data4, _props$data5, _props$data6, _props$data6$firstNoB, _props$data7, _props$data7$firstNoB, _props$data8, _props$data9, _props$data10, _props$data11, _props$data11$secondN, _props$data12, _props$data12$secondN, _props$data$sourceVid2, _props$data$sourceVid3, _props$data13;
+      var _props$data$sourceVid, _props$data, _props$data2, _props$data3, _props$data4, _props$data5, _props$data6, _props$data6$firstNoB, _props$data7, _props$data7$firstNoB, _props$data8, _props$data9, _props$data10, _props$data11, _props$data11$secondN, _props$data12, _props$data12$secondN, _props$data$sourceVid2, _props$data$sourceVid3, _props$data13, _props$data14;
       var sourceVideoOrientation = getVideoOrientation((_props$data$sourceVid = props.data.sourceVideo) === null || _props$data$sourceVid === void 0 ? void 0 : _props$data$sourceVid.aspectRatio);
       this.props = {
         startFirstVideoFrom: toFrames(this.fps * (((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.startFirstVideoFrom) + (((_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.trimLeft) || 0)), true) || 0,
@@ -43,8 +43,9 @@ export var HandoffLayout = /*#__PURE__*/function (_Layout) {
         videoUrl: (_props$data$sourceVid2 = props.data.sourceVideo) === null || _props$data$sourceVid2 === void 0 ? void 0 : _props$data$sourceVid2.videoUrl,
         sourceVideoOrientation: sourceVideoOrientation,
         videoZoom: ((_props$data$sourceVid3 = props.data.sourceVideo) === null || _props$data$sourceVid3 === void 0 ? void 0 : _props$data$sourceVid3.zoom) || 1,
+        useSquareInLandscapeFirstVideo: ((_props$data13 = props.data) === null || _props$data13 === void 0 ? void 0 : _props$data13.useSquareInLandscapeFirstVideo) || false,
         text: props.data.text,
-        handoffOverlapSeconds: ((_props$data13 = props.data) === null || _props$data13 === void 0 ? void 0 : _props$data13.handoffOverlapSeconds) || 0
+        handoffOverlapSeconds: ((_props$data14 = props.data) === null || _props$data14 === void 0 ? void 0 : _props$data14.handoffOverlapSeconds) || 0
       };
     }
   }]);

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

@@ -156,17 +156,23 @@ var HighlightLines = function HighlightLines(_ref3) {
   }));
 };
 export var HandoffNametag = function HandoffNametag(_ref4) {
+  var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var pictureUrl = _ref4.pictureUrl,
     fullName = _ref4.fullName,
     title = _ref4.title,
     alignment = _ref4.alignment,
     duration = _ref4.duration,
     _ref4$handoffNametagV = _ref4.handoffNametagVariant,
-    handoffNametagVariant = _ref4$handoffNametagV === void 0 ? HANDOFF_NAMETAG_VARIANTS.BOXED : _ref4$handoffNametagV;
-  var _useVideoConfig = useVideoConfig(),
-    fps = _useVideoConfig.fps,
-    width = _useVideoConfig.width,
-    height = _useVideoConfig.height;
+    handoffNametagVariant = _ref4$handoffNametagV === void 0 ? HANDOFF_NAMETAG_VARIANTS.BOXED : _ref4$handoffNametagV,
+    _ref4$useSquareInLand = _ref4.useSquareInLandscapeFirstVideo,
+    useSquareInLandscapeFirstVideo = _ref4$useSquareInLand === void 0 ? false : _ref4$useSquareInLand;
+  var videoConfig = useVideoConfig();
+  var fps = videoConfig.fps,
+    width = videoConfig.width,
+    height = videoConfig.height,
+    _videoConfig$props = videoConfig.props,
+    compositionProps = _videoConfig$props === void 0 ? {} : _videoConfig$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 _useTheme = useTheme(),
     primaryColor = _useTheme.primaryColor,
     primaryContrast = _useTheme.primaryContrast,
@@ -257,6 +263,14 @@ export var HandoffNametag = function HandoffNametag(_ref4) {
   var initialsFontSize = Math.max(Math.round(mediaBaseSize * 0.45), 22);
   var contentAlignItems = lineJustifyContent[alignment] === "flex-end" ? "flex-end" : "flex-start";
   var staticContainerTop = containerTop === null || containerTop === void 0 ? void 0 : containerTop[alignment];
+  var baseContainerLeft = containerLeft === null || containerLeft === void 0 ? void 0 : containerLeft[alignment];
+  var shouldShiftFirstLeftInLandscape = Boolean(useSquareInLandscapeFirstVideo) && outputOrientation === "landscape" && alignment === "first-left" && typeof baseContainerLeft === "number";
+  var centerAlignedLeft = (width - textContainerWidth) / 2;
+  var initialLeftOffset = 60;
+  var initialStartLeft = centerAlignedLeft - initialLeftOffset;
+  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 _getTypewriterState = getTypewriterState({
       frame: frame,
       fps: fps,
@@ -292,7 +306,7 @@ export var HandoffNametag = function HandoffNametag(_ref4) {
     style: {
       position: "absolute",
       top: staticContainerTop,
-      left: containerLeft[alignment],
+      left: containerLeftPosition,
       right: containerRight[alignment],
       bottom: typeof staticContainerTop === "number" ? undefined : containerBottom,
       borderRadius: "10px",

package/package.json

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