@react-av/editor/dist/cjs/TimelineControlBar.js

Editor Timeline Components built on React AV.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineControlBar = TimelineControlBar;
const jsx_runtime_1 = require("react/jsx-runtime");
const controls_1 = require("@react-av/controls");
const TimelineEditor_1 = require("./TimelineEditor");
const core_1 = require("@react-av/core");
function Spinner({ size, className, style }) {
    return (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", className: className, style: style, children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 2v4" }), (0, jsx_runtime_1.jsx)("path", { d: "m16.2 7.8 2.9-2.9" }), (0, jsx_runtime_1.jsx)("path", { d: "M18 12h4" }), (0, jsx_runtime_1.jsx)("path", { d: "m16.2 16.2 2.9 2.9" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 18v4" }), (0, jsx_runtime_1.jsx)("path", { d: "m4.9 19.1 2.9-2.9" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 12h4" }), (0, jsx_runtime_1.jsx)("path", { d: "m4.9 4.9 2.9 2.9" })] });
}
function ZoomIn() {
    return (0, jsx_runtime_1.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159ZM4.25 6.5C4.25 6.22386 4.47386 6 4.75 6H6V4.75C6 4.47386 6.22386 4.25 6.5 4.25C6.77614 4.25 7 4.47386 7 4.75V6H8.25C8.52614 6 8.75 6.22386 8.75 6.5C8.75 6.77614 8.52614 7 8.25 7H7V8.25C7 8.52614 6.77614 8.75 6.5 8.75C6.22386 8.75 6 8.52614 6 8.25V7H4.75C4.47386 7 4.25 6.77614 4.25 6.5Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) });
}
function ZoomOut() {
    return (0, jsx_runtime_1.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M6.5 10C8.433 10 10 8.433 10 6.5C10 4.567 8.433 3 6.5 3C4.567 3 3 4.567 3 6.5C3 8.433 4.567 10 6.5 10ZM6.5 11C7.56251 11 8.53901 10.6318 9.30884 10.0159L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L10.0159 9.30884C10.6318 8.53901 11 7.56251 11 6.5C11 4.01472 8.98528 2 6.5 2C4.01472 2 2 4.01472 2 6.5C2 8.98528 4.01472 11 6.5 11ZM4.75 6C4.47386 6 4.25 6.22386 4.25 6.5C4.25 6.77614 4.47386 7 4.75 7H8.25C8.52614 7 8.75 6.77614 8.75 6.5C8.75 6.22386 8.52614 6 8.25 6H4.75Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) });
}
function TimelineControlBar({ styling }) {
    var _a, _b, _c;
    const { timelineInterval, setTimelineInterval, } = (0, TimelineEditor_1.useTimelineEditorContext)();
    const duration = (0, core_1.useMediaDuration)();
    return (0, jsx_runtime_1.jsxs)("div", { style: Object.assign({ display: 'flex', flexDirection: 'row', padding: '0.5rem' }, (typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarContainer) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineControlBarContainer)), className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarContainer) === 'string' ? styling.timelineControlBarContainer : undefined, children: [(0, jsx_runtime_1.jsx)("div", { style: Object.assign({ display: 'flex', flexDirection: 'row', gap: '0.5rem', flexGrow: 1 }, (typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseContainer) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseContainer)), className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseContainer) === 'string' ? styling.timelineControlBarPlayPauseContainer : undefined, children: (0, jsx_runtime_1.jsx)(controls_1.PlayPause, { defaultIconSize: (_a = styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseSize) !== null && _a !== void 0 ? _a : 21, className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseButton) === 'string' ? styling.timelineControlBarPlayPauseButton : undefined, style: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseButton) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseButton, playIcon: styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayIcon, pauseIcon: styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPauseIcon, loadingIcon: (_b = styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseLoadingIcon) !== null && _b !== void 0 ? _b : (0, jsx_runtime_1.jsx)(Spinner, { size: (_c = styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseSize) !== null && _c !== void 0 ? _c : 21, className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseSpinner) === 'string' ? styling.timelineControlBarPlayPauseSpinner : undefined, style: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseSpinner) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineControlBarPlayPauseSpinner }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: Object.assign({ display: 'flex', flexDirection: 'row', gap: '0.5rem', alignItems: 'center' }, (typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomContainer) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomContainer)), className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomContainer) === 'string' ? styling.timelineControlBarZoomContainer : undefined, children: [(0, jsx_runtime_1.jsx)("button", { style: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomButton) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomButton, className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomButton) === 'string' ? styling.timelineControlBarZoomButton : undefined, onClick: () => setTimelineInterval(interval => Math.max(1, interval - 1)), children: (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomInIcon) ? styling.timelineControlBarZoomInIcon : (0, jsx_runtime_1.jsx)(ZoomIn, {}) }), (0, jsx_runtime_1.jsx)("span", { style: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomTextContainer) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomTextContainer, className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomTextContainer) === 'string' ? styling.timelineControlBarZoomTextContainer : undefined, children: (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomTextTemplate) ? styling.timelineControlBarZoomTextTemplate(timelineInterval) : `${timelineInterval} sec` }), (0, jsx_runtime_1.jsx)("button", { style: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomButton) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomButton, className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomButton) === 'string' ? styling.timelineControlBarZoomButton : undefined, onClick: () => setTimelineInterval(interval => Math.min(Math.max(5, Math.floor(duration / 40) * 10), interval + 1)), children: (styling === null || styling === void 0 ? void 0 : styling.timelineControlBarZoomOutIcon) ? styling.timelineControlBarZoomOutIcon : (0, jsx_runtime_1.jsx)(ZoomOut, {}) })] })] });
}
//# sourceMappingURL=TimelineControlBar.js.map