react-icons/md#MdPause JavaScript Examples
The following examples show how to use
react-icons/md#MdPause.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AnimationController.js From covid19 with MIT License | 6 votes |
|
render() {
const { playing } = this.props
return (
<div className="anime-ctrl">
<div className={`anime-ctrl-left-right ${playing ? 'anime-ctrl-playing' : ''}`}>
<MdChevronLeft size={30} onClick={this.dateBackward} />
</div>
<div className="anime-ctrl-play">
{playing ? (
<MdPause size={30} onClick={this.stopAnimation} />
) : (
<MdPlayArrow size={30} onClick={this.startAnimation} />
)}
</div>
<div className={`anime-ctrl-left-right ${playing ? 'anime-ctrl-playing' : ''}`}>
<MdChevronRight size={30} onClick={this.dateForward} />
</div>
</div>
)
}
Example #2
| Source File: audio.esm.js From reactjs-media with MIT License | 4 votes |
|
ReactAudio = function ReactAudio(props) {
var audio = useRef(null);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
playing = _useState2[0],
setplaying = _useState2[1];
var div = useRef(null);
var _useState3 = useState(0),
_useState4 = _slicedToArray(_useState3, 2),
width = _useState4[0],
setwidth = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
small = _useState6[0],
setsmall = _useState6[1]; // eslint-disable-next-line no-unused-vars
var _useState7 = useState(0),
_useState8 = _slicedToArray(_useState7, 2),
vwidth = _useState8[0],
setvwidth = _useState8[1];
var _useState9 = useState(false),
_useState10 = _slicedToArray(_useState9, 2),
mute = _useState10[0],
setmute = _useState10[1];
var _useState11 = useState('00:00'),
_useState12 = _slicedToArray(_useState11, 2),
ct = _useState12[0],
setcurrenttime = _useState12[1];
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
anchorEl = _React$useState2[0],
setAnchorEl = _React$useState2[1];
var OpenMenu = function OpenMenu(event) {
setAnchorEl(event.currentTarget);
};
var CloseMenu = function CloseMenu() {
setAnchorEl(null);
};
function va(e, n) {
var time = n / 100 * 1;
audio.current.volume = time;
setvwidth(n);
}
function onSeek(e, newValue) {
var duration = audio.current.duration;
var time = newValue / 100 * duration;
audio.current.currentTime = time;
setwidth(newValue);
if (props.onSeek) {
props.onSeek();
}
}
function TimeUpdate(e) {
var currentTime = audio.current.currentTime;
setcurrenttime(calcTime(currentTime));
}
function Mute(_x) {
return _Mute.apply(this, arguments);
}
function _Mute() {
_Mute = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return setmute(!mute);
case 2:
if (audio.current.volume > 0) {
audio.current.volume = 0;
setvwidth(0);
} else {
audio.current.volume = 1;
setvwidth(100);
}
if (props.onMute) {
props.onMute(mute);
}
case 4:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return _Mute.apply(this, arguments);
}
function calcTime(d) {
if (isNaN(d)) {
return '00:00';
}
var hours = d / 3600;
var hh = d % 3600;
var time = hh / 60;
var h = Math.floor(hours);
var f = Math.floor(time);
var seconds = d % 60;
seconds = Math.floor(seconds);
if (seconds < 10) {
seconds = "0".concat(seconds);
}
if (f < 10) {
f = "0".concat(f);
}
if (h <= 0) {
h = "";
} else if (h < 10 && h > 0) {
h = "0".concat(h, ":");
}
return "".concat(h).concat(f, ":").concat(seconds);
}
function timeChanging(e) {
var _audio$current = audio.current,
currentTime = _audio$current.currentTime,
duration = _audio$current.duration;
var w = currentTime / duration * 100;
setwidth(w);
if (props.onTimeUpdate) {
props.onTimeUpdate(e, currentTime, w);
}
}
function play() {
audio.current.play();
setplaying(true);
if (props.onPlay) {
props.onPlay();
}
}
function pause() {
audio.current.pause();
setplaying(false);
if (props.onPause) {
props.onPause();
}
}
function foward(e) {
var x = 0.025 * audio.current.duration;
audio.current.currentTime += x;
if (props.onFoward) {
props.onFoward();
}
}
function rewind(e) {
var x = 0.05 * audio.current.currentTime;
audio.current.currentTime -= x;
if (props.onRewind) {
props.onRewind();
}
}
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("section", {
className: "react-audio-covering-div_EJIJIJijajijshi_2428242cf_22 ".concat(props.className)
}, /*#__PURE__*/React.createElement("audio", {
ref: audio,
autoPlay: props.autoPlay ? true : false,
onPlay: function onPlay() {
setplaying(true);
},
onPause: function onPause() {
setplaying(false);
},
onTimeUpdate: function onTimeUpdate(e) {
TimeUpdate();
timeChanging(e);
}
}, /*#__PURE__*/React.createElement("source", {
src: props.src,
type: "audio/mpeg"
})), /*#__PURE__*/React.createElement("div", {
className: "audio-react-p1"
}, /*#__PURE__*/React.createElement("div", {
className: "hundred"
}, /*#__PURE__*/React.createElement(Grid, {
container: true,
spacing: 2
}, /*#__PURE__*/React.createElement(Grid, {
item: true
}, /*#__PURE__*/React.createElement(Typography, {
variant: "caption",
color: "textSecondary",
component: "span"
}, ct)), /*#__PURE__*/React.createElement(Grid, {
item: true,
xs: true
}, /*#__PURE__*/React.createElement(Slider, {
style: props.primaryColor ? {
color: props.primaryColor
} : {},
value: width,
onChange: onSeek,
"aria-labelledby": "continuous-slider"
})), /*#__PURE__*/React.createElement(Grid, {
item: true
}, /*#__PURE__*/React.createElement(Typography, {
variant: "caption",
color: "textSecondary",
component: "span"
}, audio.current ? calcTime(audio.current.duration) : /*#__PURE__*/React.createElement(React.Fragment, null, "00:00")))))), /*#__PURE__*/React.createElement("div", {
className: "audio-display-controls"
}, /*#__PURE__*/React.createElement("div", {
className: "react-audio-play"
}, playing ? /*#__PURE__*/React.createElement(IconButton, {
style: props.primaryColor ? {
color: props.primaryColor
} : {},
onClick: pause,
color: "primary",
"aria-label": "upload picture",
component: "span"
}, /*#__PURE__*/React.createElement(MdPause, null)) : /*#__PURE__*/React.createElement(IconButton, {
style: props.primaryColor ? {
color: props.primaryColor
} : {},
onClick: play,
color: "primary",
"aria-label": "upload picture",
component: "span"
}, /*#__PURE__*/React.createElement(MdPlayArrow, null))), /*#__PURE__*/React.createElement("div", {
className: "react-audio-rewind"
}, /*#__PURE__*/React.createElement(IconButton, {
style: props.primaryColor ? {
color: props.primaryColor
} : {},
onClick: rewind,
color: "primary",
"aria-label": "upload picture",
component: "span"
}, /*#__PURE__*/React.createElement(MdFastRewind, null))), /*#__PURE__*/React.createElement("div", {
className: "react-audio-foward"
}, /*#__PURE__*/React.createElement(IconButton, {
style: props.primaryColor ? {
color: props.primaryColor
} : {},
onClick: foward,
color: "primary",
"aria-label": "upload picture",
component: "span"
}, /*#__PURE__*/React.createElement(MdFastForward, null))), /*#__PURE__*/React.createElement("div", {
className: "react-audio-controls"
}, /*#__PURE__*/React.createElement("div", {
className: "volume-add"
}, /*#__PURE__*/React.createElement(Slider, {
style: props.primaryColor ? {
color: props.primaryColor
} : {},
value: audio.current ? audio.current.volume / 1 * 100 : 0,
onChange: va,
"aria-labelledby": "continuous-slider"
})), audio.current ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
style: props.primaryColor ? {
color: props.primaryColor
} : {},
onClick: Mute,
"aria-label": "upload picture",
component: "span"
}, audio.current.volume === 0 ? /*#__PURE__*/React.createElement(MdVolumeOff, null) : /*#__PURE__*/React.createElement(React.Fragment, null, audio.current.volume < 0.3 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MdVolumeMute, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, audio.current.volume < 0.7 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MdVolumeDown, null)) : /*#__PURE__*/React.createElement(MdVolumeUp, null))))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
style: props.primaryColor ? {
color: props.primaryColor
} : {},
onClick: Mute,
"aria-label": "upload picture",
component: "span"
}, /*#__PURE__*/React.createElement(MdVolumeUp, null)))), /*#__PURE__*/React.createElement("div", {
className: "react-audio-fixed"
}, /*#__PURE__*/React.createElement(IconButton, {
"aria-controls": "audio-menu",
"aria-haspopup": "true",
onClick: OpenMenu,
color: "primary",
style: props.primaryColor ? {
color: props.primaryColor
} : {},
"aria-label": "settings",
component: "span"
}, /*#__PURE__*/React.createElement(MdSettings, null)), /*#__PURE__*/React.createElement(Menu, {
id: "audio-menu",
anchorEl: anchorEl,
keepMounted: true,
open: Boolean(anchorEl),
onClose: CloseMenu
}, /*#__PURE__*/React.createElement(Tooltip, {
title: "Mini player",
"aria-label": "add",
placement: "left"
}, /*#__PURE__*/React.createElement(MenuItem, {
onClick: function onClick() {
setsmall(!small);
CloseMenu();
}
}, /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
style: props.primaryColor ? {
color: props.primaryColor
} : {},
onClick: function onClick() {
setsmall(!small);
},
"aria-label": "upload picture",
component: "span"
}, /*#__PURE__*/React.createElement(MdCallMade, null)))), props.download ? /*#__PURE__*/React.createElement(Tooltip, {
title: "Download",
"aria-label": "add",
placement: "left"
}, /*#__PURE__*/React.createElement(MenuItem, {
onClick: function onClick() {
CloseMenu();
}
}, /*#__PURE__*/React.createElement("a", {
download: "audio",
href: props.src
}, /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
style: props.primaryColor ? {
color: props.primaryColor
} : {},
"aria-label": "upload picture",
component: "span"
}, /*#__PURE__*/React.createElement(MdFileDownload, null))))) : /*#__PURE__*/React.createElement(React.Fragment, null)))), small ? /*#__PURE__*/React.createElement("div", {
className: "miniplayermode_2ueyhud87928_wuh"
}, /*#__PURE__*/React.createElement("span", null, "Playing In Mini-Player mode.")) : /*#__PURE__*/React.createElement(React.Fragment, null)), small ? /*#__PURE__*/React.createElement("aside", {
className: "react-audio-covering-div_EJI ".concat(props.className)
}, /*#__PURE__*/React.createElement("div", {
className: "react-audio-play"
}, playing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
style: props.primaryColor ? {
color: props.primaryColor
} : {},
onClick: pause,
"aria-label": "upload picture",
component: "span"
}, /*#__PURE__*/React.createElement(MdPauseCircleFilled, null))) : /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
style: props.primaryColor ? {
color: props.primaryColor
} : {},
onClick: play,
"aria-label": "upload picture",
component: "span"
}, /*#__PURE__*/React.createElement(MdPlayCircleFilled, null))), /*#__PURE__*/React.createElement("div", {
className: "playing-animation"
}, /*#__PURE__*/React.createElement("div", {
className: "first",
style: playing ? {} : {
animation: 'none'
}
}), /*#__PURE__*/React.createElement("div", {
className: "middle",
style: playing ? {} : {
animation: 'none'
}
}), /*#__PURE__*/React.createElement("div", {
className: "first",
style: playing ? {} : {
animation: 'none'
}
})), /*#__PURE__*/React.createElement("div", {
className: "react-audio-fixed"
}, /*#__PURE__*/React.createElement(IconButton, {
color: "primary",
style: props.primaryColor ? {
color: props.primaryColor
} : {},
onClick: function onClick() {
setsmall(!small);
},
"aria-label": "upload picture",
component: "span"
}, /*#__PURE__*/React.createElement(MdCallReceived, null)))) : /*#__PURE__*/React.createElement(React.Fragment, null));
}
Example #3
| Source File: video.esm.js From reactjs-media with MIT License | 4 votes |
|
ControlsBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
var video = props.video,
ctt = props.ctt,
_onMouseMove = props.onMouseMove,
ofwidth = props.ofwidth,
onSeek = props.onSeek,
ct = props.ct,
calcTime = props.calcTime,
pause = props.pause,
play = props.play,
rewind = props.rewind,
foward = props.foward,
va = props.va,
Mute = props.Mute,
playing = props.playing,
fulls = props.fulls,
exitFullScreen = props.exitFullScreen,
enterFullScreen = props.enterFullScreen,
more = props.more,
pp = props.pp,
minusp = props.minusp,
addp = props.addp,
mm = props.mm;
var div = ref.div,
vdiv = ref.vdiv;
return /*#__PURE__*/React.createElement("div", {
className: "video-react-lower-bar_dhhiahhbhhbhb3767d7637____u"
}, /*#__PURE__*/React.createElement("div", {
className: "hundred tooltip"
}, /*#__PURE__*/React.createElement("div", {
className: "progress-video-react",
ref: div,
onMouseMove: function onMouseMove(e) {
_onMouseMove(e);
},
onClick: onSeek
}, /*#__PURE__*/React.createElement("span", {
style: {
left: "".concat(ofwidth, "%")
},
className: "tooltiptext"
}, ctt), /*#__PURE__*/React.createElement("div", {
className: "finnished",
style: video.current ? {
width: "".concat(video.current.currentTime / video.current.duration * 100, "%"),
background: props.primaryColor ? props.primaryColor : ''
} : {
width: 0
}
}, /*#__PURE__*/React.createElement("div", {
className: "point"
})))), /*#__PURE__*/React.createElement("div", {
className: "time-stamps"
}, /*#__PURE__*/React.createElement("div", {
className: "current"
}, ct), /*#__PURE__*/React.createElement("div", {
className: "fullstime"
}, video.current ? calcTime(video.current.duration) : /*#__PURE__*/React.createElement(React.Fragment, null, "--:--"))), /*#__PURE__*/React.createElement("div", {
className: "video-react-controls"
}, playing ? /*#__PURE__*/React.createElement(Tooltip, {
title: "Pause",
"aria-label": "add",
placement: "top"
}, /*#__PURE__*/React.createElement("div", {
className: "video-react-pause",
onClick: pause
}, /*#__PURE__*/React.createElement(MdPause, null))) : /*#__PURE__*/React.createElement(Tooltip, {
title: "Play",
"aria-label": "add",
placement: "top"
}, /*#__PURE__*/React.createElement("div", {
className: "video-react-play",
onClick: play
}, /*#__PURE__*/React.createElement(MdPlayArrow, null))), /*#__PURE__*/React.createElement(Tooltip, {
title: "Rewind",
"aria-label": "add",
placement: "top"
}, /*#__PURE__*/React.createElement("div", {
className: "video-react-rewind",
onClick: rewind
}, /*#__PURE__*/React.createElement(MdFastRewind, null))), /*#__PURE__*/React.createElement(Tooltip, {
title: "Forward",
"aria-label": "add",
placement: "top"
}, /*#__PURE__*/React.createElement("div", {
className: "video-react-forward",
onClick: foward
}, /*#__PURE__*/React.createElement(MdFastForward, null))), /*#__PURE__*/React.createElement("div", {
className: "video-react-pro"
}), /*#__PURE__*/React.createElement("div", {
className: "video-react-pro"
}), /*#__PURE__*/React.createElement(Tooltip, {
title: "Volume",
"aria-label": "add",
placement: "top"
}, /*#__PURE__*/React.createElement("div", {
className: "video-react-volume"
}, /*#__PURE__*/React.createElement("div", {
className: "volume-add"
}, /*#__PURE__*/React.createElement("div", {
className: "volume-div",
ref: vdiv,
onClick: va
}, /*#__PURE__*/React.createElement("div", {
className: "finnished",
style: video.current ? {
width: "".concat(video.current.volume / 1 * 100, "%")
} : {
width: 0
}
}), /*#__PURE__*/React.createElement("div", {
className: "point"
}))), video.current ? /*#__PURE__*/React.createElement(React.Fragment, null, video.current.volume === 0 ? /*#__PURE__*/React.createElement(MdVolumeOff, {
onClick: Mute
}) : /*#__PURE__*/React.createElement(React.Fragment, null, video.current.volume < 0.3 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MdVolumeMute, {
onClick: Mute
})) : /*#__PURE__*/React.createElement(React.Fragment, null, video.current.volume < 0.7 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MdVolumeDown, {
onClick: Mute
})) : /*#__PURE__*/React.createElement(MdVolumeUp, {
onClick: Mute
})))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MdVolumeUp, null)))), /*#__PURE__*/React.createElement(Tooltip, {
title: "Fullscreen",
"aria-label": "add",
placement: "top"
}, fulls ? /*#__PURE__*/React.createElement("div", {
className: "video-react-fullscreen",
onClick: exitFullScreen
}, /*#__PURE__*/React.createElement(MdFullscreenExit, null)) : /*#__PURE__*/React.createElement("div", {
className: "video-react-fullscreen",
onClick: enterFullScreen
}, /*#__PURE__*/React.createElement(MdFullscreen, null))), /*#__PURE__*/React.createElement(Tooltip, {
arrow: true,
title: "Settings",
"aria-label": "add",
placement: "left"
}, /*#__PURE__*/React.createElement("div", {
className: "video-react-more"
}, /*#__PURE__*/React.createElement("div", {
style: more ? {
transform: 'scale(1)',
opacity: 1
} : {},
className: "video-react-menu"
}, /*#__PURE__*/React.createElement("a", {
download: "video",
href: props.src,
className: "list-",
onClick: pp
}, /*#__PURE__*/React.createElement("span", {
className: "icon"
}, /*#__PURE__*/React.createElement(MdFileDownload, null)), /*#__PURE__*/React.createElement("span", {
className: "text"
}, "Download")), /*#__PURE__*/React.createElement("div", {
className: "list-",
onClick: pp
}, /*#__PURE__*/React.createElement("span", {
className: "icon"
}, /*#__PURE__*/React.createElement(MdPictureInPictureAlt, null)), /*#__PURE__*/React.createElement("span", {
className: "text"
}, "Picture In Picture")), /*#__PURE__*/React.createElement(Tooltip, {
arrow: true,
title: "Playback speed",
"aria-label": "add",
placement: "left"
}, /*#__PURE__*/React.createElement("div", {
className: "list-1"
}, /*#__PURE__*/React.createElement("span", {
className: "icon",
onClick: minusp,
style: video.current ? video.current.playbackRate === 0 ? {
cursor: 'not-allowed'
} : {} : {}
}, /*#__PURE__*/React.createElement(MdRemove, null)), /*#__PURE__*/React.createElement("span", {
className: "text"
}, video.current ? video.current.playbackRate : 1), /*#__PURE__*/React.createElement("span", {
className: "icon",
onClick: addp
}, /*#__PURE__*/React.createElement(MdAdd, null))))), /*#__PURE__*/React.createElement(MdSettings, {
style: more ? {
transform: 'rotate(40deg)',
transition: 'all 0.2s'
} : {
transition: 'all 0.2s'
},
onContextMenu: function onContextMenu(e) {
e.preventDefault();
},
onClick: mm
})))));
})
Example #4
| Source File: video.esm.js From reactjs-media with MIT License | 4 votes |
|
ReactVideo = function ReactVideo(props) {
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
playing = _useState2[0],
setplaying = _useState2[1];
var video = useRef(null);
var div = useRef(null);
var sect = useRef(null);
var vdiv = useRef(null);
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
error = _useState4[0],
seterror = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
y = _useState6[0],
sety = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
x = _useState8[0],
setx = _useState8[1];
var _useState9 = useState(false),
_useState10 = _slicedToArray(_useState9, 2),
on = _useState10[0],
seton = _useState10[1];
var _useState11 = useState(true),
_useState12 = _slicedToArray(_useState11, 2),
loaded = _useState12[0],
setloaded = _useState12[1];
var _useState13 = useState(false),
_useState14 = _slicedToArray(_useState13, 2),
fulls = _useState14[0],
setfulls = _useState14[1];
var _useState15 = useState(false),
_useState16 = _slicedToArray(_useState15, 2),
mute = _useState16[0],
setmute = _useState16[1];
var _useState17 = useState(false),
_useState18 = _slicedToArray(_useState17, 2),
more = _useState18[0],
setmore = _useState18[1];
var _useState19 = useState('00:00'),
_useState20 = _slicedToArray(_useState19, 2),
ct = _useState20[0],
setcurrenttime = _useState20[1];
var _useState21 = useState('00:00'),
_useState22 = _slicedToArray(_useState21, 2),
ctt = _useState22[0],
setctt = _useState22[1];
var _useState23 = useState(0),
_useState24 = _slicedToArray(_useState23, 2),
ofwidth = _useState24[0],
setofwidth = _useState24[1];
var mm = function mm() {
setmore(!more);
};
function va(e) {
var x = e.nativeEvent.layerX;
var offsetWidth = vdiv.current.offsetWidth;
var time = x / offsetWidth * 1;
video.current.volume = time;
}
function foward(e) {
var x = 0.025 * video.current.duration;
video.current.currentTime += x;
if (props.onFoward) {
props.onFoward();
}
}
function rewind(e) {
var x = 0.05 * video.current.currentTime;
video.current.currentTime -= x;
if (props.onRewind) {
props.onRewind();
}
}
function onSeek(e) {
var x = e.nativeEvent.layerX;
var offsetWidth = div.current.offsetWidth;
var duration = video.current.duration;
var time = x / offsetWidth * duration;
video.current.currentTime = time;
var xx = x - 12;
var seekwidth = xx / offsetWidth * 100;
setofwidth(seekwidth);
if (props.onSeek) {
props.onSeek();
}
}
function onMove(e) {
var x = e.nativeEvent.layerX;
var offsetWidth = div.current.offsetWidth;
var duration = video.current.duration;
var time = x / offsetWidth * duration;
setctt(calcTime(time));
var xx = x - 12;
var seekwidth = xx / offsetWidth * 100;
setofwidth(seekwidth);
if (props.onSeek) {
props.onSeek();
}
}
function addp() {
if (video.current.playbackRate < 16) {
video.current.playbackRate += 1;
}
}
function minusp() {
if (video.current.playbackRate > 0) {
video.current.playbackRate -= 1;
}
}
function TimeUpdate(e) {
var _video$current = video.current,
currentTime = _video$current.currentTime,
duration = _video$current.duration;
setcurrenttime(calcTime(currentTime));
if (props.onTimeUpdate) {
props.onTimeUpdate(e, currentTime, duration);
}
}
function Mute(_x) {
return _Mute.apply(this, arguments);
}
function _Mute() {
_Mute = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return setmute(!mute);
case 2:
if (video.current.volume > 0) {
video.current.volume = 0;
} else {
video.current.volume = 1;
}
if (props.onMute) {
props.onMute(mute);
}
case 4:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return _Mute.apply(this, arguments);
}
function calcTime(d) {
if (isNaN(d)) {
return '00:00';
}
var hours = d / 3600;
var hh = d % 3600;
var time = hh / 60;
var h = Math.floor(hours);
var f = Math.floor(time);
var seconds = d % 60;
seconds = Math.floor(seconds);
if (seconds < 10) {
seconds = "0".concat(seconds);
}
if (f < 10) {
f = "0".concat(f);
}
if (h <= 0) {
h = "";
} else if (h < 10 && h > 0) {
h = "0".concat(h, ":");
}
return "".concat(h).concat(f, ":").concat(seconds);
}
function pp() {
video.current.requestPictureInPicture();
if (props.onRequestPictureInPicture) {
props.onRequestPictureInPicture();
}
}
function setClipboard(text) {
navigator.clipboard.writeText(text).then(function () {}, function () {
// eslint-disable-next-line no-restricted-globals
alert('failed to copy url');
});
}
var play = function play(e) {
video.current.play();
setplaying(true);
if (props.onPlay) {
props.onPlay(e);
}
};
var pause = function pause(e) {
video.current.pause();
setplaying(false);
if (props.onPause) {
props.onPause(e);
}
};
function contextMenu(e) {
var _e$nativeEvent = e.nativeEvent,
clientY = _e$nativeEvent.clientY,
clientX = _e$nativeEvent.clientX;
setx(clientX);
sety(clientY);
seton(true);
}
var enterFullScreen = function enterFullScreen(e) {
sect.current.requestFullscreen();
if (props.onEnterFullScreen) {
props.onEnterFullScreen(e);
}
setfulls(true);
};
var exitFullScreen = function exitFullScreen() {
sect.current.ownerDocument.exitFullscreen();
setfulls(false);
};
function handleClose() {
seton(false);
}
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", {
jsx: "true"
}, "\n .video-react-pause:hover,\n .video-react-play:hover,\n .video-react-volume:hover,\n .video-react-rewind:hover,\n .video-react-more:hover,\n .video-react-fullscreen:hover,\n .video-react-forward:hover {\n color: ".concat(props.primaryColor, ";\n }\n .finnished {\n background-color: ").concat(props.primaryColor, " !important;\n }\n .point {\n background-color: ").concat(props.primaryColor, " !important;\n }\n \n ")), /*#__PURE__*/React.createElement("section", {
onContextMenu: function onContextMenu(e) {
e.preventDefault();
contextMenu(e);
},
onBlur: function onBlur() {
handleClose();
},
className: "one___flkjsjJJNJnn_nANN8hG_YG7GY7g7BH9 ".concat(props.className),
ref: sect
}, /*#__PURE__*/React.createElement(Video, {
onError: function onError() {
seterror(true);
},
ref: {
video: video
},
autoPlay: props.autoPlay ? true : false,
onPause: function onPause() {
setplaying(false);
},
onPlay: function onPlay() {
setplaying(true);
},
className: "video-react",
onTimeUpdate: function onTimeUpdate(e) {
TimeUpdate(e);
},
src: props.src,
type: props.type ? props.type : "video/mp4"
}), video.current ? /*#__PURE__*/React.createElement(React.Fragment, null, video.current.seeking ? /*#__PURE__*/React.createElement("div", {
className: "video-react-loading"
}) : /*#__PURE__*/React.createElement(React.Fragment, null)) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(ControlsBar, {
ref: {
div: div,
vdiv: vdiv
},
video: video,
ctt: ctt,
onMouseMove: onMove,
ofwidth: ofwidth,
onSeek: onSeek,
ct: ct,
calcTime: calcTime,
pause: pause,
play: play,
rewind: rewind,
foward: foward,
va: va,
Mute: Mute,
playing: playing,
fulls: fulls,
exitFullScreen: exitFullScreen,
enterFullScreen: enterFullScreen,
more: more,
pp: pp,
minusp: minusp,
addp: addp,
mm: mm
}), /*#__PURE__*/React.createElement("div", {
className: "video-react-error_12ede3ws3",
style: error ? {
opacity: 1
} : {}
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(MdErrorOutline, null)), " ", /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("b", null, "Error:"), " Failed to load Video"), /*#__PURE__*/React.createElement("span", {
className: "cancel",
onClick: function onClick() {
seterror(false);
}
}, /*#__PURE__*/React.createElement(MdClose, null))), on ? /*#__PURE__*/React.createElement("div", {
className: "menu-c",
onClick: function onClick() {
handleClose();
}
}, /*#__PURE__*/React.createElement("div", {
className: "menu-contxt",
onClick: function onClick() {
handleClose();
}
}, /*#__PURE__*/React.createElement("div", {
className: "video-rect-context",
style: {
top: y,
left: x
}
}, /*#__PURE__*/React.createElement("ul", {
className: "context-list"
}, playing ? /*#__PURE__*/React.createElement("li", {
className: "play",
onClick: pause
}, /*#__PURE__*/React.createElement("span", {
className: "i"
}, /*#__PURE__*/React.createElement(MdPause, null)), /*#__PURE__*/React.createElement("span", {
className: "t"
}, "Pause")) : /*#__PURE__*/React.createElement("li", {
className: "play",
onClick: play
}, /*#__PURE__*/React.createElement("span", {
className: "i"
}, /*#__PURE__*/React.createElement(MdPlayArrow, null)), /*#__PURE__*/React.createElement("span", {
className: "t"
}, "Play")), /*#__PURE__*/React.createElement("li", {
onClick: function onClick() {
setClipboard(video.current ? video.current.currentSrc : '');
}
}, /*#__PURE__*/React.createElement("span", {
className: "i"
}, /*#__PURE__*/React.createElement(MdFlipToBack, null)), /*#__PURE__*/React.createElement("span", {
className: "t"
}, "Copy Video Url")), video.current ? /*#__PURE__*/React.createElement(React.Fragment, null, video.current.loop ? /*#__PURE__*/React.createElement("li", {
onClick: function onClick() {
video.current.loop = false;
}
}, /*#__PURE__*/React.createElement("span", {
className: "i"
}, /*#__PURE__*/React.createElement(MdLoop, null)), /*#__PURE__*/React.createElement("span", {
className: "t"
}, "Stop Loop")) : /*#__PURE__*/React.createElement("li", {
onClick: function onClick() {
video.current.loop = true;
}
}, /*#__PURE__*/React.createElement("span", {
className: "i"
}, /*#__PURE__*/React.createElement(MdLoop, null)), /*#__PURE__*/React.createElement("span", {
className: "t"
}, "Loop"))) : /*#__PURE__*/React.createElement(React.Fragment, null))))) : /*#__PURE__*/React.createElement(React.Fragment, null), playing === false && loaded === true ? /*#__PURE__*/React.createElement("div", {
className: "poster"
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
src: props.poster,
alt: "video poster"
}), /*#__PURE__*/React.createElement("div", {
style: props.primaryColor ? {
background: props.primaryColor
} : {},
onClick: function onClick() {
play();
setloaded(false);
}
}, /*#__PURE__*/React.createElement(MdPlayArrow, null)))) : /*#__PURE__*/React.createElement(React.Fragment, null), props.childern));
}
Example #5
| Source File: react-audio.jsx From reactjs-media with MIT License | 4 votes |
|
ReactAudio = (props) => {
const audio = useRef(null)
const [playing, setplaying] = useState(false)
const div = useRef(null)
const [width, setwidth] = useState(0)
const [small, setsmall] = useState(false)
// eslint-disable-next-line no-unused-vars
const [vwidth, setvwidth] = useState(0)
const [mute, setmute] = useState(false)
const [ct, setcurrenttime] = useState('00:00')
const [anchorEl, setAnchorEl] = React.useState(null);
const OpenMenu = (event) => {
setAnchorEl(event.currentTarget);
};
const CloseMenu = () => {
setAnchorEl(null);
};
function va(e, n) {
let time = (n / 100) * 1
audio.current.volume = time
setvwidth(n)
}
function onSeek(e, newValue) {
const { duration } = audio.current
let time = (newValue / 100) * duration
audio.current.currentTime = time
setwidth(newValue)
if (props.onSeek) {
props.onSeek()
}
}
function TimeUpdate(e) {
const { currentTime } = audio.current
setcurrenttime(calcTime(currentTime))
}
async function Mute(e) {
await setmute(!mute)
if (audio.current.volume > 0) {
audio.current.volume = 0
setvwidth(0)
} else {
audio.current.volume = 1
setvwidth(100)
}
if (props.onMute) {
props.onMute(mute)
}
}
function calcTime(d) {
if (isNaN(d)) {
return '00:00'
}
let hours = d / 3600;
let hh = d % 3600;
let time = hh / 60;
let h = Math.floor(hours)
let f = Math.floor(time)
let seconds = d % 60
seconds = Math.floor(seconds)
if (seconds < 10) {
seconds = `0${seconds}`
}
if (f < 10) {
f = `0${f}`
}
if (h <= 0) {
h = ``
} else if (h < 10 && h > 0) {
h = `0${h}:`
}
return `${h}${f}:${seconds}`
}
function timeChanging(e) {
const { currentTime, duration } = audio.current
const w = (currentTime / duration) * 100
setwidth(w)
if (props.onTimeUpdate) {
props.onTimeUpdate(e, currentTime, w)
}
}
function play() {
audio.current.play()
setplaying(true)
if (props.onPlay) {
props.onPlay()
}
}
function pause() {
audio.current.pause()
setplaying(false)
if (props.onPause) {
props.onPause()
}
}
function foward(e) {
let x = 0.025 * audio.current.duration
audio.current.currentTime += x
if (props.onFoward) {
props.onFoward()
}
}
function rewind(e) {
let x = 0.05 * audio.current.currentTime
audio.current.currentTime -= x
if (props.onRewind) {
props.onRewind()
}
}
return (
<div >
<section className={`react-audio-covering-div_EJIJIJijajijshi_2428242cf_22 ${props.className}`}>
<audio ref={audio} autoPlay={props.autoPlay ? true : false} onPlay={() => { setplaying(true) }} onPause={() => { setplaying(false) }} onTimeUpdate={(e) => {
TimeUpdate(e)
timeChanging(e)
}}>
<source src={props.src} type="audio/mpeg"></source>
</audio>
<div className="audio-react-p1">
<div className="hundred">
<Grid container spacing={2}>
<Grid item>
<Typography variant="caption" color="textSecondary" component="span">
{ct}
</Typography>
</Grid>
<Grid item xs>
<Slider style={props.primaryColor ? { color: props.primaryColor } : {}} value={width} onChange={onSeek} aria-labelledby="continuous-slider" />
</Grid>
<Grid item>
<Typography variant="caption" color="textSecondary" component="span">
{audio.current ? calcTime(audio.current.duration) : <>00:00</>}
</Typography>
</Grid>
</Grid>
</div>
</div>
<div className="audio-display-controls">
<div className="react-audio-play">
{playing ?
<IconButton style={props.primaryColor ? { color: props.primaryColor } : {}} onClick={pause} color="primary" aria-label="upload picture" component="span">
<MdPause />
</IconButton>
: <IconButton style={props.primaryColor ? { color: props.primaryColor } : {}} onClick={play} color="primary" aria-label="upload picture" component="span">
<MdPlayArrow />
</IconButton>}
</div>
<div className="react-audio-rewind">
<IconButton style={props.primaryColor ? { color: props.primaryColor } : {}} onClick={rewind} color="primary" aria-label="upload picture" component="span">
<MdFastRewind />
</IconButton>
</div>
<div className="react-audio-foward">
<IconButton style={props.primaryColor ? { color: props.primaryColor } : {}} onClick={foward} color="primary" aria-label="upload picture" component="span">
<MdFastForward />
</IconButton>
</div>
<div className="react-audio-controls"><div className="volume-add">
<Slider style={props.primaryColor ? { color: props.primaryColor } : {}} value={audio.current ? (audio.current.volume / 1) * 100 : 0} onChange={va} aria-labelledby="continuous-slider" />
</div>
{audio.current ? <>
<IconButton color="primary" style={props.primaryColor ? { color: props.primaryColor } : {}} onClick={Mute} aria-label="upload picture" component="span">
{
audio.current.volume === 0 ?
<MdVolumeOff /> :
<>
{audio.current.volume < 0.3 ? <><MdVolumeMute /></> :
<>{audio.current.volume < 0.7 ? <><MdVolumeDown /></> :
<MdVolumeUp />}</>
}</>
}</IconButton></> : <>
<IconButton color="primary" style={props.primaryColor ? { color: props.primaryColor } : {}} onClick={Mute} aria-label="upload picture" component="span">
<MdVolumeUp />
</IconButton>
</>}
</div>
<div className="react-audio-fixed">
<IconButton aria-controls="audio-menu" aria-haspopup="true" onClick={OpenMenu} color="primary" style={props.primaryColor ? { color: props.primaryColor } : {}} aria-label="settings" component="span">
<MdSettings />
</IconButton>
<Menu
id="audio-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={CloseMenu}
><Tooltip title="Mini player" aria-label="add" placement="left" >
<MenuItem onClick={() => { setsmall(!small); CloseMenu() }}>
<IconButton color="primary" style={props.primaryColor ? { color: props.primaryColor } : {}} onClick={() => { setsmall(!small) }} aria-label="upload picture" component="span">
<MdCallMade />
</IconButton></MenuItem></Tooltip>
{props.download ? <Tooltip title="Download" aria-label="add" placement="left" ><MenuItem onClick={() => { CloseMenu() }}><a download='audio' href={props.src} >
<IconButton color="primary" style={props.primaryColor ? { color: props.primaryColor } : {}} aria-label="upload picture" component="span"><MdFileDownload /></IconButton>
</a></MenuItem></Tooltip> : <></>}
</Menu>
</div>
</div>
{small ?
<div className='miniplayermode_2ueyhud87928_wuh'>
<span>Playing In Mini-Player mode.</span>
</div> : <></>}
</section>
{small ?
<aside className={`react-audio-covering-div_EJI ${props.className}`}>
<div className="react-audio-play">
{playing ? <><IconButton color="primary" style={props.primaryColor ? { color: props.primaryColor } : {}} onClick={pause} aria-label="upload picture" component="span">
<MdPauseCircleFilled />
</IconButton></>
: <IconButton color="primary" style={props.primaryColor ? { color: props.primaryColor } : {}} onClick={play} aria-label="upload picture" component="span">
<MdPlayCircleFilled />
</IconButton>
}
</div>
<div className="playing-animation" >
<div className="first" style={playing ? {} : { animation: 'none' }}></div>
<div className="middle" style={playing ? {} : { animation: 'none' }}></div>
<div className="first" style={playing ? {} : { animation: 'none' }}></div>
</div>
<div className="react-audio-fixed">
<IconButton color="primary" style={props.primaryColor ? { color: props.primaryColor } : {}} onClick={() => { setsmall(!small) }} aria-label="upload picture" component="span">
<MdCallReceived />
</IconButton>
</div>
</aside> : <></>}
</div>
)
}
Example #6
| Source File: Components.jsx From reactjs-media with MIT License | 4 votes |
|
ControlsBar = React.forwardRef((props, ref) => {
const { video, ctt, onMouseMove, ofwidth, onSeek, ct, calcTime, pause, play, rewind, foward, va, Mute, playing, fulls,
exitFullScreen,
enterFullScreen,
more,
pp,
minusp,
addp,
mm } = props
const { div, vdiv } = ref
return (
<div className="video-react-lower-bar_dhhiahhbhhbhb3767d7637____u">
<div className="hundred tooltip"><div className="progress-video-react" ref={div} onMouseMove={(e) => {
onMouseMove(e)
}} onClick={onSeek} >
<span style={{ left: `${ofwidth}%` }} className="tooltiptext">{ctt}</span>
<div
className="finnished"
style={video.current ? { width: `${(video.current.currentTime / video.current.duration) * 100}%`, background: props.primaryColor ? props.primaryColor : '' } : { width: 0 }} >
<div className="point"></div>
</div>
</div>
</div>
<div className="time-stamps">
<div className="current">{ct}</div>
<div className="fullstime">
{video.current ? calcTime(video.current.duration) : <>--:--</>}
</div>
</div>
<div className="video-react-controls">
{playing ? <Tooltip title="Pause" aria-label="add" placement="top" >
<div className="video-react-pause" onClick={pause}>
<MdPause />
</div>
</Tooltip> :
<Tooltip title="Play" aria-label="add" placement="top" >
<div className="video-react-play" onClick={play}>
<MdPlayArrow />
</div>
</Tooltip>
}
<Tooltip title="Rewind" aria-label="add" placement="top" >
<div className="video-react-rewind" onClick={rewind}>
<MdFastRewind />
</div>
</Tooltip>
<Tooltip title="Forward" aria-label="add" placement="top" >
<div className="video-react-forward" onClick={foward}>
<MdFastForward />
</div>
</Tooltip>
<div className="video-react-pro"></div>
<div className="video-react-pro"></div>
<Tooltip title="Volume" aria-label="add" placement="top" >
<div className="video-react-volume"><div className="volume-add">
<div className="volume-div" ref={vdiv} onClick={va} >
<div className="finnished" style={video.current ? { width: `${(video.current.volume / 1) * 100}%` } : { width: 0 }}>
</div>
<div className="point"></div>
</div>
</div>
{video.current ? <>
{
video.current.volume === 0 ?
<MdVolumeOff onClick={Mute} /> :
<>
{video.current.volume < 0.3 ? <><MdVolumeMute onClick={Mute} /></> :
<>{video.current.volume < 0.7 ? <><MdVolumeDown onClick={Mute} /></> :
<MdVolumeUp onClick={Mute} />}</>
}</>
}</> : <><MdVolumeUp /></>}
</div>
</Tooltip>
<Tooltip title="Fullscreen" aria-label="add" placement="top" >
{fulls ? <div className="video-react-fullscreen" onClick={exitFullScreen}>
<MdFullscreenExit />
</div> : <div className="video-react-fullscreen" onClick={enterFullScreen}>
<MdFullscreen />
</div>}
</Tooltip>
<Tooltip arrow title="Settings" aria-label="add" placement="left" ><div className="video-react-more" >
<div style={more ? {
transform: 'scale(1)',
opacity: 1
} : {}} className="video-react-menu">
<a download='video' href={props.src} className="list-" onClick={pp} >
<span className="icon"><MdFileDownload /></span>
<span className="text">Download</span>
</a>
<div className="list-" onClick={pp} >
<span className="icon"><MdPictureInPictureAlt /></span>
<span className="text">Picture In Picture</span>
</div>
<Tooltip arrow title="Playback speed" aria-label="add" placement="left" ><div className="list-1">
<span className="icon" onClick={minusp} style={video.current ? video.current.playbackRate === 0 ?
{ cursor: 'not-allowed' } : {} : {}
}>
<MdRemove />
</span>
<span className="text">{video.current ? video.current.playbackRate : 1}</span>
<span className="icon" onClick={addp} ><MdAdd /></span>
</div>
</Tooltip>
</div>
<MdSettings style={more ? { transform: 'rotate(40deg)', transition: 'all 0.2s' } : { transition: 'all 0.2s' }} onContextMenu={(e) => {
e.preventDefault()
}} onClick={mm} />
</div>
</Tooltip>
</div>
</div>
)
})
Example #7
| Source File: react-video.jsx From reactjs-media with MIT License | 4 votes |
|
ReactVideo = (props) => {
const [playing, setplaying] = useState(false)
const video = useRef(null)
const div = useRef(null)
const sect = useRef(null)
const vdiv = useRef(null)
const [error, seterror] = useState(false)
const [y, sety] = useState(false)
const [x, setx] = useState(false)
const [on, seton] = useState(false)
const [loaded, setloaded] = useState(true)
const [fulls, setfulls] = useState(false)
const [mute, setmute] = useState(false)
const [more, setmore] = useState(false)
const [ct, setcurrenttime] = useState('00:00')
const [ctt, setctt] = useState('00:00')
const [ofwidth, setofwidth] = useState(0)
const mm = () => {
setmore(!more)
}
function va(e) {
const x = e.nativeEvent.layerX
const { offsetWidth } = vdiv.current
let time = (x / offsetWidth) * 1
video.current.volume = time
}
function foward(e) {
let x = 0.025 * video.current.duration
video.current.currentTime += x
if (props.onFoward) {
props.onFoward()
}
}
function rewind(e) {
let x = 0.05 * video.current.currentTime
video.current.currentTime -= x
if (props.onRewind) {
props.onRewind()
}
}
function onSeek(e) {
const x = e.nativeEvent.layerX
const { offsetWidth } = div.current
const { duration } = video.current
let time = (x / offsetWidth) * duration
video.current.currentTime = time
let xx = x - 12
let seekwidth = (xx / offsetWidth) * 100
setofwidth(seekwidth)
if (props.onSeek) {
props.onSeek()
}
}
function onMove(e) {
const x = e.nativeEvent.layerX
const { offsetWidth } = div.current
const { duration } = video.current
let time = (x / offsetWidth) * duration
setctt(calcTime(time))
let xx = x - 12
let seekwidth = (xx / offsetWidth) * 100
setofwidth(seekwidth)
if (props.onSeek) {
props.onSeek()
}
}
function addp() {
if (video.current.playbackRate < 16) {
video.current.playbackRate += 1
}
}
function minusp() {
if (video.current.playbackRate > 0) {
video.current.playbackRate -= 1
}
}
function TimeUpdate(e) {
const { currentTime, duration } = video.current
setcurrenttime(calcTime(currentTime))
if (props.onTimeUpdate) {
props.onTimeUpdate(e, currentTime, duration)
}
}
async function Mute(e) {
await setmute(!mute)
if (video.current.volume > 0) {
video.current.volume = 0
} else {
video.current.volume = 1
}
if (props.onMute) {
props.onMute(mute)
}
}
function calcTime(d) {
if (isNaN(d)) {
return '00:00'
}
let hours = d / 3600;
let hh = d % 3600;
let time = hh / 60;
let h = Math.floor(hours)
let f = Math.floor(time)
let seconds = d % 60
seconds = Math.floor(seconds)
if (seconds < 10) {
seconds = `0${seconds}`
}
if (f < 10) {
f = `0${f}`
}
if (h <= 0) {
h = ``
} else if (h < 10 && h > 0) {
h = `0${h}:`
}
return `${h}${f}:${seconds}`
}
function pp() {
video.current.requestPictureInPicture()
if (props.onRequestPictureInPicture) {
props.onRequestPictureInPicture()
}
}
function setClipboard(text) {
navigator.clipboard.writeText(text).then(function () {
}, function () {
// eslint-disable-next-line no-restricted-globals
alert('failed to copy url')
});
}
const play = (e) => {
video.current.play()
setplaying(true)
if (props.onPlay) {
props.onPlay(e)
}
}
const pause = (e) => {
video.current.pause()
setplaying(false)
if (props.onPause) {
props.onPause(e)
}
}
function contextMenu(e) {
const { clientY, clientX } = e.nativeEvent
setx(clientX)
sety(clientY)
seton(true)
}
const enterFullScreen = (e) => {
sect.current.requestFullscreen()
if (props.onEnterFullScreen) {
props.onEnterFullScreen(e)
}
setfulls(true)
}
const exitFullScreen = () => {
sect.current.ownerDocument.exitFullscreen()
setfulls(false)
}
function handleClose() {
seton(false)
}
return (
<div>
<style jsx="true">{`
.video-react-pause:hover,
.video-react-play:hover,
.video-react-volume:hover,
.video-react-rewind:hover,
.video-react-more:hover,
.video-react-fullscreen:hover,
.video-react-forward:hover {
color: ${props.primaryColor};
}
.finnished {
background-color: ${props.primaryColor} !important;
}
.point {
background-color: ${props.primaryColor} !important;
}
`}</style>
<section onContextMenu={(e) => {
e.preventDefault()
contextMenu(e)
}} onBlur={() => {
handleClose()
}} className={`one___flkjsjJJNJnn_nANN8hG_YG7GY7g7BH9 ${props.className}`} ref={sect} >
<Video onError={() => {
seterror(true)
}} ref={{ video: video }} autoPlay={props.autoPlay ? true : false} onPause={() => {
setplaying(false)
}} onPlay={() => {
setplaying(true)
}} className='video-react' onTimeUpdate={(e) => {
TimeUpdate(e)
}} src={props.src} type={props.type ? props.type : "video/mp4"} />
{video.current ? <>
{video.current.seeking ?
<div className="video-react-loading"></div> : <></>}</> : <></>}
<ControlsBar ref={{ div, vdiv }} video={video} ctt={ctt} onMouseMove={onMove} ofwidth={ofwidth} onSeek={onSeek} ct={ct} calcTime={calcTime} pause={pause} play={play} rewind={rewind} foward={foward} va={va} Mute={Mute} playing={playing} fulls={fulls} exitFullScreen={exitFullScreen} enterFullScreen={enterFullScreen} more={more} pp={pp} minusp={minusp} addp={addp} mm={mm} />
<div className="video-react-error_12ede3ws3" style={error ? { opacity: 1 } : {}}>
<span><MdErrorOutline /></span> <span><b>Error:</b> Failed to load Video</span>
<span className="cancel" onClick={() => {
seterror(false)
}}>
<MdClose />
</span>
</div>
{on ?
<div className="menu-c" onClick={() => {
handleClose()
}}>
<div className="menu-contxt" onClick={() => {
handleClose()
}}>
<div className="video-rect-context" style={{ top: y, left: x }}>
<ul className="context-list">
{playing ?
<li className="play" onClick={pause} ><span className="i"><MdPause /></span><span className="t">Pause</span></li> : <li className="play" onClick={play} ><span className="i"><MdPlayArrow /></span><span className="t">Play</span></li>}
<li onClick={() => { setClipboard(video.current ? video.current.currentSrc : '') }}><span className="i"><MdFlipToBack /></span><span className="t" >Copy Video Url</span></li>
{video.current ? <>{video.current.loop ? <li onClick={() => {
video.current.loop = false
}} ><span className="i"><MdLoop /></span><span className="t">Stop Loop</span></li> : <li onClick={() => {
video.current.loop = true
}} ><span className="i"><MdLoop /></span><span className="t">Loop</span></li>
}</> : <></>}
</ul>
</div></div></div> : <></>}
{playing === false && loaded === true ? <div className="poster">
<div>
<img src={props.poster} alt="video poster" />
<div style={props.primaryColor ? { background: props.primaryColor } : {}} onClick={() => {
play()
setloaded(false)
}}><MdPlayArrow /></div>
</div>
</div> : <></>}
{props.childern}
</section>
</div>
)
}
