@remotion/player 4.0.235 → 4.0.237

package/dist/cjs/PlayerControls.d.ts

@@ -29,7 +29,7 @@ export declare const Controls: React.FC<{
     readonly renderFullscreenButton: RenderFullscreenButton | null;
     readonly alwaysShowControls: boolean;
     readonly showPlaybackRateControl: boolean | number[];
-    readonly containerRef: React.RefObject<HTMLDivElement>;
+    readonly containerRef: React.RefObject<HTMLDivElement | null>;
     readonly buffering: boolean;
     readonly hideControlsWhenPointerDoesntMove: boolean | number;
     readonly onPointerDown: ((ev: PointerEvent | SyntheticEvent) => void) | undefined;

package/dist/cjs/error-boundary.d.ts

@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
         hasError: Error;
     };
     componentDidCatch(error: Error): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 }

package/dist/cjs/event-emitter.d.ts

@@ -64,28 +64,28 @@ export declare class PlayerEmitter {
     addEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
     removeEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
     private dispatchEvent;
-    dispatchSeek(frame: number): void;
-    dispatchVolumeChange(volume: number): void;
-    dispatchPause(): void;
-    dispatchPlay(): void;
-    dispatchEnded(): void;
-    dispatchRateChange(playbackRate: number): void;
-    dispatchScaleChange(scale: number): void;
-    dispatchError(error: Error): void;
-    dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
-    dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
-    dispatchFullscreenChange(event: FullscreenChangeEventPayload): void;
-    dispatchMuteChange(event: MuteChangeEventPayload): void;
-    dispatchWaiting(event: WaitingEventPayload): void;
-    dispatchResume(event: ResumeEventPayload): void;
+    dispatchSeek: (frame: number) => void;
+    dispatchVolumeChange: (volume: number) => void;
+    dispatchPause: () => void;
+    dispatchPlay: () => void;
+    dispatchEnded: () => void;
+    dispatchRateChange: (playbackRate: number) => void;
+    dispatchScaleChange: (scale: number) => void;
+    dispatchError: (error: Error) => void;
+    dispatchTimeUpdate: (event: TimeUpdateEventPayload) => void;
+    dispatchFrameUpdate: (event: FrameUpdateEventPayload) => void;
+    dispatchFullscreenChange: (event: FullscreenChangeEventPayload) => void;
+    dispatchMuteChange: (event: MuteChangeEventPayload) => void;
+    dispatchWaiting: (event: WaitingEventPayload) => void;
+    dispatchResume: (event: ResumeEventPayload) => void;
 }
 export declare class ThumbnailEmitter {
     listeners: ThumbnailListeners;
     addEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
     removeEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
     private dispatchEvent;
-    dispatchError(error: Error): void;
-    dispatchWaiting(event: WaitingEventPayload): void;
-    dispatchResume(event: ResumeEventPayload): void;
+    dispatchError: (error: Error) => void;
+    dispatchWaiting: (event: WaitingEventPayload) => void;
+    dispatchResume: (event: ResumeEventPayload) => void;
 }
 export {};

package/dist/cjs/event-emitter.js

@@ -19,6 +19,58 @@ class PlayerEmitter {
             waiting: [],
             resume: [],
         };
+        this.dispatchSeek = (frame) => {
+            this.dispatchEvent('seeked', {
+                frame,
+            });
+        };
+        this.dispatchVolumeChange = (volume) => {
+            this.dispatchEvent('volumechange', {
+                volume,
+            });
+        };
+        this.dispatchPause = () => {
+            this.dispatchEvent('pause', undefined);
+        };
+        this.dispatchPlay = () => {
+            this.dispatchEvent('play', undefined);
+        };
+        this.dispatchEnded = () => {
+            this.dispatchEvent('ended', undefined);
+        };
+        this.dispatchRateChange = (playbackRate) => {
+            this.dispatchEvent('ratechange', {
+                playbackRate,
+            });
+        };
+        this.dispatchScaleChange = (scale) => {
+            this.dispatchEvent('scalechange', {
+                scale,
+            });
+        };
+        this.dispatchError = (error) => {
+            this.dispatchEvent('error', {
+                error,
+            });
+        };
+        this.dispatchTimeUpdate = (event) => {
+            this.dispatchEvent('timeupdate', event);
+        };
+        this.dispatchFrameUpdate = (event) => {
+            this.dispatchEvent('frameupdate', event);
+        };
+        this.dispatchFullscreenChange = (event) => {
+            this.dispatchEvent('fullscreenchange', event);
+        };
+        this.dispatchMuteChange = (event) => {
+            this.dispatchEvent('mutechange', event);
+        };
+        this.dispatchWaiting = (event) => {
+            this.dispatchEvent('waiting', event);
+        };
+        this.dispatchResume = (event) => {
+            this.dispatchEvent('resume', event);
+        };
     }
     addEventListener(name, callback) {
         this.listeners[name].push(callback);
@@ -31,58 +83,6 @@ class PlayerEmitter {
             callback({ detail: context });
         });
     }
-    dispatchSeek(frame) {
-        this.dispatchEvent('seeked', {
-            frame,
-        });
-    }
-    dispatchVolumeChange(volume) {
-        this.dispatchEvent('volumechange', {
-            volume,
-        });
-    }
-    dispatchPause() {
-        this.dispatchEvent('pause', undefined);
-    }
-    dispatchPlay() {
-        this.dispatchEvent('play', undefined);
-    }
-    dispatchEnded() {
-        this.dispatchEvent('ended', undefined);
-    }
-    dispatchRateChange(playbackRate) {
-        this.dispatchEvent('ratechange', {
-            playbackRate,
-        });
-    }
-    dispatchScaleChange(scale) {
-        this.dispatchEvent('scalechange', {
-            scale,
-        });
-    }
-    dispatchError(error) {
-        this.dispatchEvent('error', {
-            error,
-        });
-    }
-    dispatchTimeUpdate(event) {
-        this.dispatchEvent('timeupdate', event);
-    }
-    dispatchFrameUpdate(event) {
-        this.dispatchEvent('frameupdate', event);
-    }
-    dispatchFullscreenChange(event) {
-        this.dispatchEvent('fullscreenchange', event);
-    }
-    dispatchMuteChange(event) {
-        this.dispatchEvent('mutechange', event);
-    }
-    dispatchWaiting(event) {
-        this.dispatchEvent('waiting', event);
-    }
-    dispatchResume(event) {
-        this.dispatchEvent('resume', event);
-    }
 }
 exports.PlayerEmitter = PlayerEmitter;
 class ThumbnailEmitter {
@@ -92,6 +92,17 @@ class ThumbnailEmitter {
             waiting: [],
             resume: [],
         };
+        this.dispatchError = (error) => {
+            this.dispatchEvent('error', {
+                error,
+            });
+        };
+        this.dispatchWaiting = (event) => {
+            this.dispatchEvent('waiting', event);
+        };
+        this.dispatchResume = (event) => {
+            this.dispatchEvent('resume', event);
+        };
     }
     addEventListener(name, callback) {
         this.listeners[name].push(callback);
@@ -104,16 +115,5 @@ class ThumbnailEmitter {
             callback({ detail: context });
         });
     }
-    dispatchError(error) {
-        this.dispatchEvent('error', {
-            error,
-        });
-    }
-    dispatchWaiting(event) {
-        this.dispatchEvent('waiting', event);
-    }
-    dispatchResume(event) {
-        this.dispatchEvent('resume', event);
-    }
 }
 exports.ThumbnailEmitter = ThumbnailEmitter;

package/dist/cjs/index.d.ts

@@ -41,7 +41,7 @@ export declare const PlayerInternals: {
         browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
         getCurrentFrame: import("./use-frame-imperative.js").GetCurrentFrame;
     }) => void;
-    useElementSize: (ref: React.RefObject<HTMLElement>, options: {
+    useElementSize: (ref: React.RefObject<HTMLElement | null>, options: {
         triggerOnWindowResize: boolean;
         shouldApplyCssTransforms: boolean;
     }) => import("./utils/use-element-size.js").Size | null;
@@ -57,7 +57,7 @@ export declare const PlayerInternals: {
         yCorrection: number;
         scale: number;
     };
-    useHoverState: (ref: React.RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
+    useHoverState: (ref: React.RefObject<HTMLDivElement | null>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
     updateAllElementsSizes: () => void;
     PlayerEmitterProvider: import("react").FC<{
         readonly children: import("react").ReactNode;

package/dist/cjs/is-backgrounded.d.ts

@@ -1 +1 @@
-export declare const useIsBackgrounded: () => import("react").MutableRefObject<boolean>;
+export declare const useIsBackgrounded: () => import("react").RefObject<boolean>;

package/dist/cjs/license-blacklist.js

@@ -78,9 +78,38 @@ const RenderWarningIfBlacklist = () => {
         })
             .catch(() => { });
     }, []);
+    (0, react_1.useEffect)(() => {
+        if (!unlicensed) {
+            return;
+        }
+        const ensureBanner = () => {
+            const banner = document.querySelector('.warning-banner');
+            if (!banner) {
+                const div = document.createElement('div');
+                div.className = 'warning-banner';
+                Object.assign(div.style, style, {
+                    zIndex: '9999',
+                    // @ts-expect-error
+                    cssText: `${style.cssText} !important;`,
+                });
+                div.innerHTML = `
+	        <a href="https://github.com/remotion-dev/remotion/pull/4589" style="color: white;">
+	          Remotion Unlicensed – Contact hi@remotion.dev
+	        </a>
+	      `;
+                document.body.appendChild(div);
+            }
+        };
+        // Using MutationObserver to watch for changes
+        const observer = new MutationObserver(() => ensureBanner());
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => {
+            observer.disconnect();
+        };
+    }, [unlicensed]);
     if (!unlicensed) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("a", { style: { color: 'white' }, href: "https://github.com/remotion-dev/remotion/pull/4589", children: "Remotion Unlicensed \u2013 Contact hi@remotion.dev" }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, className: "warning-banner", children: (0, jsx_runtime_1.jsx)("a", { style: { color: 'white' }, href: "https://github.com/remotion-dev/remotion/pull/4589", children: "Remotion Unlicensed \u2013 Contact hi@remotion.dev" }) }));
 };
 exports.RenderWarningIfBlacklist = RenderWarningIfBlacklist;

package/dist/cjs/render-volume-slider.d.ts

@@ -3,7 +3,7 @@ type RenderVolumeSliderProps = {
     readonly volume: number;
     readonly isVertical: boolean;
     readonly onBlur: () => void;
-    readonly inputRef: React.RefObject<HTMLInputElement>;
+    readonly inputRef: React.RefObject<HTMLInputElement | null>;
     readonly setVolume: (u: number) => void;
 };
 export type RenderVolumeSlider = (props: RenderVolumeSliderProps) => React.ReactNode;

package/dist/cjs/use-hover-state.d.ts

@@ -1 +1 @@
-export declare const useHoverState: (ref: React.RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
+export declare const useHoverState: (ref: React.RefObject<HTMLDivElement | null>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;

package/dist/cjs/utils/use-component-visible.d.ts

@@ -1,5 +1,5 @@
 export default function useComponentVisible(initialIsVisible: boolean): {
-    ref: import("react").RefObject<HTMLDivElement>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
     isComponentVisible: boolean;
     setIsComponentVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/dist/cjs/utils/use-element-size.d.ts

@@ -10,7 +10,7 @@ export type Size = {
     refresh: () => void;
 };
 export declare const updateAllElementsSizes: () => void;
-export declare const useElementSize: (ref: React.RefObject<HTMLElement>, options: {
+export declare const useElementSize: (ref: React.RefObject<HTMLElement | null>, options: {
     triggerOnWindowResize: boolean;
     shouldApplyCssTransforms: boolean;
 }) => Size | null;

package/dist/esm/index.mjs

@@ -348,58 +348,58 @@ class PlayerEmitter {
       callback({ detail: context });
     });
   }
-  dispatchSeek(frame) {
+  dispatchSeek = (frame) => {
     this.dispatchEvent("seeked", {
       frame
     });
-  }
-  dispatchVolumeChange(volume) {
+  };
+  dispatchVolumeChange = (volume) => {
     this.dispatchEvent("volumechange", {
       volume
     });
-  }
-  dispatchPause() {
+  };
+  dispatchPause = () => {
     this.dispatchEvent("pause", undefined);
-  }
-  dispatchPlay() {
+  };
+  dispatchPlay = () => {
     this.dispatchEvent("play", undefined);
-  }
-  dispatchEnded() {
+  };
+  dispatchEnded = () => {
     this.dispatchEvent("ended", undefined);
-  }
-  dispatchRateChange(playbackRate) {
+  };
+  dispatchRateChange = (playbackRate) => {
     this.dispatchEvent("ratechange", {
       playbackRate
     });
-  }
-  dispatchScaleChange(scale) {
+  };
+  dispatchScaleChange = (scale) => {
     this.dispatchEvent("scalechange", {
       scale
     });
-  }
-  dispatchError(error) {
+  };
+  dispatchError = (error) => {
     this.dispatchEvent("error", {
       error
     });
-  }
-  dispatchTimeUpdate(event) {
+  };
+  dispatchTimeUpdate = (event) => {
     this.dispatchEvent("timeupdate", event);
-  }
-  dispatchFrameUpdate(event) {
+  };
+  dispatchFrameUpdate = (event) => {
     this.dispatchEvent("frameupdate", event);
-  }
-  dispatchFullscreenChange(event) {
+  };
+  dispatchFullscreenChange = (event) => {
     this.dispatchEvent("fullscreenchange", event);
-  }
-  dispatchMuteChange(event) {
+  };
+  dispatchMuteChange = (event) => {
     this.dispatchEvent("mutechange", event);
-  }
-  dispatchWaiting(event) {
+  };
+  dispatchWaiting = (event) => {
     this.dispatchEvent("waiting", event);
-  }
-  dispatchResume(event) {
+  };
+  dispatchResume = (event) => {
     this.dispatchEvent("resume", event);
-  }
+  };
 }
 
 class ThumbnailEmitter {
@@ -419,17 +419,17 @@ class ThumbnailEmitter {
       callback({ detail: context });
     });
   }
-  dispatchError(error) {
+  dispatchError = (error) => {
     this.dispatchEvent("error", {
       error
     });
-  }
-  dispatchWaiting(event) {
+  };
+  dispatchWaiting = (event) => {
     this.dispatchEvent("waiting", event);
-  }
-  dispatchResume(event) {
+  };
+  dispatchResume = (event) => {
     this.dispatchEvent("resume", event);
-  }
+  };
 }
 
 // src/use-buffer-state-emitter.ts
@@ -2200,11 +2200,39 @@ var RenderWarningIfBlacklist = () => {
     }).catch(() => {
     });
   }, []);
+  useEffect12(() => {
+    if (!unlicensed) {
+      return;
+    }
+    const ensureBanner = () => {
+      const banner = document.querySelector(".warning-banner");
+      if (!banner) {
+        const div = document.createElement("div");
+        div.className = "warning-banner";
+        Object.assign(div.style, style, {
+          zIndex: "9999",
+          cssText: `${style.cssText} !important;`
+        });
+        div.innerHTML = `
+\t        <a href="https://github.com/remotion-dev/remotion/pull/4589" style="color: white;">
+\t          Remotion Unlicensed – Contact hi@remotion.dev
+\t        </a>
+\t      `;
+        document.body.appendChild(div);
+      }
+    };
+    const observer = new MutationObserver(() => ensureBanner());
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+    };
+  }, [unlicensed]);
   if (!unlicensed) {
     return null;
   }
   return /* @__PURE__ */ jsx11("div", {
     style,
+    className: "warning-banner",
     children: /* @__PURE__ */ jsx11("a", {
       style: { color: "white" },
       href: "https://github.com/remotion-dev/remotion/pull/4589",

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.235",
+  "version": "4.0.237",
   "description": "React component for embedding a Remotion preview into your app",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "remotion": "4.0.235"
+    "remotion": "4.0.237"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -38,12 +38,12 @@
     "@testing-library/react": "13.1.1",
     "@happy-dom/global-registrator": "14.5.1",
     "csstype": "^3.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.235"
+    "@remotion/eslint-config-internal": "4.0.237"
   },
   "keywords": [
     "remotion",