init commit

remotion/node_modules/@remotion/studio/dist/components/PreviewToolbar.js

@@ -0,0 +1,138 @@
+"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;