lingo3d/lib/editor/TimelineEditor/TimelineControls.js

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import AppBar from "../component/bars/AppBar";
import IconButton from "../component/IconButton";
import useSyncState from "../hooks/useSyncState";
import { getTimeline } from "../../states/useTimeline";
import { getTimelinePaused } from "../../states/useTimelinePaused";
import FirstFrameIcon from "./icons/FirstFrameIcon";
import LastFrameIcon from "./icons/LastFrameIcon";
import NextFrameIcon from "./icons/NextFrameIcon";
import PauseIcon from "../component/icons/PauseIcon";
import PlayIcon from "../component/icons/PlayIcon";
import PrevFrameIcon from "./icons/PrevFrameIcon";
import { getTimelineRecord, setTimelineRecord } from "../../states/useTimelineRecord";
import AudioIcon from "./icons/AudioIcon";
import { getTimelineMute, setTimelineMute } from "../../states/useTimelineMute";
import MuteIcon from "./icons/MuteIcon";
import { timelineFramePtr } from "../../pointers/timelineFramePtr";
import { timelinePtr } from "../../pointers/timelinePtr";
import { setTimelineFrame } from "./setTimelineFrame";
import { frameIndicatorSignal } from "./frameIndicatorSignal";
const TimelineControls = () => {
    const timeline = useSyncState(getTimeline);
    const paused = useSyncState(getTimelinePaused);
    const record = useSyncState(getTimelineRecord);
    const mute = useSyncState(getTimelineMute);
    return (_jsxs(AppBar, { noPadding: true, style: { gap: 4 }, children: [paused ? (_jsx(IconButton, { disabled: !timeline, onClick: timeline
                    ? () => {
                        if (timeline.frame >= timeline.lastFrame)
                            timeline.frame = 0;
                        frameIndicatorSignal.value = undefined;
                        timeline.paused = false;
                    }
                    : undefined, children: _jsx(PlayIcon, {}) })) : (_jsx(IconButton, { disabled: !timeline, onClick: timeline
                    ? () => {
                        frameIndicatorSignal.value = undefined;
                        timeline.paused = true;
                    }
                    : undefined, children: _jsx(PauseIcon, {}) })), _jsx(IconButton, { disabled: !timeline, onClick: () => setTimelineFrame(Math.max(timelineFramePtr[0] - 1, 0)), children: _jsx(PrevFrameIcon, {}) }), _jsx(IconButton, { disabled: !timeline, onClick: () => setTimelineFrame(timelineFramePtr[0] + 1), children: _jsx(NextFrameIcon, {}) }), _jsx(IconButton, { disabled: !timeline, onClick: () => setTimelineFrame(0), children: _jsx(FirstFrameIcon, {}) }), _jsx(IconButton, { disabled: !timeline, onClick: () => setTimelineFrame(timelinePtr[0].lastFrame), children: _jsx(LastFrameIcon, {}) }), _jsx(IconButton, { disabled: !timeline, onClick: timeline
                    ? () => {
                        setTimelineRecord(!record);
                        frameIndicatorSignal.value = undefined;
                        timeline.paused = true;
                    }
                    : undefined, children: _jsx("div", { style: {
                        width: 10,
                        height: 10,
                        borderRadius: 10,
                        background: record ? "red" : "white"
                    } }) }), _jsx(IconButton, { disabled: !timeline, onClick: () => setTimelineMute(!mute), children: mute ? _jsx(MuteIcon, {}) : _jsx(AudioIcon, {}) })] }));
};
export default TimelineControls;
//# sourceMappingURL=TimelineControls.js.map