@remotion/studio 4.0.516 → 4.0.517

package/dist/components/InspectorPanel/common.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorQuickActionsSection = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorQuickActionsSection = exports.InspectorSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
@@ -14,15 +14,11 @@ const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const styles_1 = require("./styles");
 const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.sectionHeader, children: children });
 exports.InspectorSectionHeader = InspectorSectionHeader;
-const InspectorSectionDivider = () => (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }));
-exports.InspectorSectionDivider = InspectorSectionDivider;
-const InspectorQuickActionsSection = ({ children }) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-        jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: children })
-    ] }));
+const InspectorQuickActionsSection = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: children });
 exports.InspectorQuickActionsSection = InspectorQuickActionsSection;
 const InspectorSection = ({ children, header }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: header }), children === null ? null : (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionBody, children: children }))] }));
+            jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: header }), children === null ? null : (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionBody, children: children }))] }));
 };
 exports.InspectorSection = InspectorSection;
 const backArrowIcon = {

package/dist/components/InspectorPanel/inspector-selection.d.ts

@@ -2,9 +2,9 @@ import { type TimelineSelection } from '../Timeline/TimelineSelection';
 export type SequenceSectionSelection = Extract<TimelineSelection, {
     type: 'sequence' | 'sequence-prop' | 'sequence-all-effects' | 'sequence-effect' | 'sequence-effect-prop';
 }>;
-export declare const isSequenceSectionSelection: (selection: TimelineSelection) => selection is SequenceSectionSelection;
+export declare const isSequenceSectionSelection: (selection: import("@remotion/canvas").CanvasSelectionItem) => selection is SequenceSectionSelection;
 type SameSequenceInspectorSelection = Extract<TimelineSelection, {
     type: 'sequence-prop' | 'sequence-effect' | 'sequence-effect-prop';
 }>;
-export declare const getSameSequenceInspectorSelection: (selections: readonly TimelineSelection[]) => SameSequenceInspectorSelection | null;
+export declare const getSameSequenceInspectorSelection: (selections: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SameSequenceInspectorSelection | null;
 export {};

package/dist/components/InspectorPanel/styles.d.ts

@@ -4,7 +4,6 @@ export declare const scrollableContainer: React.CSSProperties;
 export declare const compositionDefaultPropsSection: React.CSSProperties;
 export declare const compositionVisualControlsSection: React.CSSProperties;
 export declare const inspectorOverviewSection: React.CSSProperties;
-export declare const inspectorSectionDivider: React.CSSProperties;
 export declare const sequenceHeaderDivider: React.CSSProperties;
 export declare const sectionHeader: React.CSSProperties;
 export declare const inspectorSectionBody: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorQuickActionsSection = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorQuickActionsSection = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const layout_1 = require("../layout");
 exports.container = {
     backgroundColor: colors_1.BACKGROUND,
     color: colors_1.WHITE,
@@ -29,9 +30,6 @@ exports.inspectorOverviewSection = {
     display: 'flex',
     flexDirection: 'column',
 };
-exports.inspectorSectionDivider = {
-    borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
-};
 exports.sequenceHeaderDivider = {
     backgroundColor: colors_1.LINE_COLOR,
     flexShrink: 0,
@@ -161,6 +159,7 @@ exports.detailRow = {
     display: 'flex',
     gap: 12,
     justifyContent: 'space-between',
+    minHeight: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
 };
 exports.detailLabel = {
     color: colors_1.LIGHT_TEXT,

package/dist/components/InspectorPanel/use-track-for-selection.d.ts

@@ -1,2 +1 @@
-import type { TimelineSelection } from '../Timeline/TimelineSelection';
-export declare const useTrackForSelection: (selection: TimelineSelection) => import("../../helpers/get-timeline-sequence-sort-key").TimelineTrackData | null;
+export declare const useTrackForSelection: (selection: import("@remotion/canvas").CanvasSelectionItem) => import("@remotion/canvas").TimelineTrackData | null;

package/dist/components/InspectorSequenceSection.d.ts

@@ -3,11 +3,10 @@ import { type TSequence } from 'remotion';
 import type { CodePosition } from '../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import { type FlatTreeRow } from '../helpers/timeline-layout';
-import { type TimelineSelection } from './Timeline/TimelineSelection';
 type SequenceWithControls = TSequence & {
     readonly controls: NonNullable<TSequence['controls']>;
 };
-export declare const getInspectorSelectableItems: (rows: readonly FlatTreeRow[]) => TimelineSelection[];
+export declare const getInspectorSelectableItems: (rows: readonly FlatTreeRow[]) => import("@remotion/canvas").CanvasSelectionItem[];
 export declare const hasSequenceControls: (sequence: TSequence) => sequence is SequenceWithControls;
 export declare const InspectorSequenceSection: React.FC<{
     readonly sequence: SequenceWithControls;

package/dist/components/InspectorSourceLocation.js

@@ -82,7 +82,7 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size =
         return null;
     }
     if (size === 'quick-action') {
-        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), size: "compact", title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
+        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
     }
     return (jsx_runtime_1.jsxs("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
         ] }));

package/dist/components/Menu/MenuItem.js

@@ -12,20 +12,29 @@ const colors_1 = require("../../helpers/colors");
 const hoverable_1 = require("../../helpers/hoverable");
 const pointer_session_1 = require("../../helpers/pointer-session");
 const z_index_1 = require("../../state/z-index");
+const menu_toolbar_height_1 = require("../menu-toolbar-height");
 const MenuContent_1 = require("../NewComposition/MenuContent");
 const is_menu_item_1 = require("./is-menu-item");
 const portals_1 = require("./portals");
 const styles_1 = require("./styles");
+const MENU_ITEM_HEIGHT = 24;
+const MENU_ITEM_VERTICAL_MARGIN = (menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT - MENU_ITEM_HEIGHT) / 2;
 const container = {
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
     fontSize: 13,
-    paddingLeft: 10,
-    paddingRight: 10,
+    height: MENU_ITEM_HEIGHT,
+    justifyContent: 'center',
+    paddingLeft: 8,
+    paddingRight: 8,
     cursor: 'default',
-    paddingTop: 6,
-    paddingBottom: 6,
+    paddingTop: 0,
+    paddingBottom: 0,
     userSelect: 'none',
     WebkitUserSelect: 'none',
     border: 'none',
+    borderRadius: 3,
 };
 const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered, onItemQuit, onPreviousMenu, onNextMenu, menu, }) => {
     const ref = (0, react_1.useRef)(null);
@@ -58,7 +67,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
         return {
             ...styles_1.menuContainerTowardsBottom,
             left: size.left,
-            top: size.top + size.height,
+            top: size.top + size.height + MENU_ITEM_VERTICAL_MARGIN,
         };
     }, [selected, size]);
     // Not for styling (which is done via CSS :hover), but for switching
@@ -105,7 +114,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
         var _a, _b;
         return {
             ...styles_1.outerPortal,
-            top: ((_a = size === null || size === void 0 ? void 0 : size.top) !== null && _a !== void 0 ? _a : 0) + ((_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : 0),
+            top: ((_a = size === null || size === void 0 ? void 0 : size.top) !== null && _a !== void 0 ? _a : 0) + ((_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : 0) + MENU_ITEM_VERTICAL_MARGIN,
         };
     }, [size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/MenuToolbar.js

@@ -36,6 +36,10 @@ const row = {
 const flex = {
     flex: 1,
 };
+const menuItems = {
+    display: 'inline-flex',
+    height: 24,
+};
 const MenuToolbar = ({ readOnlyStudio }) => {
     const [selected, setSelected] = (0, react_1.useState)(null);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -126,9 +130,9 @@ const MenuToolbar = ({ readOnlyStudio }) => {
         ? 'Quick Switcher'
         : `Quick Switcher (${ShortcutHint_1.cmdOrCtrlCharacter}+K)`;
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), structure.map((s) => {
-                        return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                    }), readOnlyStudio || browserStudioOperations ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
+            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), jsx_runtime_1.jsx("div", { style: menuItems, children: structure.map((s) => {
+                            return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
+                        }) }), readOnlyStudio || browserStudioOperations ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
                 ] })
         ] }));
 };

package/dist/components/Modals.js

@@ -13,6 +13,7 @@ const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
+const ElementLibraryModal_1 = require("./ElementLibraryModal");
 const FixComputedValueModal_1 = require("./FixComputedValueModal");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
@@ -58,6 +59,6 @@ const Modals = ({ readOnlyStudio }) => {
                     modalContextType.initialTab === 'packages' ||
                     modalContextType.initialTab === 'shortcuts') ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/PlaybackRateSelector.js

@@ -57,7 +57,7 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
         playbackRate,
         setPlaybackRate,
     });
-    if (isStill || canvasContent === null || canvasContent.type === 'asset') {
+    if (isStill || canvasContent === null) {
         return null;
     }
     return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));

package/dist/components/Preview.js

@@ -2,15 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const media_1 = require("@remotion/media");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
+const add_asset_cache_bust_1 = require("../helpers/add-asset-cache-bust");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
+const audio_1 = require("../icons/audio");
 const checkerboard_1 = require("../state/checkerboard");
+const editor_pixel_grid_1 = require("../state/editor-pixel-grid");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const RenderPreview_1 = require("./RenderPreview");
 const SelectedOutlineOverlay_1 = require("./SelectedOutlineOverlay");
@@ -38,9 +43,13 @@ const assetMetadataErrorContainer = {
     overflowY: 'auto',
 };
 const checkerboardSize = 49;
+const PIXEL_GRID_MIN_SCALE = 4;
 const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
+        // Avoid the background bleeding through opaque compositions at fractional
+        // scales due to Chromium compositing the child and background together.
+        willChange: 'transform',
         marginLeft: options.xCorrection,
         marginTop: options.yCorrection,
         width: options.width,
@@ -54,6 +63,20 @@ const containerStyle = (options) => {
         backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
+const PixelGrid = ({ scale }) => {
+    const { editorShowPixelGrid } = (0, react_1.useContext)(editor_pixel_grid_1.EditorShowPixelGridContext);
+    if (!editorShowPixelGrid || scale < PIXEL_GRID_MIN_SCALE) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("div", { "aria-hidden": "true", className: "css-reset", "data-testid": "pixel-grid", style: {
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            opacity: 0.35,
+            backgroundImage: `linear-gradient(to right, ${colors_1.RULER_COLOR} 1px, transparent 1px), linear-gradient(to bottom, ${colors_1.RULER_COLOR} 1px, transparent 1px)`,
+            backgroundSize: `${scale}px ${scale}px`,
+        } }));
+};
 const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata, onRetryAssetMetadata, }) => {
     if (assetMetadata && assetMetadata.type === 'not-found') {
         return (jsx_runtime_1.jsx("div", { style: centeredContainer, children: jsx_runtime_1.jsx("div", { style: label, children: "File does not exist" }) }));
@@ -61,7 +84,8 @@ const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetad
     if (assetMetadata && assetMetadata.type === 'metadata-error') {
         return (jsx_runtime_1.jsx("div", { style: assetMetadataErrorContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: assetMetadata.error, onRetry: onRetryAssetMetadata !== null && onRetryAssetMetadata !== void 0 ? onRetryAssetMetadata : null, calculateMetadata: false }, assetMetadata.error.stack) }));
     }
-    if (contentDimensions === null) {
+    if (contentDimensions === null ||
+        (canvasContent.type !== 'composition' && assetMetadata === null)) {
         return (jsx_runtime_1.jsx("div", { style: centeredContainer, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 24 }) }));
     }
     return (jsx_runtime_1.jsx(CompWhenItHasDimensions, { contentDimensions: contentDimensions, canvasSize: canvasSize, canvasContent: canvasContent, assetMetadata: assetMetadata }));
@@ -69,6 +93,7 @@ const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetad
 exports.VideoPreview = VideoPreview;
 const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
     const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
+    const { currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [canvasHovered, setCanvasHovered] = (0, react_1.useState)(false);
     const compositionContainerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -111,6 +136,17 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
                 previewSize: previewSize.size,
             });
     }, [canvasContent.type, canvasSize, contentDimensions, previewSize.size]);
+    const assetFileType = canvasContent.type === 'asset'
+        ? (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset)
+        : null;
+    const mediaCompositionFileType = (assetFileType === 'audio' || assetFileType === 'video') &&
+        (assetMetadata === null || assetMetadata === void 0 ? void 0 : assetMetadata.type) === 'found' &&
+        assetMetadata.mediaMetadata !== null &&
+        canvasContent.type === 'asset' &&
+        (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset &&
+        contentDimensions !== 'none'
+        ? assetFileType
+        : null;
     const outer = (0, react_1.useMemo)(() => {
         return {
             width: contentDimensions === 'none' ? '100%' : contentDimensions.width * scale,
@@ -123,9 +159,12 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
             left: centerX - previewSize.translation.x,
             top: centerY - previewSize.translation.y,
             overflow: canvasContent.type === 'composition' ? 'visible' : 'hidden',
-            justifyContent: canvasContent.type === 'asset' ? 'center' : 'flex-start',
+            justifyContent: canvasContent.type === 'asset' && mediaCompositionFileType === null
+                ? 'center'
+                : 'flex-start',
             alignItems: canvasContent.type === 'asset' &&
-                (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'audio'
+                mediaCompositionFileType === null &&
+                assetFileType === 'audio'
                 ? 'center'
                 : 'normal',
         };
@@ -137,8 +176,25 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         previewSize.translation.y,
         centerY,
         canvasContent,
+        mediaCompositionFileType,
+        assetFileType,
     ]);
     if (canvasContent.type === 'asset') {
+        if (mediaCompositionFileType !== null &&
+            (assetMetadata === null || assetMetadata === void 0 ? void 0 : assetMetadata.type) === 'found' &&
+            contentDimensions !== 'none') {
+            return (jsx_runtime_1.jsxs("div", { ref: compositionContainerRef, className: "remotion-studio-composition-container", style: outer, children: [mediaCompositionFileType === 'audio' ? (jsx_runtime_1.jsx(audio_1.AudioFileIcon, { "aria-label": "Audio asset", color: colors_1.LIGHT_TEXT, role: "img", style: {
+                            height: 64,
+                            left: '50%',
+                            opacity: 0.25,
+                            pointerEvents: 'none',
+                            position: 'absolute',
+                            top: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            width: 64,
+                        } })) : null, jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, offscreen: mediaCompositionFileType === 'audio', scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(AssetMediaComposition, { asset: canvasContent.asset, fetchedAt: assetMetadata.fetchedAt, fileType: mediaCompositionFileType })
+                ] }));
+        }
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(StaticFilePreview_1.StaticFilePreview, { assetMetadata: assetMetadata, currentAsset: canvasContent.asset }) }));
     }
     if (canvasContent.type === 'output') {
@@ -148,14 +204,35 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
     return (jsx_runtime_1.jsxs("div", { ref: compositionContainerRef, className: "remotion-studio-composition-container", style: outer, children: [
-            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { canvasHovered: canvasHovered, compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
+            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, offscreen: false, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(PixelGrid, { scale: scale }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { canvasHovered: canvasHovered, compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };
-const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
+const AssetMediaComposition = ({ asset, fetchedAt, fileType }) => {
+    const src = (0, add_asset_cache_bust_1.addAssetCacheBust)({
+        fetchedAt,
+        src: (0, remotion_1.staticFile)(asset),
+    });
+    const style = {
+        width: '100%',
+        height: '100%',
+    };
+    return (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DisableInteractivityProvider, { children: jsx_runtime_1.jsx("div", { "data-testid": "asset-media-preview", style: style, children: fileType === 'video' ? (jsx_runtime_1.jsx(media_1.Video, { name: asset, src: src, style: style })) : (jsx_runtime_1.jsx(media_1.Audio, { name: asset, src: src })) }) }) }), remotion_1.Internals.portalNode());
+};
+const PortalContainer = ({ offscreen, scale, xCorrection, yCorrection, contentDimensions }) => {
     const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
     const portalContainer = (0, react_1.useRef)(null);
     const style = (0, react_1.useMemo)(() => {
+        if (offscreen) {
+            return {
+                height: contentDimensions.height,
+                left: -999999,
+                overflow: 'hidden',
+                position: 'fixed',
+                top: 0,
+                width: contentDimensions.width,
+            };
+        }
         return containerStyle({
             checkerboard,
             scale,
@@ -168,6 +245,7 @@ const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions })
         checkerboard,
         contentDimensions.height,
         contentDimensions.width,
+        offscreen,
         scale,
         xCorrection,
         yCorrection,

package/dist/components/PreviewToolbar.js

@@ -6,6 +6,7 @@ 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 get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const timeline_layout_1 = require("../helpers/timeline-layout");
@@ -74,6 +75,10 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const { setPlayerMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
+    const showCompositionControls = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition';
+    const showCanvasViewControls = showCompositionControls ||
+        ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+            (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'video');
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
@@ -84,12 +89,13 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                     jsx_runtime_1.jsx("div", { style: padding }), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) })), !isMobileLayout && (isStill || isVideoComposition) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })
                         ] })) : null, isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCompositionControls: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition', playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                            jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCanvasViewControls: showCanvasViewControls, showCompositionControls: showCompositionControls, playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                         ] })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.75 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RulersAndGuidesToggle_1.RulersAndGuidesToggle, {}) })
-                        ] })), readOnlyStudio || isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : null, showCanvasViewControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), isMobileLayout || !showCompositionControls ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showCompositionControls ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }) : null, jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RulersAndGuidesToggle_1.RulersAndGuidesToggle, { showGuides: showCompositionControls }) })
+                        ] })), readOnlyStudio ||
+                        isMobileLayout ||
+                        !showCompositionControls ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
                         ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })

package/dist/components/PreviewToolbarOverflowButton.d.ts

@@ -3,6 +3,7 @@ export declare const PreviewToolbarOverflowButton: React.FC<{
     readonly showFullscreen: boolean;
     readonly showPlaybackRate: boolean;
     readonly showLoop: boolean;
+    readonly showCanvasViewControls: boolean;
     readonly showCompositionControls: boolean;
     readonly playbackRate: number;
     readonly setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;

package/dist/components/PreviewToolbarOverflowButton.js

@@ -19,7 +19,7 @@ const clickButton = (id) => {
     var _a;
     (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
 };
-const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLoop, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
+const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLoop, showCanvasViewControls, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
     const keyboardShortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
@@ -86,7 +86,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 quickSwitcherLabel: null,
             });
         }
-        if (showCompositionControls) {
+        if (showCanvasViewControls) {
             items.push({
                 type: 'item',
                 id: 'checkerboard',
@@ -98,6 +98,8 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 subMenu: null,
                 quickSwitcherLabel: null,
             });
+        }
+        if (showCompositionControls) {
             items.push({
                 type: 'item',
                 id: 'outlines',
@@ -109,6 +111,8 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 subMenu: null,
                 quickSwitcherLabel: null,
             });
+        }
+        if (showCanvasViewControls) {
             items.push({
                 type: 'item',
                 id: 'rulers',
@@ -120,6 +124,8 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 subMenu: null,
                 quickSwitcherLabel: null,
             });
+        }
+        if (showCompositionControls) {
             items.push({
                 type: 'item',
                 id: 'guides',
@@ -154,6 +160,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
         showFullscreen,
         showLoop,
         showPlaybackRate,
+        showCanvasViewControls,
         showCompositionControls,
         loop,
         checkerboard,

package/dist/components/RadioButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const RadioButton: React.FC<{
+    readonly checked: boolean;
+    readonly children: React.ReactNode;
+    readonly onClick: () => void;
+}>;

package/dist/components/RadioButton.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
+const row = {
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: (0, colors_1.getBackgroundFromHoverState)({
+            hovered: true,
+            selected: false,
+        }),
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    alignItems: 'center',
+    appearance: 'none',
+    border: 'none',
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    cursor: 'default',
+    display: 'flex',
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    gap: 8,
+    lineHeight: '20px',
+    margin: '5px -8px',
+    padding: '4px 8px',
+    textAlign: 'left',
+    userSelect: 'none',
+    width: 'calc(100% + 16px)',
+};
+const circle = {
+    alignItems: 'center',
+    border: `1px solid ${colors_1.CURRENT_COLOR}`,
+    borderRadius: '50%',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexShrink: 0,
+    height: 20,
+    justifyContent: 'center',
+    width: 20,
+};
+const bullet = {
+    backgroundColor: colors_1.CURRENT_COLOR,
+    borderRadius: '50%',
+    height: 8,
+    width: 8,
+};
+const label = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: '20px',
+};
+const RadioButton = ({ checked, children, onClick }) => {
+    return (jsx_runtime_1.jsxs("button", { "aria-checked": checked, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onClick, role: "radio", style: row, type: "button", children: [
+            jsx_runtime_1.jsx("span", { style: circle, children: checked ? jsx_runtime_1.jsx("span", { style: bullet }) : null }), jsx_runtime_1.jsx("span", { style: label, children: children })
+        ] }));
+};
+exports.RadioButton = RadioButton;

package/dist/components/RenderButton.js

@@ -142,6 +142,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         };
     }, [controlSize]);
     const video = remotion_1.Internals.useVideo();
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { getCurrentFrame } = player_1.PlayerInternals.usePlayerMethods();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     // Read the frame when the modal opens instead of subscribing this button to
@@ -387,7 +388,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         showRenderLabel,
         tooltip,
     ]);
-    if (!video) {
+    if (!video || (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition') {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/RulersAndGuidesToggle.d.ts

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