gab-social/app/javascript/gabsocial/components/video.js

831 lines
23 KiB
JavaScript
Raw Normal View History

import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-03-07 04:53:28 +00:00
import { defineMessages, injectIntl } from 'react-intl'
import { is } from 'immutable'
2020-04-08 02:06:59 +01:00
import throttle from 'lodash.throttle'
2020-03-06 15:38:22 +00:00
import { decode } from 'blurhash'
2020-03-27 22:57:03 +00:00
import { isFullscreen, requestFullscreen, exitFullscreen } from '../utils/fullscreen'
import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio'
import {
openPopover,
} from '../actions/popover'
2020-03-27 22:57:03 +00:00
import { displayMedia } from '../initial_state'
import {
CX,
POPOVER_VIDEO_STATS,
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
import Responsive from '../features/ui/util/responsive_component'
2020-03-27 22:57:03 +00:00
import Button from './button'
import Icon from './icon'
import SensitiveMediaItem from './sensitive_media_item'
2020-03-27 22:57:03 +00:00
import Text from './text'
2020-03-06 15:38:22 +00:00
// check every 50 ms for buffer
const checkInterval = 50
const FIXED_VAR = 6
const messages = defineMessages({
play: { id: 'video.play', defaultMessage: 'Play' },
pause: { id: 'video.pause', defaultMessage: 'Pause' },
mute: { id: 'video.mute', defaultMessage: 'Mute sound' },
unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
hide: { id: 'video.hide', defaultMessage: 'Hide video' },
fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' },
exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
2020-03-07 04:53:28 +00:00
sensitive: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
hidden: { id: 'status.media_hidden', defaultMessage: 'Media hidden' },
video_stats: { id: 'video.stats_label', defaultMessage: 'Video meta stats' },
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Hide media' },
2020-03-07 04:53:28 +00:00
})
const formatTime = (secondsNum) => {
2020-03-07 04:53:28 +00:00
let hours = Math.floor(secondsNum / 3600)
let minutes = Math.floor((secondsNum - (hours * 3600)) / 60)
let seconds = Math.floor(secondsNum) - (hours * 3600) - (minutes * 60)
2020-03-07 04:53:28 +00:00
if (hours < 10) hours = '0' + hours
if (minutes < 10) minutes = '0' + minutes
if (seconds < 10) seconds = '0' + seconds
2020-03-07 04:53:28 +00:00
return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`
}
export const findElementPosition = (el) => {
2020-03-07 04:53:28 +00:00
let box
2020-01-28 16:29:37 +00:00
if (el.getBoundingClientRect && el.parentNode) {
2020-03-07 04:53:28 +00:00
box = el.getBoundingClientRect()
2020-01-28 16:29:37 +00:00
}
if (!box) {
return {
left: 0,
top: 0,
2020-03-07 04:53:28 +00:00
}
2020-01-28 16:29:37 +00:00
}
2020-03-07 04:53:28 +00:00
const docEl = document.documentElement
const body = document.body
2020-01-28 16:29:37 +00:00
2020-03-07 04:53:28 +00:00
const clientLeft = docEl.clientLeft || body.clientLeft || 0
const scrollLeft = window.pageXOffset || body.scrollLeft
const left = (box.left + scrollLeft) - clientLeft
2020-01-28 16:29:37 +00:00
2020-03-07 04:53:28 +00:00
const clientTop = docEl.clientTop || body.clientTop || 0
const scrollTop = window.pageYOffset || body.scrollTop
const top = (box.top + scrollTop) - clientTop
2020-01-28 16:29:37 +00:00
return {
left: Math.round(left),
top: Math.round(top),
2020-03-07 04:53:28 +00:00
}
}
2020-01-28 16:29:37 +00:00
export const getPointerPosition = (el, event) => {
2020-03-07 04:53:28 +00:00
const position = {}
const box = findElementPosition(el)
const boxW = el.offsetWidth
const boxH = el.offsetHeight
const boxY = box.top
const boxX = box.left
2020-01-28 16:29:37 +00:00
2020-03-07 04:53:28 +00:00
let pageY = event.pageY
let pageX = event.pageX
2020-01-28 16:29:37 +00:00
if (event.changedTouches) {
2020-03-07 04:53:28 +00:00
pageX = event.changedTouches[0].pageX
pageY = event.changedTouches[0].pageY
2020-01-28 16:29:37 +00:00
}
2020-03-07 04:53:28 +00:00
position.y = Math.max(0, Math.min(1, (pageY - boxY) / boxH))
position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW))
2020-01-28 16:29:37 +00:00
2020-03-07 04:53:28 +00:00
return position
}
2020-01-28 16:29:37 +00:00
const mapDispatchToProps = (dispatch) => ({
onOpenVideoStatsPopover(targetRef, meta) {
dispatch(openPopover(POPOVER_VIDEO_STATS, {
targetRef,
meta,
position: 'top',
}))
}
})
2020-02-25 16:04:44 +00:00
export default
@injectIntl
@connect(null, mapDispatchToProps)
class Video extends ImmutablePureComponent {
static propTypes = {
preview: PropTypes.string,
src: PropTypes.string.isRequired,
alt: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
sensitive: PropTypes.bool,
startTime: PropTypes.number,
detailed: PropTypes.bool,
inline: PropTypes.bool,
cacheWidth: PropTypes.func,
visible: PropTypes.bool,
onToggleVisibility: PropTypes.func,
intl: PropTypes.object.isRequired,
blurhash: PropTypes.string,
2020-01-28 16:29:37 +00:00
aspectRatio: PropTypes.number,
meta: ImmutablePropTypes.map,
onOpenVideoStatsPopover: PropTypes.func.isRequired,
2020-03-07 04:53:28 +00:00
}
state = {
currentTime: 0,
duration: 0,
volume: 0.5,
paused: true,
dragging: false,
draggingVolume: false,
containerWidth: this.props.width,
fullscreen: false,
hovered: false,
muted: false,
2020-03-07 04:53:28 +00:00
hoveringVolumeButton: false,
hoveringVolumeControl: false,
revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
pipAvailable: true,
isBuffering: false,
2020-03-07 04:53:28 +00:00
}
bufferCheckInterval = null
lastPlayPos = 0
2020-03-07 04:53:28 +00:00
volHeight = 100
volOffset = 13
componentDidMount() {
const { meta, blurhash } = this.props
document.addEventListener('fullscreenchange', this.handleFullscreenChange, true)
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true)
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true)
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true)
if (meta) {
this.setState({ duration: parseInt(meta.get('duration')) })
}
if ('pictureInPictureEnabled' in document) {
this.setState({ pipAvailable: true })
}
}
componentWillUnmount() {
document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true)
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true)
document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange, true)
document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true)
clearInterval(this.bufferCheckInterval)
}
componentWillReceiveProps(nextProps) {
if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
this.setState({ revealed: nextProps.visible })
}
}
componentDidUpdate(prevProps, prevState) {
if (prevState.revealed && !this.state.revealed && this.video) {
this.video.pause()
}
}
checkBuffering = () => {
const { isBuffering, paused } = this.state
if (!this.video) {
this.handlePause()
return
}
const { currentTime } = this.video
// Checking offset should be at most the check interval but allow for some margin
let offset = (checkInterval - 30) / 1000
if (!isBuffering && currentTime < (this.lastPlayPos + offset) && !paused) {
// If no buffering is currently detected, and the position does not seem to increase
// and the player isn't manually paused...
this.setState({ isBuffering: true })
} else if (isBuffering && currentTime > (this.lastPlayPos + offset) && !paused) {
// If we were buffering but the player has advanced, then there is no buffering
this.setState({ isBuffering: false })
}
this.lastPlayPos = currentTime
}
volHandleOffset = (v) => {
2020-03-07 04:53:28 +00:00
const offset = v * this.volHeight + this.volOffset
return (offset > 110) ? 110 : offset
}
setPlayerRef = (n) => {
this.player = n
if (n) {
2020-03-07 04:53:28 +00:00
if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth)
this.setState({
containerWidth: n.offsetWidth,
2020-03-07 04:53:28 +00:00
})
}
}
setVideoRef = (n) => {
this.video = n
if (this.video) {
2020-03-07 04:53:28 +00:00
const { volume, muted } = this.video
this.setState({
volume,
muted,
})
}
}
setSeekRef = (n) => {
this.seek = n
}
setVolumeRef = (n) => {
this.volume = n
}
setSettingsBtnRef = (n) => {
this.settingsBtn = n
}
handleClickRoot = (e) => e.stopPropagation()
handlePlay = () => {
2020-03-07 04:53:28 +00:00
this.setState({ paused: false })
this.bufferCheckInterval = setInterval(this.checkBuffering, checkInterval)
}
handlePause = () => {
this.setState({
paused: true,
isBuffering: false,
})
clearInterval(this.bufferCheckInterval)
}
handleTimeUpdate = () => {
2020-03-07 04:53:28 +00:00
const { currentTime, duration } = this.video
this.setState({
currentTime: currentTime.toFixed(FIXED_VAR),
duration: duration.toFixed(FIXED_VAR),
2020-03-07 04:53:28 +00:00
})
}
handleVolumeMouseDown = (e) => {
2020-03-07 04:53:28 +00:00
document.addEventListener('mousemove', this.handleMouseVolSlide, true)
document.addEventListener('mouseup', this.handleVolumeMouseUp, true)
document.addEventListener('touchmove', this.handleMouseVolSlide, true)
document.addEventListener('touchend', this.handleVolumeMouseUp, true)
2020-03-07 04:53:28 +00:00
this.handleMouseVolSlide(e)
2020-03-07 04:53:28 +00:00
e.preventDefault()
e.stopPropagation()
this.setState({ draggingVolume: true })
}
handleVolumeMouseUp = () => {
this.handleMouseLeaveVolumeControl()
2020-03-07 04:53:28 +00:00
document.removeEventListener('mousemove', this.handleMouseVolSlide, true)
document.removeEventListener('mouseup', this.handleVolumeMouseUp, true)
document.removeEventListener('touchmove', this.handleMouseVolSlide, true)
document.removeEventListener('touchend', this.handleVolumeMouseUp, true)
this.setState({ draggingVolume: false })
}
handleMouseVolSlide = throttle((e) => {
2020-03-07 04:53:28 +00:00
const rect = this.volume.getBoundingClientRect()
const y = 1 - ((e.clientY - rect.top) / this.volHeight)
if (!isNaN(y)) {
2020-03-31 17:04:50 +01:00
const slideamt = y
2020-03-07 04:53:28 +00:00
if (y > 1) {
slideamt = 1
} else if (y < 0) {
slideamt = 0
}
2020-03-07 04:53:28 +00:00
this.video.volume = slideamt
this.setState({ volume: slideamt })
}
2020-03-07 04:53:28 +00:00
}, 60)
handleMouseDown = (e) => {
2020-03-07 04:53:28 +00:00
document.addEventListener('mousemove', this.handleMouseMove, true)
document.addEventListener('mouseup', this.handleMouseUp, true)
document.addEventListener('touchmove', this.handleMouseMove, true)
document.addEventListener('touchend', this.handleMouseUp, true)
2020-03-07 04:53:28 +00:00
this.setState({ dragging: true })
this.video.pause()
this.handleMouseMove(e)
2020-03-07 04:53:28 +00:00
e.preventDefault()
e.stopPropagation()
}
handleMouseUp = () => {
2020-03-07 04:53:28 +00:00
document.removeEventListener('mousemove', this.handleMouseMove, true)
document.removeEventListener('mouseup', this.handleMouseUp, true)
document.removeEventListener('touchmove', this.handleMouseMove, true)
document.removeEventListener('touchend', this.handleMouseUp, true)
2020-03-07 04:53:28 +00:00
this.setState({ dragging: false })
this.video.play()
}
handleMouseMove = throttle(e => {
2020-03-07 04:53:28 +00:00
const { x } = getPointerPosition(this.seek, e)
const currentTime = parseFloat(this.video.duration * x).toFixed(FIXED_VAR)
if (!isNaN(currentTime)) {
2020-03-07 04:53:28 +00:00
this.video.currentTime = currentTime
this.setState({ currentTime })
}
2020-03-07 04:53:28 +00:00
}, 60)
togglePlay = () => {
if (this.state.paused) {
2020-03-07 04:53:28 +00:00
this.video.play()
} else {
2020-03-07 04:53:28 +00:00
this.video.pause()
}
}
toggleFullscreen = () => {
if (isFullscreen()) {
2020-03-07 04:53:28 +00:00
exitFullscreen()
} else {
2020-03-07 04:53:28 +00:00
requestFullscreen(this.player)
}
}
togglePip = () => {
try {
if (this.video !== document.pictureInPictureElement) {
if (this.state.paused) {
this.video.play()
}
setTimeout(() => { // : hack :
this.video.requestPictureInPicture()
}, 500)
} else {
document.exitPictureInPicture()
}
} catch(e) {
//
}
}
handleFullscreenChange = () => {
2020-03-07 04:53:28 +00:00
this.setState({ fullscreen: isFullscreen() })
}
handleMouseEnter = () => {
2020-03-07 04:53:28 +00:00
this.setState({ hovered: true })
}
handleMouseLeave = () => {
2020-03-07 04:53:28 +00:00
this.setState({ hovered: false })
}
2020-03-07 04:53:28 +00:00
handleMouseEnterAudio = () => {
this.setState({ hoveringVolumeButton: true })
}
handleMouseLeaveAudio = throttle(() => {
2020-03-07 04:53:28 +00:00
this.setState({ hoveringVolumeButton: false })
}, 2500)
2020-03-07 04:53:28 +00:00
handleMouseEnterVolumeControl = () => {
this.setState({ hoveringVolumeControl: true })
}
handleMouseLeaveVolumeControl = throttle(() => {
if (!this.state.draggingVolume) {
this.setState({ hoveringVolumeControl: false })
}
}, 2500)
2020-03-07 04:53:28 +00:00
toggleMute = () => {
2020-03-07 04:53:28 +00:00
this.video.muted = !this.video.muted
this.setState({ muted: this.video.muted })
}
toggleReveal = () => {
if (this.props.onToggleVisibility) {
2020-03-07 04:53:28 +00:00
this.props.onToggleVisibility()
} else {
2020-03-07 04:53:28 +00:00
this.setState({ revealed: !this.state.revealed })
}
}
handleLoadedData = () => {
if (this.props.startTime) {
2020-03-07 04:53:28 +00:00
this.video.currentTime = this.props.startTime
this.video.play()
}
}
handleProgress = () => {
2020-03-07 04:53:28 +00:00
const { buffered, duration } = this.video
if (!buffered) return
if (buffered.length > 0) {
this.setState({
buffer: buffered.end(0) / duration * 100,
})
}
}
handleVolumeChange = () => {
2020-03-07 04:53:28 +00:00
const { volume, muted } = this.video
this.setState({
volume,
muted,
})
}
handleOnClickSettings = () => {
this.props.onOpenVideoStatsPopover(this.settingsBtn, this.props.meta)
}
render() {
2020-03-06 15:38:22 +00:00
const {
preview,
src,
inline,
startTime,
intl,
alt,
detailed,
sensitive,
aspectRatio,
2020-03-06 15:38:22 +00:00
} = this.props
const {
containerWidth,
currentTime,
duration,
volume,
buffer,
dragging,
paused,
fullscreen,
hovered,
muted,
2020-03-07 04:53:28 +00:00
revealed,
hoveringVolumeButton,
hoveringVolumeControl,
pipAvailable,
isBuffering,
2020-03-06 15:38:22 +00:00
} = this.state
2020-03-07 04:53:28 +00:00
const progress = (currentTime / duration) * 100
2020-03-07 04:53:28 +00:00
const volumeHeight = (muted) ? 0 : volume * this.volHeight
const volumeHandleLoc = (muted) ? this.volHandleOffset(0) : this.volHandleOffset(volume)
const playerStyle = {}
2020-03-07 04:53:28 +00:00
let { width, height } = this.props
2020-03-06 15:38:22 +00:00
if (inline && containerWidth) {
2020-03-07 04:53:28 +00:00
width = containerWidth
const minSize = containerWidth / (16 / 9)
2020-01-28 16:29:37 +00:00
if (isPanoramic(aspectRatio)) {
2020-03-07 04:53:28 +00:00
height = Math.max(Math.floor(containerWidth / maximumAspectRatio), minSize)
2020-01-28 16:29:37 +00:00
} else if (isPortrait(aspectRatio)) {
2020-03-07 04:53:28 +00:00
height = Math.max(Math.floor(containerWidth / minimumAspectRatio), minSize)
2020-01-28 16:29:37 +00:00
} else {
2020-03-07 04:53:28 +00:00
height = Math.floor(containerWidth / aspectRatio)
2020-01-28 16:29:37 +00:00
}
2020-03-07 04:53:28 +00:00
playerStyle.height = height
}
2020-03-07 04:53:28 +00:00
let preload
if (startTime || fullscreen || dragging) {
2020-03-07 04:53:28 +00:00
preload = 'auto'
} else if (detailed) {
2020-03-07 04:53:28 +00:00
preload = 'metadata'
2020-01-28 16:29:37 +00:00
} else {
2020-03-07 04:53:28 +00:00
preload = 'none'
2020-01-28 16:29:37 +00:00
}
2020-03-06 15:38:22 +00:00
// className={classNames('video-player', {
// inactive: !revealed,
// detailed,
// inline: inline && !fullscreen,
// fullscreen
// })}
2020-03-27 15:29:52 +00:00
// : todo spoiler :
const mainContainerClasses = CX({
default: 1,
mt10: 1,
outlineNone: 1,
})
const seekHandleClasses = CX({
2020-03-06 15:38:22 +00:00
default: 1,
2020-04-23 07:13:29 +01:00
posAbs: 1,
2020-03-06 15:38:22 +00:00
circle: 1,
height20PX: 1,
width20PX: 1,
bgTransparent: 1,
2020-04-25 18:00:51 +01:00
mlNeg5PX: 1,
mr5: 1,
2020-03-06 15:38:22 +00:00
z3: 1,
alignItemsCenter: 1,
justifyContentCenter: 1,
videoEase: 1,
2020-03-06 15:38:22 +00:00
opacity0: !dragging,
opacity1: dragging || hovered,
})
const seekInnerHandleClasses = CX({
default: 1,
circle: 1,
height14PX: 1,
width14PX: 1,
bgBrand: 1,
boxShadow1: 1,
})
const progressClasses = CX({
2020-03-06 15:38:22 +00:00
default: 1,
radiusSmall: 1,
2020-03-11 23:56:18 +00:00
mt10: 1,
2020-04-23 07:13:29 +01:00
posAbs: 1,
2020-03-06 15:38:22 +00:00
height4PX: 1,
videoEase: 1,
2020-03-06 15:38:22 +00:00
})
const volumeControlClasses = CX({
2020-03-07 04:53:28 +00:00
default: 1,
2020-04-23 07:13:29 +01:00
posAbs: 1,
2020-04-29 23:32:49 +01:00
bgBlackOpaque: 1,
2020-03-07 04:53:28 +00:00
videoPlayerVolume: 1,
height122PX: 1,
circle: 1,
displayNone: !hoveringVolumeButton && !hoveringVolumeControl || !hovered,
})
const videoControlsBackgroundClasses = CX({
default: 1,
z2: 1,
px15: 1,
videoPlayerControlsBackground: 1,
posAbs: 1,
bottom0: 1,
right0: 1,
left0: 1,
displayNone: !hovered && !paused,
})
const overlayClasses = CX({
default: 1,
top50PC: 1,
left50PC: 1,
posAbs: 1,
z2: 1,
alignItemsCenter: 1,
justifyContentCenter: 1,
displayNone: !paused,
})
if (!revealed && sensitive) {
return <SensitiveMediaItem onClick={this.toggleReveal} />
}
return (
<div
className={mainContainerClasses}
style={playerStyle}
ref={this.setPlayerRef}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
onClick={this.handleClickRoot}
tabIndex={0}
>
2020-03-06 15:38:22 +00:00
<div className={overlayClasses}>
{
paused && !isBuffering &&
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<button
onClick={this.togglePlay}
className={[_s.default, _s.outlineNone, _s.cursorPointer, _s.alignItemsCenter, _s.justifyContentCenter, _s.posAbs, _s.bgBlackOpaque, _s.circle, _s.height60PX, _s.width60PX].join(' ')}
>
<Icon id='play' size='24px' className={_s.fillWhite} />
</button>
</Responsive>
}
{
!paused && isBuffering &&
<Icon id='loading' size='40px' className={[_s.default, _s.posAbs].join(' ')} />
}
</div>
<video
className={[_s.default, _s.height100PC, _s.width100PC, _s.outlineNone].join(' ')}
playsInline
ref={this.setVideoRef}
src={src}
poster={preview}
preload={preload}
loop
role='button'
tabIndex='0'
aria-label={alt}
title={alt}
width={width}
height={height}
volume={volume}
onClick={this.togglePlay}
onPlay={this.handlePlay}
onPause={this.handlePause}
onTimeUpdate={this.handleTimeUpdate}
onLoadedData={this.handleLoadedData}
onProgress={this.handleProgress}
onVolumeChange={this.handleVolumeChange}
/>
2020-03-06 15:38:22 +00:00
{ /* <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed })}>
<button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
2020-03-07 04:53:28 +00:00
<span className='spoiler-button__overlay__label'>
{intl.formatMessage(sensitive ? messages.sensitive : messages.hidden)}
</span>
</button>
2020-03-06 15:38:22 +00:00
</div> */ }
2020-03-07 04:53:28 +00:00
<div
className={volumeControlClasses}
onMouseDown={this.handleVolumeMouseDown}
onMouseEnter={this.handleMouseEnterVolumeControl}
onMouseLeave={this.handleMouseLeaveVolumeControl}
ref={this.setVolumeRef}
>
<div
2020-04-29 23:32:49 +01:00
className={[_s.default, _s.radiusSmall, _s.my10, _s.posAbs, _s.width4PX, _s.ml10, _s.bgPrimaryOpaque].join(' ')}
2020-03-07 04:53:28 +00:00
style={{
height: '102px',
}}
/>
<div
2020-04-29 23:32:49 +01:00
className={[_s.default, _s.radiusSmall, _s.my10, _s.bottom0, _s.posAbs, _s.width4PX, _s.ml10, _s.bgPrimary].join(' ')}
2020-03-07 04:53:28 +00:00
style={{
height: `${volumeHeight}px`
}}
/>
2020-03-06 15:38:22 +00:00
<span
2020-04-29 23:32:49 +01:00
className={[_s.default, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.mbNeg5PX, _s.py5, _s.bgPrimary, _s.z3].join(' ')}
2020-03-06 15:38:22 +00:00
tabIndex='0'
2020-03-07 04:53:28 +00:00
style={{
marginLeft: '7px',
bottom: `${volumeHandleLoc}px`,
}}
2020-03-06 15:38:22 +00:00
/>
</div>
<div className={videoControlsBackgroundClasses}>
2020-03-06 15:38:22 +00:00
<div
className={[_s.default, _s.cursorPointer, _s.height22PX, _s.videoPlayerSeek].join(' ')}
onMouseDown={this.handleMouseDown}
ref={this.setSeekRef}
>
2020-04-29 23:32:49 +01:00
<div className={[progressClasses, _s.bgLoading, _s.width100PC].join(' ')} />
<div className={[progressClasses, _s.bgSubtle].join(' ')} style={{ width: `${buffer}%` }} />
<div className={[progressClasses, _s.bgBrand].join(' ')} style={{ width: `${progress}%` }} />
<span
2020-03-06 15:38:22 +00:00
className={seekHandleClasses}
tabIndex='0'
2020-03-06 15:38:22 +00:00
style={{
left: `${progress}%`
}}
>
<span className={seekInnerHandleClasses} />
</span>
</div>
2020-03-11 23:56:18 +00:00
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.pb5, _s.noSelect].join(' ')}>
2020-03-06 15:38:22 +00:00
<Button
2020-04-23 07:13:29 +01:00
isNarrow
2020-03-06 15:38:22 +00:00
backgroundColor='none'
aria-label={intl.formatMessage(paused ? messages.play : messages.pause)}
onClick={this.togglePlay}
icon={paused ? 'play' : 'pause'}
title={paused ? 'Play' : 'Pause'}
2020-04-23 07:13:29 +01:00
iconSize='16px'
2020-04-29 23:32:49 +01:00
iconClassName={_s.fillWhite}
2020-03-11 23:56:18 +00:00
className={_s.pl0}
2020-03-06 15:38:22 +00:00
/>
<Button
isNarrow
backgroundColor='none'
type='button'
aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)}
onClick={this.toggleMute}
icon={muted ? 'audio-mute' : 'audio'}
iconSize='24px'
iconClassName={_s.fillWhite}
className={[_s.px10, _s.mr10].join(' ')}
title='Volume'
onMouseEnter={this.handleMouseEnterAudio}
onMouseLeave={this.handleMouseLeaveAudio}
/>
<Text color='white' size='small'>
{formatTime(currentTime)}
&nbsp;/&nbsp;
{formatTime(duration)}
</Text>
2020-03-06 15:38:22 +00:00
<div className={[_s.default, _s.mlAuto, _s.flexRow, _s.alignItemsCenter].join(' ')}>
2020-03-06 15:38:22 +00:00
<Button
2020-04-23 07:13:29 +01:00
isNarrow
2020-03-06 15:38:22 +00:00
backgroundColor='none'
aria-label={intl.formatMessage(messages.video_stats)}
onClick={this.handleOnClickSettings}
icon='cog'
iconSize='20px'
2020-04-29 23:32:49 +01:00
iconClassName={_s.fillWhite}
className={[_s.px10, _s.pr0].join(' ')}
buttonRef={this.setSettingsBtnRef}
title='Video stats'
2020-03-06 15:38:22 +00:00
/>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
{
pipAvailable &&
<Button
isNarrow
backgroundColor='none'
aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)}
onClick={this.togglePip}
icon='pip'
iconSize='20px'
iconClassName={_s.fillWhite}
className={[_s.px10, _s.pr0].join(' ')}
title='Picture in Picture'
/>
}
</Responsive>
2020-03-06 15:38:22 +00:00
<Button
2020-04-23 07:13:29 +01:00
isNarrow
2020-03-06 15:38:22 +00:00
backgroundColor='none'
aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)}
onClick={this.toggleFullscreen}
icon={fullscreen ? 'minimize-fullscreen' : 'fullscreen'}
title={fullscreen ? 'Minimize fullscreen' : 'Fullscreen'}
2020-04-23 07:13:29 +01:00
iconSize='20px'
2020-04-29 23:32:49 +01:00
iconClassName={_s.fillWhite}
2020-03-11 23:56:18 +00:00
className={[_s.px10, _s.pr0].join(' ')}
2020-03-06 15:38:22 +00:00
/>
</div>
</div>
2020-03-06 15:38:22 +00:00
</div>
{
revealed && sensitive &&
<div className={[_s.posAbs, _s.z2, _s.top0, _s.right0, _s.mt10, _s.mr10].join(' ')}>
<Button
title={intl.formatMessage(messages.toggle_visible)}
icon='hidden'
backgroundColor='black'
className={[_s.px10, _s.bgBlackOpaque_onHover].join(' ')}
onClick={this.toggleReveal}
/>
</div>
}
</div>
2020-03-07 04:53:28 +00:00
)
}
}