@remotion/studio 4.0.87 → 4.0.89

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

@@ -0,0 +1,157 @@
+"use strict";
+/* eslint-disable no-console */
+/**
+ * Source code is adapted from
+ * https://github.com/webpack-contrib/webpack-hot-middleware#readme
+ * and rewritten in TypeScript. This file is MIT licensed
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processUpdate = void 0;
+const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
+if (!__webpack_module__.hot) {
+    throw new Error('[Fast refresh] Hot Module Replacement is disabled.');
+}
+const hmrDocsUrl = 'https://webpack.js.org/concepts/hot-module-replacement/'; // eslint-disable-line max-len
+let lastHash;
+const failureStatuses = { abort: 1, fail: 1 };
+const applyOptions = {
+    ignoreUnaccepted: true,
+    ignoreDeclined: true,
+    ignoreErrored: true,
+    onUnaccepted(data) {
+        var _a;
+        console.warn('Ignored an update to unaccepted module ' +
+            ((_a = data.chain) !== null && _a !== void 0 ? _a : []).join(' -> '));
+    },
+    onDeclined(data) {
+        var _a;
+        console.warn('Ignored an update to declined module ' + ((_a = data.chain) !== null && _a !== void 0 ? _a : []).join(' -> '));
+    },
+    onErrored(data) {
+        console.error(data.error);
+        console.warn('Ignored an error while updating module ' +
+            data.moduleId +
+            ' (' +
+            data.type +
+            ')');
+    },
+};
+function upToDate(hash) {
+    if (hash)
+        lastHash = hash;
+    return lastHash === __webpack_hash__;
+}
+const processUpdate = function (hash, moduleMap, options) {
+    var _a;
+    const { reload } = options;
+    if (!upToDate(hash) && ((_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.status()) === 'idle') {
+        check();
+    }
+    async function check() {
+        var _a;
+        const cb = function (err, updatedModules) {
+            var _a;
+            if (err)
+                return handleError(err);
+            if (!updatedModules) {
+                if (options.warn) {
+                    console.warn('[Fast refresh] Cannot find update (Full reload needed)');
+                    console.warn('[Fast refresh] (Probably because of restarting the server)');
+                }
+                performReload();
+                return null;
+            }
+            const applyCallback = function (applyErr, renewedModules) {
+                if (applyErr)
+                    return handleError(applyErr);
+                if (!upToDate()) {
+                    check();
+                }
+                logUpdates(updatedModules, renewedModules);
+            };
+            const applyResult = (_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.apply(applyOptions);
+            if (applyResult === null || applyResult === void 0 ? void 0 : applyResult.then) {
+                // HotModuleReplacement.runtime.js refers to the result as `outdatedModules`
+                applyResult
+                    .then((outdatedModules) => {
+                    applyCallback(null, outdatedModules);
+                })
+                    .catch((_err) => applyCallback(_err, []));
+            }
+        };
+        try {
+            const result = await ((_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.check(false));
+            cb(null, result);
+        }
+        catch (err) {
+            cb(err, []);
+        }
+    }
+    function logUpdates(updatedModules, renewedModules) {
+        var _a;
+        const unacceptedModules = (_a = updatedModules === null || updatedModules === void 0 ? void 0 : updatedModules.filter((moduleId) => {
+            return renewedModules && renewedModules.indexOf(moduleId) < 0;
+        })) !== null && _a !== void 0 ? _a : [];
+        if (unacceptedModules.length > 0) {
+            if (options.warn) {
+                console.warn("[Fast refresh] The following modules couldn't be hot updated: " +
+                    '(Full reload needed)\n' +
+                    'This is usually because the modules which have changed ' +
+                    '(and their parents) do not know how to hot reload themselves. ' +
+                    'See ' +
+                    hmrDocsUrl +
+                    ' for more details.');
+                unacceptedModules.forEach((moduleId) => {
+                    console.warn('[Fast refresh]  - ' + (moduleMap[moduleId] || moduleId));
+                });
+            }
+            performReload();
+            return;
+        }
+        if (!renewedModules || renewedModules.length === 0) {
+            console.log('[Fast refresh] Nothing hot updated.');
+        }
+        else {
+            renewedModules.forEach((moduleId) => {
+                console.log(`[Fast refresh] ${moduleMap[moduleId] || moduleId} fast refreshed.`);
+            });
+        }
+    }
+    function handleError(err) {
+        var _a, _b;
+        if (((_b = (_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.status()) !== null && _b !== void 0 ? _b : 'nope') in failureStatuses) {
+            if (options.warn) {
+                console.warn('[Fast refresh] Cannot check for update (Full reload needed)');
+                console.warn('[Fast refresh] ' + (err.stack || err.message));
+            }
+            performReload();
+            return;
+        }
+        if (options.warn) {
+            console.warn('[Fast refresh] Update check failed: ' + (err.stack || err.message));
+            if (!window.remotion_unsavedProps) {
+                window.location.reload();
+            }
+        }
+    }
+    function performReload() {
+        var _a;
+        if (!reload) {
+            return;
+        }
+        if (options.warn)
+            console.warn('[Fast refresh] Reloading page');
+        if (window.remotion_unsavedProps) {
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                id: 'random',
+                content: 'Fast refresh needs to reload the page, but you have unsaved props. Save then reload the page to apply changes.',
+                created: new Date().getMilliseconds(),
+                duration: 1,
+            });
+        }
+        else {
+            window.location.reload();
+        }
+    }
+};
+exports.processUpdate = processUpdate;

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export declare const StudioInternals: {
     startStudio: ({ browserArgs, browserFlag, configValueShouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, userPassedPublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, parsedCliOpen, }: {
         browserArgs: string;
         browserFlag: string;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
         configValueShouldOpenBrowser: boolean;
         fullEntryPath: string;
         getCurrentInputProps: () => object;
@@ -33,12 +33,12 @@ export declare const StudioInternals: {
         installCommand: string;
         startCommand: string;
     }[];
-    getPackageManager: (remotionRoot: string, packageManager: string | undefined) => "unknown" | {
+    getPackageManager: (remotionRoot: string, packageManager: string | undefined) => {
         manager: import("./preview-server/get-package-manager").PackageManager;
         path: string;
         installCommand: string;
         startCommand: string;
-    };
+    } | "unknown";
     getMaxTimelineTracks: () => number;
     setMaxTimelineTracks: (maxTracks: number) => void;
     formatBytes: (number: number, options?: Intl.NumberFormatOptions & {

package/dist/preview-server/dev-middleware/range-parser.d.ts

@@ -11,5 +11,5 @@ type Range = {
 type Ranges = Range[] & {
     type?: string;
 };
-export declare function parseRange(size: number, str: string | string[]): -1 | -2 | Ranges;
+export declare function parseRange(size: number, str: string | string[]): -1 | Ranges | -2;
 export {};

package/dist/preview-server/job.d.ts

@@ -115,6 +115,7 @@ export type RenderJob = {
     serializedInputPropsWithCustomSchema: string;
     multiProcessOnLinux: boolean;
     beepOnFinish: boolean;
+    repro: boolean;
 } & RenderJobDynamicFields;
 export type RenderJobWithCleanup = RenderJob & {
     cleanup: (() => void)[];
@@ -136,6 +137,7 @@ type AddRenderRequestDynamicFields = {
     startFrame: number;
     endFrame: number;
     disallowParallelEncoding: boolean;
+    repro: boolean;
 } | {
     type: 'video';
     codec: Codec;
@@ -161,6 +163,7 @@ type AddRenderRequestDynamicFields = {
     numberOfGifLoops: number | null;
     disallowParallelEncoding: boolean;
     colorSpace: ColorSpace;
+    repro: boolean;
 };
 export type CancelRenderRequest = {
     jobId: string;

package/dist/preview-server/retry-payload.js

@@ -48,6 +48,7 @@ const makeRetryPayload = (job) => {
             initialEncodingMaxRate: defaults.encodingMaxRate,
             initialUserAgent: job.chromiumOptions.userAgent,
             initialBeep: job.beepOnFinish,
+            initialRepro: job.repro,
         };
     }
     if (job.type === 'sequence') {
@@ -90,6 +91,7 @@ const makeRetryPayload = (job) => {
             initialEncodingMaxRate: defaults.encodingMaxRate,
             initialUserAgent: job.chromiumOptions.userAgent,
             initialBeep: job.beepOnFinish,
+            initialRepro: job.repro,
         };
     }
     if (job.type === 'video') {
@@ -132,6 +134,7 @@ const makeRetryPayload = (job) => {
             initialEncodingMaxRate: job.encodingMaxRate,
             initialUserAgent: job.chromiumOptions.userAgent,
             initialBeep: job.beepOnFinish,
+            initialRepro: job.repro,
         };
     }
     throw new Error(`Job ${JSON.stringify(job)} Not implemented`);

package/dist/preview-server/routes/add-render.js

@@ -48,6 +48,7 @@ const handleAddRender = ({ input, entryPoint, remotionRoot, logLevel, methods: {
                 colorSpace: input.colorSpace,
                 multiProcessOnLinux: input.multiProcessOnLinux,
                 beepOnFinish: input.beepOnFinish,
+                repro: input.repro,
             },
             logLevel,
         });
@@ -80,6 +81,7 @@ const handleAddRender = ({ input, entryPoint, remotionRoot, logLevel, methods: {
                 offthreadVideoCacheSizeInBytes: input.offthreadVideoCacheSizeInBytes,
                 multiProcessOnLinux: input.multiProcessOnLinux,
                 beepOnFinish: input.beepOnFinish,
+                repro: input.repro,
             },
             logLevel,
         });
@@ -108,6 +110,7 @@ const handleAddRender = ({ input, entryPoint, remotionRoot, logLevel, methods: {
                 offthreadVideoCacheSizeInBytes: input.offthreadVideoCacheSizeInBytes,
                 multiProcessOnLinux: input.multiProcessOnLinux,
                 beepOnFinish: input.beepOnFinish,
+                repro: false,
             },
             entryPoint,
             remotionRoot,

package/dist/previewEntry.js

@@ -4,23 +4,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_dom_1 = require("react-dom");
 const client_1 = __importDefault(require("react-dom/client"));
 const remotion_1 = require("remotion");
 require("../styles/styles.css");
-const Editor_1 = require("./components/Editor");
-const EditorContexts_1 = require("./components/EditorContexts");
-const ServerDisconnected_1 = require("./components/Notifications/ServerDisconnected");
-const event_source_1 = require("./helpers/event-source");
+const NoRegisterRoot_1 = require("./components/NoRegisterRoot");
+const Studio_1 = require("./components/Studio");
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(null, '#1f2428'));
-const getServerDisconnectedDomElement = () => {
-    return document.getElementById('server-disconnected-overlay');
+let root = null;
+const getRootForElement = () => {
+    if (root) {
+        return root;
+    }
+    root = client_1.default.createRoot(remotion_1.Internals.getPreviewDomElement());
+    return root;
 };
-const content = ((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, {}), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }));
-if (client_1.default.createRoot) {
-    client_1.default.createRoot(remotion_1.Internals.getPreviewDomElement()).render(content);
-}
-else {
-    client_1.default.render(content, remotion_1.Internals.getPreviewDomElement());
-}
-(0, event_source_1.openEventSource)();
+const renderToDOM = (content) => {
+    // @ts-expect-error
+    if (client_1.default.createRoot) {
+        getRootForElement().render(content);
+    }
+    else {
+        client_1.default.render(content, remotion_1.Internals.getPreviewDomElement());
+    }
+};
+renderToDOM((0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}));
+remotion_1.Internals.waitForRoot((NewRoot) => {
+    renderToDOM((0, jsx_runtime_1.jsx)(Studio_1.Studio, { rootComponent: NewRoot }));
+});

package/dist/routes.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import type { RenderDefaults } from '@remotion/bundler/dist/index-html';
 import type { LogLevel } from '@remotion/renderer';
 import type { IncomingMessage, ServerResponse } from 'node:http';

package/dist/state/modals.d.ts

@@ -35,6 +35,7 @@ export type RenderModalState = {
     initialEncodingMaxRate: string | null;
     initialEncodingBufferSize: string | null;
     initialBeep: boolean;
+    initialRepro: boolean;
     minConcurrency: number;
     maxConcurrency: number;
     defaultProps: Record<string, unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.87",
+  "version": "4.0.89",
   "description": "Remotion Editor",
   "main": "dist",
   "sideEffects": false,
@@ -18,11 +18,11 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.87",
-    "@remotion/player": "4.0.87",
-    "@remotion/media-utils": "4.0.87",
-    "@remotion/renderer": "4.0.87",
-    "@remotion/bundler": "4.0.87"
+    "remotion": "4.0.89",
+    "@remotion/bundler": "4.0.89",
+    "@remotion/media-utils": "4.0.89",
+    "@remotion/player": "4.0.89",
+    "@remotion/renderer": "4.0.89"
   },
   "devDependencies": {
     "react": "18.2.0",
@@ -40,7 +40,7 @@
     "prettier-plugin-organize-imports": "3.2.4",
     "vitest": "0.31.1",
     "zod": "^3.22.3",
-    "@remotion/zod-types": "4.0.87"
+    "@remotion/zod-types": "4.0.89"
   },
   "scripts": {
     "lint": "eslint src --ext ts,tsx",