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

647 lines
18 KiB
JavaScript
Raw Normal View History

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 classNames from 'classnames/bind'
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 { displayMedia } from '../initial_state'
import Button from './button'
import Text from './text'
2020-03-06 15:38:22 +00:00
const cx = classNames.bind(_s)
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' },
})
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 = 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}`
}
2020-01-28 16:29:37 +00:00
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
2020-02-25 16:04:44 +00:00
export default
@injectIntl
2020-01-29 21:54:39 +00:00
class Video extends PureComponent {
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,
2020-03-07 04:53:28 +00:00
}
state = {
currentTime: 0,
duration: 0,
volume: 0.5,
paused: true,
dragging: 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'),
2020-03-07 04:53:28 +00:00
}
volHeight = 100
volOffset = 13
volHandleOffset = v => {
2020-03-07 04:53:28 +00:00
const offset = v * this.volHeight + this.volOffset
return (offset > 110) ? 110 : offset
}
setPlayerRef = c => {
2020-03-07 04:53:28 +00:00
this.player = c
if (c) {
2020-03-07 04:53:28 +00:00
if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth)
this.setState({
containerWidth: c.offsetWidth,
2020-03-07 04:53:28 +00:00
})
}
}
setVideoRef = c => {
2020-03-07 04:53:28 +00:00
this.video = c
if (this.video) {
2020-03-07 04:53:28 +00:00
const { volume, muted } = this.video
this.setState({
volume,
muted,
})
}
}
setSeekRef = c => {
2020-03-07 04:53:28 +00:00
this.seek = c
}
setVolumeRef = c => {
2020-03-07 04:53:28 +00:00
this.volume = c
}
setCanvasRef = c => {
2020-03-07 04:53:28 +00:00
this.canvas = c
}
2020-03-07 04:53:28 +00:00
handleClickRoot = e => e.stopPropagation()
handlePlay = () => {
2020-03-07 04:53:28 +00:00
this.setState({ paused: false })
}
handlePause = () => {
2020-03-07 04:53:28 +00:00
this.setState({ paused: true })
}
handleTimeUpdate = () => {
2020-03-07 04:53:28 +00:00
const { currentTime, duration } = this.video
this.setState({
2020-03-07 04:53:28 +00:00
currentTime: Math.floor(currentTime),
duration: Math.floor(duration),
})
}
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()
}
handleVolumeMouseUp = () => {
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)
}
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 = Math.floor(this.video.duration * x)
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)
}
}
componentDidMount() {
2020-03-07 04:53:28 +00:00
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 (this.props.blurhash) {
2020-03-07 04:53:28 +00:00
this._decode()
}
}
componentWillUnmount() {
2020-03-07 04:53:28 +00:00
document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true)
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true)
document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange, true)
document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true)
}
componentWillReceiveProps(nextProps) {
if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
2020-03-07 04:53:28 +00:00
this.setState({ revealed: nextProps.visible })
}
}
componentDidUpdate(prevProps, prevState) {
if (prevState.revealed && !this.state.revealed && this.video) {
2020-03-07 04:53:28 +00:00
this.video.pause()
}
if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
2020-03-07 04:53:28 +00:00
this._decode()
}
}
_decode() {
2020-03-07 04:53:28 +00:00
const hash = this.props.blurhash
const pixels = decode(hash, 32, 32)
2020-03-06 15:38:22 +00:00
if (pixels && this.canvas) {
2020-03-07 04:53:28 +00:00
const ctx = this.canvas.getContext('2d')
const imageData = new ImageData(pixels, 32, 32)
2020-03-07 04:53:28 +00:00
ctx.putImageData(imageData, 0, 0)
}
}
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(e => {
this.setState({ hoveringVolumeButton: false })
}, 2000)
handleMouseEnterVolumeControl = () => {
this.setState({ hoveringVolumeControl: true })
}
handleMouseLeaveVolumeControl = throttle(e => {
this.setState({ hoveringVolumeControl: false })
}, 2000)
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,
})
}
render() {
2020-03-06 15:38:22 +00:00
const {
preview,
src,
inline,
startTime,
intl,
alt,
detailed,
sensitive,
aspectRatio
} = this.props
const {
containerWidth,
currentTime,
duration,
volume,
buffer,
dragging,
paused,
fullscreen,
hovered,
muted,
2020-03-07 04:53:28 +00:00
revealed,
hoveringVolumeButton,
hoveringVolumeControl
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 :
2020-03-06 15:38:22 +00:00
const seekHandleClasses = cx({
default: 1,
2020-04-23 07:13:29 +01:00
posAbs: 1,
2020-03-06 15:38:22 +00:00
circle: 1,
2020-03-11 23:56:18 +00:00
px10: 1,
py10: 1,
2020-04-29 23:32:49 +01:00
bgBrand: 1,
2020-04-25 18:00:51 +01:00
mlNeg5PX: 1,
2020-03-06 15:38:22 +00:00
z3: 1,
2020-03-07 04:53:28 +00:00
boxShadow1: 1,
2020-03-06 15:38:22 +00:00
opacity0: !dragging,
opacity1: dragging || hovered,
})
const progressClasses = cx({
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,
})
2020-03-07 04:53:28 +00:00
const volumeControlClasses = cx({
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,
})
return (
<div
2020-03-06 15:38:22 +00:00
className={[_s.default].join(' ')}
style={playerStyle}
ref={this.setPlayerRef}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
onClick={this.handleClickRoot}
tabIndex={0}
>
2020-03-06 15:38:22 +00:00
{
!revealed &&
<canvas
width={32}
height={32}
ref={this.setCanvasRef}
2020-04-23 07:13:29 +01:00
className={[_s.default, _s.posAbs, _s.height100PC, _s.width100PC, _s.top0, _s.left0].join(' ')}
2020-03-06 15:38:22 +00:00
/>
}
{
revealed &&
<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}
/>
}
{ /* <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>
2020-04-23 07:13:29 +01:00
<div className={[_s.default, _s.z2, _s.px15, _s.videoPlayerControlsBackground, _s.posAbs, _s.bottom0, _s.right0, _s.left0].join(' ')}>
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}%`
}}
/>
</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'}
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
/>
2020-04-24 04:17:27 +01:00
<div className={[_s.default, _s.mlAuto, _s.flexRow, _s.alignItemsCenter].join(' ')}>
2020-03-06 15:38:22 +00:00
<Text color='white' size='small'>
{formatTime(currentTime)}
&nbsp;/&nbsp;
{formatTime(duration)}
</Text>
<Button
2020-04-23 07:13:29 +01:00
isNarrow
2020-03-06 15:38:22 +00:00
backgroundColor='none'
type='button'
aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)}
onClick={this.toggleMute}
icon={muted ? 'audio-mute' : 'audio'}
2020-04-23 07:13:29 +01:00
iconSize='24px'
2020-04-29 23:32:49 +01:00
iconClassName={_s.fillWhite}
2020-03-11 23:56:18 +00:00
className={[_s.px10, _s.ml10].join(' ')}
2020-03-07 04:53:28 +00:00
onMouseEnter={this.handleMouseEnterAudio}
onMouseLeave={this.handleMouseLeaveAudio}
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'}
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>
</div>
2020-03-07 04:53:28 +00:00
)
}
}