react-video-annotation-tool
Version:
A React-based video player with built-in annotation features, enabling interactive video tagging and markup for seamless media annotation workflows
111 lines • 3.69 kB
JavaScript
import React from "react";
import useVideoController from "./UseVideoPlayerControllerHook";
import { ImVolumeMute } from "react-icons/im";
import { ImVolumeMute2 } from "react-icons/im";
import { FaPauseCircle, FaPlayCircle } from "react-icons/fa";
var TransparentVideoController = function TransparentVideoController(_ref) {
var playerRef = _ref.playerRef,
dimensions = _ref.dimensions,
canvasParentRef = _ref.canvasParentRef;
var _useVideoController = useVideoController(playerRef, canvasParentRef),
playing = _useVideoController.playing,
played = _useVideoController.played,
playbackRate = _useVideoController.playbackRate,
duration = _useVideoController.duration,
currentTime = _useVideoController.currentTime,
handlePlayPause = _useVideoController.handlePlayPause,
handleSeekChange = _useVideoController.handleSeekChange,
handleSpeedChange = _useVideoController.handleSpeedChange,
handleFullScreen = _useVideoController.handleFullScreen,
formatTime = _useVideoController.formatTime,
isMuted = _useVideoController.isMuted,
handleMuteUnmute = _useVideoController.handleMuteUnmute;
return /*#__PURE__*/React.createElement("div", {
width: dimensions.width,
style: {
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"
}
}, /*#__PURE__*/React.createElement("div", {
onClick: handlePlayPause,
style: {
fontSize: "12px",
cursor: "pointer",
margin: "0 10px"
}
}, playing ? /*#__PURE__*/React.createElement(FaPauseCircle, {
size: 25
}) : /*#__PURE__*/React.createElement(FaPlayCircle, {
size: 25
})), /*#__PURE__*/React.createElement("input", {
type: "range",
min: 0,
max: 1,
step: 0.01,
value: played,
onChange: function onChange(e) {
return handleSeekChange(parseFloat(e.target.value));
},
style: {
flexGrow: 1,
cursor: "pointer",
accentColor: "#ff0000"
}
}), /*#__PURE__*/React.createElement("span", {
style: {
marginRight: "10px",
fontSize: "14px"
}
}, formatTime(currentTime), " / ", formatTime(duration)), /*#__PURE__*/React.createElement("select", {
onChange: function onChange(e) {
return 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"
}
}, /*#__PURE__*/React.createElement("option", {
value: 0.25
}, "0.25x"), /*#__PURE__*/React.createElement("option", {
value: 0.5
}, "0.5x"), /*#__PURE__*/React.createElement("option", {
value: 1
}, "1x"), /*#__PURE__*/React.createElement("option", {
value: 1.5
}, "1.5x"), /*#__PURE__*/React.createElement("option", {
value: 2
}, "2x")), isMuted ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImVolumeMute2, {
onClick: handleMuteUnmute,
style: {
color: "#fff",
cursor: "pointer",
fontSize: "18px",
marginRight: "10px"
}
})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImVolumeMute, {
onClick: handleMuteUnmute,
style: {
color: "#fff",
cursor: "pointer",
fontSize: "18px",
marginRight: "10px"
}
})));
};
export default TransparentVideoController;