mirror of
https://github.com/Radarr/Radarr.git
synced 2024-09-11 20:12:41 +02:00
New: Mediainfo Popover for Movie Files
This commit is contained in:
parent
ac8a7a9254
commit
1920bd53b6
33
frontend/src/MovieFile/Editor/MediaInfoPopover.js
Normal file
33
frontend/src/MovieFile/Editor/MediaInfoPopover.js
Normal file
@ -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 React, { Component } from 'react';
|
||||||
import formatBytes from 'Utilities/Number/formatBytes';
|
import formatBytes from 'Utilities/Number/formatBytes';
|
||||||
import IconButton from 'Components/Link/IconButton';
|
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 TableRow from 'Components/Table/TableRow';
|
||||||
import TableRowCell from 'Components/Table/Cells/TableRowCell';
|
import TableRowCell from 'Components/Table/Cells/TableRowCell';
|
||||||
import TableRowCellButton from 'Components/Table/Cells/TableRowCellButton';
|
import TableRowCellButton from 'Components/Table/Cells/TableRowCellButton';
|
||||||
import MovieQuality from 'Movie/MovieQuality';
|
import MovieQuality from 'Movie/MovieQuality';
|
||||||
import MovieLanguage from 'Movie/MovieLanguage';
|
import MovieLanguage from 'Movie/MovieLanguage';
|
||||||
import ConfirmModal from 'Components/Modal/ConfirmModal';
|
import ConfirmModal from 'Components/Modal/ConfirmModal';
|
||||||
|
import Icon from 'Components/Icon';
|
||||||
|
import Popover from 'Components/Tooltip/Popover';
|
||||||
import SelectQualityModal from 'MovieFile/Quality/SelectQualityModal';
|
import SelectQualityModal from 'MovieFile/Quality/SelectQualityModal';
|
||||||
import SelectLanguageModal from 'MovieFile/Language/SelectLanguageModal';
|
import SelectLanguageModal from 'MovieFile/Language/SelectLanguageModal';
|
||||||
import * as mediaInfoTypes from 'MovieFile/mediaInfoTypes';
|
import * as mediaInfoTypes from 'MovieFile/mediaInfoTypes';
|
||||||
import MediaInfoConnector from 'MovieFile/MediaInfoConnector';
|
import MediaInfoConnector from 'MovieFile/MediaInfoConnector';
|
||||||
import MovieFileRowCellPlaceholder from './MovieFileRowCellPlaceholder';
|
import MovieFileRowCellPlaceholder from './MovieFileRowCellPlaceholder';
|
||||||
|
import MediaInfoPopover from './MediaInfoPopover';
|
||||||
import styles from './MovieFileEditorRow.css';
|
import styles from './MovieFileEditorRow.css';
|
||||||
|
|
||||||
class MovieFileEditorRow extends Component {
|
class MovieFileEditorRow extends Component {
|
||||||
@ -70,6 +73,7 @@ class MovieFileEditorRow extends Component {
|
|||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
id,
|
id,
|
||||||
|
mediaInfo,
|
||||||
relativePath,
|
relativePath,
|
||||||
size,
|
size,
|
||||||
quality,
|
quality,
|
||||||
@ -101,6 +105,9 @@ class MovieFileEditorRow extends Component {
|
|||||||
movieFileId={id}
|
movieFileId={id}
|
||||||
type={mediaInfoTypes.VIDEO}
|
type={mediaInfoTypes.VIDEO}
|
||||||
/>
|
/>
|
||||||
|
</TableRowCell>
|
||||||
|
|
||||||
|
<TableRowCell>
|
||||||
<MediaInfoConnector
|
<MediaInfoConnector
|
||||||
movieFileId={id}
|
movieFileId={id}
|
||||||
type={mediaInfoTypes.AUDIO}
|
type={mediaInfoTypes.AUDIO}
|
||||||
@ -154,6 +161,17 @@ class MovieFileEditorRow extends Component {
|
|||||||
</TableRowCellButton>
|
</TableRowCellButton>
|
||||||
|
|
||||||
<TableRowCell className={styles.actions}>
|
<TableRowCell className={styles.actions}>
|
||||||
|
<Popover
|
||||||
|
anchor={
|
||||||
|
<Icon
|
||||||
|
name={icons.MEDIA_INFO}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
title="Media Info"
|
||||||
|
body={<MediaInfoPopover {...mediaInfo} />}
|
||||||
|
position={tooltipPositions.LEFT}
|
||||||
|
/>
|
||||||
|
|
||||||
<IconButton
|
<IconButton
|
||||||
title="Delete file"
|
title="Delete file"
|
||||||
name={icons.REMOVE}
|
name={icons.REMOVE}
|
||||||
|
@ -12,8 +12,13 @@ const columns = [
|
|||||||
isVisible: true
|
isVisible: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'mediainfo',
|
name: 'audioInfo',
|
||||||
label: 'Media Info',
|
label: 'Audio Info',
|
||||||
|
isVisible: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'videoCodec',
|
||||||
|
label: 'Video Codec',
|
||||||
isVisible: true
|
isVisible: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
Loading…
Reference in New Issue
Block a user