@remotion/studio 4.0.179 → 4.0.180

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.178 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.179 build /Users/jonathanburger/remotion/packages/studio
 > bun --env-file=../.env.bundle bundle.ts
 

package/dist/components/InitialCompositionLoader.js

@@ -10,7 +10,7 @@ const folders_1 = require("../state/folders");
 const sidebar_1 = require("../state/sidebar");
 const CompositionSelector_1 = require("./CompositionSelector");
 const ExplorerPanel_1 = require("./ExplorerPanel");
-const ZoomPersistor_1 = require("./ZoomPersistor");
+const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
 const useSelectAsset = () => {
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
@@ -73,7 +73,7 @@ const InitialCompositionLoader = () => {
         if (canvasContent) {
             return;
         }
-        const canvasContentFromUrl = (0, ZoomPersistor_1.deriveCanvasContentFromUrl)();
+        const canvasContentFromUrl = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();
         if (canvasContentFromUrl && canvasContentFromUrl.type === 'composition') {
             const exists = compositions.find((c) => c.id === canvasContentFromUrl.compositionId);
             if (exists) {
@@ -101,7 +101,7 @@ const InitialCompositionLoader = () => {
     ]);
     (0, react_1.useEffect)(() => {
         const onchange = () => {
-            const newCanvas = (0, ZoomPersistor_1.deriveCanvasContentFromUrl)();
+            const newCanvas = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();
             if (newCanvas && newCanvas.type === 'composition') {
                 const newComp = (0, url_state_1.getRoute)().substring(1);
                 const exists = compositions.find((c) => c.id === newComp);

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)";
+}) => "rgba(255, 255, 255, 0.05)" | "rgba(0, 0, 0, 0.6)" | "hsla(0, 0%, 100%, 0.15)" | "#ff3232" | "#f1c40f";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/PreviewToolbar.js

@@ -4,6 +4,7 @@ exports.PreviewToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const check_fullscreen_support_1 = require("../helpers/check-fullscreen-support");
 const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const timeline_layout_1 = require("../helpers/timeline-layout");
@@ -49,7 +50,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
-    const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
+    const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null, isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 })] })) : null, (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), readOnlyStudio ? null : (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/components/ZoomPersistor.d.ts

@@ -1,5 +1,3 @@
 import type React from 'react';
-import type { CanvasContent } from 'remotion';
 export declare const getZoomFromLocalStorage: () => Record<string, number>;
-export declare const deriveCanvasContentFromUrl: () => CanvasContent | null;
 export declare const ZoomPersistor: React.FC;

package/dist/components/ZoomPersistor.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomPersistor = exports.deriveCanvasContentFromUrl = exports.getZoomFromLocalStorage = void 0;
+exports.ZoomPersistor = exports.getZoomFromLocalStorage = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const url_state_1 = require("../helpers/url-state");
 const timeline_zoom_1 = require("../state/timeline-zoom");
+const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
 const makeKey = () => {
     return `remotion.zoom-map`;
 };
@@ -16,35 +16,11 @@ const getZoomFromLocalStorage = () => {
     return zoom ? JSON.parse(zoom) : {};
 };
 exports.getZoomFromLocalStorage = getZoomFromLocalStorage;
-const deriveCanvasContentFromUrl = () => {
-    const substrings = (0, url_state_1.getRoute)().split('/').filter(Boolean);
-    const lastPart = substrings[substrings.length - 1];
-    if (substrings[0] === 'assets') {
-        return {
-            type: 'asset',
-            asset: decodeURIComponent((0, url_state_1.getRoute)().substring('/assets/'.length)),
-        };
-    }
-    if (substrings[0] === 'outputs') {
-        return {
-            type: 'output',
-            path: decodeURIComponent((0, url_state_1.getRoute)().substring('/outputs/'.length)),
-        };
-    }
-    if (lastPart) {
-        return {
-            type: 'composition',
-            compositionId: lastPart,
-        };
-    }
-    return null;
-};
-exports.deriveCanvasContentFromUrl = deriveCanvasContentFromUrl;
 const ZoomPersistor = () => {
     const [playing] = remotion_1.Internals.Timeline.usePlayingState();
     const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const urlState = (0, exports.deriveCanvasContentFromUrl)();
+    const urlState = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();
     const isActive = urlState &&
         urlState.type === 'composition' &&
         canvasContent &&

package/dist/components/load-canvas-content-from-url.d.ts

@@ -0,0 +1,2 @@
+import type { CanvasContent } from 'remotion';
+export declare const deriveCanvasContentFromUrl: () => CanvasContent | null;

package/dist/components/load-canvas-content-from-url.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deriveCanvasContentFromUrl = void 0;
+const url_state_1 = require("../helpers/url-state");
+const deriveCanvasContentFromUrl = () => {
+    const route = (0, url_state_1.getRoute)();
+    const substrings = route.split('/').filter(Boolean);
+    // CJK-named composition IDs are not automatically reselected after page refresh
+    const lastPart = substrings[substrings.length - 1];
+    if (substrings[0] === 'assets') {
+        return {
+            type: 'asset',
+            asset: decodeURIComponent(route.substring('/assets/'.length)),
+        };
+    }
+    if (substrings[0] === 'outputs') {
+        return {
+            type: 'output',
+            path: decodeURIComponent(route.substring('/outputs/'.length)),
+        };
+    }
+    if (lastPart) {
+        return {
+            type: 'composition',
+            compositionId: decodeURIComponent(lastPart),
+        };
+    }
+    return null;
+};
+exports.deriveCanvasContentFromUrl = deriveCanvasContentFromUrl;

package/dist/esm/internals.mjs

@@ -498,40 +498,43 @@ var getRoute = () => {
   return window.location.pathname;
 };
 
-// src/components/ZoomPersistor.tsx
-var makeKey = () => {
-  return `remotion.zoom-map`;
-};
-var persistCurrentZoom = (zoom) => {
-  localStorage.setItem(makeKey(), JSON.stringify(zoom));
-};
-var getZoomFromLocalStorage = () => {
-  const zoom = localStorage.getItem(makeKey());
-  return zoom ? JSON.parse(zoom) : {};
-};
+// src/components/load-canvas-content-from-url.ts
 var deriveCanvasContentFromUrl = () => {
-  const substrings = getRoute().split("/").filter(Boolean);
+  const route = getRoute();
+  const substrings = route.split("/").filter(Boolean);
   const lastPart = substrings[substrings.length - 1];
   if (substrings[0] === "assets") {
     return {
       type: "asset",
-      asset: decodeURIComponent(getRoute().substring("/assets/".length))
+      asset: decodeURIComponent(route.substring("/assets/".length))
     };
   }
   if (substrings[0] === "outputs") {
     return {
       type: "output",
-      path: decodeURIComponent(getRoute().substring("/outputs/".length))
+      path: decodeURIComponent(route.substring("/outputs/".length))
     };
   }
   if (lastPart) {
     return {
       type: "composition",
-      compositionId: lastPart
+      compositionId: decodeURIComponent(lastPart)
     };
   }
   return null;
 };
+
+// src/components/ZoomPersistor.tsx
+var makeKey = () => {
+  return `remotion.zoom-map`;
+};
+var persistCurrentZoom = (zoom) => {
+  localStorage.setItem(makeKey(), JSON.stringify(zoom));
+};
+var getZoomFromLocalStorage = () => {
+  const zoom = localStorage.getItem(makeKey());
+  return zoom ? JSON.parse(zoom) : {};
+};
 var ZoomPersistor = () => {
   const [playing] = Internals2.Timeline.usePlayingState();
   const { zoom } = useContext2(TimelineZoomCtx);
@@ -6042,6 +6045,11 @@ var EditorZoomGesturesContext = createContext13({
   }
 });
 
+// src/helpers/check-fullscreen-support.ts
+var checkFullscreenSupport = () => {
+  return document.fullscreenEnabled || document.webkitFullscreenEnabled;
+};
+
 // src/helpers/get-git-menu-item.ts
 var getGitSourceName = (gitSource) => {
   if (gitSource.type === "github") {
@@ -6258,7 +6266,7 @@ var useMenuStructure = (closeMenu, readOnlyStudio) => {
     sidebarCollapsedStateRight
   } = useContext18(SidebarContext);
   const sizes = getUniqueSizes(size);
-  const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
+  const isFullscreenSupported = checkFullscreenSupport();
   const mobileLayout = useMobileLayout();
   const structure = useMemo36(() => {
     let struct = [
@@ -16856,7 +16864,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const isVideoComposition = useIsVideoComposition();
   const isStill = useIsStill();
   const [loop3, setLoop] = useState50(loadLoopOption());
-  const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
+  const isFullscreenSupported = checkFullscreenSupport();
   return jsxs76("div", {
     style: container31,
     className: "css-reset",

package/dist/helpers/check-fullscreen-support.d.ts

@@ -0,0 +1 @@
+export declare const checkFullscreenSupport: () => any;

package/dist/helpers/check-fullscreen-support.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkFullscreenSupport = void 0;
+const checkFullscreenSupport = () => {
+    return (document.fullscreenEnabled ||
+        // @ts-expect-error Types not defined
+        document.webkitFullscreenEnabled);
+};
+exports.checkFullscreenSupport = checkFullscreenSupport;

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

package/dist/helpers/use-menu-structure.js

@@ -19,6 +19,7 @@ const editor_rulers_1 = require("../state/editor-rulers");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const sidebar_1 = require("../state/sidebar");
+const check_fullscreen_support_1 = require("./check-fullscreen-support");
 const client_id_1 = require("./client-id");
 const get_git_menu_item_1 = require("./get-git-menu-item");
 const mobile_layout_1 = require("./mobile-layout");
@@ -116,7 +117,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
-    const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
+    const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const structure = (0, react_1.useMemo)(() => {
         let struct = [

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.179",
+  "version": "4.0.180",
   "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.179",
-    "@remotion/renderer": "4.0.179",
-    "@remotion/player": "4.0.179",
-    "@remotion/media-utils": "4.0.179",
-    "@remotion/studio-shared": "4.0.179"
+    "remotion": "4.0.180",
+    "@remotion/media-utils": "4.0.180",
+    "@remotion/player": "4.0.180",
+    "@remotion/studio-shared": "4.0.180",
+    "@remotion/renderer": "4.0.180"
   },
   "devDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "@types/semver": "^7.3.4",
     "zod": "3.22.3",
-    "@remotion/zod-types": "4.0.179"
+    "@remotion/zod-types": "4.0.180"
   },
   "publishConfig": {
     "access": "public"