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

198 lines
5.0 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
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-03-06 15:38:22 +00:00
import { decode } from 'blurhash'
import videojs from 'video.js'
2020-03-27 22:57:03 +00:00
import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio'
import { displayMedia } from '../initial_state'
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
import '!style-loader!css-loader!video.js/dist/video-js.min.css'
const videoJsOptions = {
autoplay: false,
playbackRates: [0.5, 1, 1.5, 2],
controls: true,
sources: [{}],
}
class Video extends ImmutablePureComponent {
state = {
containerWidth: this.props.width,
revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
2020-03-07 04:53:28 +00:00
}
componentDidMount() {
videoJsOptions.sources = [{ src: this.props.src }]
this.videoPlayer = videojs(this.video, videoJsOptions)
}
componentWillUnmount() {
if (this.videoPlayer) {
this.videoPlayer.dispose()
}
}
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()
}
}
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
}
handleClickRoot = (e) => e.stopPropagation()
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 })
}
}
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,
2020-03-07 04:53:28 +00:00
revealed,
2020-03-06 15:38:22 +00:00
} = this.state
2020-03-07 04:53:28 +00:00
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) {
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
}
if (!revealed && sensitive) {
return <SensitiveMediaItem onClick={this.toggleReveal} />
}
return (
<div
className={[_s.d, _s.mt10, _s.outlineNone].join(' ')}
style={playerStyle}
ref={this.setPlayerRef}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
onClick={this.handleClickRoot}
tabIndex={0}
>
<div data-vjs-player>
<video
className={[_s.d, _s.h100PC, _s.w100PC, _s.outlineNone, 'video-js'].join(' ')}
ref={this.setVideoRef}
playsInline
poster={preview}
preload={preload}
role='button'
tabIndex='0'
aria-label={alt}
title={alt}
width={width}
height={height}
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
)
}
}
const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Hide media' },
})
Video.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,
aspectRatio: PropTypes.number,
meta: ImmutablePropTypes.map,
}
export default injectIntl(Video)