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' import { defineMessages, injectIntl } from 'react-intl' import { closePopover } from '../../actions/popover' import { CX } from '../../constants' import PopoverLayout from './popover_layout' import Button from '../button' import Text from '../text' const messages = defineMessages({ size: { id: 'size', defaultMessage: 'Size' }, audio_bitrate: { id: 'video.audio_bitrate', defaultMessage: 'Audio Bitrate' }, fps: { id: 'fps', defaultMessage: 'FPS' }, aspect: { id: 'video.aspect_ratio', defaultMessage: 'Aspect Ratio' }, audio_channels: { id: 'video.audio_channels', defaultMessage: 'Audio Channels' }, audio_encode: { id: 'video.audio_encode', defaultMessage: 'Audio Encode' }, original_height: { id: 'video.original_height', defaultMessage: 'Original Height' }, original_width: { id: 'video.original_width', defaultMessage: 'Original Width' }, original_frame_rate: { id: 'video.original_frame_rate', defaultMessage: 'Original Frame Rate' }, original_bitrate: { id: 'video.original_bitrate', defaultMessage: 'Original Bitrate' }, }) const mapDispatchToProps = (dispatch) => ({ onClosePopover: () => dispatch(closePopover()), }) export default @injectIntl @connect(null, mapDispatchToProps) class VideoStatsPopover extends ImmutablePureComponent { static propTypes = { meta: ImmutablePropTypes.map.isRequired, onClosePopover: PropTypes.func.isRequired, isXS: PropTypes.bool, intl: PropTypes.object.isRequired, } updateOnProps = [ 'meta', 'isXS', ] handleOnClosePopover = () => { this.props.onClosePopover() } render() { const { intl, meta, isXS, } = this.props const keys = [ 'size', 'audio_bitrate', 'fps', 'aspect', 'audio_channels', 'audio_encode', ] const originalKeys = [ 'height', 'width', 'frame_rate', 'bitrate', ] const containerClasses = CX({ d: 1, bgBlack: !isXS, bgPrimary: !isXS, px10: 1, py10: 1, }) return (
) } } class VideoStatLine extends React.PureComponent { static propTypes = { isXS: PropTypes.bool.isRequired, title: PropTypes.string.isRequired, value: PropTypes.string.isRequired, } render() { const { isXS, title, value } = this.props const color = isXS ? 'primary' : 'white' return (
{title}
{value}
) } }