@zync/zync-screnplay-player 0.1.214 → 0.1.216

package/dist/screenplay/RemotionRenderer/components/LottieAnimationGlobal.js

@@ -8,9 +8,9 @@ import React, { useEffect, useState } from 'react';
 import { delayRender, continueRender, cancelRender } from 'remotion';
 import { Lottie } from '@remotion/lottie';
 
-/**
- * Convert a HEX color string (e.g. "#ff8800") to the RGBA float array that
- * Lottie expects: [r, g, b, a] where each component is 0‑1.
+/**
+ * Convert a HEX color string (e.g. "#ff8800") to the RGBA float array that
+ * Lottie expects: [r, g, b, a] where each component is 0‑1.
  */
 var hexToRGBA = function hexToRGBA(hex) {
   var clean = hex.replace('#', '');
@@ -25,9 +25,9 @@ var hexToRGBA = function hexToRGBA(hex) {
   ];
 };
 
-/**
- * Recursively walks through shape objects and overrides any fill (fl) or
- * stroke (st) color with the provided RGBA array.
+/**
+ * Recursively walks through shape objects and overrides any fill (fl) or
+ * stroke (st) color with the provided RGBA array.
  */
 var _applyColor = function applyColor(shapes, rgba) {
   shapes === null || shapes === void 0 ? void 0 : shapes.forEach(function (shape) {
@@ -40,11 +40,11 @@ var _applyColor = function applyColor(shapes, rgba) {
   });
 };
 
-/**
- * Traverses all layers (top‑level + asset layers) and applies the primary
- * color to every fill / stroke it encounters. This is useful for Lottie files
- * that were exported with a single static color (e.g. white) and do not use
- * layer naming conventions like "PrimaryColor".
+/**
+ * Traverses all layers (top‑level + asset layers) and applies the primary
+ * color to every fill / stroke it encounters. This is useful for Lottie files
+ * that were exported with a single static color (e.g. white) and do not use
+ * layer naming conventions like "PrimaryColor".
  */
 var replaceGlobalColor = function replaceGlobalColor(data, hex) {
   var _data$assets;
@@ -60,16 +60,16 @@ var replaceGlobalColor = function replaceGlobalColor(data, hex) {
   });
 };
 
-/**
- * LottieAnimationGlobal – specialised wrapper to render the provided Lottie
- * (e.g. text‑bubble‑animation.json) while dynamically replacing **all** stroke
- * and fill colors with the supplied `primaryColor`.
- *
- * Props:
- *  • animationPath – URL or local path to the json file.
- *  • primaryColor  – HEX string, defaults to "#ffffff".
- *  • autoplay      – boolean, whether to start playing immediately.
- *  • loop          – boolean, whether to loop the animation.
+/**
+ * LottieAnimationGlobal – specialised wrapper to render the provided Lottie
+ * (e.g. text‑bubble‑animation.json) while dynamically replacing **all** stroke
+ * and fill colors with the supplied `primaryColor`.
+ *
+ * Props:
+ *  • animationPath – URL or local path to the json file.
+ *  • primaryColor  – HEX string, defaults to "#ffffff".
+ *  • autoplay      – boolean, whether to start playing immediately.
+ *  • loop          – boolean, whether to loop the animation.
  */
 export var LottieAnimationGlobal = function LottieAnimationGlobal(_ref) {
   var animationPath = _ref.animationPath,

package/dist/screenplay/RemotionRenderer/components/effects/BrollFullscreen.js

@@ -16,6 +16,7 @@ export var BrollFullscreen = function BrollFullscreen(_ref) {
     url: url,
     zIndex: 1
   }) : null, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     src: videoUrl,
     style: {
       width: "100%",

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

@@ -90,6 +90,7 @@ var Square = function Square(_ref) {
     centerHorizontally: true,
     transparent: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: false,
@@ -125,6 +126,7 @@ var Square = function Square(_ref) {
       filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
     }
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: true,
@@ -174,6 +176,7 @@ var Square = function Square(_ref) {
       zIndex: 9
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: true,
@@ -297,6 +300,7 @@ var Portrait = function Portrait(_ref2) {
     centerHorizontally: false,
     transparent: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: false,
@@ -333,6 +337,7 @@ var Portrait = function Portrait(_ref2) {
       zIndex: 0
     }
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: true,
@@ -386,6 +391,7 @@ var Portrait = function Portrait(_ref2) {
       zIndex: 9
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: true,
@@ -502,6 +508,7 @@ var Landscape = function Landscape(_ref3) {
     useAveragePosition: true,
     transparent: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: false,
@@ -551,6 +558,7 @@ var Landscape = function Landscape(_ref3) {
       zIndex: 9
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: true,

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

@@ -97,6 +97,7 @@ var Square = function Square(_ref) {
     centerHorizontally: false,
     translateY: 100
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: muted,
@@ -148,6 +149,7 @@ var Square = function Square(_ref) {
       zIndex: 9
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: true,
@@ -266,6 +268,7 @@ var Portrait = function Portrait(_ref2) {
       filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
     }
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: muted,
@@ -324,6 +327,7 @@ var Portrait = function Portrait(_ref2) {
       left: mainVideoLeftTransition
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: true,
@@ -441,6 +445,7 @@ var Landscape = function Landscape(_ref3) {
       filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
     }
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: muted,
@@ -501,6 +506,7 @@ var Landscape = function Landscape(_ref3) {
       left: mainVideoLeftTransition
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: true,

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

@@ -71,6 +71,7 @@ var Square = function Square(_ref) {
       filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
     }
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: true,
@@ -147,6 +148,7 @@ var Square = function Square(_ref) {
       zIndex: 2
     }
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: false,
@@ -246,6 +248,7 @@ var Portrait = function Portrait(_ref2) {
       filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
     }
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: true,
@@ -319,6 +322,7 @@ var Portrait = function Portrait(_ref2) {
     muted: false,
     noBackgroundVideoEffects: noBackgroundVideoEffects
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: false,
@@ -412,6 +416,7 @@ var Landscape = function Landscape(_ref3) {
     centerHorizontally: false,
     muted: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: true,
@@ -487,6 +492,7 @@ var Landscape = function Landscape(_ref3) {
     muted: false,
     noBackgroundVideoEffects: noBackgroundVideoEffects
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: false,

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

@@ -395,6 +395,7 @@ export var CreatorCollabColdOpenVisual = function CreatorCollabColdOpenVisual(_r
         filter: mergeFilters(!showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && firstNoBackgroundVideoUrl ? 'brightness(0.7)' : undefined)
       }
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstVideoFile,
       muted: false,
@@ -426,6 +427,7 @@ export var CreatorCollabColdOpenVisual = function CreatorCollabColdOpenVisual(_r
       transparent: true,
       noBackgroundVideoEffects: noBackgroundVideoEffects
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstNoBackgroundVideoUrl,
       muted: true,
@@ -695,6 +697,7 @@ export var CreatorCollabColdOpenVisual = function CreatorCollabColdOpenVisual(_r
       backgroundColor: withAlpha(primaryColor || '#0f172a', 0.62)
     }
   }, showCollaboratorVideo ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     muted: true,

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

@@ -285,6 +285,7 @@ export var CreatorCollabConversationSpine = function CreatorCollabConversationSp
         filter: mergeFilters(!showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && firstNoBackgroundVideoUrl ? 'brightness(0.7)' : undefined)
       }
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstVideoFile,
       muted: false,
@@ -316,6 +317,7 @@ export var CreatorCollabConversationSpine = function CreatorCollabConversationSp
       transparent: true,
       noBackgroundVideoEffects: noBackgroundVideoEffects
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstNoBackgroundVideoUrl,
       muted: true,
@@ -536,6 +538,7 @@ export var CreatorCollabConversationSpine = function CreatorCollabConversationSp
       transform: "scale(".concat(previewPulse, ")")
     }
   }, secondVideoFile ? /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     muted: true,

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

@@ -292,6 +292,7 @@ export var CreatorCollabDocumentaryInset = function CreatorCollabDocumentaryInse
         filter: mergeFilters(!showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && firstNoBackgroundVideoUrl ? 'brightness(0.7)' : undefined)
       }
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstVideoFile,
       muted: false,
@@ -323,6 +324,7 @@ export var CreatorCollabDocumentaryInset = function CreatorCollabDocumentaryInse
       transparent: true,
       noBackgroundVideoEffects: noBackgroundVideoEffects
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstNoBackgroundVideoUrl,
       muted: true,
@@ -502,6 +504,7 @@ export var CreatorCollabDocumentaryInset = function CreatorCollabDocumentaryInse
       backgroundColor: withAlpha(primaryColor || '#0f172a', 0.64)
     }
   }, hasCollaboratorVideo ? /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     muted: true,

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

@@ -299,6 +299,7 @@ export var CreatorCollabRackFocus = function CreatorCollabRackFocus(_ref) {
         filter: mergeFilters(!showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && firstNoBackgroundVideoUrl ? 'brightness(0.7)' : undefined)
       }
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstVideoFile,
       muted: false,
@@ -330,6 +331,7 @@ export var CreatorCollabRackFocus = function CreatorCollabRackFocus(_ref) {
       transparent: true,
       noBackgroundVideoEffects: noBackgroundVideoEffects
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstNoBackgroundVideoUrl,
       muted: true,
@@ -382,6 +384,7 @@ export var CreatorCollabRackFocus = function CreatorCollabRackFocus(_ref) {
       backgroundColor: withAlpha(primaryColor || '#0f172a', 0.65)
     }
   }, hasCollaboratorVideo ? /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     muted: true,

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

@@ -381,6 +381,7 @@ export var CreatorCollabSplit = function CreatorCollabSplit(_ref) {
         filter: mergeFilters(!showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && firstNoBackgroundVideoUrl ? "brightness(0.7)" : undefined)
       }
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstVideoFile,
       muted: false,
@@ -412,6 +413,7 @@ export var CreatorCollabSplit = function CreatorCollabSplit(_ref) {
       transparent: true,
       noBackgroundVideoEffects: noBackgroundVideoEffects
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstNoBackgroundVideoUrl,
       muted: true,
@@ -601,6 +603,7 @@ export var CreatorCollabSplit = function CreatorCollabSplit(_ref) {
       position: "relative"
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     muted: true,
@@ -723,6 +726,7 @@ export var CreatorCollabSplit = function CreatorCollabSplit(_ref) {
       filter: collaboratorActive ? activeFilter : inactiveFilter
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     muted: true,
@@ -907,6 +911,7 @@ export var CreatorCollabSplit = function CreatorCollabSplit(_ref) {
       filter: collaboratorActive ? activeFilter : inactiveFilter
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     muted: true,

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

@@ -284,6 +284,7 @@ export var CreatorCollabStudioSet = function CreatorCollabStudioSet(_ref) {
         filter: mergeFilters(!showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && firstNoBackgroundVideoUrl ? 'brightness(0.7)' : undefined)
       }
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstVideoFile,
       muted: false,
@@ -315,6 +316,7 @@ export var CreatorCollabStudioSet = function CreatorCollabStudioSet(_ref) {
       transparent: true,
       noBackgroundVideoEffects: noBackgroundVideoEffects
     }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+      pauseWhenBuffering: true,
       startFrom: startVideoFrom,
       src: firstNoBackgroundVideoUrl,
       muted: true,
@@ -396,6 +398,7 @@ export var CreatorCollabStudioSet = function CreatorCollabStudioSet(_ref) {
     transparent: true,
     noBackgroundVideoEffects: noBackgroundVideoEffects
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: firstNoBackgroundVideoUrl,
     muted: true,
@@ -503,6 +506,7 @@ export var CreatorCollabStudioSet = function CreatorCollabStudioSet(_ref) {
       boxShadow: collaboratorActive ? "0 20px 44px rgba(0, 0, 0, 0.42), 0 0 0 1px ".concat(withAlpha(accent, 0.42)) : '0 18px 40px rgba(0, 0, 0, 0.4)'
     }
   }, secondVideoFile ? /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     muted: true,

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

@@ -395,6 +395,7 @@ export var DynamicTriangle = function DynamicTriangle(_ref) {
       zIndex: -1
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     style: {
       width: width,
       height: height,
@@ -516,6 +517,7 @@ export var DynamicTriangle = function DynamicTriangle(_ref) {
       filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
     }
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: muted,
@@ -611,6 +613,7 @@ export var DynamicTriangle = function DynamicTriangle(_ref) {
       filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
     }
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: true,

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

@@ -124,6 +124,7 @@ export var Handoff = function Handoff(_ref) {
     containerHeight: firstRenderVideoHeight,
     useAveragePosition: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startFirstVideoFrom,
     src: firstVideoFile,
     style: {
@@ -148,6 +149,7 @@ export var Handoff = function Handoff(_ref) {
     containerHeight: secondRenderVideoHeight,
     useAveragePosition: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startSecondVideoFrom,
     src: secondVideoFile,
     style: {

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

@@ -335,6 +335,7 @@ var Landscape = function Landscape(_ref) {
     useAveragePosition: true,
     centerHorizontally: false
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     src: videoUrl,
     startFrom: startVideoFrom,
     muted: muted,
@@ -395,6 +396,7 @@ var Landscape = function Landscape(_ref) {
       transform: "translateX(".concat(animatedVideoLeft, "px)")
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     src: noBackgroundVideoUrl,
     startFrom: startVideoFrom,
     muted: true,
@@ -740,6 +742,7 @@ var Portrait = function Portrait(_ref2) {
     useAveragePosition: true,
     centerHorizontally: false
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     src: videoUrl,
     startFrom: startVideoFrom,
     muted: muted,
@@ -801,6 +804,7 @@ var Portrait = function Portrait(_ref2) {
       height: "".concat(animatedVideoHeight, "px")
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     src: noBackgroundVideoUrl,
     startFrom: startVideoFrom,
     muted: true,
@@ -1149,6 +1153,7 @@ var Square = function Square(_ref3) {
     useAveragePosition: true,
     centerHorizontally: false
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     src: videoUrl,
     startFrom: startVideoFrom,
     muted: muted,
@@ -1204,6 +1209,7 @@ var Square = function Square(_ref3) {
       transform: "translateX(".concat(animatedVideoTranslateX, "px)")
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     src: noBackgroundVideoUrl,
     startFrom: startVideoFrom,
     muted: true,

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

@@ -102,6 +102,7 @@ var KeyPointOverlayDepthComponent = function KeyPointOverlayDepthComponent(_ref)
       width: "100%"
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: true,
@@ -228,6 +229,7 @@ var KeyPointOverlayDepthComponent = function KeyPointOverlayDepthComponent(_ref)
       width: "100%"
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: false,
@@ -264,6 +266,7 @@ var KeyPointOverlayDepthComponent = function KeyPointOverlayDepthComponent(_ref)
       width: "100%"
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: false,

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

@@ -350,6 +350,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
       zIndex: 2
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     style: {
       objectFit: "cover",
       width: "100%",
@@ -385,6 +386,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
     useObjectPosition: isPortrait,
     centerHorizontally: isPortrait
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: muted,
@@ -430,6 +432,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
       zIndex: 2
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     style: {
       objectFit: "cover",
       width: "100%",
@@ -490,6 +493,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
       zIndex: 2
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     style: {
       objectFit: "cover",
       width: "100%",
@@ -507,6 +511,7 @@ var KeywordComponent = function KeywordComponent(_ref4) {
       overflow: "hidden"
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: true,

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

@@ -505,6 +505,7 @@ var BackdropFrame = function BackdropFrame(_ref5) {
     useAveragePosition: true,
     centerHorizontally: false
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: true,
@@ -537,6 +538,7 @@ var BackdropFrame = function BackdropFrame(_ref5) {
       WebkitBackdropFilter: "blur(1.5px)"
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     style: {
       objectFit: "cover",
       width: "100%",
@@ -583,6 +585,7 @@ var BackdropFrame = function BackdropFrame(_ref5) {
     centerHorizontally: false,
     noBackgroundVideoEffects: noBackgroundVideoEffects
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: false,

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

@@ -266,6 +266,7 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
       filter: !showVirtual && noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.backgroundDim && noBackgroundVideoUrl ? "brightness(0.7)" : undefined
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: muted,
@@ -341,6 +342,7 @@ var MotionStillComponent = function MotionStillComponent(_ref3) {
       overflow: "hidden"
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: true,

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

@@ -73,6 +73,7 @@ export var MotionStillFullScreen = function MotionStillFullScreen(_ref) {
     useAveragePosition: true,
     centerHorizontally: false
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: muted,
@@ -127,6 +128,7 @@ export var MotionStillFullScreen = function MotionStillFullScreen(_ref) {
       height: "100%"
     }
   }, /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: true,

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

@@ -87,6 +87,7 @@ var Square = function Square(_ref) {
     centerHorizontally: false,
     noBackgroundVideoEffects: noBackgroundVideoEffects
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: muted,
@@ -118,6 +119,7 @@ var Square = function Square(_ref) {
     useAveragePosition: true,
     centerHorizontally: false
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: true,
@@ -239,6 +241,7 @@ var Portrait = function Portrait(_ref2) {
     centerHorizontally: false,
     noBackgroundVideoEffects: noBackgroundVideoEffects
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: muted,
@@ -272,6 +275,7 @@ var Portrait = function Portrait(_ref2) {
     useAveragePosition: true,
     centerHorizontally: false
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: videoUrl,
     muted: true,
@@ -378,6 +382,7 @@ var Landscape = function Landscape(_ref3) {
     centerHorizontally: false,
     transparent: true
   }) : /*#__PURE__*/React.createElement(OffthreadVideo, {
+    pauseWhenBuffering: true,
     startFrom: startVideoFrom,
     src: noBackgroundVideoUrl,
     muted: muted,