New: Turn MediaInfo Popover into Modal, Add AudioFeatures

frontend/src/MovieFile/Editor/MovieFileEditorRow.js

@@ -2,7 +2,7 @@ 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, tooltipPositions } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRowCellButton from 'Components/Table/Cells/TableRowCellButton';
@@ -10,15 +10,13 @@ import MovieQuality from 'Movie/MovieQuality';
 import MovieFormats from 'Movie/MovieFormats';
 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';
+import FileDetailsModal from '../FileDetailsModal';
 
 class MovieFileEditorRow extends Component {
 
@@ -31,7 +29,8 @@ class MovieFileEditorRow extends Component {
     this.state = {
       isSelectQualityModalOpen: false,
       isSelectLanguageModalOpen: false,
-      isConfirmDeleteModalOpen: false
+      isConfirmDeleteModalOpen: false,
+      isFileDetailsModalOpen: false
     };
   }
 
@@ -68,6 +67,14 @@ class MovieFileEditorRow extends Component {
     this.setState({ isConfirmDeleteModalOpen: false });
   }
 
+  onFileDetailsPress = () => {
+    this.setState({ isFileDetailsModalOpen: true });
+  }
+
+  onFileDetailsModalClose = () => {
+    this.setState({ isFileDetailsModalOpen: false });
+  }
+
   //
   // Render
 
@@ -85,6 +92,7 @@ class MovieFileEditorRow extends Component {
     const {
       isSelectQualityModalOpen,
       isSelectLanguageModalOpen,
+      isFileDetailsModalOpen,
       isConfirmDeleteModalOpen
     } = this.state;
 
@@ -170,15 +178,9 @@ class MovieFileEditorRow extends Component {
         </TableRowCell>
 
         <TableRowCell className={styles.actions}>
-          <Popover
+          <IconButton
-            anchor={
+            name={icons.MEDIA_INFO}
-              <Icon
+            onPress={this.onFileDetailsPress}
-                name={icons.MEDIA_INFO}
-              />
-            }
-            title="Media Info"
-            body={<MediaInfoPopover {...mediaInfo} />}
-            position={tooltipPositions.LEFT}
           />
 
           <IconButton
@@ -188,6 +190,12 @@ class MovieFileEditorRow extends Component {
           />
         </TableRowCell>
 
+        <FileDetailsModal
+          isOpen={isFileDetailsModalOpen}
+          onModalClose={this.onFileDetailsModalClose}
+          mediaInfo={mediaInfo}
+        />
+
         <ConfirmModal
           isOpen={isConfirmDeleteModalOpen}
           ids={[id]}

frontend/src/MovieFile/FileDetailsModal.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { sizes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Modal from 'Components/Modal/Modal';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import MediaInfoPopover from './Editor/MediaInfoPopover';
+
+function FileDetailsModal(props) {
+  const {
+    isOpen,
+    onModalClose,
+    mediaInfo
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+      size={sizes.SMALL}
+    >
+      <ModalContent
+        onModalClose={onModalClose}
+      >
+        <ModalHeader>
+          Details
+        </ModalHeader>
+
+        <ModalBody>
+          <MediaInfoPopover {...mediaInfo} />
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+FileDetailsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  mediaInfo: PropTypes.object.isRequired
+};
+
+export default FileDetailsModal;

src/Radarr.Api.V3/MovieFiles/MediaInfoResource.cs

@@ -7,6 +7,7 @@ namespace Radarr.Api.V3.MovieFiles
 {
     public class MediaInfoResource : RestResource
     {
+        public string AudioAdditionalFeatures { get; set; }
         public int AudioBitrate { get; set; }
         public decimal AudioChannels { get; set; }
         public string AudioCodec { get; set; }
@@ -33,6 +34,7 @@ namespace Radarr.Api.V3.MovieFiles
 
             return new MediaInfoResource
                    {
+                       AudioAdditionalFeatures = model.AudioAdditionalFeatures,
                        AudioBitrate = model.AudioBitrate,
                        AudioChannels = MediaInfoFormatter.FormatAudioChannels(model),
                        AudioLanguages = model.AudioLanguages,