@remotion/studio 4.0.118 → 4.0.120

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
 
-> @remotion/studio@4.0.117 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.118 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d
 

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(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
+}) => "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

@@ -33,7 +33,10 @@ const RenderQueueCopyToClipboard = ({ job }) => {
     }, []);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
-        (0, actions_1.copyToClipboard)({ outName: job.outName })
+        (0, actions_1.copyToClipboard)({
+            outName: job.outName,
+            binariesDirectory: job.binariesDirectory,
+        })
             .catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Could not copy to clipboard: ${err.message}`);
         })
@@ -46,7 +49,7 @@ const RenderQueueCopyToClipboard = ({ job }) => {
                 id: String(Math.random()),
             });
         });
-    }, [job.outName]);
+    }, [job.binariesDirectory, 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

@@ -82,8 +82,9 @@ export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
 export declare const openInFileExplorer: ({ directory }: {
     directory: string;
 }) => Promise<void>;
-export declare const copyToClipboard: ({ outName }: {
+export declare const copyToClipboard: ({ outName, binariesDirectory, }: {
     outName: string;
+    binariesDirectory: string | null;
 }) => Promise<void>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("@remotion/studio-shared").CancelRenderResponse>;

package/dist/components/RenderQueue/actions.js

@@ -140,9 +140,10 @@ const openInFileExplorer = ({ directory }) => {
     return callApi('/api/open-in-file-explorer', body);
 };
 exports.openInFileExplorer = openInFileExplorer;
-const copyToClipboard = ({ outName }) => {
+const copyToClipboard = ({ outName, binariesDirectory, }) => {
     const body = {
         outName,
+        binariesDirectory,
     };
     return callApi('/api/copy-still-to-clipboard', body);
 };

package/dist/components/Timeline/MaxTimelineTracks.js

@@ -4,7 +4,8 @@ exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = e
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined'
+exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined' ||
+    process.env.MAX_TIMELINE_TRACKS === null
     ? studio_shared_1.DEFAULT_TIMELINE_TRACKS
     : Number(process.env.MAX_TIMELINE_TRACKS);
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;

package/dist/components/utils.d.ts

@@ -0,0 +1 @@
+export declare const handleUploadFile: (file: File, assetPath: string) => Promise<void>;

package/dist/components/utils.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleUploadFile = void 0;
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const handleUploadFile = async (file, assetPath) => {
+    var _a, _b, _c, _d;
+    if (!file) {
+        (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+            content: `Please select a file first!`,
+            created: Date.now(),
+            duration: 3000,
+            id: String(Math.random()),
+        });
+        return;
+    }
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('assetPath', assetPath);
+    try {
+        const response = await fetch('/api/add-asset', {
+            method: 'POST',
+            body: formData,
+        });
+        if (response.ok) {
+            (_b = NotificationCenter_1.notificationCenter.current) === null || _b === void 0 ? void 0 : _b.addNotification({
+                content: `File uploaded successfully`,
+                created: Date.now(),
+                duration: 3000,
+                id: String(Math.random()),
+            });
+        }
+        else {
+            const jsonResponse = await response.json();
+            (_c = NotificationCenter_1.notificationCenter.current) === null || _c === void 0 ? void 0 : _c.addNotification({
+                content: `Upload failed: ${jsonResponse.error}`,
+                created: Date.now(),
+                duration: 3000,
+                id: String(Math.random()),
+            });
+        }
+    }
+    catch (error) {
+        (_d = NotificationCenter_1.notificationCenter.current) === null || _d === void 0 ? void 0 : _d.addNotification({
+            content: `Error during upload: ${error}`,
+            created: Date.now(),
+            duration: 3000,
+            id: String(Math.random()),
+        });
+    }
+};
+exports.handleUploadFile = handleUploadFile;

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

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

package/dist/helpers/mobile-layout.d.ts

@@ -0,0 +1 @@
+export declare const useMobileLayout: () => boolean;

package/dist/helpers/mobile-layout.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileLayout = void 0;
+const use_el_size_1 = require("./use-el-size");
+const useMobileLayout = () => {
+    var _a;
+    const containerSize = (0, use_el_size_1.useElementSize)(typeof document === 'undefined' ? null : document.body);
+    return ((_a = containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) !== null && _a !== void 0 ? _a : Infinity) < 900;
+};
+exports.useMobileLayout = useMobileLayout;

package/dist/helpers/render-modal-sections.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';

package/dist/helpers/use-el-size.d.ts

@@ -0,0 +1,5 @@
+export type Size = {
+    width: number;
+    height: number;
+};
+export declare const useElementSize: (ref: HTMLElement | null) => Size | null;

package/dist/helpers/use-el-size.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementSize = void 0;
+const react_1 = require("react");
+const useElementSize = (ref) => {
+    const [size, setSize] = (0, react_1.useState)(null);
+    const observer = (0, react_1.useMemo)(() => {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        return new ResizeObserver((entries) => {
+            setSize({
+                width: entries[0].contentRect.width,
+                height: entries[0].contentRect.height,
+            });
+        });
+    }, []);
+    const updateSize = (0, react_1.useCallback)(() => {
+        if (ref === null) {
+            return;
+        }
+        const rect = ref.getClientRects();
+        setSize({
+            width: rect[0].width,
+            height: rect[0].height,
+        });
+    }, [ref]);
+    (0, react_1.useEffect)(() => {
+        updateSize();
+        if (!observer) {
+            return;
+        }
+        if (ref) {
+            observer.observe(ref);
+        }
+        return () => {
+            if (ref) {
+                observer.unobserve(ref);
+            }
+        };
+    }, [observer, ref, updateSize]);
+    return size;
+};
+exports.useElementSize = useElementSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.118",
+  "version": "4.0.120",
   "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.118",
-    "@remotion/player": "4.0.118",
-    "@remotion/media-utils": "4.0.118",
-    "@remotion/studio-shared": "4.0.118",
-    "@remotion/renderer": "4.0.118"
+    "remotion": "4.0.120",
+    "@remotion/player": "4.0.120",
+    "@remotion/media-utils": "4.0.120",
+    "@remotion/renderer": "4.0.120",
+    "@remotion/studio-shared": "4.0.120"
   },
   "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.118"
+    "@remotion/zod-types": "4.0.120"
   },
   "publishConfig": {
     "access": "public"