diff --git a/frontend/src/MovieFile/Editor/MediaInfoPopover.js b/frontend/src/MovieFile/Editor/MediaInfoPopover.js
new file mode 100644
index 000000000..9d4c198b6
--- /dev/null
+++ b/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 (
+
+ {
+ 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 (
+
+ );
+ })
+ }
+
+ );
+}
+
+export default MediaInfoPopover;
\ No newline at end of file
diff --git a/frontend/src/MovieFile/Editor/MovieFileEditorRow.js b/frontend/src/MovieFile/Editor/MovieFileEditorRow.js
index 673578470..8a8df4f0e 100644
--- a/frontend/src/MovieFile/Editor/MovieFileEditorRow.js
+++ b/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}
/>
+
+
+
+
+ }
+ title="Media Info"
+ body={}
+ position={tooltipPositions.LEFT}
+ />
+