react-icons/md#MdPlayArrow JavaScript Examples

The following examples show how to use react-icons/md#MdPlayArrow. 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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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>
  )
}