New: Mediainfo Popover for Movie Files

pull/2/head
Qstick 5 years ago
parent ac8a7a9254
commit 1920bd53b6

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

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

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

Loading…
Cancel
Save