remotion 4.0.153 → 4.0.155

package/dist/cjs/EditorProps.d.ts

@@ -11,6 +11,7 @@ export type EditorPropsContextType = {
 export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
 export declare const editorPropsProviderRef: React.RefObject<{
     getProps: () => Props;
+    setProps: React.Dispatch<React.SetStateAction<Props>>;
 }>;
 export declare const EditorPropsProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/cjs/EditorProps.js

@@ -49,6 +49,7 @@ const EditorPropsProvider = ({ children }) => {
     (0, react_1.useImperativeHandle)(exports.editorPropsProviderRef, () => {
         return {
             getProps: () => props,
+            setProps,
         };
     }, [props]);
     const ctx = (0, react_1.useMemo)(() => {

package/dist/cjs/Sequence.js

@@ -150,7 +150,7 @@ const PremountedSequenceRefForwardingFunction = (props, ref) => {
     if (props.layout === 'none') {
         throw new Error('`<Sequence>` with `premountFor` prop does not support layout="none"');
     }
-    const { style: passedStyle, from = 0, premountFor = 0, name, ...otherProps } = props;
+    const { style: passedStyle, from = 0, premountFor = 0, ...otherProps } = props;
     const premountingActive = frame < from && frame >= from - premountFor;
     const style = (0, react_1.useMemo)(() => {
         var _a;

package/dist/cjs/buffering.d.ts

@@ -21,6 +21,6 @@ type BufferManager = {
 };
 export declare const BufferingContextReact: React.Context<BufferManager | null>;
 export declare const BufferingProvider: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;
 export {};

package/dist/cjs/buffering.js

@@ -35,7 +35,13 @@ const useBufferManager = () => {
         setBlocks((b) => [...b, block]);
         return {
             unblock: () => {
-                setBlocks((b) => b.filter((bx) => bx !== block));
+                setBlocks((b) => {
+                    const newArr = b.filter((bx) => bx !== block);
+                    if (newArr.length === b.length) {
+                        return b;
+                    }
+                    return newArr;
+                });
             },
         };
     }, []);
@@ -59,10 +65,20 @@ const useBufferManager = () => {
         if (blocks.length > 0) {
             onBufferingCallbacks.forEach((c) => c());
         }
-        else {
+        // Intentionally only firing when blocks change, not the callbacks
+        // otherwise a buffering callback might remove itself after being called
+        // and trigger again
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [blocks]);
+    (0, react_1.useEffect)(() => {
+        if (blocks.length === 0) {
             onResumeCallbacks.forEach((c) => c());
         }
-    }, [blocks, onBufferingCallbacks, onResumeCallbacks]);
+        // Intentionally only firing when blocks change, not the callbacks
+        // otherwise a resume callback might remove itself after being called
+        // and trigger again
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [blocks]);
     return (0, react_1.useMemo)(() => {
         return { addBlock, listenForBuffering, listenForResume, buffering };
     }, [addBlock, buffering, listenForBuffering, listenForResume]);

package/dist/cjs/internals.d.ts

@@ -130,7 +130,7 @@ export declare const Internals: {
     readonly addSequenceStackTraces: (component: unknown) => void;
     readonly useMediaStartsAt: () => number;
     readonly BufferingProvider: import("react").FC<{
-        children: import("react").ReactNode;
+        readonly children: import("react").ReactNode;
     }>;
     readonly BufferingContextReact: import("react").Context<{
         addBlock: (block: {
@@ -162,6 +162,9 @@ export declare const Internals: {
         getProps: () => {
             [x: string]: Record<string, unknown>;
         };
+        setProps: import("react").Dispatch<import("react").SetStateAction<{
+            [x: string]: Record<string, unknown>;
+        }>>;
     }>;
 };
 export type { CompositionManagerContext, CompProps, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TRenderAsset as TAsset, TCompMetadata, TComposition, TimelinePosition as Timeline, TimelineContextValue, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/use-media-buffering.js

@@ -6,7 +6,7 @@ const use_buffer_state_1 = require("./use-buffer-state");
 const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
     const buffer = (0, use_buffer_state_1.useBufferState)();
     (0, react_1.useEffect)(() => {
-        let cleanup = () => undefined;
+        let cleanupFns = [];
         const { current } = element;
         if (!current) {
             return;
@@ -17,33 +17,50 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
         if (isPremounting) {
             return;
         }
+        const cleanup = () => {
+            cleanupFns.forEach((fn) => fn());
+            cleanupFns = [];
+        };
         const onWaiting = () => {
             const { unblock } = buffer.delayPlayback();
             const onCanPlay = () => {
-                unblock();
+                cleanup();
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                init();
             };
             const onError = () => {
-                unblock();
+                cleanup();
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                init();
             };
             current.addEventListener('canplay', onCanPlay, {
                 once: true,
             });
+            cleanupFns.push(() => {
+                current.removeEventListener('canplay', onCanPlay);
+            });
             current.addEventListener('error', onError, {
                 once: true,
             });
-            cleanup = () => {
-                current.removeEventListener('canplay', onCanPlay);
+            cleanupFns.push(() => {
                 current.removeEventListener('error', onError);
+            });
+            cleanupFns.push(() => {
                 unblock();
-                return undefined;
-            };
+            });
         };
-        if (current.readyState < current.HAVE_FUTURE_DATA) {
-            onWaiting();
-        }
-        else {
-            current.addEventListener('waiting', onWaiting);
-        }
+        const init = () => {
+            if (current.readyState < current.HAVE_FUTURE_DATA) {
+                onWaiting();
+            }
+            else {
+                current.addEventListener('waiting', onWaiting);
+                cleanupFns.push(() => {
+                    current.removeEventListener('waiting', onWaiting);
+                });
+            }
+        };
+        init();
         return () => {
             cleanup();
         };

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.153";
+export declare const VERSION = "4.0.155";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.153';
+exports.VERSION = '4.0.155';

package/dist/esm/index.mjs

@@ -132,7 +132,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.153";
+var VERSION = "4.0.155";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -412,7 +412,8 @@ var EditorPropsProvider = ({ children }) => {
   }, []);
   useImperativeHandle(editorPropsProviderRef, () => {
     return {
-      getProps: () => props
+      getProps: () => props,
+      setProps
     };
   }, [props]);
   const ctx = useMemo4(() => {
@@ -1305,13 +1306,7 @@ var PremountedSequenceRefForwardingFunction = (props, ref) => {
   if (props.layout === "none") {
     throw new Error('`<Sequence>` with `premountFor` prop does not support layout="none"');
   }
-  const {
-    style: passedStyle,
-    from = 0,
-    premountFor = 0,
-    name,
-    ...otherProps
-  } = props;
+  const { style: passedStyle, from = 0, premountFor = 0, ...otherProps } = props;
   const premountingActive = frame < from && frame >= from - premountFor;
   const style = useMemo10(() => {
     return {
@@ -1795,7 +1790,13 @@ var useBufferManager = () => {
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
-        setBlocks((b) => b.filter((bx) => bx !== block));
+        setBlocks((b) => {
+          const newArr = b.filter((bx) => bx !== block);
+          if (newArr.length === b.length) {
+            return b;
+          }
+          return newArr;
+        });
       }
     };
   }, []);
@@ -1818,10 +1819,13 @@ var useBufferManager = () => {
   useEffect7(() => {
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
-    } else {
+    }
+  }, [blocks]);
+  useEffect7(() => {
+    if (blocks.length === 0) {
       onResumeCallbacks.forEach((c) => c());
     }
-  }, [blocks, onBufferingCallbacks, onResumeCallbacks]);
+  }, [blocks]);
   return useMemo13(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
@@ -1859,9 +1863,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   useEffect8(() => {
-    let cleanup = () => {
-      return;
-    };
+    let cleanupFns = [];
     const { current } = element;
     if (!current) {
       return;
@@ -1872,32 +1874,47 @@ var useMediaBuffering = ({
     if (isPremounting) {
       return;
     }
+    const cleanup = () => {
+      cleanupFns.forEach((fn) => fn());
+      cleanupFns = [];
+    };
     const onWaiting = () => {
       const { unblock } = buffer.delayPlayback();
       const onCanPlay = () => {
-        unblock();
+        cleanup();
+        init();
       };
       const onError = () => {
-        unblock();
+        cleanup();
+        init();
       };
       current.addEventListener("canplay", onCanPlay, {
         once: true
       });
+      cleanupFns.push(() => {
+        current.removeEventListener("canplay", onCanPlay);
+      });
       current.addEventListener("error", onError, {
         once: true
       });
-      cleanup = () => {
-        current.removeEventListener("canplay", onCanPlay);
+      cleanupFns.push(() => {
         current.removeEventListener("error", onError);
+      });
+      cleanupFns.push(() => {
         unblock();
-        return;
-      };
+      });
     };
-    if (current.readyState < current.HAVE_FUTURE_DATA) {
-      onWaiting();
-    } else {
-      current.addEventListener("waiting", onWaiting);
-    }
+    const init = () => {
+      if (current.readyState < current.HAVE_FUTURE_DATA) {
+        onWaiting();
+      } else {
+        current.addEventListener("waiting", onWaiting);
+        cleanupFns.push(() => {
+          current.removeEventListener("waiting", onWaiting);
+        });
+      }
+    };
+    init();
     return () => {
       cleanup();
     };

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.153";
+var VERSION = "4.0.155";
 export {
   VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.153",
+  "version": "4.0.155",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",