@remotion/studio 4.0.143 → 4.0.144

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.142 build /Users/jonathanburger/remotion/packages/studio
-> tsc -d
+> @remotion/studio@4.0.143 build /Users/jonathanburger/remotion/packages/studio
+> tsc -d && bun bundle.ts
 

package/LICENSE.md

@@ -1,5 +1,9 @@
 # Remotion License
 
+In Remotion 5.0, the license will slightly change. [View the changes here](https://github.com/remotion-dev/remotion/pull/3750).
+
+---
+
 Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
 - [Free license](#free-license)

package/bundle.ts

@@ -0,0 +1,45 @@
+import {build} from 'bun';
+
+const mainModule = await build({
+	entrypoints: ['src/index.ts'],
+	naming: '[name].mjs',
+	external: ['react', 'remotion', 'remotion/no-react', 'react/jsx-runtime'],
+});
+
+const [file] = mainModule.outputs;
+const text = (await file.text())
+	.replace(/jsxDEV/g, 'jsx')
+	.replace(/react\/jsx-dev-runtime/g, 'react/jsx-runtime');
+
+await Bun.write('dist/esm/index.mjs', text);
+
+const internalsModule = await build({
+	entrypoints: ['src/internals.ts'],
+	naming: 'internals.mjs',
+	external: [
+		'react',
+		'remotion',
+		'scheduler',
+		'react-dom',
+		'react',
+		'@remotion/media-utils',
+		'@remotion/studio-shared',
+		'@remotion/zod-types',
+		'@remotion/renderer',
+		'@remotion/player',
+		'@remotion/renderer/client',
+		'source-map',
+		'zod',
+		'remotion/no-react',
+		'react/jsx-runtime',
+	],
+});
+const [enableFile] = internalsModule.outputs;
+const internalsText = (await enableFile.text())
+	.replace(/jsxDEV/g, 'jsx')
+	.replace(/@remotion\/renderer\/client/g, '@remotion/renderer/client.js')
+	.replace(/react\/jsx-dev-runtime/g, 'react/jsx-runtime');
+
+await Bun.write('dist/esm/internals.mjs', internalsText);
+
+export {};

package/dist/Studio.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import '../styles.css';
 export declare const Studio: React.FC<{
-    rootComponent: React.FC;
-    readOnly: boolean;
+    readonly rootComponent: React.FC;
+    readonly readOnly: boolean;
 }>;

package/dist/Studio.js

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
-require("../styles.css");
 const Editor_1 = require("./components/Editor");
 const EditorContexts_1 = require("./components/EditorContexts");
 const ServerDisconnected_1 = require("./components/Notifications/ServerDisconnected");
+const inject_css_1 = require("./helpers/inject-css");
 const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
@@ -17,6 +17,9 @@ const Studio = ({ rootComponent, readOnly }) => {
         window.remotion_isStudio = true;
         remotion_1.Internals.enableSequenceStackTraces();
     }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        (0, inject_css_1.injectCSS)();
+    }, []);
     return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { numberOfAudioTags: window.remotion_numberOfAudioTags, children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                     ? null
                     : (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }));

package/dist/api/get-static-files.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @description The function array containing all files in the public/ folder. You can reference them by using staticFile().
+ * @see [Documentation](https://www.remotion.dev/docs/getstaticfiles)
+ */
+export declare const getStaticFiles: () => StaticFile[];
+export type StaticFile = {
+    /**
+     * A string that you can pass to the `src` attribute of an `<Audio>`, `<Img>` and `<Video>` element.
+     */
+    src: string;
+    /**
+     * The filepath of the file, relative to the public folder.
+     * Example: `subfolder/image.png`
+     */
+    name: string;
+    sizeInBytes: number;
+    /**
+     * UNIX timestamp in milliseconds
+     */
+    lastModified: number;
+};

package/dist/api/get-static-files.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStaticFiles = void 0;
+let warnedServer = false;
+let warnedPlayer = false;
+const warnServerOnce = () => {
+    if (warnedServer) {
+        return;
+    }
+    warnedServer = true;
+    // eslint-disable-next-line no-console
+    console.warn('Called getStaticFiles() on the server. The API is only available in the browser. An empty array was returned.');
+};
+const warnPlayerOnce = () => {
+    if (warnedPlayer) {
+        return;
+    }
+    warnedPlayer = true;
+    // eslint-disable-next-line no-console
+    console.warn('Called getStaticFiles() while using the Remotion Player. The API is only available while using the Remotion Studio. An empty array was returned.');
+};
+/**
+ * @description The function array containing all files in the public/ folder. You can reference them by using staticFile().
+ * @see [Documentation](https://www.remotion.dev/docs/getstaticfiles)
+ */
+const getStaticFiles = () => {
+    if (typeof document === 'undefined') {
+        warnServerOnce();
+        return [];
+    }
+    if (window.remotion_isPlayer) {
+        warnPlayerOnce();
+        return [];
+    }
+    return window.remotion_staticFiles;
+};
+exports.getStaticFiles = getStaticFiles;

package/dist/api/watch-static-file.d.ts

@@ -0,0 +1,17 @@
+import type { StaticFile } from './get-static-files';
+type WatcherCallback = (newData: StaticFile | null) => void;
+export declare const WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
+export type WatchRemotionStaticFilesPayload = {
+    files: StaticFile[];
+};
+/**
+ * @description Watch for changes in a specific static file.
+ * @param {string} fileName - The name of the static file to watch for changes.
+ * @param {WatcherCallback} callback - A callback function to be called when the file changes.
+ * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
+ * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
+ */
+export declare const watchStaticFile: (fileName: string, callback: WatcherCallback) => {
+    cancel: () => void;
+};
+export {};

package/dist/api/watch-static-file.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.watchStaticFile = exports.WATCH_REMOTION_STATIC_FILES = void 0;
+const remotion_1 = require("remotion");
+exports.WATCH_REMOTION_STATIC_FILES = 'remotion_staticFilesChanged';
+/**
+ * @description Watch for changes in a specific static file.
+ * @param {string} fileName - The name of the static file to watch for changes.
+ * @param {WatcherCallback} callback - A callback function to be called when the file changes.
+ * @returns {{cancel: () => void}} A function that can be used to cancel the event listener.
+ * @see [Documentation](https://www.remotion.dev/docs/watchstaticfile)
+ */
+const watchStaticFile = (fileName, callback) => {
+    // Check if function is called in Remotion Studio
+    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+        // eslint-disable-next-line no-console
+        console.warn('The API is only available while using the Remotion Studio.');
+        return { cancel: () => undefined };
+    }
+    const withoutStaticBase = fileName.startsWith(window.remotion_staticBase)
+        ? fileName.replace(window.remotion_staticBase, '')
+        : fileName;
+    const withoutLeadingSlash = withoutStaticBase.startsWith('/')
+        ? withoutStaticBase.slice(1)
+        : withoutStaticBase;
+    let prevFileData = window.remotion_staticFiles.find((file) => file.name === withoutLeadingSlash);
+    // Check if the specified static file has updated or deleted
+    const checkFile = (event) => {
+        const staticFiles = event.detail.files;
+        // Check for user specified file
+        const newFileData = staticFiles.find((file) => file.name === withoutLeadingSlash);
+        if (!newFileData) {
+            // File is deleted
+            if (prevFileData !== undefined) {
+                callback(null);
+            }
+            prevFileData = undefined;
+            return;
+        }
+        if (prevFileData === undefined ||
+            prevFileData.lastModified !== newFileData.lastModified) {
+            callback(newFileData); // File is added or modified
+            prevFileData = newFileData;
+        }
+    };
+    window.addEventListener(exports.WATCH_REMOTION_STATIC_FILES, checkFile);
+    const cancel = () => {
+        return window.removeEventListener(exports.WATCH_REMOTION_STATIC_FILES, checkFile);
+    };
+    return { cancel };
+};
+exports.watchStaticFile = watchStaticFile;

package/dist/components/AssetSelector.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const AssetSelector: React.FC<{
-    readOnlyStudio: boolean;
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/AssetSelector.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const remotion_1 = require("remotion");
+const get_static_files_1 = require("../api/get-static-files");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
@@ -39,6 +39,7 @@ const folders_1 = require("../state/folders");
 const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
 const styles_1 = require("./Menu/styles");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const utils_1 = require("./utils");
 const container = {
     display: 'flex',
@@ -75,7 +76,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
     const shouldAllowUpload = connectionStatus === 'connected' && !readOnlyStudio;
     const [{ publicFolderExists, staticFiles }, setState] = react_1.default.useState(() => {
         return {
-            staticFiles: (0, remotion_1.getStaticFiles)(),
+            staticFiles: (0, get_static_files_1.getStaticFiles)(),
             publicFolderExists: window.remotion_publicFolderExists,
         };
     });
@@ -85,7 +86,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
     (0, react_1.useEffect)(() => {
         const onUpdate = () => {
             setState({
-                staticFiles: (0, remotion_1.getStaticFiles)(),
+                staticFiles: (0, get_static_files_1.getStaticFiles)(),
                 publicFolderExists: window.remotion_publicFolderExists,
             });
         };
@@ -116,11 +117,28 @@ const AssetSelector = ({ readOnlyStudio }) => {
     const onDragOver = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
-    const onDrop = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        (0, utils_1.handleUploadFile)(e.dataTransfer.files[0], dropLocation || '/');
-        setDropLocation(null);
+    const onDrop = (0, react_1.useCallback)(async (e) => {
+        try {
+            e.preventDefault();
+            e.stopPropagation();
+            const { files } = e.dataTransfer;
+            const assetPath = dropLocation || '/';
+            for (const file of files) {
+                await (0, utils_1.handleUploadFile)(file, assetPath);
+            }
+            if (files.length === 1) {
+                (0, NotificationCenter_1.showNotification)(`Added ${files[0].name} to ${assetPath}`, 3000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(`Added ${files.length} files to ${assetPath}`, 3000);
+            }
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Error during upload: ${error}`, 3000);
+        }
+        finally {
+            setDropLocation(null);
+        }
     }, [dropLocation]);
     return ((0, jsx_runtime_1.jsx)("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: staticFiles.length === 0 ? (publicFolderExists ? ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, place a file in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " folder of your project or drag and drop a file here."] }) })) : ((0, jsx_runtime_1.jsx)("div", { style: emptyState, children: (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["To add assets, create a folder called", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "public" }), " in the root of your project and place a file in it."] }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: {
                 ...list,

package/dist/components/InitialCompositionLoader.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InitialCompositionLoader = exports.useSelectComposition = exports.useSelectAsset = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_static_files_1 = require("../api/get-static-files");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const url_state_1 = require("../helpers/url-state");
 const folders_1 = require("../state/folders");
@@ -110,7 +111,7 @@ const InitialCompositionLoader = () => {
                 return;
             }
             if (newCanvas && newCanvas.type === 'asset') {
-                const staticFiles = (0, remotion_1.getStaticFiles)();
+                const staticFiles = (0, get_static_files_1.getStaticFiles)();
                 const exists = staticFiles.find((file) => {
                     return file.name === newCanvas.asset;
                 });

package/dist/components/RenderModal/SchemaEditor/ZodStaticFileEditor.d.ts

@@ -3,15 +3,15 @@ import type { z } from 'zod';
 import type { UpdaterFunction } from './ZodSwitch';
 import type { JSONPath } from './zod-types';
 export declare const ZodStaticFileEditor: React.FC<{
-    schema: z.ZodTypeAny;
-    jsonPath: JSONPath;
-    value: string;
-    defaultValue: string;
-    setValue: UpdaterFunction<string>;
-    onSave: (updater: (oldState: string) => string) => void;
-    showSaveButton: boolean;
-    onRemove: null | (() => void);
-    saving: boolean;
-    saveDisabledByParent: boolean;
-    mayPad: boolean;
+    readonly schema: z.ZodTypeAny;
+    readonly jsonPath: JSONPath;
+    readonly value: string;
+    readonly defaultValue: string;
+    readonly setValue: UpdaterFunction<string>;
+    readonly onSave: (updater: (oldState: string) => string) => void;
+    readonly showSaveButton: boolean;
+    readonly onRemove: null | (() => void);
+    readonly saving: boolean;
+    readonly saveDisabledByParent: boolean;
+    readonly mayPad: boolean;
 }>;

package/dist/components/RenderModal/SchemaEditor/ZodStaticFileEditor.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodStaticFileEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
+const get_static_files_1 = require("../../../api/get-static-files");
 const Checkmark_1 = require("../../../icons/Checkmark");
 const ComboBox_1 = require("../../NewComposition/ComboBox");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
@@ -32,7 +32,7 @@ const ZodStaticFileEditor = ({ schema, jsonPath, setValue, defaultValue, value,
     }
     const isRoot = jsonPath.length === 0;
     const comboBoxValues = (0, react_1.useMemo)(() => {
-        return (0, remotion_1.getStaticFiles)().map((option) => {
+        return (0, get_static_files_1.getStaticFiles)().map((option) => {
             return {
                 value: option.src,
                 label: option.name,

package/dist/components/StaticFilePreview.js

@@ -4,6 +4,7 @@ exports.StaticFilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_static_files_1 = require("../api/get-static-files");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const FilePreview_1 = require("./FilePreview");
@@ -22,7 +23,7 @@ const errMsgStyle = {
 const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
     const fileType = (0, Preview_1.getPreviewFileType)(currentAsset);
     const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
-    const staticFiles = (0, remotion_1.getStaticFiles)();
+    const staticFiles = (0, get_static_files_1.getStaticFiles)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const exists = staticFiles.find((file) => file.name === currentAsset);

package/dist/components/utils.js

@@ -1,32 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleUploadFile = void 0;
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const handleUploadFile = async (file, assetPath) => {
-    if (!file) {
-        (0, NotificationCenter_1.showNotification)('Please select a file first!', 3000);
-        return;
-    }
-    try {
-        const url = new URL('/api/add-asset', window.location.origin);
-        url.search = new URLSearchParams({
-            folder: assetPath,
-            file: file.name,
-        }).toString();
-        const response = await fetch(url, {
-            method: 'POST',
-            body: file,
-        });
-        if (response.ok) {
-            (0, NotificationCenter_1.showNotification)(`Added ${file.name} to ${assetPath}`, 3000);
-        }
-        else {
-            const jsonResponse = await response.json();
-            (0, NotificationCenter_1.showNotification)(`Upload failed: ${jsonResponse.error}`, 3000);
-        }
-    }
-    catch (error) {
-        (0, NotificationCenter_1.showNotification)(`Error during upload: ${error}`, 3000);
+    const url = new URL('/api/add-asset', window.location.origin);
+    url.search = new URLSearchParams({
+        folder: assetPath,
+        file: file.name,
+    }).toString();
+    const response = await fetch(url, {
+        method: 'POST',
+        body: file,
+    });
+    if (!response.ok) {
+        const jsonResponse = await response.json();
+        throw new Error(jsonResponse.error);
     }
 };
 exports.handleUploadFile = handleUploadFile;

package/dist/esm/index.mjs

@@ -0,0 +1,67 @@
+// src/api/get-static-files.ts
+var warnedServer = false;
+var warnedPlayer = false;
+var warnServerOnce = () => {
+  if (warnedServer) {
+    return;
+  }
+  warnedServer = true;
+  console.warn("Called getStaticFiles() on the server. The API is only available in the browser. An empty array was returned.");
+};
+var warnPlayerOnce = () => {
+  if (warnedPlayer) {
+    return;
+  }
+  warnedPlayer = true;
+  console.warn("Called getStaticFiles() while using the Remotion Player. The API is only available while using the Remotion Studio. An empty array was returned.");
+};
+var getStaticFiles = () => {
+  if (typeof document === "undefined") {
+    warnServerOnce();
+    return [];
+  }
+  if (window.remotion_isPlayer) {
+    warnPlayerOnce();
+    return [];
+  }
+  return window.remotion_staticFiles;
+};
+
+// src/api/watch-static-file.ts
+import {getRemotionEnvironment} from "remotion";
+var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
+var watchStaticFile = (fileName, callback) => {
+  if (!getRemotionEnvironment().isStudio) {
+    console.warn("The API is only available while using the Remotion Studio.");
+    return { cancel: () => {
+      return;
+    } };
+  }
+  const withoutStaticBase = fileName.startsWith(window.remotion_staticBase) ? fileName.replace(window.remotion_staticBase, "") : fileName;
+  const withoutLeadingSlash = withoutStaticBase.startsWith("/") ? withoutStaticBase.slice(1) : withoutStaticBase;
+  let prevFileData = window.remotion_staticFiles.find((file) => file.name === withoutLeadingSlash);
+  const checkFile = (event) => {
+    const staticFiles = event.detail.files;
+    const newFileData = staticFiles.find((file) => file.name === withoutLeadingSlash);
+    if (!newFileData) {
+      if (prevFileData !== undefined) {
+        callback(null);
+      }
+      prevFileData = undefined;
+      return;
+    }
+    if (prevFileData === undefined || prevFileData.lastModified !== newFileData.lastModified) {
+      callback(newFileData);
+      prevFileData = newFileData;
+    }
+  };
+  window.addEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
+  const cancel = () => {
+    return window.removeEventListener(WATCH_REMOTION_STATIC_FILES, checkFile);
+  };
+  return { cancel };
+};
+export {
+  watchStaticFile,
+  getStaticFiles
+};