@remotion/studio 4.0.109 → 4.0.111

package/.turbo/turbo-build.log

@@ -1,4 +1,5 @@
-
-> @remotion/studio@4.0.108 build /Users/jonathanburger/remotion/packages/studio
-> tsc -d
-
+
+
+> @remotion/studio@4.0.110 build /Users/jonathanburger/remotion/packages/studio
+> tsc -d
+

package/dist/components/Canvas.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
@@ -16,7 +15,6 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
-const preview_size_1 = require("../state/preview-size");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
@@ -37,7 +35,7 @@ const resetZoom = {
 };
 const ZOOM_PX_FACTOR = 0.003;
 const Canvas = ({ canvasContent, size }) => {
-    const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { setSize, size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
@@ -72,7 +70,7 @@ const Canvas = ({ canvasContent, size }) => {
         }
         e.preventDefault();
         setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
+            const scale = remotion_1.Internals.calculateScale({
                 canvasSize: size,
                 compositionHeight: contentDimensions.height,
                 compositionWidth: contentDimensions.width,
@@ -168,7 +166,7 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
+            const scale = remotion_1.Internals.calculateScale({
                 canvasSize: size,
                 compositionHeight: contentDimensions.height,
                 compositionWidth: contentDimensions.width,
@@ -191,7 +189,7 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
+            const scale = remotion_1.Internals.calculateScale({
                 canvasSize: size,
                 compositionHeight: contentDimensions.height,
                 compositionWidth: contentDimensions.width,

package/dist/components/Editor.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const BUFFER_STATE_DELAY_IN_MILLISECONDS: number;
 export declare const Editor: React.FC<{
     Root: React.FC;
     readOnlyStudio: boolean;

package/dist/components/Editor.js

@@ -23,8 +23,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Editor = void 0;
+exports.Editor = exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
@@ -43,7 +44,16 @@ const background = {
     flexDirection: 'column',
     position: 'absolute',
 };
+const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
+exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS === 'undefined'
+    ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS
+    : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
 const Editor = ({ Root, readOnlyStudio, }) => {
+    const drawRef = (0, react_1.useRef)(null);
+    const size = player_1.PlayerInternals.useElementSize(drawRef, {
+        triggerOnWindowResize: false,
+        shouldApplyCssTransforms: true,
+    });
     (0, react_1.useEffect)(() => {
         if (readOnlyStudio) {
             return;
@@ -62,6 +72,15 @@ const Editor = ({ Root, readOnlyStudio, }) => {
     const onMounted = (0, react_1.useCallback)(() => {
         setCanvasMounted(true);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [canvasMounted ? (0, jsx_runtime_1.jsx)(Root, {}) : null, (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { onMounted: onMounted, readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio })] }) }));
+    const value = (0, react_1.useMemo)(() => {
+        if (!size) {
+            return null;
+        }
+        return {
+            type: 'canvas-size',
+            canvasSize: size,
+        };
+    }, [size]);
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [canvasMounted ? (0, jsx_runtime_1.jsx)(Root, {}) : null, (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { drawRef: drawRef, size: size, onMounted: onMounted, readOnlyStudio: readOnlyStudio, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }) }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio })] }) }));
 };
 exports.Editor = Editor;

package/dist/components/EditorContent.d.ts

@@ -1,5 +1,9 @@
+import type { Size } from '@remotion/player';
 import React from 'react';
 export declare const EditorContent: React.FC<{
     readOnlyStudio: boolean;
     onMounted: () => void;
+    drawRef: React.RefObject<HTMLDivElement>;
+    size: Size | null;
+    bufferStateDelayInMilliseconds: number;
 }>;

package/dist/components/EditorContent.js

@@ -19,11 +19,11 @@ const container = {
     flex: 1,
     height: 0,
 };
-const EditorContent = ({ readOnlyStudio, onMounted }) => {
+const EditorContent = ({ readOnlyStudio, onMounted, size, drawRef, bufferStateDelayInMilliseconds, }) => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     // Preventing multiple renders so the update check doesn't get rendered twice and needs to be aborted
     const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== 'composition';
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), onlyTopPanel ? ((0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { onMounted: onMounted, readOnlyStudio: readOnlyStudio })) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), onlyTopPanel ? ((0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { size: size, drawRef: drawRef, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, onMounted: onMounted, readOnlyStudio: readOnlyStudio })) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { size: size, drawRef: drawRef, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/EditorContexts.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorContexts = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const client_id_1 = require("../helpers/client-id");
 const folders_1 = require("../state/folders");
 const highest_z_index_1 = require("../state/highest-z-index");
@@ -12,13 +13,12 @@ const CheckerboardProvider_1 = require("./CheckerboardProvider");
 const get_zod_if_possible_1 = require("./get-zod-if-possible");
 const MediaVolumeProvider_1 = require("./MediaVolumeProvider");
 const ModalsProvider_1 = require("./ModalsProvider");
-const PlayerEmitterContext_1 = require("./PlayerEmitterContext");
 const context_1 = require("./RenderQueue/context");
 const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children, readOnlyStudio }) => {
-    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(ShowRulersProvider_1.ShowRulersProvider, { children: (0, jsx_runtime_1.jsx)(ShowGuidesProvider_1.ShowGuidesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(PlayerEmitterContext_1.PlayerEmitterContext, { children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(ShowRulersProvider_1.ShowRulersProvider, { children: (0, jsx_runtime_1.jsx)(ShowGuidesProvider_1.ShowGuidesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.EditorContexts = EditorContexts;

package/dist/components/FullscreenToggle.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FullScreenToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
-const preview_size_1 = require("../state/preview-size");
 const ControlButton_1 = require("./ControlButton");
 const accessibilityLabel = [
     'Enter fullscreen preview',
@@ -16,7 +16,7 @@ const accessibilityLabel = [
     .join(' ');
 const FullScreenToggle = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const { setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const onClick = (0, react_1.useCallback)(() => {
         var _a;
         (_a = canvas_ref_1.canvasRef.current) === null || _a === void 0 ? void 0 : _a.requestFullscreen();

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

package/dist/components/PlayPause.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const PlayPause: React.FC<{
     playbackRate: number;
     loop: boolean;
+    bufferStateDelayInMilliseconds: number;
 }>;

package/dist/components/PlayPause.js

@@ -24,10 +24,16 @@ const forwardBackStyle = {
     height: 16,
     color: 'white',
 };
-const PlayPause = ({ playbackRate, loop }) => {
+const iconButton = {
+    height: 14,
+    width: 14,
+    color: 'white',
+};
+const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, isFirstFrame, remotionInternal_currentFrameRef, } = player_1.PlayerInternals.usePlayer();
+    const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
+    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, isFirstFrame, remotionInternal_currentFrameRef, emitter, } = player_1.PlayerInternals.usePlayer();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
@@ -197,14 +203,39 @@ const PlayPause = ({ playbackRate, loop }) => {
         onEnter,
         onSpace,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: backStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
-                        height: 14,
-                        width: 14,
-                        color: 'white',
-                    } })) : ((0, jsx_runtime_1.jsx)(play_1.Play, { style: {
-                        height: 14,
-                        width: 14,
-                        color: 'white',
-                    } })) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: (0, jsx_runtime_1.jsx)(step_forward_1.StepForward, { style: forwardBackStyle }) })] }));
+    (0, react_1.useEffect)(() => {
+        let timeout = null;
+        let stopped = false;
+        const onBuffer = () => {
+            requestAnimationFrame(() => {
+                timeout = setTimeout(() => {
+                    if (!stopped) {
+                        setShowBufferState(true);
+                    }
+                }, bufferStateDelayInMilliseconds);
+            });
+        };
+        const onResume = () => {
+            requestAnimationFrame(() => {
+                setShowBufferState(false);
+                stopped = true;
+                if (timeout) {
+                    clearTimeout(timeout);
+                }
+            });
+        };
+        emitter.addEventListener('waiting', onBuffer);
+        emitter.addEventListener('resume', onResume);
+        return () => {
+            emitter.removeEventListener('waiting', onBuffer);
+            emitter.removeEventListener('resume', onResume);
+            setShowBufferState(false);
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+            stopped = true;
+        };
+    }, [emitter]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: backStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? (showBufferIndicator ? ((0, jsx_runtime_1.jsx)(player_1.PlayerInternals.BufferingIndicator, { type: "studio" })) : ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: iconButton }))) : ((0, jsx_runtime_1.jsx)(play_1.Play, { style: iconButton })) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: (0, jsx_runtime_1.jsx)(step_forward_1.StepForward, { style: forwardBackStyle }) })] }));
 };
 exports.PlayPause = PlayPause;

package/dist/components/Preview.js

@@ -8,7 +8,6 @@ const remotion_1 = require("remotion");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const colors_1 = require("../helpers/colors");
 const checkerboard_1 = require("../state/checkerboard");
-const preview_size_1 = require("../state/preview-size");
 const RenderPreview_1 = require("./RenderPreview");
 const Spinner_1 = require("./Spinner");
 const StaticFilePreview_1 = require("./StaticFilePreview");
@@ -80,7 +79,7 @@ const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetad
 };
 exports.VideoPreview = VideoPreview;
 const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
-    const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { centerX, centerY, yCorrection, xCorrection, scale } = (0, react_1.useMemo)(() => {
         if (contentDimensions === 'none') {
             return {

package/dist/components/PreviewToolbar.d.ts

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

package/dist/components/PreviewToolbar.js

@@ -42,7 +42,7 @@ const sideContainer = {
 const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
-const PreviewToolbar = ({ readOnlyStudio }) => {
+const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const { playbackRate, setPlaybackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
@@ -50,6 +50,6 @@ const PreviewToolbar = ({ readOnlyStudio }) => {
     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;
-    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, { 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 }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, 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, {})] }));
+    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 }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, 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/SizeSelector.d.ts

@@ -1,5 +1,5 @@
-import type { PreviewSize } from '@remotion/player';
 import React from 'react';
+import type { PreviewSize } from 'remotion';
 export declare const getPreviewSizeLabel: (previewSize: PreviewSize) => string;
 export declare const getUniqueSizes: (size: PreviewSize) => PreviewSize[];
 export declare const SizeSelector: React.FC;

package/dist/components/SizeSelector.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const Checkmark_1 = require("../icons/Checkmark");
-const preview_size_1 = require("../state/preview-size");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
 const Preview_1 = require("./Preview");
@@ -69,7 +68,7 @@ const getUniqueSizes = (size) => {
 exports.getUniqueSizes = getUniqueSizes;
 const zoomableFileTypes = ['video', 'image'];
 const SizeSelector = () => {
-    const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { size, setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const style = (0, react_1.useMemo)(() => {
         return {

package/dist/components/Timeline/Timeline.js

@@ -47,7 +47,7 @@ const Timeline = () => {
     }, [sequences, videoConfig]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
     const filtered = (0, react_1.useMemo)(() => {
-        const withoutHidden = timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t, timeline));
+        const withoutHidden = timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t));
         const withoutAfter = withoutHidden.filter((t) => {
             return t.sequence.from <= durationInFrames && t.sequence.duration > 0;
         });

package/dist/components/Timeline/TimelineTracks.js

@@ -30,7 +30,7 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
         };
     }, []);
     return ((0, jsx_runtime_1.jsxs)("div", { style: timelineStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                        if ((0, is_collapsed_1.isTrackHidden)(track, timeline)) {
+                        if ((0, is_collapsed_1.isTrackHidden)(track)) {
                             return null;
                         }
                         return ((0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }, track.sequence.id));

package/dist/components/Timeline/is-collapsed.d.ts

@@ -1,2 +1,2 @@
 import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const isTrackHidden: (track: TrackWithHash, allTracks: TrackWithHash[]) => boolean;
+export declare const isTrackHidden: (track: TrackWithHash) => boolean;

package/dist/components/Timeline/is-collapsed.js

@@ -1,16 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isTrackHidden = void 0;
-const isTrackHidden = (track, allTracks) => {
+const isTrackHidden = (track) => {
     if (!track.sequence.parent) {
         return false;
     }
-    const parent = allTracks.find((t) => t.sequence.id === track.sequence.parent);
-    // Due to effects and conditional `showInTimeline`, a parent
-    // may not exist in the `allTracks` array.
-    if (!parent) {
-        return true;
-    }
-    return (0, exports.isTrackHidden)(parent, allTracks);
+    return !track.sequence.showInTimeline;
 };
 exports.isTrackHidden = isTrackHidden;

package/dist/components/TopPanel.d.ts

@@ -1,6 +1,10 @@
+import type { Size } from '@remotion/player';
 import React from 'react';
 export declare const useResponsiveSidebarStatus: () => 'collapsed' | 'expanded';
 export declare const TopPanel: React.FC<{
     readOnlyStudio: boolean;
     onMounted: () => void;
+    size: Size | null;
+    drawRef: React.RefObject<HTMLDivElement>;
+    bufferStateDelayInMilliseconds: number;
 }>;

package/dist/components/TopPanel.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const editor_rulers_1 = require("../state/editor-rulers");
@@ -44,10 +43,9 @@ const useResponsiveSidebarStatus = () => {
     return actualStateLeft;
 };
 exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
-const TopPanel = ({ readOnlyStudio, onMounted }) => {
+const TopPanel = ({ readOnlyStudio, onMounted, size, drawRef, bufferStateDelayInMilliseconds, }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
-    const ref = (0, react_1.useRef)(null);
     const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
     const actualStateRight = (0, react_1.useMemo)(() => {
         if (sidebarCollapsedStateRight === 'collapsed') {
@@ -55,10 +53,6 @@ const TopPanel = ({ readOnlyStudio, onMounted }) => {
         }
         return 'expanded';
     }, [sidebarCollapsedStateRight]);
-    const size = player_1.PlayerInternals.useElementSize(ref, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
     const hasSize = size !== null;
     (0, react_1.useEffect)(() => {
         onMounted();
@@ -75,6 +69,6 @@ const TopPanel = ({ readOnlyStudio, onMounted }) => {
     const onCollapseRight = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: canvasContainerStyle, children: size ? (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, { size: size }) : null }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { ref: drawRef, style: canvasContainerStyle, children: size ? (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, { size: size }) : null }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

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) => "black" | "white";
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "white" | "black";
 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/get-effective-translation.d.ts

@@ -1,4 +1,5 @@
-import type { Size, Translation } from '@remotion/player';
+import type { Size } from '@remotion/player';
+import type { Translation } from 'remotion';
 export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }: {
     canvasSize: Size;
     scale: number;

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-menu-structure.js

@@ -18,7 +18,6 @@ const editor_guides_1 = require("../state/editor-guides");
 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 preview_size_1 = require("../state/preview-size");
 const sidebar_1 = require("../state/sidebar");
 const client_id_1 = require("./client-id");
 const get_git_menu_item_1 = require("./get-git-menu-item");
@@ -156,7 +155,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
-    const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { size, setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     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);

package/dist/helpers/use-studio-canvas-dimensions.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStudioCanvasDimensions = void 0;
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
-const preview_size_1 = require("../state/preview-size");
+const remotion_1 = require("remotion");
 const useStudioCanvasDimensions = ({ canvasSize, contentDimensions, assetMetadata, }) => {
-    const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { centerX, centerY, scale } = (0, react_1.useMemo)(() => {
         if (contentDimensions === 'none' ||
             contentDimensions === null ||

package/dist/state/preview-size.d.ts

@@ -1,11 +1,4 @@
-import type { PreviewSize } from '@remotion/player';
 import React from 'react';
-type PreviewSizeCtx = {
-    size: PreviewSize;
-    setSize: (cb: (oldSize: PreviewSize) => PreviewSize) => void;
-};
-export declare const PreviewSizeContext: React.Context<PreviewSizeCtx>;
 export declare const PreviewSizeProvider: React.FC<{
     children: React.ReactNode;
 }>;
-export {};

package/dist/state/preview-size.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewSizeProvider = exports.PreviewSizeContext = void 0;
+exports.PreviewSizeProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const editor_zoom_gestures_1 = require("./editor-zoom-gestures");
 const key = 'remotion.previewSize';
 const persistPreviewSizeOption = (option) => {
@@ -21,10 +22,6 @@ const loadPreviewSizeOption = () => {
     }
     return JSON.parse(item);
 };
-exports.PreviewSizeContext = (0, react_1.createContext)({
-    setSize: () => undefined,
-    size: loadPreviewSizeOption(),
-});
 const PreviewSizeProvider = ({ children }) => {
     const [size, setSizeState] = (0, react_1.useState)(() => loadPreviewSizeOption());
     const [translation, setTranslation] = (0, react_1.useState)(() => {
@@ -57,6 +54,6 @@ const PreviewSizeProvider = ({ children }) => {
             setTranslation,
         };
     }, [editorZoomGestures, size, setSize, translation]);
-    return ((0, jsx_runtime_1.jsx)(exports.PreviewSizeContext.Provider, { value: previewSizeCtx, children: children }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.PreviewSizeContext.Provider, { value: previewSizeCtx, children: children }));
 };
 exports.PreviewSizeProvider = PreviewSizeProvider;

package/package.json

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