collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
33 lines (32 loc) • 2.34 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlaybackToolbar = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const use_t_1 = require("use-t");
const BasicButton_1 = require("nice-ui/lib/2-inline-block/BasicButton");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const PlayIcon_1 = require("../icons/PlayIcon");
const PauseIcon_1 = require("../icons/PauseIcon");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const PlaybackToolbar = ({ state }) => {
const [t] = (0, use_t_1.useT)();
const pinnedModel = (0, useBehaviorSubject_1.useBehaviorSubject)(state.pinnedModel$);
const view = (0, useBehaviorSubject_1.useBehaviorSubject)(state.view$);
if (view !== 'timeline' && view !== 'model')
return null;
return (React.createElement(React.Fragment, null,
!!pinnedModel && (React.createElement(React.Fragment, null,
React.createElement(BasicTooltip_1.BasicTooltip, { nowrap: true, renderTooltip: () => t('Pin previous state') },
React.createElement(BasicButton_1.BasicButton, { onClick: state.prev },
React.createElement(Iconista_1.Iconista, { set: "ant_outline", icon: "vertical-right", width: 16, height: 16 }))),
React.createElement(BasicTooltip_1.BasicTooltip, { nowrap: true, renderTooltip: () => t('Pin next state') },
React.createElement(BasicButton_1.BasicButton, { onClick: state.next },
React.createElement(Iconista_1.Iconista, { set: "ant_outline", icon: "vertical-left", width: 16, height: 16 }))))),
React.createElement(Space_1.Space, { horizontal: true, size: -2 }),
React.createElement(BasicTooltip_1.BasicTooltip, { nowrap: true, renderTooltip: () => (pinnedModel ? t('Unpin') : t('Pin latest state')) },
React.createElement(BasicButton_1.BasicButton, { fill: !!pinnedModel, onClick: state.togglePlay }, pinnedModel ? React.createElement(PlayIcon_1.PlayIcon, { width: 12, height: 12 }) : React.createElement(PauseIcon_1.PauseIcon, { width: 12, height: 12 })))));
};
exports.PlaybackToolbar = PlaybackToolbar;