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} + /> +