diff --git a/app/javascript/gabsocial/components/popover/popover_root.js b/app/javascript/gabsocial/components/popover/popover_root.js index d2aa47de..04141892 100644 --- a/app/javascript/gabsocial/components/popover/popover_root.js +++ b/app/javascript/gabsocial/components/popover/popover_root.js @@ -11,6 +11,7 @@ import { POPOVER_STATUS_OPTIONS, POPOVER_STATUS_VISIBILITY, POPOVER_USER_INFO, + POPOVER_VIDEO_STATS, } from '../../constants' import { CommentSortingOptionsPopover, @@ -24,6 +25,7 @@ import { StatusOptionsPopover, StatusVisibilityPopover, UserInfoPopover, + VideoStatsPopover, } from '../../features/ui/util/async_components' import { closePopover } from '../../actions/popover' @@ -46,6 +48,7 @@ POPOVER_COMPONENTS[POPOVER_SIDEBAR_MORE] = SidebarMorePopover POPOVER_COMPONENTS[POPOVER_STATUS_OPTIONS] = StatusOptionsPopover POPOVER_COMPONENTS[POPOVER_STATUS_VISIBILITY] = StatusVisibilityPopover POPOVER_COMPONENTS[POPOVER_USER_INFO] = UserInfoPopover +POPOVER_COMPONENTS[POPOVER_VIDEO_STATS] = VideoStatsPopover const mapStateToProps = (state) => ({ type: state.getIn(['popover', 'popoverType']), diff --git a/app/javascript/gabsocial/components/popover/video_stats_popover.js b/app/javascript/gabsocial/components/popover/video_stats_popover.js new file mode 100644 index 00000000..4abe3dbb --- /dev/null +++ b/app/javascript/gabsocial/components/popover/video_stats_popover.js @@ -0,0 +1,130 @@ +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 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', + ] + + return ( + +
+
+
+ ) + } + +} + +class VideoStatLine extends PureComponent { + + static propTypes = { + title: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + } + + render() { + const { title, value } = this.props + + return ( +
+
+ + {title} + +
+ {value} +
+ ) + } + +} \ No newline at end of file diff --git a/app/javascript/gabsocial/constants.js b/app/javascript/gabsocial/constants.js index 869e501e..2ae0f39c 100644 --- a/app/javascript/gabsocial/constants.js +++ b/app/javascript/gabsocial/constants.js @@ -30,6 +30,7 @@ export const POPOVER_SIDEBAR_MORE = 'SIDEBAR_MORE' export const POPOVER_STATUS_OPTIONS = 'STATUS_OPTIONS' export const POPOVER_STATUS_VISIBILITY = 'STATUS_VISIBILITY' export const POPOVER_USER_INFO = 'USER_INFO' +export const POPOVER_VIDEO_STATS = 'VIDEO_STATS' export const MODAL_ACTIONS = 'ACTIONS' export const MODAL_BLOCK_ACCOUNT = 'BLOCK_ACCOUNT' diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js index d045738a..db3d63f2 100644 --- a/app/javascript/gabsocial/features/ui/util/async_components.js +++ b/app/javascript/gabsocial/features/ui/util/async_components.js @@ -72,4 +72,5 @@ export function UnauthorizedModal() { return import(/* webpackChunkName: "compon export function UnfollowModal() { return import(/* webpackChunkName: "components/unfollow_modal" */'../../../components/modal/unfollow_modal') } export function UserInfoPopover() { return import(/* webpackChunkName: "components/user_info_popover" */'../../../components/popover/user_info_popover') } export function Video() { return import(/* webpackChunkName: "components/video" */'../../../components/video') } -export function VideoModal() { return import(/* webpackChunkName: "components/video_modal" */'../../../components/modal/video_modal') } \ No newline at end of file +export function VideoModal() { return import(/* webpackChunkName: "components/video_modal" */'../../../components/modal/video_modal') } +export function VideoStatsPopover() { return import(/* webpackChunkName: "components/video_stats_popover" */'../../../components/popover/video_stats_popover') } \ No newline at end of file diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css index 49427741..967fa37f 100644 --- a/app/javascript/styles/global.css +++ b/app/javascript/styles/global.css @@ -508,6 +508,7 @@ body { .width330PX { width: 330px; } .width250PX { width: 240px; } .width240PX { width: 240px; } +.width115PX { width: 115px; } .width84PX { width: 84px; } .width72PX { width: 72px; } .width60PX { width: 60px; }