@playcanvas/blocks
Version:
High level abstract 3D primitives for React
24 lines • 1.35 kB
JavaScript
"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Slider } from "../components/ui/slider";
import { useTimeline } from "./splat-viewer-context";
import { Button } from "../components/ui/button";
import { PauseIcon, PlayIcon } from "lucide-react";
import { TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
function PlayButton() {
const { setIsPlaying, isPlaying } = useTimeline();
return (_jsxs(_Fragment, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { size: 'icon', variant: 'ghost', className: "cursor-pointer", onClick: () => setIsPlaying(!isPlaying), children: isPlaying ? _jsx(PauseIcon, {}) : _jsx(PlayIcon, {}) }) }), _jsx(TooltipContent, { sideOffset: 4, children: isPlaying ? "Pause" : "Play" })] }));
}
function Timeline() {
const { getTime, setTime, setIsPlaying, onCommit } = useTimeline();
const onValueChange = ([val]) => {
setIsPlaying(false);
setTime(val);
};
const onValueCommit = ([val]) => {
onCommit?.(val);
};
return (_jsxs(_Fragment, { children: [_jsx(PlayButton, {}), _jsx(Slider, { defaultValue: [getTime()], max: 1, min: 0, step: 0.001, onValueChange: onValueChange, onValueCommit: onValueCommit })] }));
}
export { Timeline };
//# sourceMappingURL=timeline.js.map