@remotion/studio 4.0.504 → 4.0.505
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AssetSelectorItem.js +2 -2
- package/dist/components/AudioWaveform.d.ts +1 -1
- package/dist/components/AudioWaveform.js +36 -3
- package/dist/components/CompositionContextButton.d.ts +1 -1
- package/dist/components/CompositionContextButton.js +2 -2
- package/dist/components/CompositionSelector.js +2 -2
- package/dist/components/CompositionSelectorItem.js +4 -4
- package/dist/components/ContextMenu.d.ts +5 -7
- package/dist/components/ContextMenu.js +54 -21
- package/dist/components/EditorGuides/Guide.js +2 -2
- package/dist/components/EffectPickerModal.js +2 -2
- package/dist/components/InlineAction.d.ts +1 -1
- package/dist/components/InlineAction.js +14 -13
- package/dist/components/InlineDropdown.d.ts +3 -2
- package/dist/components/InlineDropdown.js +16 -5
- package/dist/components/InspectorPanel/ConnectedCompositionsSection.js +2 -2
- package/dist/components/InspectorPanel/SequenceSelectionInspector.js +1 -1
- package/dist/components/InspectorPanel/common.js +24 -34
- package/dist/components/InspectorSequenceSection.js +1 -1
- package/dist/components/Menu/MenuItem.js +16 -12
- package/dist/components/MenuBuildIndicator.js +11 -58
- package/dist/components/MenuCompositionName.js +3 -63
- package/dist/components/MenuToolbar.js +22 -2
- package/dist/components/NewComposition/InputDragger.d.ts +1 -0
- package/dist/components/NewComposition/InputDragger.js +5 -4
- package/dist/components/NewComposition/MenuContent.d.ts +1 -1
- package/dist/components/NewComposition/menu-typeahead.d.ts +1 -1
- package/dist/components/PlayPause.js +2 -2
- package/dist/components/PlaybackRateSelector.js +3 -9
- package/dist/components/PreviewToolbar.js +7 -4
- package/dist/components/RenderButton.d.ts +1 -0
- package/dist/components/RenderButton.js +54 -37
- package/dist/components/SelectedOutlineElement.js +9 -10
- package/dist/components/SelectedOutlineOverlay.js +5 -1
- package/dist/components/SizeSelector.js +3 -9
- package/dist/components/Timeline/Timeline.js +4 -4
- package/dist/components/Timeline/TimelineDragHandler.js +3 -0
- package/dist/components/Timeline/TimelineEffectItem.js +6 -2
- package/dist/components/Timeline/TimelineEffectPropItem.js +6 -3
- package/dist/components/Timeline/TimelineExpandedKeyframeRow.d.ts +6 -6
- package/dist/components/Timeline/TimelineExpandedKeyframeRow.js +32 -1
- package/dist/components/Timeline/TimelineHeightContainer.d.ts +1 -0
- package/dist/components/Timeline/TimelineHeightContainer.js +2 -2
- package/dist/components/Timeline/TimelineInOutDragHandler.js +3 -3
- package/dist/components/Timeline/TimelineKeyframeEasingLine.d.ts +4 -2
- package/dist/components/Timeline/TimelineKeyframeEasingLine.js +30 -28
- package/dist/components/Timeline/TimelineList.d.ts +1 -0
- package/dist/components/Timeline/TimelineList.js +2 -3
- package/dist/components/Timeline/TimelineScaleField.js +1 -1
- package/dist/components/Timeline/TimelineSequence.js +34 -28
- package/dist/components/Timeline/TimelineSequenceItem.d.ts +3 -3
- package/dist/components/Timeline/TimelineSequenceItem.js +34 -23
- package/dist/components/Timeline/TimelineSequencePropItem.d.ts +10 -2
- package/dist/components/Timeline/TimelineSequencePropItem.js +64 -12
- package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.d.ts +2 -2
- package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js +38 -5
- package/dist/components/Timeline/TimelineTimeIndicators.js +36 -3
- package/dist/components/Timeline/TimelineVideoInfo.d.ts +1 -1
- package/dist/components/Timeline/TimelineVideoInfo.js +36 -3
- package/dist/components/Timeline/TimelineZoomControls.d.ts +2 -2
- package/dist/components/Timeline/TimelineZoomControls.js +39 -12
- package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts +1 -1
- package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js +7 -18
- package/dist/components/Timeline/use-timeline-height.d.ts +2 -1
- package/dist/components/Timeline/use-timeline-height.js +3 -2
- package/dist/components/TimelineCombobox.d.ts +11 -0
- package/dist/components/TimelineCombobox.js +181 -0
- package/dist/components/TopPanel.js +6 -7
- package/dist/components/selected-outline-types.d.ts +1 -1
- package/dist/esm/{chunk-43m68z1k.js → chunk-7pgk8h5m.js} +7731 -7410
- package/dist/esm/internals.mjs +7731 -7410
- package/dist/esm/previewEntry.mjs +7547 -7226
- package/dist/esm/renderEntry.mjs +1 -1
- package/dist/helpers/hoverable.d.ts +11 -0
- package/dist/helpers/hoverable.js +70 -0
- package/dist/helpers/inject-css.js +3 -0
- package/dist/helpers/use-is-fullscreen.d.ts +1 -0
- package/dist/helpers/use-is-fullscreen.js +25 -0
- package/dist/helpers/use-menu-structure.js +3 -10
- package/dist/icons/canvas-zoom.d.ts +10 -0
- package/dist/icons/canvas-zoom.js +21 -0
- package/dist/icons/playback-rate.d.ts +5 -0
- package/dist/icons/playback-rate.js +31 -0
- package/dist/icons/search.d.ts +5 -0
- package/dist/icons/search.js +10 -0
- package/package.json +12 -12
package/dist/esm/renderEntry.mjs
CHANGED
|
@@ -212,7 +212,7 @@ var renderContent = (Root) => {
|
|
|
212
212
|
renderToDOM(/* @__PURE__ */ jsx("div", {
|
|
213
213
|
children: /* @__PURE__ */ jsx(DelayedSpinner, {})
|
|
214
214
|
}));
|
|
215
|
-
import("./chunk-
|
|
215
|
+
import("./chunk-7pgk8h5m.js").then(({ StudioInternals }) => {
|
|
216
216
|
window.remotion_isStudio = true;
|
|
217
217
|
window.remotion_isReadOnlyStudio = true;
|
|
218
218
|
window.remotion_inputProps = "{}";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
export declare const HOVERABLE_CLASS_NAME = "__remotion-hoverable";
|
|
3
|
+
export declare const HOVER_GROUP_CLASS_NAME = "__remotion-hover-group";
|
|
4
|
+
export declare const HOVER_GROUP_REVEAL_CLASS_NAME = "__remotion-hover-group-reveal";
|
|
5
|
+
export declare const hoverableStyle: ({ idleBackground, hoverBackground, idleColor, hoverColor, }: {
|
|
6
|
+
idleBackground: string;
|
|
7
|
+
hoverBackground: string;
|
|
8
|
+
idleColor: string;
|
|
9
|
+
hoverColor: string;
|
|
10
|
+
}) => React.CSSProperties;
|
|
11
|
+
export declare const makeHoverableCSS: () => string;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.makeHoverableCSS = exports.hoverableStyle = exports.HOVER_GROUP_REVEAL_CLASS_NAME = exports.HOVER_GROUP_CLASS_NAME = exports.HOVERABLE_CLASS_NAME = void 0;
|
|
4
|
+
const colors_1 = require("./colors");
|
|
5
|
+
// Purely visual hover styling must be driven by CSS `:hover` rather than
|
|
6
|
+
// React state: When the Studio runs in an <iframe> (like in Browser Studio),
|
|
7
|
+
// browsers can fail to deliver `pointerleave` when the pointer exits the
|
|
8
|
+
// frame, which would leave a state-driven hover background stuck forever.
|
|
9
|
+
// CSS `:hover` is maintained by the browser and self-corrects.
|
|
10
|
+
// https://github.com/remotion-dev/remotion/issues/9886
|
|
11
|
+
exports.HOVERABLE_CLASS_NAME = '__remotion-hoverable';
|
|
12
|
+
exports.HOVER_GROUP_CLASS_NAME = '__remotion-hover-group';
|
|
13
|
+
exports.HOVER_GROUP_REVEAL_CLASS_NAME = '__remotion-hover-group-reveal';
|
|
14
|
+
const BG_VARIABLE = '--remotion-hoverable-bg';
|
|
15
|
+
const HOVER_BG_VARIABLE = '--remotion-hoverable-hover-bg';
|
|
16
|
+
const COLOR_VARIABLE = '--remotion-hoverable-color';
|
|
17
|
+
const HOVER_COLOR_VARIABLE = '--remotion-hoverable-hover-color';
|
|
18
|
+
// To disable the hover effect (e.g. for a disabled control), pass the idle
|
|
19
|
+
// values as the hover values.
|
|
20
|
+
const hoverableStyle = ({ idleBackground, hoverBackground, idleColor, hoverColor, }) => {
|
|
21
|
+
return {
|
|
22
|
+
[BG_VARIABLE]: idleBackground,
|
|
23
|
+
[HOVER_BG_VARIABLE]: hoverBackground,
|
|
24
|
+
[COLOR_VARIABLE]: idleColor,
|
|
25
|
+
[HOVER_COLOR_VARIABLE]: hoverColor,
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
exports.hoverableStyle = hoverableStyle;
|
|
29
|
+
// The doubled class names give these rules a higher specificity than the
|
|
30
|
+
// `.css-reset, .css-reset *` rule which sets `color` and `background` on
|
|
31
|
+
// every descendant - the injection order of the two stylesheets is not
|
|
32
|
+
// deterministic.
|
|
33
|
+
// The `*` selectors re-establish color inheritance inside the hoverable
|
|
34
|
+
// element so that text and `currentColor`-based icons follow the hover state.
|
|
35
|
+
const hoverable = `.${exports.HOVERABLE_CLASS_NAME}.${exports.HOVERABLE_CLASS_NAME}`;
|
|
36
|
+
const hoverGroup = `.${exports.HOVER_GROUP_CLASS_NAME}`;
|
|
37
|
+
const reveal = `.${exports.HOVER_GROUP_REVEAL_CLASS_NAME}.${exports.HOVER_GROUP_REVEAL_CLASS_NAME}`;
|
|
38
|
+
const makeHoverableCSS = () => `
|
|
39
|
+
${hoverable} {
|
|
40
|
+
background-color: var(${BG_VARIABLE}, ${colors_1.TRANSPARENT});
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
${hoverable},
|
|
44
|
+
${hoverable} * {
|
|
45
|
+
color: var(${COLOR_VARIABLE}, inherit);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@media (hover: hover) {
|
|
49
|
+
${hoverable}:hover,
|
|
50
|
+
${hoverGroup}:hover ${hoverable} {
|
|
51
|
+
background-color: var(${HOVER_BG_VARIABLE}, var(${BG_VARIABLE}, ${colors_1.TRANSPARENT}));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
${hoverable}:hover,
|
|
55
|
+
${hoverable}:hover *,
|
|
56
|
+
${hoverGroup}:hover ${hoverable},
|
|
57
|
+
${hoverGroup}:hover ${hoverable} * {
|
|
58
|
+
color: var(${HOVER_COLOR_VARIABLE}, var(${COLOR_VARIABLE}, inherit));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
${hoverGroup} ${reveal} {
|
|
62
|
+
opacity: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
${hoverGroup}:hover ${reveal} {
|
|
66
|
+
opacity: 1;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
`;
|
|
70
|
+
exports.makeHoverableCSS = makeHoverableCSS;
|
|
@@ -4,6 +4,7 @@ exports.injectCSS = void 0;
|
|
|
4
4
|
const remotion_1 = require("remotion");
|
|
5
5
|
const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
|
|
6
6
|
const colors_1 = require("./colors");
|
|
7
|
+
const hoverable_1 = require("./hoverable");
|
|
7
8
|
const makeDefaultGlobalCSS = () => {
|
|
8
9
|
const dragAreaFactor = 2;
|
|
9
10
|
const fromMiddle = 50 / dragAreaFactor;
|
|
@@ -153,6 +154,8 @@ const makeDefaultGlobalCSS = () => {
|
|
|
153
154
|
color: var(--remotion-cli-internals-blue) !important;
|
|
154
155
|
transition: color 0.2s ease-in-out;
|
|
155
156
|
}
|
|
157
|
+
|
|
158
|
+
${(0, hoverable_1.makeHoverableCSS)()}
|
|
156
159
|
`.trim();
|
|
157
160
|
};
|
|
158
161
|
let injected = false;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useIsFullscreen: () => boolean;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useIsFullscreen = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const getIsFullscreen = () => {
|
|
6
|
+
var _a;
|
|
7
|
+
return Boolean((_a = document.fullscreenElement) !== null && _a !== void 0 ? _a : document
|
|
8
|
+
.webkitFullscreenElement);
|
|
9
|
+
};
|
|
10
|
+
const useIsFullscreen = () => {
|
|
11
|
+
const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(getIsFullscreen);
|
|
12
|
+
(0, react_1.useEffect)(() => {
|
|
13
|
+
const onFullscreenChange = () => {
|
|
14
|
+
setIsFullscreen(getIsFullscreen());
|
|
15
|
+
};
|
|
16
|
+
document.addEventListener('fullscreenchange', onFullscreenChange);
|
|
17
|
+
document.addEventListener('webkitfullscreenchange', onFullscreenChange);
|
|
18
|
+
return () => {
|
|
19
|
+
document.removeEventListener('fullscreenchange', onFullscreenChange);
|
|
20
|
+
document.removeEventListener('webkitfullscreenchange', onFullscreenChange);
|
|
21
|
+
};
|
|
22
|
+
}, []);
|
|
23
|
+
return isFullscreen;
|
|
24
|
+
};
|
|
25
|
+
exports.useIsFullscreen = useIsFullscreen;
|
|
@@ -39,17 +39,10 @@ const use_keybinding_1 = require("./use-keybinding");
|
|
|
39
39
|
const openExternal = (link) => {
|
|
40
40
|
window.open(link, '_blank');
|
|
41
41
|
};
|
|
42
|
-
const
|
|
43
|
-
transform: `rotate(90deg)`,
|
|
42
|
+
const inheritColor = {
|
|
44
43
|
color: 'inherit',
|
|
45
44
|
};
|
|
46
|
-
const
|
|
47
|
-
color: 'inherit',
|
|
48
|
-
};
|
|
49
|
-
const iconPath = {
|
|
50
|
-
color: 'inherit',
|
|
51
|
-
};
|
|
52
|
-
const ICON_SIZE = 16;
|
|
45
|
+
const ICON_SIZE = 14;
|
|
53
46
|
const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelectedModal, }) => {
|
|
54
47
|
const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
|
|
55
48
|
const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
|
|
@@ -302,7 +295,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
|
|
|
302
295
|
let struct = [
|
|
303
296
|
{
|
|
304
297
|
id: 'remotion',
|
|
305
|
-
label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", style:
|
|
298
|
+
label: (jsx_runtime_1.jsx(layout_1.Row, { align: "center", justify: "center", style: inheritColor, children: jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 415 426", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: inheritColor, children: jsx_runtime_1.jsx("path", { d: "M93.4691 0.0367432C84.4873 0.520935 77.2494 1.93634 69.9553 4.69266C66.3176 6.05219 60.3548 9.0134 57.0734 11.062C43.3476 19.6103 32.8846 32.4606 27.428 47.4154C26.3405 50.3766 23.3966 59.8188 21.5027 66.3185C8.88329 109.768 1.7204 157.277 0.182822 207.561C-0.0609408 215.569 -0.0609408 234.639 0.182822 242.517C1.21413 275.854 4.42055 305.949 10.2334 336.641C12.596 349.063 16.3837 365.75 18.5776 373.33C23.059 388.732 32.2095 401.843 45.2227 411.453C53.9419 417.896 63.8425 422.217 74.8118 424.34C80.0996 425.365 87.075 425.83 92.2127 425.495C99.3194 425.029 113.42 423.148 124.877 421.118C176.517 411.974 224.22 395.604 267.478 372.175C294.874 357.332 318.294 341.26 340.888 321.761C363.408 302.355 382.609 281.478 399.504 258.049C403.423 252.63 405.392 249.464 407.361 245.478C412.424 235.198 414.805 224.974 414.786 213.539C414.786 202.886 412.761 193.425 408.392 183.741C406.292 179.066 404.286 175.714 399.785 169.345C383.21 145.898 364.815 125.467 342.389 105.614C307.624 74.8481 266.335 49.613 220.226 30.9334C210.232 26.8921 200.387 23.335 188.537 19.4799C163.448 11.3413 132.396 4.28293 106.126 0.763062C102.001 0.204346 96.3942 -0.112244 93.4691 0.0367432Z", fill: colors_1.CURRENT_COLOR, style: inheritColor }) }) })),
|
|
306
299
|
leaveLeftPadding: false,
|
|
307
300
|
items: [
|
|
308
301
|
{
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const CanvasZoomIcon: React.FC<{
|
|
3
|
+
readonly color: string;
|
|
4
|
+
}>;
|
|
5
|
+
export declare const CanvasFitIcon: React.FC<{
|
|
6
|
+
readonly color: string;
|
|
7
|
+
}>;
|
|
8
|
+
export declare const CanvasZoomOutIcon: React.FC<{
|
|
9
|
+
readonly color: string;
|
|
10
|
+
}>;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CanvasZoomOutIcon = exports.CanvasFitIcon = exports.CanvasZoomIcon = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const iconStyle = {
|
|
6
|
+
width: 20,
|
|
7
|
+
height: 20,
|
|
8
|
+
flexShrink: 0,
|
|
9
|
+
};
|
|
10
|
+
const CanvasZoomIcon = ({ color }) => {
|
|
11
|
+
return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: "M272 96C369.2 96 448 174.8 448 272C448 369.2 369.2 448 272 448C174.8 448 96 369.2 96 272C96 174.8 174.8 96 272 96zM272 480C323.7 480 371 461.2 407.3 430L548.7 571.3C554.9 577.5 565.1 577.5 571.3 571.3C577.5 565.1 577.5 554.9 571.3 548.7L430 407.3C461.2 371 480 323.7 480 272C480 157.1 386.9 64 272 64C157.1 64 64 157.1 64 272C64 386.9 157.1 480 272 480zM256 344C256 352.8 263.2 360 272 360C280.8 360 288 352.8 288 344L288 288L344 288C352.8 288 360 280.8 360 272C360 263.2 352.8 256 344 256L288 256L288 200C288 191.2 280.8 184 272 184C263.2 184 256 191.2 256 200L256 256L200 256C191.2 256 184 263.2 184 272C184 280.8 191.2 288 200 288L256 288L256 344z" }) }));
|
|
12
|
+
};
|
|
13
|
+
exports.CanvasZoomIcon = CanvasZoomIcon;
|
|
14
|
+
const CanvasFitIcon = ({ color }) => {
|
|
15
|
+
return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: "M448 272C448 174.8 369.2 96 272 96C174.8 96 96 174.8 96 272C96 369.2 174.8 448 272 448C369.2 448 448 369.2 448 272zM407.3 430C371 461.2 323.7 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272C480 323.7 461.2 371 430 407.3L571.3 548.7C577.5 554.9 577.5 565.1 571.3 571.3C565.1 577.5 554.9 577.5 548.7 571.3L407.3 430z" }) }));
|
|
16
|
+
};
|
|
17
|
+
exports.CanvasFitIcon = CanvasFitIcon;
|
|
18
|
+
const CanvasZoomOutIcon = ({ color }) => {
|
|
19
|
+
return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: "M272 96C369.2 96 448 174.8 448 272C448 369.2 369.2 448 272 448C174.8 448 96 369.2 96 272C96 174.8 174.8 96 272 96zM272 480C323.7 480 371 461.2 407.3 430L548.7 571.3C554.9 577.5 565.1 577.5 571.3 571.3C577.5 565.1 577.5 554.9 571.3 548.7L430 407.3C461.2 371 480 323.7 480 272C480 157.1 386.9 64 272 64C157.1 64 64 157.1 64 272C64 386.9 157.1 480 272 480zM192 256C183.2 256 176 263.2 176 272C176 280.8 183.2 288 192 288L352 288C360.8 288 368 280.8 368 272C368 263.2 360.8 256 352 256L192 256z" }) }));
|
|
20
|
+
};
|
|
21
|
+
exports.CanvasZoomOutIcon = CanvasZoomOutIcon;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PlaybackRateIcon = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const iconStyle = {
|
|
6
|
+
width: 20,
|
|
7
|
+
height: 20,
|
|
8
|
+
flexShrink: 0,
|
|
9
|
+
};
|
|
10
|
+
const defaultPlaybackRatePath = 'M320 96C443.7 96 544 196.3 544 320C544 443.7 443.7 544 320 544C196.3 544 96 443.7 96 320C96 196.3 196.3 96 320 96zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 384C337.7 384 352 398.3 352 416C352 433.7 337.7 448 320 448C302.3 448 288 433.7 288 416C288 398.3 302.3 384 320 384zM320 480C355.3 480 384 451.3 384 416C384 386.2 363.6 361.1 336 354L336 160C336 151.2 328.8 144 320 144C311.2 144 304 151.2 304 160L304 354C276.4 361.1 256 386.2 256 416C256 451.3 284.7 480 320 480zM208 232C221.3 232 232 221.3 232 208C232 194.7 221.3 184 208 184C194.7 184 184 194.7 184 208C184 221.3 194.7 232 208 232zM184 320C184 306.7 173.3 296 160 296C146.7 296 136 306.7 136 320C136 333.3 146.7 344 160 344C173.3 344 184 333.3 184 320zM480 344C493.3 344 504 333.3 504 320C504 306.7 493.3 296 480 296C466.7 296 456 306.7 456 320C456 333.3 466.7 344 480 344zM456 208C456 194.7 445.3 184 432 184C418.7 184 408 194.7 408 208C408 221.3 418.7 232 432 232C445.3 232 456 221.3 456 208z';
|
|
11
|
+
const halfPlaybackRatePath = 'M320 544C443.7 544 544 443.7 544 320C544 196.3 443.7 96 320 96C196.3 96 96 196.3 96 320C96 443.7 196.3 544 320 544zM320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64zM344 160C344 173.3 333.3 184 320 184C306.7 184 296 173.3 296 160C296 146.7 306.7 136 320 136C333.3 136 344 146.7 344 160zM288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384C302.3 384 288 398.3 288 416zM256 416C256 397.4 263.9 380.7 276.5 369L193.9 215.6L186.3 201.5L214.5 186.3L222.1 200.4L304.7 353.8C309.6 352.6 314.7 352 320 352C355.3 352 384 380.7 384 416C384 451.3 355.3 480 320 480C284.7 480 256 451.3 256 416zM456 208C456 221.3 445.3 232 432 232C418.7 232 408 221.3 408 208C408 194.7 418.7 184 432 184C445.3 184 456 194.7 456 208zM480 296C493.3 296 504 306.7 504 320C504 333.3 493.3 344 480 344C466.7 344 456 333.3 456 320C456 306.7 466.7 296 480 296zM184 320C184 333.3 173.3 344 160 344C146.7 344 136 333.3 136 320C136 306.7 146.7 296 160 296C173.3 296 184 306.7 184 320z';
|
|
12
|
+
const quarterPlaybackRatePath = 'M320 96C443.7 96 544 196.3 544 320C544 443.7 443.7 544 320 544C196.3 544 96 443.7 96 320C96 196.3 196.3 96 320 96zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM344 160C344 146.7 333.3 136 320 136C306.7 136 296 146.7 296 160C296 173.3 306.7 184 320 184C333.3 184 344 173.3 344 160zM288 416C288 398.3 302.3 384 320 384C337.7 384 352 398.3 352 416C352 433.7 337.7 448 320 448C302.3 448 288 433.7 288 416zM384 416C384 380.7 355.3 352 320 352C302.5 352 286.6 359 275.1 370.4L168.2 306.3L154.5 298.1L138 325.5L151.7 333.7L258.5 397.8C256.8 403.6 255.9 409.7 255.9 416C255.9 451.3 284.6 480 319.9 480C355.2 480 383.9 451.3 383.9 416zM232 208C232 194.7 221.3 184 208 184C194.7 184 184 194.7 184 208C184 221.3 194.7 232 208 232C221.3 232 232 221.3 232 208zM480 344C493.3 344 504 333.3 504 320C504 306.7 493.3 296 480 296C466.7 296 456 306.7 456 320C456 333.3 466.7 344 480 344zM456 208C456 194.7 445.3 184 432 184C418.7 184 408 194.7 408 208C408 221.3 418.7 232 432 232C445.3 232 456 221.3 456 208z';
|
|
13
|
+
const mediumFastPlaybackRatePath = 'M320 96C443.7 96 544 196.3 544 320C544 443.7 443.7 544 320 544C196.3 544 96 443.7 96 320C96 196.3 196.3 96 320 96zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM344 160C344 146.7 333.3 136 320 136C306.7 136 296 146.7 296 160C296 173.3 306.7 184 320 184C333.3 184 344 173.3 344 160zM288 416C288 398.3 302.3 384 320 384C337.7 384 352 398.3 352 416C352 433.7 337.7 448 320 448C302.3 448 288 433.7 288 416zM384 416C384 397.4 376.1 380.7 363.5 369L446.1 215.6L453.7 201.5L425.5 186.3L417.9 200.4L335.3 353.8C330.4 352.6 325.3 352 320 352C284.7 352 256 380.7 256 416C256 451.3 284.7 480 320 480C355.3 480 384 451.3 384 416zM232 208C232 194.7 221.3 184 208 184C194.7 184 184 194.7 184 208C184 221.3 194.7 232 208 232C221.3 232 232 221.3 232 208zM160 344C173.3 344 184 333.3 184 320C184 306.7 173.3 296 160 296C146.7 296 136 306.7 136 320C136 333.3 146.7 344 160 344zM504 320C504 306.7 493.3 296 480 296C466.7 296 456 306.7 456 320C456 333.3 466.7 344 480 344C493.3 344 504 333.3 504 320z';
|
|
14
|
+
const fastPlaybackRatePath = 'M320 544C443.7 544 544 443.7 544 320C544 196.3 443.7 96 320 96C196.3 96 96 196.3 96 320C96 443.7 196.3 544 320 544zM320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64zM344 160C344 173.3 333.3 184 320 184C306.7 184 296 173.3 296 160C296 146.7 306.7 136 320 136C333.3 136 344 146.7 344 160zM288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384C302.3 384 288 398.3 288 416zM256 416C256 380.7 284.7 352 320 352C337.5 352 353.4 359 364.9 370.4L471.8 306.3L485.5 298.1L502 325.5L488.3 333.7L381.5 397.8C383.2 403.6 384.1 409.7 384.1 416C384.1 451.3 355.4 480 320.1 480C284.8 480 256.1 451.3 256.1 416zM456 208C456 221.3 445.3 232 432 232C418.7 232 408 221.3 408 208C408 194.7 418.7 184 432 184C445.3 184 456 194.7 456 208zM160 296C173.3 296 184 306.7 184 320C184 333.3 173.3 344 160 344C146.7 344 136 333.3 136 320C136 306.7 146.7 296 160 296zM232 208C232 221.3 221.3 232 208 232C194.7 232 184 221.3 184 208C184 194.7 194.7 184 208 184C221.3 184 232 194.7 232 208z';
|
|
15
|
+
const PlaybackRateIcon = ({ color, playbackRate }) => {
|
|
16
|
+
let path = defaultPlaybackRatePath;
|
|
17
|
+
if (playbackRate === 0.5) {
|
|
18
|
+
path = halfPlaybackRatePath;
|
|
19
|
+
}
|
|
20
|
+
else if (playbackRate === 0.25) {
|
|
21
|
+
path = quarterPlaybackRatePath;
|
|
22
|
+
}
|
|
23
|
+
else if (playbackRate > 2) {
|
|
24
|
+
path = fastPlaybackRatePath;
|
|
25
|
+
}
|
|
26
|
+
else if (playbackRate > 1) {
|
|
27
|
+
path = mediumFastPlaybackRatePath;
|
|
28
|
+
}
|
|
29
|
+
return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: iconStyle, children: jsx_runtime_1.jsx("path", { fill: color, d: path }) }));
|
|
30
|
+
};
|
|
31
|
+
exports.PlaybackRateIcon = PlaybackRateIcon;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SearchIcon = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
|
|
6
|
+
// https://fontawesome.com/license (Commercial License)
|
|
7
|
+
const SearchIcon = ({ color, ...props }) => {
|
|
8
|
+
return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M432 272C432 183.6 360.4 112 272 112C183.6 112 112 183.6 112 272C112 360.4 183.6 432 272 432C360.4 432 432 360.4 432 272zM401.1 435.1C365.7 463.2 320.8 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272C480 320.8 463.2 365.7 435.1 401.1L569 535C578.4 544.4 578.4 559.6 569 568.9C559.6 578.2 544.4 578.3 535.1 568.9L401.1 435.1z" }) }));
|
|
9
|
+
};
|
|
10
|
+
exports.SearchIcon = SearchIcon;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
|
|
4
4
|
},
|
|
5
5
|
"name": "@remotion/studio",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.505",
|
|
7
7
|
"description": "APIs for interacting with the Remotion Studio",
|
|
8
8
|
"main": "dist",
|
|
9
9
|
"scripts": {
|
|
@@ -24,17 +24,17 @@
|
|
|
24
24
|
"react-dom": ">=16.8.0"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@remotion/studio-protocol": "4.0.
|
|
27
|
+
"@remotion/studio-protocol": "4.0.505",
|
|
28
28
|
"semver": "7.5.3",
|
|
29
|
-
"remotion": "4.0.
|
|
30
|
-
"@remotion/captions": "4.0.
|
|
31
|
-
"@remotion/player": "4.0.
|
|
32
|
-
"@remotion/media-utils": "4.0.
|
|
33
|
-
"@remotion/renderer": "4.0.
|
|
34
|
-
"@remotion/web-renderer": "4.0.
|
|
35
|
-
"@remotion/studio-shared": "4.0.
|
|
36
|
-
"@remotion/timeline-utils": "4.0.
|
|
37
|
-
"@remotion/zod-types": "4.0.
|
|
29
|
+
"remotion": "4.0.505",
|
|
30
|
+
"@remotion/captions": "4.0.505",
|
|
31
|
+
"@remotion/player": "4.0.505",
|
|
32
|
+
"@remotion/media-utils": "4.0.505",
|
|
33
|
+
"@remotion/renderer": "4.0.505",
|
|
34
|
+
"@remotion/web-renderer": "4.0.505",
|
|
35
|
+
"@remotion/studio-shared": "4.0.505",
|
|
36
|
+
"@remotion/timeline-utils": "4.0.505",
|
|
37
|
+
"@remotion/zod-types": "4.0.505",
|
|
38
38
|
"@jridgewell/trace-mapping": "0.3.31",
|
|
39
39
|
"mediabunny": "1.50.8",
|
|
40
40
|
"memfs": "3.4.3",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"react": "19.2.3",
|
|
46
46
|
"react-dom": "19.2.3",
|
|
47
47
|
"@types/semver": "7.5.3",
|
|
48
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
48
|
+
"@remotion/eslint-config-internal": "4.0.505",
|
|
49
49
|
"eslint": "9.19.0",
|
|
50
50
|
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
51
51
|
},
|