@zync/zync-screnplay-player 0.1.229 → 0.1.230

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

@@ -9,11 +9,45 @@ 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 GLITCH_SLAM_TEAR_BARS = [{
+  top: 8,
+  height: 2.6,
+  phase: -4,
+  direction: 1,
+  weight: 0.72
+}, {
+  top: 19,
+  height: 4.8,
+  phase: -2,
+  direction: -1,
+  weight: 0.94
+}, {
+  top: 35,
+  height: 2.2,
+  phase: 0,
+  direction: 1,
+  weight: 0.84
+}, {
+  top: 49,
+  height: 5.8,
+  phase: 1,
+  direction: -1,
+  weight: 1
+}, {
+  top: 64,
+  height: 3.2,
+  phase: 3,
+  direction: 1,
+  weight: 0.68
+}, {
+  top: 79,
+  height: 4.4,
+  phase: 4,
+  direction: -1,
+  weight: 0.78
+}];
 var motionBlurComponents = {
   SentenceSimple: true,
   Sentence: true
@@ -59,21 +93,14 @@ var isHookExitEffectEnabled = function isHookExitEffectEnabled(_ref) {
     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) {
+var getHookGlitchSlamShake = function getHookGlitchSlamShake(overlay, frame, width) {
   if (!overlay) {
     return {
-      localFrame: 0,
-      relativeFrame: 0,
-      impact: 0,
-      cutPulse: 0,
-      postDecay: 0,
-      tearWindow: 0
+      x: 0,
+      scale: 1
     };
   }
   var localFrame = frame - overlay.from;
@@ -94,182 +121,25 @@ var getHookExitPulse = function getHookExitPulse(overlay, frame) {
     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 baseAmplitude = Math.max(6, width * 0.008) * impact;
+  var slamAmplitude = Math.max(14, width * 0.018) * cutPulse;
   var x = Math.round((baseAmplitude + slamAmplitude) * jitter * 10) / 10;
-  var scale = 1 + impact * 0.004 * styleMultiplier + cutPulse * 0.012 * styleMultiplier;
+  var scale = 1 + impact * 0.004 + cutPulse * 0.012;
   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 HookGlitchSlamOverlay = function HookGlitchSlamOverlay(_ref2) {
   var _window, _window$screenplayPro;
-  var durationInFrames = _ref4.durationInFrames,
-    peakFrame = _ref4.peakFrame;
+  var durationInFrames = _ref2.durationInFrames,
+    peakFrame = _ref2.peakFrame;
   var frame = useCurrentFrame();
-  var _useVideoConfig2 = useVideoConfig(),
-    _useVideoConfig2$prop = _useVideoConfig2.props,
-    compositionProps = _useVideoConfig2$prop === void 0 ? {} : _useVideoConfig2$prop;
+  var _useVideoConfig = useVideoConfig(),
+    width = _useVideoConfig.width,
+    _useVideoConfig$props = _useVideoConfig.props,
+    compositionProps = _useVideoConfig$props === void 0 ? {} : _useVideoConfig$props;
   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)";
@@ -290,8 +160,15 @@ var HookGlitchSlamOverlay = function HookGlitchSlamOverlay(_ref4) {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   });
+  var tearWindow = interpolate(Math.abs(relativeFrame), [0, 5, 9], [1, 0.72, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
   var flashOpacity = cutPulse * 0.46 + impact * 0.05;
   var accentOpacity = cutPulse * 0.16 * postDecay;
+  var splitOpacity = Math.min(0.22, (cutPulse * 0.16 + tearWindow * 0.05) * postDecay);
+  var splitOffset = Math.max(5, width * 0.006) * (0.4 + cutPulse);
+  var maxTearOffset = Math.max(22, width * 0.04);
   return /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       zIndex: 9999,
@@ -304,6 +181,54 @@ var HookGlitchSlamOverlay = function HookGlitchSlamOverlay(_ref4) {
       backgroundColor: accentWash,
       mixBlendMode: "screen"
     }
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      opacity: splitOpacity,
+      backgroundColor: "rgba(0,240,255,0.72)",
+      mixBlendMode: "screen",
+      transform: "translate3d(".concat(-splitOffset, "px, 0, 0)")
+    }
+  }), /*#__PURE__*/React.createElement(AbsoluteFill, {
+    style: {
+      opacity: splitOpacity,
+      backgroundColor: "rgba(255,32,96,0.66)",
+      mixBlendMode: "screen",
+      transform: "translate3d(".concat(splitOffset, "px, 0, 0)")
+    }
+  }), GLITCH_SLAM_TEAR_BARS.map(function (bar, index) {
+    var barPulse = interpolate(Math.abs(relativeFrame - bar.phase), [0, 2, 5], [1, 0.48, 0], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    }) * impact;
+    var tearOffset = bar.direction * maxTearOffset * bar.weight * barPulse;
+    var colorOpacity = Math.min(0.58, barPulse * 0.46);
+    var shadowOpacity = Math.min(0.18, barPulse * 0.18);
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: "glitch-slam-tear-".concat(index)
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: "".concat(bar.top, "%"),
+        left: "-8%",
+        width: "116%",
+        height: "".concat(bar.height, "%"),
+        opacity: colorOpacity,
+        background: index % 2 === 0 ? "linear-gradient(90deg, rgba(0,240,255,0), rgba(0,240,255,0.78) 18%, rgba(255,255,255,0.42) 52%, rgba(0,240,255,0) 100%)" : "linear-gradient(90deg, rgba(255,32,96,0), rgba(255,32,96,0.72) 22%, rgba(255,255,255,0.38) 58%, rgba(255,32,96,0) 100%)",
+        mixBlendMode: "screen",
+        transform: "translate3d(".concat(tearOffset, "px, 0, 0)")
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: "".concat(bar.top + bar.height * 0.35, "%"),
+        left: "-8%",
+        width: "116%",
+        height: "0.5%",
+        opacity: shadowOpacity,
+        backgroundColor: "rgba(0,0,0,0.72)",
+        transform: "translate3d(".concat(-tearOffset * 0.55, "px, 0, 0)")
+      }
+    }));
   }), /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       opacity: flashOpacity,
@@ -315,8 +240,8 @@ var HookGlitchSlamOverlay = function HookGlitchSlamOverlay(_ref4) {
 var buildHookExitOverlays = function buildHookExitOverlays(track) {
   var overlays = [];
   var timelineCursor = 0;
-  track.forEach(function (_ref5, index) {
-    var layout = _ref5.layout;
+  track.forEach(function (_ref3, index) {
+    var layout = _ref3.layout;
     var durationInFrames = layout.durationInFrames;
     var hasNextSegment = index < track.length - 1;
     var hookExitEffectEnabled = isHookExitEffectEnabled({
@@ -338,10 +263,7 @@ var buildHookExitOverlays = function buildHookExitOverlays(track) {
           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))
+          soundFrom: segmentEnd
         });
       }
     }
@@ -349,10 +271,10 @@ var buildHookExitOverlays = function buildHookExitOverlays(track) {
   });
   return overlays;
 };
-var NestedEffects = function NestedEffects(_ref6) {
-  var component = _ref6.component,
-    index = _ref6.index,
-    otherProps = _objectWithoutProperties(_ref6, _excluded);
+var NestedEffects = function NestedEffects(_ref4) {
+  var component = _ref4.component,
+    index = _ref4.index,
+    otherProps = _objectWithoutProperties(_ref4, _excluded);
   var ComponentToRender = RegisteredComponents[component];
   if (!ComponentToRender) {
     return null;
@@ -363,45 +285,35 @@ var NestedEffects = function NestedEffects(_ref6) {
     name: "NestedEffect-".concat(component)
   }, /*#__PURE__*/React.createElement(ComponentToRender, otherProps));
 };
-var StandardVideoTrack = function StandardVideoTrack(_ref7) {
-  var _window2, _window2$screenplayPr;
-  var track = _ref7.track;
+var StandardVideoTrack = function StandardVideoTrack(_ref5) {
+  var track = _ref5.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 _useVideoConfig2 = useVideoConfig(),
+    width = _useVideoConfig2.width;
   var hookExitOverlays = buildHookExitOverlays(track);
-  var activeHookExitOverlay = hookExitOverlays.find(function (_ref8) {
-    var from = _ref8.from,
-      durationInFrames = _ref8.durationInFrames;
+  var activeHookExitOverlay = hookExitOverlays.find(function (_ref6) {
+    var from = _ref6.from,
+      durationInFrames = _ref6.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, {
+  }, /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
       transform: "translate3d(".concat(shakeX, "px, 0, 0) scale(").concat(shakeScale, ")"),
-      transformOrigin: "center center",
-      filter: glitchVerdictFrameFilter
+      transformOrigin: "center center"
     }
-  }, /*#__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;
+  }, /*#__PURE__*/React.createElement(Series, null, track.map(function (_ref7, index, array) {
+    var _ref7$layout = _ref7.layout,
+      component = _ref7$layout.component,
+      otherProps = _objectWithoutProperties(_ref7$layout, _excluded2),
+      _ref7$effects = _ref7.effects,
+      effects = _ref7$effects === void 0 ? [] : _ref7$effects;
     var ComponentToRender = RegisteredComponents[component];
     var hookExitEffectEnabled = isHookExitEffectEnabled({
       component: component,
@@ -426,13 +338,12 @@ var StandardVideoTrack = function StandardVideoTrack(_ref7) {
         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;
+  }))), hookExitOverlays.map(function (_ref8, index) {
+    var from = _ref8.from,
+      durationInFrames = _ref8.durationInFrames,
+      peakFrame = _ref8.peakFrame,
+      playSound = _ref8.playSound,
+      soundFrom = _ref8.soundFrom;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: "hook-glitch-slam-".concat(from, "-").concat(index)
     }, /*#__PURE__*/React.createElement(Sequence, {
@@ -442,19 +353,7 @@ var StandardVideoTrack = function StandardVideoTrack(_ref7) {
     }, /*#__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, {
+    })), playSound ? /*#__PURE__*/React.createElement(Sequence, {
       from: soundFrom,
       name: "HookGlitchSlamSound"
     }, /*#__PURE__*/React.createElement(Audio, {
@@ -468,17 +367,17 @@ var StandardVideoTrack = function StandardVideoTrack(_ref7) {
     })) : null);
   }));
 };
-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 TransitionVideoTrack = function TransitionVideoTrack(_ref9) {
+  var track = _ref9.track,
+    transition = _ref9.transition;
+  return /*#__PURE__*/React.createElement(TransitionSeries, null, track.map(function (_ref10, index, array) {
+    var _ref10$layout = _ref10.layout,
+      component = _ref10$layout.component,
+      otherProps = _objectWithoutProperties(_ref10$layout, _excluded3),
+      _ref10$effects = _ref10.effects,
+      effects = _ref10$effects === void 0 ? [] : _ref10$effects,
+      _ref10$transitionAfte = _ref10.transitionAfter,
+      transitionAfter = _ref10$transitionAfte === void 0 ? true : _ref10$transitionAfte;
     var ComponentToRender = RegisteredComponents[component];
     var hasNextSegment = index < array.length - 1;
     var shouldTransition = hasNextSegment && transitionAfter !== false;
@@ -503,18 +402,18 @@ var TransitionVideoTrack = function TransitionVideoTrack(_ref11) {
     }) : null];
   }));
 };
-export var LayoutVideoTrack = function LayoutVideoTrack(_ref13) {
-  var track = _ref13.track;
+export var LayoutVideoTrack = function LayoutVideoTrack(_ref11) {
+  var track = _ref11.track;
   if (!track) {
     return null;
   }
-  var _useVideoConfig4 = useVideoConfig(),
-    _useVideoConfig4$prop = _useVideoConfig4.props.output,
-    _useVideoConfig4$prop2 = _useVideoConfig4$prop === void 0 ? {
+  var _useVideoConfig3 = useVideoConfig(),
+    _useVideoConfig3$prop = _useVideoConfig3.props.output,
+    _useVideoConfig3$prop2 = _useVideoConfig3$prop === void 0 ? {
       theme: window.screenplayProps.output.theme
-    } : _useVideoConfig4$prop,
-    _useVideoConfig4$prop3 = _useVideoConfig4$prop2.theme,
-    theme = _useVideoConfig4$prop3 === void 0 ? "default" : _useVideoConfig4$prop3;
+    } : _useVideoConfig3$prop,
+    _useVideoConfig3$prop3 = _useVideoConfig3$prop2.theme,
+    theme = _useVideoConfig3$prop3 === void 0 ? "default" : _useVideoConfig3$prop3;
   var transition = transitionThemes[theme];
   if (transition) {
     return /*#__PURE__*/React.createElement(TransitionVideoTrack, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zync/zync-screnplay-player",
-  "version": "0.1.229",
+  "version": "0.1.230",
   "files": [
     "dist"
   ],
@@ -16,19 +16,16 @@
     "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"
+    "remotion": "4.0.441"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   },
   "devDependencies": {
     "@babel/cli": "7.21.5",
@@ -37,14 +34,12 @@
     "@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"
+    "webpack-cli": "^6.0.1",
+    "rimraf": "^5.0.7"
   },
   "browser": {
     "fs": false