@zync/zync-screnplay-player 0.1.222 → 0.1.224

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

@@ -430,7 +430,11 @@ export var HookVideo = function HookVideo(_ref5) {
     hookDurationSeconds = _ref5$hookDurationSec === void 0 ? 1.6 : _ref5$hookDurationSec,
     hookAccentText = _ref5.hookAccentText,
     _ref5$disableHookSoun = _ref5.disableHookSounds,
-    disableHookSounds = _ref5$disableHookSoun === void 0 ? false : _ref5$disableHookSoun;
+    disableHookSounds = _ref5$disableHookSoun === void 0 ? false : _ref5$disableHookSoun,
+    _ref5$trimLeft = _ref5.trimLeft,
+    trimLeft = _ref5$trimLeft === void 0 ? 0 : _ref5$trimLeft,
+    _ref5$baseTrimLeft = _ref5.baseTrimLeft,
+    baseTrimLeft = _ref5$baseTrimLeft === void 0 ? 0 : _ref5$baseTrimLeft;
   var frame = useCurrentFrame();
   var _useVideoConfig = useVideoConfig(),
     outputWidth = _useVideoConfig.width,
@@ -465,6 +469,10 @@ export var HookVideo = function HookVideo(_ref5) {
     effectiveHookFrames = _getHookTiming.effectiveHookFrames,
     settleFrames = _getHookTiming.settleFrames,
     shortSegment = _getHookTiming.shortSegment;
+  var hookAnimationOffsetFrames = Math.max(0, Math.round((trimLeft - baseTrimLeft) * fps));
+  var hookAnimationFrame = frame + hookAnimationOffsetFrames;
+  var hookOverlayFrame = hookAnimationFrame;
+  var isContinuationChunk = hookAnimationOffsetFrames > 0;
   var preset = useOrientationBased({
     landscape: {
       textBoxWidth: style === HOOK_STYLE_PRESETS.split_reveal ? width * 0.38 : style === HOOK_STYLE_PRESETS.mono_shock ? width * 0.46 : width * 0.58,
@@ -494,7 +502,7 @@ export var HookVideo = function HookVideo(_ref5) {
   var monoOverlayHoldFrames = style === HOOK_STYLE_PRESETS.mono_shock ? Math.round(fps * 0.55) : 0;
   var overlayFadeFrames = style === HOOK_STYLE_PRESETS.mono_shock ? 12 : 6;
   var overlayEndFrame = shortSegment ? durationInFrames : Math.min(durationInFrames, effectiveHookFrames + monoOverlayHoldFrames);
-  var hookOverlayOpacity = shortSegment ? 1 : interpolate(frame, [Math.max(overlayEndFrame - overlayFadeFrames, 0), overlayEndFrame], [1, 0], {
+  var hookOverlayOpacity = shortSegment && !isContinuationChunk ? 1 : interpolate(hookOverlayFrame, [Math.max(overlayEndFrame - overlayFadeFrames, 0), overlayEndFrame], [1, 0], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   });
@@ -516,7 +524,7 @@ export var HookVideo = function HookVideo(_ref5) {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   })), HOOK_STYLE_PRESETS.border_alarm, 0), HOOK_STYLE_PRESETS.split_reveal, 0)[style];
-  var letterboxHeight = style === HOOK_STYLE_PRESETS.mono_shock ? interpolate(frame, [0, effectiveHookFrames, overlayEndFrame], [0, height * 0.11, height * 0.11], {
+  var letterboxHeight = style === HOOK_STYLE_PRESETS.mono_shock ? interpolate(hookOverlayFrame, [0, effectiveHookFrames, Math.max(effectiveHookFrames + 1, overlayEndFrame)], [0, height * 0.11, height * 0.11], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   }) * hookOverlayOpacity : 0;
@@ -533,7 +541,7 @@ export var HookVideo = function HookVideo(_ref5) {
     extrapolateRight: "clamp"
   }) : 0;
   var _getVideoTreatment = getVideoTreatment({
-      frame: frame,
+      frame: hookOverlayFrame,
       style: style,
       hookFrames: effectiveHookFrames,
       settleFrames: settleFrames,
@@ -805,7 +813,7 @@ export var HookVideo = function HookVideo(_ref5) {
     accentContrast: accentContrast,
     primaryContrast: primaryContrast,
     style: style,
-    frame: frame,
+    frame: hookAnimationFrame,
     fps: fps,
     hookFrames: effectiveHookFrames
   }))), /*#__PURE__*/React.createElement(AbsoluteFill, {

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

@@ -295,7 +295,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       height: CHROME_PADDING,
       width: width,
@@ -304,7 +304,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
     }
   }), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       width: CHROME_PADDING,
       height: height,
@@ -313,7 +313,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
     }
   }), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       width: CHROME_PADDING,
       height: height,

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

@@ -205,7 +205,7 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       height: CHROME_PADDING,
       width: width,
@@ -214,7 +214,7 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
     }
   }), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       width: CHROME_PADDING,
       height: height,
@@ -223,7 +223,7 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
     }
   }), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "fixed",
+      position: shouldUseSquareInLandscape ? "absolute" : "fixed",
       zIndex: 999,
       width: CHROME_PADDING,
       height: height,