139 lines
8.6 KiB
JavaScript
139 lines
8.6 KiB
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 should_show_render_button_1 = require("../helpers/should-show-render-button");
|
|
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 LoopToggle_1 = require("./LoopToggle");
|
|
const MuteToggle_1 = require("./MuteToggle");
|
|
const PlayPause_1 = require("./PlayPause");
|
|
const PlaybackKeyboardShortcutsManager_1 = require("./PlaybackKeyboardShortcutsManager");
|
|
const PlaybackRatePersistor_1 = require("./PlaybackRatePersistor");
|
|
const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
|
|
const RenderButton_1 = require("./RenderButton");
|
|
const SizeSelector_1 = require("./SizeSelector");
|
|
const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
|
|
const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
|
|
const layout_1 = require("./layout");
|
|
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,
|
|
};
|
|
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 } = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
|
|
const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
|
|
const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
|
|
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 ((0, jsx_runtime_1.jsxs)("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), isStill || isVideoComposition ? ((0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate })) : null] })), isVideoComposition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 })] })) : null, (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isMobileLayout && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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] })), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), !isMobileLayout && (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, should_show_render_button_1.shouldShowRenderButton)(readOnlyStudio) ? ((0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio })) : null, (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, {}), (0, jsx_runtime_1.jsx)("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })] }));
|
|
};
|
|
exports.PreviewToolbar = PreviewToolbar;
|