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 (
+