react-icons/md#MdSettings JavaScript Examples

export function Menu() {
    return (
        <MenuContainer>
            <AppLogoContainer>
                <img src={logo} alt="logo" />
            </AppLogoContainer>
            <MenuOptions exact to="/">
                <MdDashboard data-tip="" data-for="dashboard" />
                <ReactTooltip id="dashboard" getContent={() => "Dashboard"} />
            </MenuOptions>

            <MenuOptions exact to="/notes">
                <BiNotepad data-tip="" data-for="notes" />
                <ReactTooltip id="notes" getContent={() => "Notes"} />
            </MenuOptions>

            <DummyMenuOptions>
                <BiExclude data-tip="" data-for="analytics" />
                <ReactTooltip id="analytics" getContent={() => "Coming Soon"} />
            </DummyMenuOptions>

            <MenuOptions exact to="/settings">
                <MdSettings data-tip="" data-for="settings" />
                <ReactTooltip id="settings" getContent={() => "Settings"} />
            </MenuOptions>

            <AppTextLogoContainer>
                <img src={namedLogoLight} alt="fokus" />
            </AppTextLogoContainer>
        </MenuContainer>
    );
}

export function MainMenu({
  mainMenuIsOpen,
  usersMenuIsOpen,
  ChannelsModalIsOpen,
  joinMenuIsOpen,
  localeMenuIsOpen,
  onOpenMainMenu,
  onCloseMainMenu,
  onOpenUsersModal,
  onCloseUsersModal,
  onOpenChannelsModal,
  onCloseChannelsModal,
  onOpenJoinMenu,
  onCloseJoinMenu,
  onOpenLocaleMenu,
  onCloseLocaleMenu,
  history,
  intl,
}) {
  useInjectReducer({ key: 'mainMenu', reducer });

  const usersBtnToolTip = intl.formatMessage(messages.usersBtnToolTip);
  const channelsBtnToolTip = intl.formatMessage(messages.channelsBtnToolTip);
  const joinBtnToolTip = intl.formatMessage(messages.joinBtnToolTip);
  const languageBtnToolTip = intl.formatMessage(messages.languageBtnToolTip);

  const mainIcon = mainMenuIsOpen ? <MdClose /> : <MdMenu />;
  const menuBtnText = intl.formatMessage(messages.menuBtnToolTip);
  const settingsBtnText = intl.formatMessage(messages.settingsBtnToolTip);

  return (
    <div>
      <Collapse className="fixed-bottom" isOpen={mainMenuIsOpen}>
        <Container fluid>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (ChannelsModalIsOpen) {
                    onCloseUsersModal();
                  } else {
                    onOpenUsersModal();
                  }
                }}
                toolTip={usersBtnToolTip}
              >
                <MdPeople />
              </MenuButton>
              <UsersModal open={usersMenuIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (ChannelsModalIsOpen) {
                    onCloseChannelsModal();
                  } else {
                    onOpenChannelsModal();
                  }
                }}
                toolTip={channelsBtnToolTip}
              >
                <MdForum />
              </MenuButton>
              <ChannelsModal open={ChannelsModalIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (joinMenuIsOpen) {
                    onCloseJoinMenu();
                  } else {
                    onOpenJoinMenu();
                  }
                }}
                toolTip={joinBtnToolTip}
              >
                <FaPlus />
              </MenuButton>
              <JoinModal open={joinMenuIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (localeMenuIsOpen) {
                    onCloseLocaleMenu();
                  } else {
                    onOpenLocaleMenu();
                  }
                }}
                toolTip={languageBtnToolTip}
              >
                <MdLanguage />
              </MenuButton>
              <LocaleModal open={localeMenuIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  history.push('/settings');
                }}
                toolTip={settingsBtnText}
              >
                <MdSettings />
              </MenuButton>
            </Col>
          </Row>
          <Row>
            <Col>
              <Spacer />
            </Col>
          </Row>
        </Container>
      </Collapse>

      <MenuButton
        isMain
        className="fixed-bottom"
        onClick={() => {
          if (mainMenuIsOpen) {
            onCloseMainMenu();
          } else {
            onOpenMainMenu();
          }
        }}
        toolTip={menuBtnText}
      >
        {mainIcon}
      </MenuButton>
    </div>
  );
}

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

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

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

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