react-icons/md#MdFullscreenExit JavaScript Examples
The following examples show how to use
react-icons/md#MdFullscreenExit.
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 |
|
LowerControls = (props) => {
const { Playing, CurrentTime, Duration, section } = useContext(VideoContext)
const [fullscreen, setfullscreen] = useState(false)
const { video } = props
function play(e) {
video.current.play()
if (props.onPlay) {
props.onPlay(e)
}
}
function forward(e) {
let dur = (5 / 100) * video.current.duration
video.current.currentTime += dur
}
function pause(e) {
video.current.pause()
}
const enterFullScreen = (e) => {
section.current.requestFullscreen()
if (props.onEnterFullScreen) {
props.onEnterFullScreen(e)
}
setfullscreen(true)
}
const exitFullScreen = (e) => {
section.current.ownerDocument.exitFullscreen()
setfullscreen(false)
}
return (
<>
<div className="controls">
<div className="play">
{Playing ? <FaPause onClick={pause} /> :
<FaPlay onClick={play} />}
</div>
<div className="foward">
<FaForward onClick={forward} />
</div>
<div className="timestamps">
{CurrentTime} / {Duration}
</div>
<div className="settimgs">
<div className="fullscreen">
{fullscreen === false ? <RiFullscreenFill onClick={enterFullScreen} /> :
<MdFullscreenExit onClick={exitFullScreen} />}
</div>
{props.nosettings ? <></> :
<Settings {...props} />}
</div>
</div>
</>
)
}
Example #2
| 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 #3
| 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>
)
})
