react-icons/md#MdLoop JavaScript Examples
The following examples show how to use
react-icons/md#MdLoop.
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: components.jsx From reactjs-media with MIT License | 5 votes |
|
SettingsMenu = (props) => {
const { setting, setsetting, src, setvolumeadjuston, setplayback, video } = useContext(VideoContext)
const [looping, setlooping] = useState(false)
function loop(e) {
setlooping(!looping)
video.current.loop = !video.current.loop
}
function PictureInPicture(e) {
video.current.requestPictureInPicture()
if (props.onRequestPictureInPicture) {
props.onRequestPictureInPicture()
}
}
return (
<div style={setting === false ? { display: 'none' } : {}} className="settingsmenu">
<div className="menutop menuitem">
<span className="icon">
<IoCloseCircleOutline onClick={(e) => { setsetting(false) }} />
</span>
<span className="item">Settings</span>
</div>
{props.nodownload ? <></> :
<a download="video" href={src} className="menuitem">
<span className="icon">
<FiDownloadCloud />
</span>
<span className="item">Download</span>
</a>}
<div onClick={loop} className="menuitem">
<span className="icon">
<MdLoop />
</span>
{looping ? <span className="item">Stop Loop</span> :
<span className="item">Loop</span>}
</div>
<div onClick={PictureInPicture} className="menuitem">
<span className="icon">
<MdPictureInPicture />
</span>
<span className="item">MiniPlayer</span>
</div>
<div onClick={(e) => { setplayback(true) }} className="menuitem">
<span className="icon">
<GiSpeedometer />
</span>
<span className="item">Playback Speed</span>
</div>
<div onClick={(e) => { setvolumeadjuston(true) }} className="menuitem">
<span className="icon">
<FaVolumeUp />
</span>
<span className="item">Volume</span>
</div>
</div>
)
}
Example #2
| 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 #3
| 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>
)
}
