react-icons/md#MdVolumeUp JavaScript Examples

The following examples show how to use react-icons/md#MdVolumeUp. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: components.jsx    From reactjs-media with MIT License 5 votes vote down vote up 
VolumeAdjust = (props) => {
  const { volumeadjuston, setvolumeadjuston, video } = useContext(VideoContext)
  const classes = useStyles();
  const [value, setValue] = React.useState(100);

  const handleChange = (event, newValue) => {
    const volume = newValue / 100
    video.current.volume = volume
    setValue(newValue)
  };

  return (
    <div style={volumeadjuston ? {} : { display: 'none' }} className="volumeadjust">
      <div className={classes.root}>
        <Grid container spacing={2}>
          <Grid item>
            <IconButton onClick={(e) => { setvolumeadjuston(false) }} style={{ color: 'white' }} aria-label="delete">
              <CgClose />
            </IconButton>

          </Grid>
        </Grid>
        <Typography id="continuous-slider" gutterBottom>
          Volume
        </Typography>
        <Grid container spacing={2}>
          <Grid item>
            <MdVolumeDown />
          </Grid>
          <Grid item xs>
            <Slider value={value} onChange={handleChange} aria-labelledby="continuous-slider" />
          </Grid>
          <Grid item>
            <MdVolumeUp />
          </Grid>
        </Grid>
      </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: 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 #5
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>
    )
})