@remotion/studio 4.0.222 → 4.0.225

package/.turbo/turbo-make.log

@@ -1,5 +1,5 @@
 
 
-> @remotion/studio@4.0.221 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.224 make /Users/jonathanburger/remotion/packages/studio
 > bun --env-file=../.env.bundle bundle.ts
 

package/dist/Studio.js

@@ -15,13 +15,13 @@ const getServerDisconnectedDomElement = () => {
 const Studio = ({ rootComponent, readOnly }) => {
     (0, react_1.useLayoutEffect)(() => {
         window.remotion_isStudio = true;
-        window.remotion_isReadOnlyStudio = true;
+        window.remotion_isReadOnlyStudio = readOnly;
         remotion_1.Internals.enableSequenceStackTraces();
         return () => {
             window.remotion_isStudio = false;
             window.remotion_isReadOnlyStudio = false;
         };
-    }, []);
+    }, [readOnly]);
     (0, react_1.useLayoutEffect)(() => {
         (0, inject_css_1.injectCSS)();
     }, []);

package/dist/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: "error" | "warning" | "ok";
     isFocused: boolean;
     isHovered: boolean;
-}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(255, 255, 255, 0.05)" | "rgba(0, 0, 0, 0.6)";
+}) => "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueCopyToClipboard = exports.supportsCopyingToClipboard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const get_asset_metadata_1 = require("../../helpers/get-asset-metadata");
 const clipboard_1 = require("../../icons/clipboard");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const actions_1 = require("./actions");
 const revealIconStyle = {
     height: 12,
     color: 'currentColor',
@@ -31,19 +31,27 @@ const RenderQueueCopyToClipboard = ({ job }) => {
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return (0, jsx_runtime_1.jsx)(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
     }, []);
-    const onClick = (0, react_1.useCallback)((e) => {
+    const onClick = (0, react_1.useCallback)(async (e) => {
         e.stopPropagation();
-        (0, actions_1.copyToClipboard)({
-            outName: job.outName,
-            binariesDirectory: job.binariesDirectory,
-        })
-            .catch((err) => {
+        try {
+            const src = `${get_asset_metadata_1.remotion_outputsBase}/${job.outName}`;
+            const content = await fetch(src);
+            const contentType = content.headers.get('content-type');
+            if (!contentType) {
+                throw new Error('Expected content-type header');
+            }
+            const blob = await content.blob();
+            await navigator.clipboard.write([
+                new ClipboardItem({
+                    [contentType]: blob,
+                }),
+            ]);
+            (0, NotificationCenter_1.showNotification)('Copied to clipboard!', 1000);
+        }
+        catch (err) {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
-        })
-            .then(() => {
-            (0, NotificationCenter_1.showNotification)('Copied to clipboard', 1000);
-        });
-    }, [job.binariesDirectory, job.outName]);
+        }
+    }, [job.outName]);
     return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
 };
 exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

package/dist/components/RenderQueue/actions.d.ts

@@ -87,10 +87,6 @@ export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
 export declare const openInFileExplorer: ({ directory }: {
     directory: string;
 }) => Promise<void>;
-export declare const copyToClipboard: ({ outName, binariesDirectory, }: {
-    outName: string;
-    binariesDirectory: string | null;
-}) => Promise<void>;
 export declare const applyCodemod: ({ codemod, dryRun, signal, }: {
     codemod: RecastCodemod;
     dryRun: boolean;

package/dist/components/RenderQueue/actions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canUpdateDefaultProps = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.copyToClipboard = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
+exports.canUpdateDefaultProps = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
 const call_api_1 = require("../call-api");
 const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, multiProcessOnLinux, beepOnFinish, metadata, }) => {
@@ -122,14 +122,6 @@ const openInFileExplorer = ({ directory }) => {
     return (0, call_api_1.callApi)('/api/open-in-file-explorer', body);
 };
 exports.openInFileExplorer = openInFileExplorer;
-const copyToClipboard = ({ outName, binariesDirectory, }) => {
-    const body = {
-        outName,
-        binariesDirectory,
-    };
-    return (0, call_api_1.callApi)('/api/copy-still-to-clipboard', body);
-};
-exports.copyToClipboard = copyToClipboard;
 const applyCodemod = ({ codemod, dryRun, signal, }) => {
     const body = {
         codemod,

package/dist/esm/internals.mjs

@@ -3386,16 +3386,6 @@ var openInFileExplorer = ({ directory }) => {
   };
   return callApi("/api/open-in-file-explorer", body);
 };
-var copyToClipboard = ({
-  outName,
-  binariesDirectory
-}) => {
-  const body = {
-    outName,
-    binariesDirectory
-  };
-  return callApi("/api/copy-still-to-clipboard", body);
-};
 var applyCodemod = ({
   codemod,
   dryRun,
@@ -3684,7 +3674,7 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
       showNotification(`Could not open file: ${err.message}`, 2000);
     });
   }, [item.name, parentFolder]);
-  const copyToClipboard2 = useCallback17((e) => {
+  const copyToClipboard = useCallback17((e) => {
     e.stopPropagation();
     const content = `staticFile("${[parentFolder, item.name].join("/")}")`;
     copyText(content).then(() => {
@@ -3722,7 +3712,7 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
             /* @__PURE__ */ jsx35(InlineAction, {
               title: "Copy staticFile() name",
               renderAction: renderCopyAction,
-              onClick: copyToClipboard2
+              onClick: copyToClipboard
             }),
             /* @__PURE__ */ jsx35(Spacing, {
               x: 0.5
@@ -14555,17 +14545,26 @@ var RenderQueueCopyToClipboard = ({ job }) => {
       color
     });
   }, []);
-  const onClick = useCallback64((e) => {
+  const onClick = useCallback64(async (e) => {
     e.stopPropagation();
-    copyToClipboard({
-      outName: job.outName,
-      binariesDirectory: job.binariesDirectory
-    }).catch((err) => {
+    try {
+      const src = `${remotion_outputsBase}/${job.outName}`;
+      const content = await fetch(src);
+      const contentType = content.headers.get("content-type");
+      if (!contentType) {
+        throw new Error("Expected content-type header");
+      }
+      const blob = await content.blob();
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          [contentType]: blob
+        })
+      ]);
+      showNotification("Copied to clipboard!", 1000);
+    } catch (err) {
       showNotification(`Could not copy to clipboard: ${err.message}`, 2000);
-    }).then(() => {
-      showNotification("Copied to clipboard", 1000);
-    });
-  }, [job.binariesDirectory, job.outName]);
+    }
+  }, [job.outName]);
   return /* @__PURE__ */ jsx133(InlineAction, {
     title: "Copy to clipboard",
     renderAction: renderCopyAction,
@@ -27190,13 +27189,13 @@ var getServerDisconnectedDomElement = () => {
 var Studio = ({ rootComponent, readOnly }) => {
   useLayoutEffect2(() => {
     window.remotion_isStudio = true;
-    window.remotion_isReadOnlyStudio = true;
+    window.remotion_isReadOnlyStudio = readOnly;
     Internals61.enableSequenceStackTraces();
     return () => {
       window.remotion_isStudio = false;
       window.remotion_isReadOnlyStudio = false;
     };
-  }, []);
+  }, [readOnly]);
   useLayoutEffect2(() => {
     injectCSS();
   }, []);

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/colors.d.ts

@@ -24,4 +24,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" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)";

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/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.222",
+  "version": "4.0.225",
   "description": "APIs for interacting with the Remotion Studio",
   "main": "dist",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.222",
-    "@remotion/player": "4.0.222",
-    "@remotion/media-utils": "4.0.222",
-    "@remotion/renderer": "4.0.222",
-    "@remotion/studio-shared": "4.0.222"
+    "@remotion/player": "4.0.225",
+    "@remotion/media-utils": "4.0.225",
+    "@remotion/renderer": "4.0.225",
+    "@remotion/studio-shared": "4.0.225",
+    "remotion": "4.0.225"
   },
   "devDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "@types/semver": "^7.3.4",
     "zod": "3.22.3",
-    "@remotion/zod-types": "4.0.222"
+    "@remotion/zod-types": "4.0.225"
   },
   "publishConfig": {
     "access": "public"