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 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…
Reference in New Issue
Block a user