@remotion/studio 4.0.87 → 4.0.89

package/dist/components/Studio.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Studio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
+const remotion_1 = require("remotion");
+const Editor_1 = require("./Editor");
+const EditorContexts_1 = require("./EditorContexts");
+const ServerDisconnected_1 = require("./Notifications/ServerDisconnected");
+const getServerDisconnectedDomElement = () => {
+    return document.getElementById('server-disconnected-overlay');
+};
+const Studio = ({ rootComponent }) => {
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { numberOfAudioTags: window.remotion_numberOfAudioTags, children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { Root: rootComponent }), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }));
+};
+exports.Studio = Studio;

package/dist/components/render-defaults.d.ts

@@ -0,0 +1,40 @@
+import type { AudioCodec, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
+export type RenderDefaults = {
+    jpegQuality: number;
+    scale: number;
+    logLevel: LogLevel;
+    codec: Codec;
+    concurrency: number;
+    minConcurrency: number;
+    muted: boolean;
+    maxConcurrency: number;
+    stillImageFormat: StillImageFormat;
+    videoImageFormat: VideoImageFormat;
+    audioCodec: AudioCodec | null;
+    enforceAudioTrack: boolean;
+    proResProfile: ProResProfile;
+    x264Preset: X264Preset;
+    pixelFormat: PixelFormat;
+    audioBitrate: string | null;
+    videoBitrate: string | null;
+    encodingBufferSize: string | null;
+    encodingMaxRate: string | null;
+    userAgent: string | null;
+    everyNthFrame: number;
+    numberOfGifLoops: number | null;
+    delayRenderTimeout: number;
+    disableWebSecurity: boolean;
+    openGlRenderer: OpenGlRenderer | null;
+    ignoreCertificateErrors: boolean;
+    offthreadVideoCacheSizeInBytes: number | null;
+    headless: boolean;
+    colorSpace: ColorSpace;
+    multiProcessOnLinux: boolean;
+    beepOnFinish: boolean;
+    repro: boolean;
+};
+declare global {
+    interface Window {
+        remotion_renderDefaults: RenderDefaults | undefined;
+    }
+}

package/dist/components/render-defaults.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/error-overlay/react-overlay/utils/make-stack-frame.d.ts

@@ -0,0 +1,7 @@
+import type { StackFrame } from '@remotion/studio-shared';
+export declare const makeStackFrame: ({ functionName, fileName, lineNumber, columnNumber, }: {
+    functionName: string | null;
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}) => StackFrame;

package/dist/error-overlay/react-overlay/utils/make-stack-frame.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeStackFrame = void 0;
+const makeStackFrame = ({ functionName, fileName, lineNumber, columnNumber, }) => {
+    if (functionName && functionName.indexOf('Object.') === 0) {
+        functionName = functionName.slice('Object.'.length);
+    }
+    if (
+    // Chrome has a bug with inferring function.name:
+    // https://github.com/facebook/create-react-app/issues/2097
+    // Let's ignore a meaningless name we get for top-level modules.
+    functionName === 'friendlySyntaxErrorLabel' ||
+        functionName === 'exports.__esModule' ||
+        functionName === '<anonymous>' ||
+        !functionName) {
+        functionName = null;
+    }
+    return {
+        columnNumber,
+        fileName,
+        functionName,
+        lineNumber,
+    };
+};
+exports.makeStackFrame = makeStackFrame;

package/dist/helpers/checkerboard-background.d.ts

@@ -1,4 +1,4 @@
 export declare const getCheckerboardBackgroundSize: (size: number) => string;
 export declare const getCheckerboardBackgroundPos: (size: number) => string;
-export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "white" | "black";
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
 export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    " | undefined;

package/dist/helpers/client-id.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { EventSourceEvent } from '../event-source-events';
 type PreviewServerState = {
     type: 'init';
 } | {
@@ -7,10 +8,11 @@ type PreviewServerState = {
 } | {
     type: 'disconnected';
 };
-export declare const StudioServerConnectionCtx: React.Context<PreviewServerState>;
-export declare const studioServerConnectionRef: React.RefObject<{
-    set: (jobs: PreviewServerState) => void;
-}>;
+type Context = {
+    previewServerState: PreviewServerState;
+    subscribeToEvent: (type: EventSourceEvent['type'], listener: (event: EventSourceEvent) => void) => () => void;
+};
+export declare const StudioServerConnectionCtx: React.Context<Context>;
 export declare const PreviewServerConnection: React.FC<{
     children: React.ReactNode;
 }>;

package/dist/helpers/client-id.js

@@ -22,25 +22,108 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewServerConnection = exports.studioServerConnectionRef = exports.StudioServerConnectionCtx = void 0;
+exports.PreviewServerConnection = exports.StudioServerConnectionCtx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
+const PlayBeepSound_1 = __importDefault(require("../components/PlayBeepSound"));
+const context_1 = require("../components/RenderQueue/context");
 exports.StudioServerConnectionCtx = react_1.default.createContext({
-    type: 'init',
+    previewServerState: {
+        type: 'init',
+    },
+    subscribeToEvent: () => {
+        throw new Error('Context not initalized');
+    },
 });
-exports.studioServerConnectionRef = (0, react_1.createRef)();
 const PreviewServerConnection = ({ children }) => {
+    const listeners = (0, react_1.useRef)([]);
+    const subscribeToEvent = (0, react_1.useCallback)((type, listener) => {
+        listeners.current.push({ type, listener });
+        return () => {
+            listeners.current = listeners.current.filter((l) => l.type !== type || l.listener !== listener);
+        };
+    }, []);
+    const openEventSource = (0, react_1.useCallback)(() => {
+        const source = new EventSource('/events');
+        source.addEventListener('message', (event) => {
+            var _a;
+            const newEvent = JSON.parse(event.data);
+            if (newEvent.type === 'new-input-props' ||
+                newEvent.type === 'new-env-variables') {
+                window.location.reload();
+            }
+            if (newEvent.type === 'init') {
+                setState({
+                    type: 'connected',
+                    clientId: newEvent.clientId,
+                });
+            }
+            if (newEvent.type === 'render-queue-updated') {
+                (_a = context_1.renderJobsRef.current) === null || _a === void 0 ? void 0 : _a.updateRenderJobs(newEvent.queue);
+                for (const job of newEvent.queue) {
+                    if (job.status === 'done' && job.beepOnFinish) {
+                        (0, PlayBeepSound_1.default)(job.id);
+                    }
+                }
+            }
+            if (newEvent.type === 'render-job-failed') {
+                (0, NotificationCenter_1.sendErrorNotification)(`Rendering "${newEvent.compositionId}" failed`);
+            }
+            if (newEvent.type === 'new-public-folder') {
+                const payload = {
+                    files: newEvent.files,
+                };
+                window.dispatchEvent(new CustomEvent(remotion_1.Internals.WATCH_REMOTION_STATIC_FILES, {
+                    detail: payload,
+                }));
+                window.remotion_staticFiles = newEvent.files;
+                window.remotion_publicFolderExists = newEvent.folderExists;
+            }
+            listeners.current.forEach((l) => {
+                if (l.type === newEvent.type) {
+                    l.listener(newEvent);
+                }
+            });
+        });
+        source.addEventListener('open', () => {
+            source.addEventListener('error', () => {
+                setState({ type: 'disconnected' });
+                // Display an error message that the studio server has disconnected.
+                source === null || source === void 0 ? void 0 : source.close();
+                // Retry later
+                setTimeout(() => {
+                    openEventSource();
+                }, 1000);
+            }, { once: true });
+        });
+        const close = () => {
+            source.close();
+        };
+        return {
+            close,
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const { close } = openEventSource();
+        return () => {
+            close();
+        };
+    }, [openEventSource]);
     const [state, setState] = react_1.default.useState({
         type: 'init',
     });
-    (0, react_1.useImperativeHandle)(exports.studioServerConnectionRef, () => {
+    const context = (0, react_1.useMemo)(() => {
         return {
-            set: (newState) => {
-                setState(newState);
-            },
+            previewServerState: state,
+            subscribeToEvent,
         };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(exports.StudioServerConnectionCtx.Provider, { value: state, children: children }));
+    }, [state, subscribeToEvent]);
+    return ((0, jsx_runtime_1.jsx)(exports.StudioServerConnectionCtx.Provider, { value: context, children: children }));
 };
 exports.PreviewServerConnection = PreviewServerConnection;

package/dist/helpers/colors.d.ts

@@ -23,4 +23,4 @@ export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.25)" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/helpers/presets-labels.d.ts

@@ -1,2 +1,2 @@
 import type { X264Preset } from '@remotion/renderer';
-export declare const labelx264Preset: (profile: X264Preset) => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";
+export declare const labelx264Preset: (profile: X264Preset) => "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo";

package/dist/helpers/retry-payload.d.ts

@@ -0,0 +1,3 @@
+import type { RenderJob } from '@remotion/studio-shared';
+import type { RenderModalState } from '../state/modals';
+export declare const makeRetryPayload: (job: RenderJob) => RenderModalState;

package/dist/helpers/retry-payload.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeRetryPayload = void 0;
+const no_react_1 = require("remotion/no-react");
+const makeRetryPayload = (job) => {
+    var _a, _b, _c, _d, _e;
+    const defaults = window.remotion_renderDefaults;
+    if (!defaults) {
+        throw new Error('defaults not set');
+    }
+    if (job.type === 'still') {
+        return {
+            type: 'render',
+            compositionId: job.compositionId,
+            initialFrame: job.frame,
+            initialStillImageFormat: job.imageFormat,
+            initialVideoImageFormat: defaults.videoImageFormat,
+            initialJpegQuality: (_a = job.jpegQuality) !== null && _a !== void 0 ? _a : defaults.jpegQuality,
+            initialScale: job.scale,
+            initialLogLevel: job.logLevel,
+            initialConcurrency: defaults.concurrency,
+            maxConcurrency: defaults.maxConcurrency,
+            minConcurrency: defaults.minConcurrency,
+            initialMuted: defaults.muted,
+            initialEnforceAudioTrack: defaults.enforceAudioTrack,
+            initialProResProfile: defaults.proResProfile,
+            initialx264Preset: defaults.x264Preset,
+            initialPixelFormat: defaults.pixelFormat,
+            initialAudioBitrate: defaults.audioBitrate,
+            initialVideoBitrate: defaults.videoBitrate,
+            initialEveryNthFrame: defaults.everyNthFrame,
+            initialNumberOfGifLoops: defaults.numberOfGifLoops,
+            initialDelayRenderTimeout: job.delayRenderTimeout,
+            defaultConfigurationAudioCodec: defaults.audioCodec,
+            initialEnvVariables: job.envVariables,
+            initialDisableWebSecurity: job.chromiumOptions.disableWebSecurity,
+            initialOpenGlRenderer: job.chromiumOptions.gl,
+            initialHeadless: job.chromiumOptions.headless,
+            initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
+            defaultProps: no_react_1.NoReactInternals.deserializeJSONWithCustomFields(job.serializedInputPropsWithCustomSchema),
+            inFrameMark: null,
+            outFrameMark: null,
+            initialOffthreadVideoCacheSizeInBytes: job.offthreadVideoCacheSizeInBytes,
+            initialColorSpace: defaults.colorSpace,
+            initialMultiProcessOnLinux: job.multiProcessOnLinux,
+            defaultConfigurationVideoCodec: defaults.codec,
+            initialEncodingBufferSize: defaults.encodingBufferSize,
+            initialEncodingMaxRate: defaults.encodingMaxRate,
+            initialUserAgent: job.chromiumOptions.userAgent,
+            initialBeep: job.beepOnFinish,
+            initialRepro: job.repro,
+        };
+    }
+    if (job.type === 'sequence') {
+        return {
+            type: 'render',
+            initialFrame: 0,
+            compositionId: job.compositionId,
+            initialVideoImageFormat: defaults.videoImageFormat,
+            initialJpegQuality: (_b = job.jpegQuality) !== null && _b !== void 0 ? _b : defaults.jpegQuality,
+            initialScale: job.scale,
+            initialLogLevel: job.logLevel,
+            initialConcurrency: defaults.concurrency,
+            maxConcurrency: defaults.maxConcurrency,
+            minConcurrency: defaults.minConcurrency,
+            initialMuted: defaults.muted,
+            initialEnforceAudioTrack: defaults.enforceAudioTrack,
+            initialProResProfile: defaults.proResProfile,
+            initialx264Preset: defaults.x264Preset,
+            initialPixelFormat: defaults.pixelFormat,
+            initialAudioBitrate: defaults.audioBitrate,
+            initialVideoBitrate: defaults.videoBitrate,
+            initialEveryNthFrame: defaults.everyNthFrame,
+            initialNumberOfGifLoops: defaults.numberOfGifLoops,
+            initialDelayRenderTimeout: job.delayRenderTimeout,
+            initialEnvVariables: job.envVariables,
+            initialDisableWebSecurity: job.chromiumOptions.disableWebSecurity,
+            initialOpenGlRenderer: job.chromiumOptions.gl,
+            initialHeadless: job.chromiumOptions.headless,
+            initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
+            defaultProps: no_react_1.NoReactInternals.deserializeJSONWithCustomFields(job.serializedInputPropsWithCustomSchema),
+            initialStillImageFormat: defaults.stillImageFormat,
+            inFrameMark: job.startFrame,
+            outFrameMark: job.endFrame,
+            initialOffthreadVideoCacheSizeInBytes: job.offthreadVideoCacheSizeInBytes,
+            initialColorSpace: defaults.colorSpace,
+            initialMultiProcessOnLinux: job.multiProcessOnLinux,
+            defaultConfigurationVideoCodec: defaults.codec,
+            defaultConfigurationAudioCodec: defaults.audioCodec,
+            initialEncodingBufferSize: defaults.encodingBufferSize,
+            initialEncodingMaxRate: defaults.encodingMaxRate,
+            initialUserAgent: job.chromiumOptions.userAgent,
+            initialBeep: job.beepOnFinish,
+            initialRepro: job.repro,
+        };
+    }
+    if (job.type === 'video') {
+        return {
+            type: 'render',
+            compositionId: job.compositionId,
+            initialStillImageFormat: defaults.stillImageFormat,
+            initialVideoImageFormat: job.imageFormat,
+            initialJpegQuality: (_c = job.jpegQuality) !== null && _c !== void 0 ? _c : defaults.jpegQuality,
+            initialScale: job.scale,
+            initialLogLevel: job.logLevel,
+            initialFrame: 0,
+            initialConcurrency: job.concurrency,
+            maxConcurrency: defaults.maxConcurrency,
+            minConcurrency: defaults.minConcurrency,
+            initialMuted: job.muted,
+            initialEnforceAudioTrack: job.enforceAudioTrack,
+            initialProResProfile: (_d = job.proResProfile) !== null && _d !== void 0 ? _d : defaults.proResProfile,
+            initialx264Preset: (_e = job.x264Preset) !== null && _e !== void 0 ? _e : defaults.x264Preset,
+            initialPixelFormat: job.pixelFormat,
+            initialAudioBitrate: job.audioBitrate,
+            initialVideoBitrate: job.videoBitrate,
+            initialEveryNthFrame: job.everyNthFrame,
+            initialNumberOfGifLoops: job.numberOfGifLoops,
+            initialDelayRenderTimeout: job.delayRenderTimeout,
+            initialEnvVariables: job.envVariables,
+            initialDisableWebSecurity: job.chromiumOptions.disableWebSecurity,
+            initialOpenGlRenderer: job.chromiumOptions.gl,
+            initialHeadless: job.chromiumOptions.headless,
+            initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
+            defaultProps: no_react_1.NoReactInternals.deserializeJSONWithCustomFields(job.serializedInputPropsWithCustomSchema),
+            inFrameMark: job.startFrame,
+            outFrameMark: job.endFrame,
+            initialOffthreadVideoCacheSizeInBytes: job.offthreadVideoCacheSizeInBytes,
+            initialColorSpace: job.colorSpace,
+            initialMultiProcessOnLinux: job.multiProcessOnLinux,
+            defaultConfigurationVideoCodec: job.codec,
+            defaultConfigurationAudioCodec: job.audioCodec,
+            initialEncodingBufferSize: job.encodingBufferSize,
+            initialEncodingMaxRate: job.encodingMaxRate,
+            initialUserAgent: job.chromiumOptions.userAgent,
+            initialBeep: job.beepOnFinish,
+            initialRepro: job.repro,
+        };
+    }
+    throw new Error(`Job ${JSON.stringify(job)} Not implemented`);
+};
+exports.makeRetryPayload = makeRetryPayload;

package/dist/helpers/use-file-existence.js

@@ -4,10 +4,9 @@ exports.useFileExistence = void 0;
 const react_1 = require("react");
 const actions_1 = require("../components/RenderQueue/actions");
 const client_id_1 = require("./client-id");
-const event_source_1 = require("./event-source");
 const useFileExistence = (outName) => {
     const [exists, setExists] = (0, react_1.useState)(false);
-    const state = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { previewServerState: state, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = state.type === 'connected' ? state.clientId : undefined;
     const currentOutName = (0, react_1.useRef)('');
     currentOutName.current = outName;
@@ -39,11 +38,11 @@ const useFileExistence = (outName) => {
                 setExists(false);
             }
         };
-        const unsub = (0, event_source_1.subscribeToEvent)('watched-file-deleted', listener);
+        const unsub = subscribeToEvent('watched-file-deleted', listener);
         return () => {
             unsub();
         };
-    }, [outName]);
+    }, [outName, subscribeToEvent]);
     (0, react_1.useEffect)(() => {
         const listener = (event) => {
             if (event.type !== 'watched-file-undeleted') {
@@ -56,11 +55,11 @@ const useFileExistence = (outName) => {
                 setExists(true);
             }
         };
-        const unsub = (0, event_source_1.subscribeToEvent)('watched-file-undeleted', listener);
+        const unsub = subscribeToEvent('watched-file-undeleted', listener);
         return () => {
             unsub();
         };
-    }, [outName]);
+    }, [outName, subscribeToEvent]);
     return exists;
 };
 exports.useFileExistence = useFileExistence;

package/dist/helpers/use-menu-structure.js

@@ -38,7 +38,7 @@ const useMenuStructure = (closeMenu) => {
     const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
     const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;

package/dist/hot-middleware-client/client.d.ts

@@ -0,0 +1,27 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/**
+ * Source code is adapted from
+ * https://github.com/webpack-contrib/webpack-hot-middleware#readme
+ * and rewritten in TypeScript. This file is MIT licensed
+ */
+import type { HotMiddlewareMessage } from '@remotion/studio-shared';
+declare function eventSourceWrapper(): {
+    addMessageListener(fn: (msg: MessageEvent) => void): void;
+};
+declare global {
+    interface Window {
+        __whmEventSourceWrapper: {
+            [key: string]: ReturnType<typeof eventSourceWrapper>;
+        };
+        __webpack_hot_middleware_reporter__: Reporter;
+    }
+}
+type Reporter = ReturnType<typeof createReporter>;
+declare function createReporter(): {
+    cleanProblemsCache(): void;
+    problems(type: 'errors' | 'warnings', obj: HotMiddlewareMessage): boolean;
+    success: () => undefined;
+};
+export declare const enableHotMiddleware: () => void;
+export {};

package/dist/hot-middleware-client/client.js

@@ -0,0 +1,172 @@
+"use strict";
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.enableHotMiddleware = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const process_update_1 = require("./process-update");
+function eventSourceWrapper() {
+    let source;
+    let lastActivity = Date.now();
+    const listeners = [];
+    init();
+    const timer = setInterval(() => {
+        if (Date.now() - lastActivity > studio_shared_1.hotMiddlewareOptions.timeout) {
+            handleDisconnect();
+        }
+    }, studio_shared_1.hotMiddlewareOptions.timeout / 2);
+    function init() {
+        source = new window.EventSource(studio_shared_1.hotMiddlewareOptions.path);
+        source.onopen = handleOnline;
+        source.onerror = handleDisconnect;
+        source.onmessage = handleMessage;
+    }
+    function handleOnline() {
+        lastActivity = Date.now();
+    }
+    function handleMessage(event) {
+        lastActivity = Date.now();
+        for (let i = 0; i < listeners.length; i++) {
+            listeners[i](event);
+        }
+    }
+    function handleDisconnect() {
+        clearInterval(timer);
+        source.close();
+        setTimeout(init, 1000);
+    }
+    return {
+        addMessageListener(fn) {
+            listeners.push(fn);
+        },
+    };
+}
+function getEventSourceWrapper() {
+    if (!window.__whmEventSourceWrapper) {
+        window.__whmEventSourceWrapper = {};
+    }
+    if (!window.__whmEventSourceWrapper[studio_shared_1.hotMiddlewareOptions.path]) {
+        // cache the wrapper for other entries loaded on
+        // the same page with the same hotMiddlewareOptions.path
+        window.__whmEventSourceWrapper[studio_shared_1.hotMiddlewareOptions.path] =
+            eventSourceWrapper();
+    }
+    return window.__whmEventSourceWrapper[studio_shared_1.hotMiddlewareOptions.path];
+}
+function connect() {
+    getEventSourceWrapper().addMessageListener(handleMessage);
+    function handleMessage(event) {
+        if (event.data === '\uD83D\uDC93') {
+            return;
+        }
+        try {
+            processMessage(JSON.parse(event.data));
+        }
+        catch (ex) {
+            if (studio_shared_1.hotMiddlewareOptions.warn) {
+                console.warn('Invalid HMR message: ' + event.data + '\n' + ex);
+            }
+        }
+    }
+}
+function createReporter() {
+    const styles = {
+        errors: 'color: #ff0000;',
+        warnings: 'color: #999933;',
+    };
+    let previousProblems = null;
+    function log(type, obj) {
+        if (obj.action === 'building') {
+            console.log('[Fast Refresh] Building');
+            return;
+        }
+        const newProblems = obj[type]
+            .map((msg) => {
+            return (0, studio_shared_1.stripAnsi)(msg);
+        })
+            .join('\n');
+        if (previousProblems === newProblems) {
+            return;
+        }
+        previousProblems = newProblems;
+        const style = styles[type];
+        const name = obj.name ? "'" + obj.name + "' " : '';
+        const title = '[Fast Refresh] bundle ' + name + 'has ' + obj[type].length + ' ' + type;
+        // NOTE: console.warn or console.error will print the stack trace
+        // which isn't helpful here, so using console.log to escape it.
+        if (console.group && console.groupEnd) {
+            console.group('%c' + title, style);
+            console.log('%c' + newProblems, style);
+            console.groupEnd();
+        }
+        else {
+            console.log('%c' + title + '\n\t%c' + newProblems.replace(/\n/g, '\n\t'), style + 'font-weight: bold;', style + 'font-weight: normal;');
+        }
+    }
+    return {
+        cleanProblemsCache() {
+            previousProblems = null;
+        },
+        problems(type, obj) {
+            if (studio_shared_1.hotMiddlewareOptions.warn) {
+                log(type, obj);
+            }
+            return true;
+        },
+        success: () => undefined,
+    };
+}
+function processMessage(obj) {
+    var _a, _b;
+    switch (obj.action) {
+        case 'building':
+            (_a = window.remotion_isBuilding) === null || _a === void 0 ? void 0 : _a.call(window);
+            break;
+        case 'sync':
+        case 'built': {
+            let applyUpdate = true;
+            if (obj.errors.length > 0) {
+                if (reporter)
+                    reporter.problems('errors', obj);
+                applyUpdate = false;
+            }
+            else if (obj.warnings.length > 0) {
+                if (reporter) {
+                    const overlayShown = reporter.problems('warnings', obj);
+                    applyUpdate = overlayShown;
+                }
+            }
+            else if (reporter) {
+                reporter.cleanProblemsCache();
+                reporter.success();
+            }
+            if (applyUpdate) {
+                (_b = window.remotion_finishedBuilding) === null || _b === void 0 ? void 0 : _b.call(window);
+                (0, process_update_1.processUpdate)(obj.hash, obj.modules, studio_shared_1.hotMiddlewareOptions);
+            }
+            break;
+        }
+        default:
+            break;
+    }
+}
+let reporter;
+const singletonKey = '__webpack_hot_middleware_reporter__';
+const enableHotMiddleware = () => {
+    if (typeof window === 'undefined') {
+        // do nothing
+    }
+    else if (typeof window.EventSource === 'undefined') {
+        console.warn('Unsupported browser: You need a browser that supports EventSource ');
+    }
+    else {
+        connect();
+    }
+    if (typeof window !== 'undefined') {
+        if (!window[singletonKey]) {
+            window[singletonKey] = createReporter();
+        }
+        reporter = window[singletonKey];
+    }
+};
+exports.enableHotMiddleware = enableHotMiddleware;

package/dist/hot-middleware-client/process-update.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Source code is adapted from
+ * https://github.com/webpack-contrib/webpack-hot-middleware#readme
+ * and rewritten in TypeScript. This file is MIT licensed
+ */
+/**
+ * Based heavily on https://github.com/webpack/webpack/blob/
+ *  c0afdf9c6abc1dd70707c594e473802a566f7b6e/hot/only-dev-server.js
+ * Original copyright Tobias Koppers @sokra (MIT license)
+ */
+import type { HotMiddlewareOptions, ModuleMap } from '@remotion/studio-shared';
+export declare const processUpdate: (hash: string | undefined, moduleMap: ModuleMap, options: HotMiddlewareOptions) => void;