Added VideoStatsPopover

• Added:
- VideoStatsPopover for displaying basic video meta information similar to youtube

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']),

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 (
+      <PopoverLayout isXS={isXS} width={320}>
+        <div className={[_s.default, _s.bgBlack, _s.px10, _s.py10].join(' ')}>
+          <Button
+            icon='close'
+            iconSize='8px'
+            color='white'
+            backgroundColor='none'
+            className={[_s.posAbs, _s.top0, _s.right0, _s.mt5, _s.mr5, _s.z4].join(' ')}
+            onClick={this.handleOnClosePopover}
+          />
+          
+          {
+            keys.map((key) => (
+              <VideoStatLine
+                key={`video-stat-${key}`}
+                title={intl.formatMessage(messages[key])}
+                value={meta.get(key)}
+              />
+            ))
+          }
+          {
+            originalKeys.map((key) => (
+              <VideoStatLine
+                key={`video-stat-o-${key}`}
+                title={intl.formatMessage(messages[`original_${key}`])}
+                value={meta.getIn(['original', key])}
+              />
+            ))
+          }
+          
+        </div>
+      </PopoverLayout>
+    )
+  }
+
+}
+
+class VideoStatLine extends PureComponent {
+
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+  }
+
+  render() {
+    const { title, value } = this.props
+
+    return (
+      <div className={[_s.default, _s.flexRow, _s.pt2].join(' ')}>
+        <div className={[_s.default, _s.width115PX, _s.alignItemsEnd, _s.mr5].join(' ')}>
+          <Text size='extraSmall' weight='medium' color='white'>
+            {title}
+          </Text>
+        </div>
+        <Text size='extraSmall' color='white'>{value}</Text>
+      </div>
+    )
+  }
+
+}

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'

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') }
+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') }

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; }