@remotion/studio
Version:
APIs for interacting with the Remotion Studio
151 lines (150 loc) • 8.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PreviewToolbar = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const check_fullscreen_support_1 = require("../helpers/check-fullscreen-support");
const colors_1 = require("../helpers/colors");
const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
const mobile_layout_1 = require("../helpers/mobile-layout");
const timeline_layout_1 = require("../helpers/timeline-layout");
const loop_1 = require("../state/loop");
const CheckboardToggle_1 = require("./CheckboardToggle");
const FpsCounter_1 = require("./FpsCounter");
const FullscreenToggle_1 = require("./FullscreenToggle");
const layout_1 = require("./layout");
const LoopToggle_1 = require("./LoopToggle");
const MuteToggle_1 = require("./MuteToggle");
const PlaybackKeyboardShortcutsManager_1 = require("./PlaybackKeyboardShortcutsManager");
const PlaybackRatePersistor_1 = require("./PlaybackRatePersistor");
const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
const PlayPause_1 = require("./PlayPause");
const RenderButton_1 = require("./RenderButton");
const SizeSelector_1 = require("./SizeSelector");
const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
const TOOLBAR_HEIGHT = 56;
const container = {
display: 'flex',
justifyContent: 'center',
borderTop: '1px solid rgba(0, 0, 0, 0.5)',
paddingTop: 2,
paddingBottom: 2,
alignItems: 'center',
flexDirection: 'row',
background: colors_1.BACKGROUND,
height: TOOLBAR_HEIGHT,
};
const mobileContainer = {
...container,
position: 'relative',
overflowY: 'auto',
justifyContent: 'flex-start',
};
const scrollIndicatorLeft = {
position: 'fixed',
display: 'none',
top: 0,
left: 0,
width: 40,
height: '100%',
pointerEvents: 'none',
background: `linear-gradient(to right, ${colors_1.BACKGROUND}, ${colors_1.BACKGROUND__TRANSPARENT})`,
};
const scrollIndicatorRight = {
position: 'fixed',
display: 'none',
top: 0,
right: 0,
width: 40,
height: '100%',
pointerEvents: 'none',
background: `linear-gradient(to left, ${colors_1.BACKGROUND}, ${colors_1.BACKGROUND__TRANSPARENT})`,
};
const sideContainer = {
width: 300,
height: 38,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
};
const padding = {
width: timeline_layout_1.TIMELINE_PADDING,
};
const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
const { playbackRate, setPlaybackRate } = remotion_1.Internals.useTimelineContext();
const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
const { setMediaMuted } = (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 previewToolbarRef = (0, react_1.useRef)(null);
const leftScrollIndicatorRef = (0, react_1.useRef)(null);
const rightScrollIndicatorRef = (0, react_1.useRef)(null);
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)();
const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
(0, react_1.useEffect)(() => {
if (isMobileLayout && previewToolbarRef.current) {
const updateScrollableIndicatorProps = (target) => {
var _a;
const boundingBox = target.getBoundingClientRect();
const { scrollLeft, scrollWidth, clientWidth } = target;
const scrollRight = scrollWidth - clientWidth - scrollLeft;
if (!leftScrollIndicatorRef.current ||
!rightScrollIndicatorRef.current) {
return;
}
if (scrollLeft !== 0) {
Object.assign(leftScrollIndicatorRef.current.style, {
display: 'block',
height: `${boundingBox.height}px`,
top: `${boundingBox.top}px`,
left: `${boundingBox.left}px`,
});
}
else {
Object.assign(leftScrollIndicatorRef.current.style, {
display: 'none',
});
}
if (scrollRight !== 0) {
const itemWidth = ((_a = rightScrollIndicatorRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
Object.assign(rightScrollIndicatorRef.current.style, {
display: 'block',
height: `${boundingBox.height}px`,
top: `${boundingBox.top}px`,
left: `${boundingBox.left + boundingBox.width - itemWidth}px`,
});
}
else {
Object.assign(rightScrollIndicatorRef.current.style, {
display: 'none',
});
}
};
const previewToolbar = previewToolbarRef.current;
const scrollHandler = () => {
updateScrollableIndicatorProps(previewToolbar);
};
previewToolbar.addEventListener('scroll', scrollHandler);
scrollHandler();
return () => {
previewToolbar.removeEventListener('scroll', scrollHandler);
};
}
});
return (jsx_runtime_1.jsxs("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [
jsx_runtime_1.jsx("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {})
] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), 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.jsx(CheckboardToggle_1.CheckboardToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })
] }));
};
exports.PreviewToolbar = PreviewToolbar;