@saran-ign/video-annotation-tool
Version:
[](https://www.npmjs.com/package/@saran-ign/video-annotation-tool) [](https://www.npmjs.co
55 lines (54 loc) • 3.42 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import useVideoController from "./UseVideoPlayerControllerHook";
import { ImVolumeMute } from "react-icons/im";
import { ImVolumeMute2 } from "react-icons/im";
import { FaPauseCircle, FaPlayCircle, FaExpand } from "react-icons/fa";
const TransparentVideoController = ({ playerRef, dimensions, canvasParentRef, showVideoDuration }) => {
const { playing, played, playbackRate, duration, currentTime, handlePlayPause, handleSeekChange, handleSpeedChange, handleFullScreen, formatTime, isMuted, handleMuteUnmute, } = useVideoController(playerRef, canvasParentRef);
return (_jsxs("div", { style: {
width: dimensions.width,
// minWidth: dimensions.width,
height: "35px",
minHeight: "20px",
background: "rgba(0, 0, 0, 0.4)",
display: "flex",
alignItems: "center",
margin: "4px 0",
gap: "3px",
padding: "10px 5px",
color: "#fff",
transition: "opacity 0.5s",
}, children: [_jsx("div", { onClick: handlePlayPause, style: { fontSize: "12px", cursor: "pointer", margin: "0 10px" }, children: playing ? _jsx(FaPauseCircle, { size: 25 }) : _jsx(FaPlayCircle, { size: 25 }) }), _jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: played, onChange: (e) => handleSeekChange(parseFloat(e.target.value)), style: {
flexGrow: 1,
cursor: "pointer",
accentColor: "#396BDC",
height: "6px", // optional: slim look
borderRadius: "5px", // rounded ends
background: "#ddd", // fallback color
} }), _jsxs("span", { style: { marginRight: "10px", fontSize: "14px" }, children: [formatTime(currentTime), " ", showVideoDuration && _jsxs(_Fragment, { children: ["/ ", formatTime(duration)] })] }), _jsx(FaExpand, { style: {
color: "#fff",
cursor: "pointer",
fontSize: "18px",
marginRight: "10px",
}, onClick: handleFullScreen }), _jsxs("select", { onChange: (e) => handleSpeedChange(parseFloat(e.target.value)), value: playbackRate, style: {
background: "rgba(0,0,0, 0.5)",
color: "#fff",
border: "none",
outline: "none",
padding: "5px",
cursor: "pointer",
fontSize: "10px",
marginRight: "10px",
}, children: [_jsx("option", { value: 0.25, children: "0.25x" }), _jsx("option", { value: 0.5, children: "0.5x" }), _jsx("option", { value: 1, children: "1x" }), _jsx("option", { value: 1.5, children: "1.5x" }), _jsx("option", { value: 2, children: "2x" })] }), isMuted ? (_jsx(ImVolumeMute2, { onClick: handleMuteUnmute, style: {
color: "#fff",
cursor: "pointer",
fontSize: "18px",
marginRight: "10px",
} })) : (_jsx(ImVolumeMute, { onClick: handleMuteUnmute, style: {
color: "#fff",
cursor: "pointer",
fontSize: "18px",
marginRight: "10px",
} }))] }));
};
export default TransparentVideoController;