@zync/zync-screnplay-player 0.1.227 → 0.1.229

package/dist/screenplay/RemotionRenderer/tracks/LayoutVideoTrack.js

@@ -4,11 +4,16 @@ var _excluded = ["component", "index"],
 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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { Easing, Sequence, Series, useVideoConfig } from "remotion";
+import { AbsoluteFill, Audio, Easing, Sequence, Series, interpolate, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
 import React from "react";
 import { RegisteredComponents } from "../registeredComponents";
 import { linearTiming, TransitionSeries } from "@remotion/transitions";
 import { glitchOnePresentation } from "./transitions/GlitchOne";
+import { HookThreeGlitchOverlay } from "../components/layouts/HookThreeGlitchOverlay";
+var HOOK_EXIT_PRE_FRAMES = 8;
+var HOOK_EXIT_POST_FRAMES = 7;
+var GLITCH_VERDICT_STYLE = "glitch_verdict";
+var GLITCH_VERDICT_FILTER_ID = "hook-glitch-verdict-rgb-split";
 var motionBlurComponents = {
   SentenceSimple: true,
   Sentence: true
@@ -23,32 +28,331 @@ var transitionThemes = {
   }
 };
 
-/*
-const UseMotionBlur = ({ children, componentName }) => {
-  const {
-    props: {
-      output: { theme = "default" } = {
-        theme: window.screenplayProps.output.theme,
-      },
-    },
-  } = useVideoConfig();
-
-  if (motionBlurComponents[componentName] && motionBlurThemes[theme]) {
-    return (
-      <CameraMotionBlur shutterAngle={180} samples={5}>
-        {children}
-      </CameraMotionBlur>
-    );
-  }
-
-  return children;
-};
+/*
+const UseMotionBlur = ({ children, componentName }) => {
+  const {
+    props: {
+      output: { theme = "default" } = {
+        theme: window.screenplayProps.output.theme,
+      },
+    },
+  } = useVideoConfig();
+
+  if (motionBlurComponents[componentName] && motionBlurThemes[theme]) {
+    return (
+      <CameraMotionBlur shutterAngle={180} samples={5}>
+        {children}
+      </CameraMotionBlur>
+    );
+  }
+
+  return children;
+};
  */
 
-var NestedEffects = function NestedEffects(_ref) {
+var isTruthy = function isTruthy(value) {
+  return value === true || value === "true" || value === 1 || value === "1";
+};
+var isHookExitEffectEnabled = function isHookExitEffectEnabled(_ref) {
   var component = _ref.component,
-    index = _ref.index,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
+    hasNextSegment = _ref.hasNextSegment,
+    props = _ref.props;
+  return component === "HookVideo" && hasNextSegment && !isTruthy(props.disableHookExitEffect);
+};
+var isGlitchVerdictHook = function isGlitchVerdictHook(props) {
+  return (props === null || props === void 0 ? void 0 : props.hookStyle) === GLITCH_VERDICT_STYLE;
+};
+var withAlpha = function withAlpha(color, alpha) {
+  return /^#[0-9a-fA-F]{6}$/.test(color || "") ? "".concat(color).concat(alpha) : color;
+};
+var getHookExitPulse = function getHookExitPulse(overlay, frame) {
+  if (!overlay) {
+    return {
+      localFrame: 0,
+      relativeFrame: 0,
+      impact: 0,
+      cutPulse: 0,
+      postDecay: 0,
+      tearWindow: 0
+    };
+  }
+  var localFrame = frame - overlay.from;
+  var fadeOutEnd = Math.max(overlay.durationInFrames - 1, overlay.peakFrame + 1);
+  var relativeFrame = localFrame - overlay.peakFrame;
+  var preImpact = interpolate(localFrame, [0, overlay.peakFrame], [0, 1], {
+    easing: Easing["in"](Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var postDecay = localFrame <= overlay.peakFrame ? 1 : interpolate(localFrame, [overlay.peakFrame, fadeOutEnd], [1, 0], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var impact = localFrame <= overlay.peakFrame ? preImpact : postDecay;
+  var cutPulse = interpolate(Math.abs(relativeFrame), [0, 2, 7], [1, 0.52, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var tearWindow = interpolate(Math.abs(relativeFrame), [0, 5, 9], [1, 0.72, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  return {
+    localFrame: localFrame,
+    relativeFrame: relativeFrame,
+    impact: impact,
+    cutPulse: cutPulse,
+    postDecay: postDecay,
+    tearWindow: tearWindow
+  };
+};
+var getGlitchVerdictFrameFilter = function getGlitchVerdictFrameFilter(overlay, frame) {
+  if (!(overlay !== null && overlay !== void 0 && overlay.useRgbSplit)) {
+    return undefined;
+  }
+  var _getHookExitPulse = getHookExitPulse(overlay, frame),
+    impact = _getHookExitPulse.impact,
+    cutPulse = _getHookExitPulse.cutPulse,
+    tearWindow = _getHookExitPulse.tearWindow;
+  var colorCrush = Math.max(impact, cutPulse, tearWindow);
+  var saturate = 1 + colorCrush * 1.85;
+  var contrast = 1 + colorCrush * 0.82;
+  var brightness = 1 - colorCrush * 0.28;
+  return "url(#".concat(GLITCH_VERDICT_FILTER_ID, ") saturate(").concat(saturate, ") contrast(").concat(contrast, ") brightness(").concat(brightness, ")");
+};
+var channelMatrix = function channelMatrix(_ref2) {
+  var _ref2$r = _ref2.r,
+    r = _ref2$r === void 0 ? 0 : _ref2$r,
+    _ref2$g = _ref2.g,
+    g = _ref2$g === void 0 ? 0 : _ref2$g,
+    _ref2$b = _ref2.b,
+    b = _ref2$b === void 0 ? 0 : _ref2$b,
+    _ref2$alpha = _ref2.alpha,
+    alpha = _ref2$alpha === void 0 ? 1 : _ref2$alpha;
+  return ["".concat(r, " 0 0 0 0"), "0 ".concat(g, " 0 0 0"), "0 0 ".concat(b, " 0 0"), "0 0 0 ".concat(alpha, " 0")].join(" ");
+};
+var getHookGlitchSlamShake = function getHookGlitchSlamShake(overlay, frame, width) {
+  if (!overlay) {
+    return {
+      x: 0,
+      scale: 1
+    };
+  }
+  var _getHookExitPulse2 = getHookExitPulse(overlay, frame),
+    localFrame = _getHookExitPulse2.localFrame,
+    impact = _getHookExitPulse2.impact,
+    cutPulse = _getHookExitPulse2.cutPulse;
+  var jitter = (localFrame % 2 === 0 ? 0.86 : -0.86) + Math.sin((localFrame + 1) * 2.37) * 0.24;
+  var styleMultiplier = overlay.hookStyle === GLITCH_VERDICT_STYLE ? 1.45 : 1;
+  var baseAmplitude = Math.max(6, width * 0.008) * impact * styleMultiplier;
+  var slamAmplitude = Math.max(14, width * 0.018) * cutPulse * styleMultiplier;
+  var x = Math.round((baseAmplitude + slamAmplitude) * jitter * 10) / 10;
+  var scale = 1 + impact * 0.004 * styleMultiplier + cutPulse * 0.012 * styleMultiplier;
+  return {
+    x: x,
+    scale: scale
+  };
+};
+var GlitchVerdictRgbSplitFilter = function GlitchVerdictRgbSplitFilter(_ref3) {
+  var overlay = _ref3.overlay;
+  var frame = useCurrentFrame();
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width;
+  var _getHookExitPulse3 = getHookExitPulse(overlay, frame),
+    localFrame = _getHookExitPulse3.localFrame,
+    impact = _getHookExitPulse3.impact,
+    cutPulse = _getHookExitPulse3.cutPulse,
+    tearWindow = _getHookExitPulse3.tearWindow;
+  var pulse = Math.max(impact, cutPulse, tearWindow);
+  var strobe = localFrame % 3 === 0 ? 1 : localFrame % 3 === 1 ? 0.72 : 0.86;
+  var channelOpacity = Math.min(0.92, 0.28 + pulse * 0.58) * strobe;
+  var offset = Math.max(10, width * 0.014) * (0.2 + pulse + cutPulse * 1.35);
+  var redDx = (localFrame % 2 === 0 ? -1 : 0.72) * offset;
+  var greenDx = Math.sin((localFrame + 2) * 1.97) * offset * 0.24;
+  var blueDx = (localFrame % 2 === 0 ? 0.86 : -1) * offset;
+  var redDy = Math.sin(localFrame * 0.9) * offset * 0.1;
+  var blueDy = Math.cos(localFrame * 0.72) * offset * 0.08;
+  var displacement = Math.max(0, width * 0.018 * (pulse + cutPulse * 1.5));
+  var turbulenceY = 0.18 + localFrame % 5 * 0.035;
+  if (!(overlay !== null && overlay !== void 0 && overlay.useRgbSplit) || pulse <= 0.001) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    style: {
+      position: "absolute",
+      width: 0,
+      height: 0,
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement("filter", {
+    id: GLITCH_VERDICT_FILTER_ID,
+    x: "-18%",
+    y: "-18%",
+    width: "136%",
+    height: "136%",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feTurbulence", {
+    type: "fractalNoise",
+    baseFrequency: "0.006 ".concat(turbulenceY),
+    numOctaves: "1",
+    seed: localFrame % 11 + 1,
+    result: "noise"
+  }), /*#__PURE__*/React.createElement("feDisplacementMap", {
+    "in": "SourceGraphic",
+    in2: "noise",
+    scale: displacement,
+    xChannelSelector: "R",
+    yChannelSelector: "G",
+    result: "displaced"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "displaced",
+    type: "matrix",
+    values: channelMatrix({
+      r: 1,
+      alpha: channelOpacity
+    }),
+    result: "red"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "displaced",
+    type: "matrix",
+    values: channelMatrix({
+      g: 1,
+      alpha: channelOpacity * 0.72
+    }),
+    result: "green"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "displaced",
+    type: "matrix",
+    values: channelMatrix({
+      b: 1,
+      alpha: channelOpacity
+    }),
+    result: "blue"
+  }), /*#__PURE__*/React.createElement("feOffset", {
+    "in": "red",
+    dx: redDx,
+    dy: redDy,
+    result: "redOffset"
+  }), /*#__PURE__*/React.createElement("feOffset", {
+    "in": "green",
+    dx: greenDx,
+    dy: "0",
+    result: "greenOffset"
+  }), /*#__PURE__*/React.createElement("feOffset", {
+    "in": "blue",
+    dx: blueDx,
+    dy: blueDy,
+    result: "blueOffset"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    "in": "SourceGraphic",
+    in2: "redOffset",
+    mode: "screen",
+    result: "sourceRed"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    "in": "sourceRed",
+    in2: "greenOffset",
+    mode: "screen",
+    result: "sourceGreen"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    "in": "sourceGreen",
+    in2: "blueOffset",
+    mode: "screen"
+  })));
+};
+var HookGlitchSlamOverlay = function HookGlitchSlamOverlay(_ref4) {
+  var _window, _window$screenplayPro;
+  var durationInFrames = _ref4.durationInFrames,
+    peakFrame = _ref4.peakFrame;
+  var frame = useCurrentFrame();
+  var _useVideoConfig2 = useVideoConfig(),
+    _useVideoConfig2$prop = _useVideoConfig2.props,
+    compositionProps = _useVideoConfig2$prop === void 0 ? {} : _useVideoConfig2$prop;
+  var inputProps = (compositionProps === null || compositionProps === void 0 ? void 0 : compositionProps.input) || (typeof window !== "undefined" ? (_window = window) === null || _window === void 0 ? void 0 : (_window$screenplayPro = _window.screenplayProps) === null || _window$screenplayPro === void 0 ? void 0 : _window$screenplayPro.input : {}) || {};
+  var accentColor = inputProps.accentColor || "#ffffff";
+  var accentWash = withAlpha(accentColor, "40") || "rgba(255,255,255,0.24)";
+  var fadeOutEnd = Math.max(durationInFrames - 1, peakFrame + 1);
+  var relativeFrame = frame - peakFrame;
+  var preImpact = interpolate(frame, [0, peakFrame], [0, 1], {
+    easing: Easing["in"](Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var postDecay = frame <= peakFrame ? 1 : interpolate(frame, [peakFrame, fadeOutEnd], [1, 0], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var impact = frame <= peakFrame ? preImpact : postDecay;
+  var cutPulse = interpolate(Math.abs(relativeFrame), [0, 2, 6], [1, 0.46, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  var flashOpacity = cutPulse * 0.46 + impact * 0.05;
+  var accentOpacity = cutPulse * 0.16 * postDecay;
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      zIndex: 9999,
+      overflow: "hidden",
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      opacity: accentOpacity,
+      backgroundColor: accentWash,
+      mixBlendMode: "screen"
+    }
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      opacity: flashOpacity,
+      backgroundColor: "rgba(255,255,255,0.86)",
+      mixBlendMode: "screen"
+    }
+  }));
+};
+var buildHookExitOverlays = function buildHookExitOverlays(track) {
+  var overlays = [];
+  var timelineCursor = 0;
+  track.forEach(function (_ref5, index) {
+    var layout = _ref5.layout;
+    var durationInFrames = layout.durationInFrames;
+    var hasNextSegment = index < track.length - 1;
+    var hookExitEffectEnabled = isHookExitEffectEnabled({
+      component: layout.component,
+      hasNextSegment: hasNextSegment,
+      props: layout
+    });
+    var segmentEnd = timelineCursor + durationInFrames;
+    if (hookExitEffectEnabled) {
+      var _track, _track$layout;
+      var nextDuration = ((_track = track[index + 1]) === null || _track === void 0 ? void 0 : (_track$layout = _track.layout) === null || _track$layout === void 0 ? void 0 : _track$layout.durationInFrames) || 0;
+      var preFrames = Math.min(HOOK_EXIT_PRE_FRAMES, durationInFrames);
+      var postFrames = Math.min(HOOK_EXIT_POST_FRAMES, nextDuration);
+      var from = Math.max(0, segmentEnd - preFrames);
+      var overlayDuration = preFrames + postFrames;
+      if (overlayDuration > 0) {
+        overlays.push({
+          from: from,
+          durationInFrames: overlayDuration,
+          peakFrame: segmentEnd - from,
+          playSound: !isTruthy(layout.disableHookSounds) && !isTruthy(layout.disableTransitionSounds),
+          soundFrom: segmentEnd,
+          hookStyle: layout.hookStyle,
+          useRgbSplit: isGlitchVerdictHook(layout),
+          useThreeGlitch: !isTruthy(layout.disableHookThreeGlitchEffect) && (isGlitchVerdictHook(layout) || isTruthy(layout.hookThreeGlitchEffectEnabled))
+        });
+      }
+    }
+    timelineCursor += durationInFrames;
+  });
+  return overlays;
+};
+var NestedEffects = function NestedEffects(_ref6) {
+  var component = _ref6.component,
+    index = _ref6.index,
+    otherProps = _objectWithoutProperties(_ref6, _excluded);
   var ComponentToRender = RegisteredComponents[component];
   if (!ComponentToRender) {
     return null;
@@ -59,15 +363,54 @@ var NestedEffects = function NestedEffects(_ref) {
     name: "NestedEffect-".concat(component)
   }, /*#__PURE__*/React.createElement(ComponentToRender, otherProps));
 };
-var StandardVideoTrack = function StandardVideoTrack(_ref2) {
-  var track = _ref2.track;
-  return /*#__PURE__*/React.createElement(Series, null, track.map(function (_ref3, index) {
-    var _ref3$layout = _ref3.layout,
-      component = _ref3$layout.component,
-      otherProps = _objectWithoutProperties(_ref3$layout, _excluded2),
-      _ref3$effects = _ref3.effects,
-      effects = _ref3$effects === void 0 ? [] : _ref3$effects;
+var StandardVideoTrack = function StandardVideoTrack(_ref7) {
+  var _window2, _window2$screenplayPr;
+  var track = _ref7.track;
+  var frame = useCurrentFrame();
+  var _useVideoConfig3 = useVideoConfig(),
+    width = _useVideoConfig3.width,
+    height = _useVideoConfig3.height,
+    _useVideoConfig3$prop = _useVideoConfig3.props,
+    compositionProps = _useVideoConfig3$prop === void 0 ? {} : _useVideoConfig3$prop;
+  var inputProps = (compositionProps === null || compositionProps === void 0 ? void 0 : compositionProps.input) || (typeof window !== "undefined" ? (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$screenplayPr = _window2.screenplayProps) === null || _window2$screenplayPr === void 0 ? void 0 : _window2$screenplayPr.input : {}) || {};
+  var accentColor = inputProps.accentColor || "#ff2f6d";
+  var hookExitOverlays = buildHookExitOverlays(track);
+  var activeHookExitOverlay = hookExitOverlays.find(function (_ref8) {
+    var from = _ref8.from,
+      durationInFrames = _ref8.durationInFrames;
+    return frame >= from && frame < from + durationInFrames;
+  });
+  var _getHookGlitchSlamSha = getHookGlitchSlamShake(activeHookExitOverlay, frame, width),
+    shakeX = _getHookGlitchSlamSha.x,
+    shakeScale = _getHookGlitchSlamSha.scale;
+  var glitchVerdictFrameFilter = getGlitchVerdictFrameFilter(activeHookExitOverlay, frame);
+  return /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      overflow: "hidden"
+    }
+  }, activeHookExitOverlay !== null && activeHookExitOverlay !== void 0 && activeHookExitOverlay.useRgbSplit ? /*#__PURE__*/React.createElement(GlitchVerdictRgbSplitFilter, {
+    overlay: activeHookExitOverlay
+  }) : null, /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      transform: "translate3d(".concat(shakeX, "px, 0, 0) scale(").concat(shakeScale, ")"),
+      transformOrigin: "center center",
+      filter: glitchVerdictFrameFilter
+    }
+  }, /*#__PURE__*/React.createElement(Series, null, track.map(function (_ref9, index, array) {
+    var _ref9$layout = _ref9.layout,
+      component = _ref9$layout.component,
+      otherProps = _objectWithoutProperties(_ref9$layout, _excluded2),
+      _ref9$effects = _ref9.effects,
+      effects = _ref9$effects === void 0 ? [] : _ref9$effects;
     var ComponentToRender = RegisteredComponents[component];
+    var hookExitEffectEnabled = isHookExitEffectEnabled({
+      component: component,
+      hasNextSegment: index < array.length - 1,
+      props: otherProps
+    });
+    var hookExitProps = component === "HookVideo" ? {
+      hookExitEffectEnabled: hookExitEffectEnabled
+    } : {};
     if (!ComponentToRender) {
       return null;
     }
@@ -76,26 +419,66 @@ var StandardVideoTrack = function StandardVideoTrack(_ref2) {
       name: "Layout - " + component,
       durationInFrames: otherProps.durationInFrames,
       premountFor: 100
-    }, /*#__PURE__*/React.createElement(ComponentToRender, otherProps, effects.map(function (effect, i) {
+    }, /*#__PURE__*/React.createElement(ComponentToRender, _extends({}, otherProps, hookExitProps), effects.map(function (effect, i) {
       return /*#__PURE__*/React.createElement(NestedEffects, _extends({
         key: i
       }, effect, {
         index: index
       }));
     })));
+  }))), hookExitOverlays.map(function (_ref10, index) {
+    var from = _ref10.from,
+      durationInFrames = _ref10.durationInFrames,
+      peakFrame = _ref10.peakFrame,
+      playSound = _ref10.playSound,
+      soundFrom = _ref10.soundFrom,
+      useThreeGlitch = _ref10.useThreeGlitch;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: "hook-glitch-slam-".concat(from, "-").concat(index)
+    }, /*#__PURE__*/React.createElement(Sequence, {
+      from: from,
+      durationInFrames: durationInFrames,
+      name: "HookGlitchSlamOverlay"
+    }, /*#__PURE__*/React.createElement(HookGlitchSlamOverlay, {
+      durationInFrames: durationInFrames,
+      peakFrame: peakFrame
+    })), useThreeGlitch ? /*#__PURE__*/React.createElement(Sequence, {
+      from: from,
+      durationInFrames: durationInFrames,
+      name: "HookThreeGlitchExitOverlay"
+    }, /*#__PURE__*/React.createElement(HookThreeGlitchOverlay, {
+      width: width,
+      height: height,
+      startFrame: 0,
+      durationInFrames: durationInFrames,
+      accentColor: accentColor,
+      intensity: 1.2,
+      zIndex: 10000
+    })) : null, playSound ? /*#__PURE__*/React.createElement(Sequence, {
+      from: soundFrom,
+      name: "HookGlitchSlamSound"
+    }, /*#__PURE__*/React.createElement(Audio, {
+      src: staticFile("blip.mp3"),
+      volume: function volume(localFrame) {
+        return interpolate(localFrame, [0, 2, 10], [0, 0.32, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        });
+      }
+    })) : null);
   }));
 };
-var TransitionVideoTrack = function TransitionVideoTrack(_ref4) {
-  var track = _ref4.track,
-    transition = _ref4.transition;
-  return /*#__PURE__*/React.createElement(TransitionSeries, null, track.map(function (_ref5, index, array) {
-    var _ref5$layout = _ref5.layout,
-      component = _ref5$layout.component,
-      otherProps = _objectWithoutProperties(_ref5$layout, _excluded3),
-      _ref5$effects = _ref5.effects,
-      effects = _ref5$effects === void 0 ? [] : _ref5$effects,
-      _ref5$transitionAfter = _ref5.transitionAfter,
-      transitionAfter = _ref5$transitionAfter === void 0 ? true : _ref5$transitionAfter;
+var TransitionVideoTrack = function TransitionVideoTrack(_ref11) {
+  var track = _ref11.track,
+    transition = _ref11.transition;
+  return /*#__PURE__*/React.createElement(TransitionSeries, null, track.map(function (_ref12, index, array) {
+    var _ref12$layout = _ref12.layout,
+      component = _ref12$layout.component,
+      otherProps = _objectWithoutProperties(_ref12$layout, _excluded3),
+      _ref12$effects = _ref12.effects,
+      effects = _ref12$effects === void 0 ? [] : _ref12$effects,
+      _ref12$transitionAfte = _ref12.transitionAfter,
+      transitionAfter = _ref12$transitionAfte === void 0 ? true : _ref12$transitionAfte;
     var ComponentToRender = RegisteredComponents[component];
     var hasNextSegment = index < array.length - 1;
     var shouldTransition = hasNextSegment && transitionAfter !== false;
@@ -120,18 +503,18 @@ var TransitionVideoTrack = function TransitionVideoTrack(_ref4) {
     }) : null];
   }));
 };
-export var LayoutVideoTrack = function LayoutVideoTrack(_ref6) {
-  var track = _ref6.track;
+export var LayoutVideoTrack = function LayoutVideoTrack(_ref13) {
+  var track = _ref13.track;
   if (!track) {
     return null;
   }
-  var _useVideoConfig = useVideoConfig(),
-    _useVideoConfig$props = _useVideoConfig.props.output,
-    _useVideoConfig$props2 = _useVideoConfig$props === void 0 ? {
+  var _useVideoConfig4 = useVideoConfig(),
+    _useVideoConfig4$prop = _useVideoConfig4.props.output,
+    _useVideoConfig4$prop2 = _useVideoConfig4$prop === void 0 ? {
       theme: window.screenplayProps.output.theme
-    } : _useVideoConfig$props,
-    _useVideoConfig$props3 = _useVideoConfig$props2.theme,
-    theme = _useVideoConfig$props3 === void 0 ? "default" : _useVideoConfig$props3;
+    } : _useVideoConfig4$prop,
+    _useVideoConfig4$prop3 = _useVideoConfig4$prop2.theme,
+    theme = _useVideoConfig4$prop3 === void 0 ? "default" : _useVideoConfig4$prop3;
   var transition = transitionThemes[theme];
   if (transition) {
     return /*#__PURE__*/React.createElement(TransitionVideoTrack, {

package/package.json

@@ -1,47 +1,52 @@
-{
-  "name": "@zync/zync-screnplay-player",
-  "version": "0.1.227",
-  "files": [
-    "dist"
-  ],
-  "main": "dist/bundle.js",
-  "module": "dist/index.js",
-  "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/bundle.js"
-  },
-  "scripts": {
-    "clean": "rimraf dist",
-    "build": "npm run clean && babel src --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --copy-files && webpack",
-    "publish-lib": "npm run build && npm publish --access public"
-  },
-  "dependencies": {
-    "@remotion/google-fonts": "4.0.441",
-    "@remotion/lottie": "4.0.441",
-    "@remotion/motion-blur": "4.0.441",
-    "@remotion/player": "4.0.441",
-    "@remotion/transitions": "4.0.441",
-    "remotion": "4.0.441"
-  },
-  "peerDependencies": {
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "7.21.5",
-    "@babel/core": "7.21.5",
-    "@babel/preset-env": "7.21.5",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "^7.26.0",
-    "babel-loader": "^9.2.1",
-    "terser-webpack-plugin": "^5.3.11",
-    "ts-loader": "^9.5.2",
-    "typescript": "^5.7.3",
-    "webpack": "^5.97.1",
-    "webpack-cli": "^6.0.1",
-    "rimraf": "^5.0.7"
-  },
-  "browser": {
-    "fs": false
-  }
-}
+{
+  "name": "@zync/zync-screnplay-player",
+  "version": "0.1.229",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/bundle.js",
+  "module": "dist/index.js",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/bundle.js"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && babel src --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --copy-files && webpack",
+    "publish-lib": "npm run build && npm publish --access public"
+  },
+  "dependencies": {
+    "@react-three/fiber": "8.17.10",
+    "@remotion/google-fonts": "4.0.441",
+    "@remotion/lottie": "4.0.441",
+    "@remotion/motion-blur": "4.0.441",
+    "@remotion/player": "4.0.441",
+    "@remotion/three": "4.0.441",
+    "@remotion/transitions": "4.0.441",
+    "remotion": "4.0.441",
+    "three": "0.178.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.21.5",
+    "@babel/core": "7.21.5",
+    "@babel/preset-env": "7.21.5",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "^7.26.0",
+    "babel-loader": "^9.2.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "rimraf": "^5.0.7",
+    "terser-webpack-plugin": "^5.3.11",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
+  },
+  "browser": {
+    "fs": false
+  }
+}