react-icons/md#MdFlipToBack JavaScript Examples

ContextMenu = (props) => {
  const { contextmenu, CMposition, Playing, setcontextmenu, src, setplayback, video } = useContext(VideoContext)
  const { left, top } = CMposition
  function PictureInPicture(e) {
    video.current.requestPictureInPicture()
  }
  function play(e) {
    video.current.play()
  }
  function pause(e) {
    video.current.pause()
  }
  function setClipboard() {
    let text = video.current.currentSrc
    navigator.clipboard.writeText(text).then(function () {
    }, function () {
      // eslint-disable-next-line no-restricted-globals
      alert('failed to copy url')
    });
  }
  return (
    <div style={contextmenu === false ? { display: 'none' } : {}} onClick={(e) => { setcontextmenu(!contextmenu) }} className="contextcover">
      <div style={{ marginTop: top, marginLeft: left }} className="contextmenu">
        <div onClick={Playing ? pause : play} className="menuitem">
          {Playing ? <>
            <span className="icon">
              <FaPause />
            </span>
            <span className="item">Pause</span></> :
            <>
              <span className="icon">
                <FaPlay />
              </span>
              <span className="item">Play</span></>}
        </div>
        {props.nodownload ? <></> :
          <a download="video" href={src} className="menuitem">
            <span className="icon">
              <FiDownloadCloud />
            </span>
            <span className="item">Download</span>
          </a>}
        <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) => { setClipboard() }} className="menuitem">
          <span className="icon">
            <MdFlipToBack />
          </span>
          <span className="item">Copy Video Adress</span>
        </div>
      </div>
    </div>
  )
}

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));
}

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>
  )
}