New: Mediainfo Popover for Movie Files

frontend/src/MovieFile/Editor/MediaInfoPopover.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+
+function MediaInfoPopover(props) {
+  return (
+    <DescriptionList>
+      {
+        Object.keys(props).map((key) => {
+          const title = key
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/^./, (str) => str.toUpperCase());
+
+          const value = props[key];
+
+          if (!value) {
+            return null;
+          }
+
+          return (
+            <DescriptionListItem
+              key={key}
+              title={title}
+              data={props[key]}
+            />
+          );
+        })
+      }
+    </DescriptionList>
+  );
+}
+
+export default MediaInfoPopover;

frontend/src/MovieFile/Editor/MovieFileEditorRow.js

@@ -2,18 +2,21 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import formatBytes from 'Utilities/Number/formatBytes';
 import IconButton from 'Components/Link/IconButton';
-import { icons, kinds } from 'Helpers/Props';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRowCellButton from 'Components/Table/Cells/TableRowCellButton';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieLanguage from 'Movie/MovieLanguage';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
+import Icon from 'Components/Icon';
+import Popover from 'Components/Tooltip/Popover';
 import SelectQualityModal from 'MovieFile/Quality/SelectQualityModal';
 import SelectLanguageModal from 'MovieFile/Language/SelectLanguageModal';
 import * as mediaInfoTypes from 'MovieFile/mediaInfoTypes';
 import MediaInfoConnector from 'MovieFile/MediaInfoConnector';
 import MovieFileRowCellPlaceholder from './MovieFileRowCellPlaceholder';
+import MediaInfoPopover from './MediaInfoPopover';
 import styles from './MovieFileEditorRow.css';
 
 class MovieFileEditorRow extends Component {
@@ -70,6 +73,7 @@ class MovieFileEditorRow extends Component {
   render() {
     const {
       id,
+      mediaInfo,
       relativePath,
       size,
       quality,
@@ -101,6 +105,9 @@ class MovieFileEditorRow extends Component {
             movieFileId={id}
             type={mediaInfoTypes.VIDEO}
           />
+        </TableRowCell>
+
+        <TableRowCell>
           <MediaInfoConnector
             movieFileId={id}
             type={mediaInfoTypes.AUDIO}
@@ -154,6 +161,17 @@ class MovieFileEditorRow extends Component {
         </TableRowCellButton>
 
         <TableRowCell className={styles.actions}>
+          <Popover
+            anchor={
+              <Icon
+                name={icons.MEDIA_INFO}
+              />
+            }
+            title="Media Info"
+            body={<MediaInfoPopover {...mediaInfo} />}
+            position={tooltipPositions.LEFT}
+          />
+
           <IconButton
             title="Delete file"
             name={icons.REMOVE}

frontend/src/MovieFile/Editor/MovieFileEditorTableContent.js

@@ -12,8 +12,13 @@ const columns = [
     isVisible: true
   },
   {
-    name: 'mediainfo',
+    name: 'audioInfo',
-    label: 'Media Info',
+    label: 'Audio Info',
+    isVisible: true
+  },
+  {
+    name: 'videoCodec',
+    label: 'Video Codec',
     isVisible: true
   },
   {