react-icons/md#MdFileDownload JavaScript Examples
The following examples show how to use
react-icons/md#MdFileDownload.
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: index.jsx From reactjs-media with MIT License | 6 votes |
|
Image = (props) => {
const img = useRef(null)
return (
<section className={`img_section`} style={{ margin: 'auto' }}>
<picture>
<source media={props.media} sizes={props.sizes} type={props.type} srcSet={props.srcset} />
<img
src={props.src}
ref={img}
alt={props.alt}
className={props.className}
crossOrigin={props.crossOrigin}
decoding={props.decoding ? props.decoding : 'async'}
height={props.height}
width={props.width}
loading={props.loading ? props.loading : 'lazy'}
referrerPolicy={props.referrerPolicy}
hspace={props.hspace}
id={props.id}
vspace={props.vspace}
longdesc={props.longdesc}
align={props.align}
useMap={props.useMap}
/>
</picture>
{props.download ?
<Tooltip title="Download" aria-label="add" >
<div className="download_btn">
<a download={props.name ? props.name : 'my image'} href={props.src} className="download_lnk"><MdFileDownload /></a>
</div>
</Tooltip> : <></>}
{img.current ? <>{img.current.complete ? <></> : <div className="blur_overlay"></div>}</> : <></>}
</section>
)
}
Example #2
| Source File: audio.esm.js From reactjs-media with MIT License | 4 votes |
|
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 |
|
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 |
|
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 |
|
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>
)
})
