@remotion/studio 4.0.80

package/dist/preview-server/hot-middleware/index.js

@@ -0,0 +1,149 @@
+"use strict";
+/**
+ * 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.webpackHotMiddleware = void 0;
+const renderer_1 = require("@remotion/renderer");
+const node_url_1 = require("node:url");
+const types_1 = require("./types");
+const pathMatch = function (url, path) {
+    try {
+        return (0, node_url_1.parse)(url).pathname === path;
+    }
+    catch (e) {
+        return false;
+    }
+};
+const webpackHotMiddleware = (compiler) => {
+    const eventStream = createEventStream(types_1.hotMiddlewareOptions.heartbeat);
+    let latestStats = null;
+    compiler.hooks.invalid.tap('remotion', onInvalid);
+    compiler.hooks.done.tap('remotion', onDone);
+    function onInvalid() {
+        latestStats = null;
+        renderer_1.RenderInternals.Log.info('Building...');
+        eventStream === null || eventStream === void 0 ? void 0 : eventStream.publish({
+            action: 'building',
+        });
+    }
+    function onDone(statsResult) {
+        // Keep hold of latest stats so they can be propagated to new clients
+        latestStats = statsResult;
+        publishStats('built', latestStats, eventStream);
+    }
+    const middleware = function (req, res, next) {
+        if (!pathMatch(req.url, types_1.hotMiddlewareOptions.path))
+            return next();
+        eventStream === null || eventStream === void 0 ? void 0 : eventStream.handler(req, res);
+        if (latestStats) {
+            publishStats('sync', latestStats, eventStream);
+        }
+    };
+    return middleware;
+};
+exports.webpackHotMiddleware = webpackHotMiddleware;
+function createEventStream(heartbeat) {
+    let clientId = 0;
+    let clients = {};
+    function everyClient(fn) {
+        Object.keys(clients).forEach((id) => {
+            fn(clients[id]);
+        });
+    }
+    const interval = setInterval(() => {
+        everyClient((client) => {
+            client.write('data: \uD83D\uDC93\n\n');
+        });
+    }, heartbeat).unref();
+    return {
+        close() {
+            clearInterval(interval);
+            everyClient((client) => {
+                if (!client.finished)
+                    client.end();
+            });
+            clients = {};
+        },
+        handler(req, res) {
+            const headers = {
+                'Access-Control-Allow-Origin': '*',
+                'Content-Type': 'text/event-stream;charset=utf-8',
+                'Cache-Control': 'no-cache, no-transform',
+            };
+            const isHttp1 = !(parseInt(req.httpVersion, 10) >= 2);
+            if (isHttp1) {
+                req.socket.setKeepAlive(true);
+                Object.assign(headers, {
+                    Connection: 'keep-alive',
+                });
+            }
+            res.writeHead(200, headers);
+            res.write('\n');
+            const id = clientId++;
+            clients[id] = res;
+            req.on('close', () => {
+                if (!res.finished)
+                    res.end();
+                delete clients[id];
+            });
+        },
+        publish(payload) {
+            everyClient((client) => {
+                client.write('data: ' + JSON.stringify(payload) + '\n\n');
+            });
+        },
+    };
+}
+function publishStats(action, statsResult, eventStream) {
+    const stats = statsResult.toJson({
+        all: false,
+        cached: true,
+        children: true,
+        modules: true,
+        timings: true,
+        hash: true,
+    });
+    // For multi-compiler, stats will be an object with a 'children' array of stats
+    const bundles = extractBundles(stats);
+    bundles.forEach((_stats) => {
+        let name = _stats.name || '';
+        // Fallback to compilation name in case of 1 bundle (if it exists)
+        if (bundles.length === 1 && !name && statsResult.compilation) {
+            name = statsResult.compilation.name || '';
+        }
+        eventStream === null || eventStream === void 0 ? void 0 : eventStream.publish({
+            name,
+            action,
+            time: _stats.time,
+            hash: _stats.hash,
+            warnings: _stats.warnings || [],
+            errors: _stats.errors || [],
+            modules: buildModuleMap(_stats.modules),
+        });
+    });
+}
+function extractBundles(stats) {
+    var _a;
+    // Stats has modules, single bundle
+    if (stats.modules)
+        return [stats];
+    // Stats has children, multiple bundles
+    if ((_a = stats.children) === null || _a === void 0 ? void 0 : _a.length)
+        return stats.children;
+    // Not sure, assume single
+    return [stats];
+}
+function buildModuleMap(modules) {
+    const map = {};
+    if (!modules) {
+        return map;
+    }
+    modules.forEach((module) => {
+        const id = module.id;
+        map[id] = module.name;
+    });
+    return map;
+}

package/dist/preview-server/hot-middleware/process-update.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 { HotMiddlewareOptions, ModuleMap } from './types';
+export declare const processUpdate: (hash: string | undefined, moduleMap: ModuleMap, options: HotMiddlewareOptions) => void;

package/dist/preview-server/hot-middleware/process-update.js

@@ -0,0 +1,162 @@
+"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;
+/**
+ * Based heavily on https://github.com/webpack/webpack/blob/
+ *  c0afdf9c6abc1dd70707c594e473802a566f7b6e/hot/only-dev-server.js
+ * Original copyright Tobias Koppers @sokra (MIT license)
+ */
+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/preview-server/hot-middleware/types.d.ts

@@ -0,0 +1,27 @@
+import type { webpack } from '@remotion/bundler';
+export type HotMiddlewareMessage = {
+    action: 'building';
+    name?: string;
+} | {
+    action: 'built' | 'sync';
+    name: string;
+    time: number | undefined;
+    errors: unknown[];
+    warnings: unknown[];
+    hash: string | undefined;
+    modules: {
+        [key: string]: string;
+    };
+};
+export declare const hotMiddlewareOptions: {
+    path: string;
+    timeout: number;
+    reload: boolean;
+    warn: boolean;
+    heartbeat: number;
+};
+export type HotMiddlewareOptions = typeof hotMiddlewareOptions;
+export type WebpackStats = ReturnType<webpack.Stats['toJson']>;
+export type ModuleMap = {
+    [key: string]: string;
+};

package/dist/preview-server/hot-middleware/types.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hotMiddlewareOptions = void 0;
+exports.hotMiddlewareOptions = {
+    path: '/__webpack_hmr',
+    timeout: 20 * 1000,
+    reload: true,
+    warn: true,
+    heartbeat: 10 * 1000,
+};

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

@@ -0,0 +1,227 @@
+import type { EnumPath } from '../components/RenderModal/SchemaEditor/extract-enum-json-paths';
+import type { AudioCodec, Codec, ColorSpace, LogLevel, makeCancelSignal, PixelFormat, ProResProfile, StillImageFormat, StitchingState, VideoImageFormat, X264Preset } from '@remotion/renderer';
+import type { RequiredChromiumOptions } from '../required-chromium-options';
+import type { PackageManager } from './get-package-manager';
+type BaseRenderProgress = {
+    message: string;
+    value: number;
+};
+export type RenderStep = 'bundling' | 'rendering' | 'stitching';
+export type DownloadProgress = {
+    name: string;
+    id: number;
+    progress: number | null;
+    totalBytes: number | null;
+    downloaded: number;
+};
+export type RenderingProgressInput = {
+    frames: number;
+    totalFrames: number;
+    steps: RenderStep[];
+    concurrency: number;
+    doneIn: number | null;
+};
+export type StitchingProgressInput = {
+    frames: number;
+    totalFrames: number;
+    doneIn: number | null;
+    stage: StitchingState;
+    codec: Codec;
+};
+type RenderJobDynamicStatus = {
+    status: 'done';
+    progress: BaseRenderProgress & AggregateRenderProgress;
+} | {
+    status: 'running';
+    progress: BaseRenderProgress & AggregateRenderProgress;
+} | {
+    status: 'idle';
+} | {
+    status: 'failed';
+    error: {
+        message: string;
+        stack: string | undefined;
+    };
+};
+export type CopyingState = {
+    bytes: number;
+    doneIn: number | null;
+};
+export type BundlingState = {
+    progress: number;
+    doneIn: number | null;
+};
+export type AggregateRenderProgress = {
+    rendering: RenderingProgressInput | null;
+    stitching: StitchingProgressInput | null;
+    downloads: DownloadProgress[];
+    bundling: BundlingState;
+    copyingState: CopyingState;
+};
+export type JobProgressCallback = (options: BaseRenderProgress & AggregateRenderProgress) => void;
+type RenderJobDynamicFields = ({
+    type: 'still';
+    imageFormat: StillImageFormat;
+    jpegQuality: number;
+    frame: number;
+    scale: number;
+    offthreadVideoCacheSizeInBytes: number | null;
+} & RenderJobDynamicStatus) | ({
+    type: 'sequence';
+    imageFormat: VideoImageFormat;
+    jpegQuality: number | null;
+    scale: number;
+    concurrency: number;
+    startFrame: number;
+    endFrame: number;
+    offthreadVideoCacheSizeInBytes: number | null;
+} & RenderJobDynamicStatus) | ({
+    type: 'video';
+    imageFormat: VideoImageFormat;
+    jpegQuality: number | null;
+    scale: number;
+    codec: Codec;
+    audioCodec: AudioCodec;
+    concurrency: number;
+    crf: number | null;
+    startFrame: number;
+    endFrame: number;
+    muted: boolean;
+    enforceAudioTrack: boolean;
+    proResProfile: ProResProfile | null;
+    x264Preset: X264Preset | null;
+    pixelFormat: PixelFormat;
+    audioBitrate: string | null;
+    videoBitrate: string | null;
+    encodingBufferSize: string | null;
+    encodingMaxRate: string | null;
+    everyNthFrame: number;
+    numberOfGifLoops: number | null;
+    disallowParallelEncoding: boolean;
+    offthreadVideoCacheSizeInBytes: number | null;
+    colorSpace: ColorSpace;
+} & RenderJobDynamicStatus);
+export type RenderJob = {
+    startedAt: number;
+    compositionId: string;
+    id: string;
+    outName: string;
+    deletedOutputLocation: boolean;
+    logLevel: LogLevel;
+    delayRenderTimeout: number;
+    cancelToken: ReturnType<typeof makeCancelSignal>;
+    chromiumOptions: RequiredChromiumOptions;
+    envVariables: Record<string, string>;
+    serializedInputPropsWithCustomSchema: string;
+    multiProcessOnLinux: boolean;
+} & RenderJobDynamicFields;
+export type RenderJobWithCleanup = RenderJob & {
+    cleanup: (() => void)[];
+};
+type AddRenderRequestDynamicFields = {
+    type: 'still';
+    imageFormat: StillImageFormat;
+    jpegQuality: number;
+    frame: number;
+    scale: number;
+    logLevel: LogLevel;
+} | {
+    type: 'sequence';
+    imageFormat: VideoImageFormat;
+    jpegQuality: number | null;
+    scale: number;
+    logLevel: LogLevel;
+    concurrency: number;
+    startFrame: number;
+    endFrame: number;
+    disallowParallelEncoding: boolean;
+} | {
+    type: 'video';
+    codec: Codec;
+    audioCodec: AudioCodec;
+    imageFormat: VideoImageFormat;
+    jpegQuality: number | null;
+    scale: number;
+    logLevel: LogLevel;
+    concurrency: number;
+    crf: number | null;
+    startFrame: number;
+    endFrame: number;
+    muted: boolean;
+    enforceAudioTrack: boolean;
+    proResProfile: ProResProfile | null;
+    x264Preset: X264Preset | null;
+    pixelFormat: PixelFormat;
+    audioBitrate: string | null;
+    videoBitrate: string | null;
+    encodingBufferSize: string | null;
+    encodingMaxRate: string | null;
+    everyNthFrame: number;
+    numberOfGifLoops: number | null;
+    disallowParallelEncoding: boolean;
+    colorSpace: ColorSpace;
+};
+export type CancelRenderRequest = {
+    jobId: string;
+};
+export type CancelRenderResponse = {};
+export type AddRenderRequest = {
+    compositionId: string;
+    outName: string;
+    chromiumOptions: RequiredChromiumOptions;
+    delayRenderTimeout: number;
+    envVariables: Record<string, string>;
+    serializedInputPropsWithCustomSchema: string;
+    offthreadVideoCacheSizeInBytes: number | null;
+    multiProcessOnLinux: boolean;
+} & AddRenderRequestDynamicFields;
+export type RemoveRenderRequest = {
+    jobId: string;
+};
+export type OpenInFileExplorerRequest = {
+    directory: string;
+};
+export type CopyStillToClipboardRequest = {
+    outName: string;
+};
+export type SubscribeToFileExistenceRequest = {
+    file: string;
+    clientId: string;
+};
+export type SubscribeToFileExistenceResponse = {
+    exists: boolean;
+};
+export type UnsubscribeFromFileExistenceRequest = {
+    file: string;
+    clientId: string;
+};
+export type UpdateDefaultPropsRequest = {
+    compositionId: string;
+    defaultProps: string;
+    enumPaths: EnumPath[];
+};
+export type UpdateDefaultPropsResponse = {
+    success: true;
+} | {
+    success: false;
+    reason: string;
+    stack: string;
+};
+export type CanUpdateDefaultPropsRequest = {
+    compositionId: string;
+};
+export type CanUpdateDefaultPropsResponse = {
+    canUpdate: true;
+} | {
+    canUpdate: false;
+    reason: string;
+};
+export type UpdateAvailableRequest = {};
+export type UpdateAvailableResponse = {
+    currentVersion: string;
+    latestVersion: string;
+    updateAvailable: boolean;
+    timedOut: boolean;
+    packageManager: PackageManager | 'unknown';
+};
+export {};

package/dist/preview-server/job.js

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

package/dist/preview-server/live-events.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="node" />
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { EventSourceEvent } from '../event-source-events';
+export type LiveEventsServer = {
+    sendEventToClient: (event: EventSourceEvent) => void;
+    router: (request: IncomingMessage, response: ServerResponse) => void;
+};
+export declare const makeLiveEventsRouter: () => LiveEventsServer;
+export declare const waitForLiveEventsListener: () => Promise<LiveEventsServer>;
+export declare const setLiveEventsListener: (listener: LiveEventsServer) => void;

package/dist/preview-server/live-events.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setLiveEventsListener = exports.waitForLiveEventsListener = exports.makeLiveEventsRouter = void 0;
+const server_ready_1 = require("../server-ready");
+const file_existence_watchers_1 = require("./file-existence-watchers");
+const serializeMessage = (message) => {
+    return `data: ${JSON.stringify(message)}\n\n`;
+};
+let printPortMessageTimeout = null;
+const makeLiveEventsRouter = () => {
+    let clients = [];
+    const router = (request, response) => {
+        const headers = {
+            'content-type': 'text/event-stream;charset=utf-8',
+            connection: 'keep-alive',
+            'cache-control': 'no-cache',
+        };
+        response.writeHead(200, headers);
+        response.write('\n');
+        if (request.method === 'OPTIONS') {
+            response.end();
+            return;
+        }
+        const clientId = String(Math.random());
+        response.write(serializeMessage({ type: 'init', clientId }));
+        const newClient = {
+            id: clientId,
+            response,
+        };
+        clients.push(newClient);
+        if (printPortMessageTimeout) {
+            clearTimeout(printPortMessageTimeout);
+        }
+        request.on('close', () => {
+            (0, file_existence_watchers_1.unsubscribeClientFileExistenceWatchers)(clientId);
+            clients = clients.filter((client) => client.id !== clientId);
+            // If all clients disconnected, print a comment so user can easily restart it.
+            if (clients.length === 0) {
+                if (printPortMessageTimeout) {
+                    clearTimeout(printPortMessageTimeout);
+                }
+                printPortMessageTimeout = setTimeout(() => {
+                    (0, server_ready_1.printServerReadyComment)('To restart');
+                }, 2500);
+            }
+        });
+    };
+    const sendEventToClient = (event) => {
+        clients.forEach((client) => {
+            client.response.write(serializeMessage(event));
+        });
+    };
+    return {
+        sendEventToClient,
+        router,
+    };
+};
+exports.makeLiveEventsRouter = makeLiveEventsRouter;
+let liveEventsListener = null;
+const waiters = [];
+const waitForLiveEventsListener = () => {
+    if (liveEventsListener) {
+        return Promise.resolve(liveEventsListener);
+    }
+    return new Promise((resolve) => {
+        waiters.push((list) => {
+            resolve(list);
+        });
+    });
+};
+exports.waitForLiveEventsListener = waitForLiveEventsListener;
+const setLiveEventsListener = (listener) => {
+    liveEventsListener = listener;
+    waiters.forEach((w) => w(listener));
+};
+exports.setLiveEventsListener = setLiveEventsListener;

package/dist/preview-server/parse-body.d.ts

@@ -0,0 +1,2 @@
+import type { IncomingMessage } from 'node:http';
+export declare const parseRequestBody: (req: IncomingMessage) => Promise<unknown>;

package/dist/preview-server/parse-body.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseRequestBody = void 0;
+const parseRequestBody = async (req) => {
+    const body = await new Promise((_resolve) => {
+        let data = '';
+        req.on('data', (chunk) => {
+            data += chunk;
+        });
+        req.on('end', () => {
+            _resolve(data.toString());
+        });
+    });
+    return JSON.parse(body);
+};
+exports.parseRequestBody = parseRequestBody;