New: Expose subtitle title and disposition in UI

frontend/src/MovieFile/ExtraFile.ts

@@ -0,0 +1 @@
+export type ExtraFileType = 'subtitle' | 'metadata' | 'other';

frontend/src/MovieFile/Extras/ExtraFileDetailsPopover.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import IconButton from 'Components/Link/IconButton';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, tooltipPositions } from 'Helpers/Props';
+import { ExtraFileType } from 'MovieFile/ExtraFile';
+import translate from 'Utilities/String/translate';
+
+interface ExtraFileDetailsPopoverProps {
+  type: ExtraFileType;
+  title?: string;
+  languageTags?: string[];
+}
+
+function ExtraFileDetailsPopover(props: ExtraFileDetailsPopoverProps) {
+  const { type, title, languageTags = [] } = props;
+
+  const details = [];
+
+  if (type === 'subtitle') {
+    if (title) {
+      details.push({ name: translate('Title'), value: title });
+    }
+
+    if (languageTags.length) {
+      details.push({
+        name: translate('Disposition'),
+        value: languageTags.join(', '),
+      });
+    }
+  }
+
+  if (details.length) {
+    return (
+      <Popover
+        anchor={<IconButton name={icons.INFO} />}
+        title={translate('Tags')}
+        body={
+          <ul>
+            {details.map(({ name, value }, index) => {
+              return (
+                <li key={index}>
+                  {name}: {value}
+                </li>
+              );
+            })}
+          </ul>
+        }
+        position={tooltipPositions.LEFT}
+      />
+    );
+  }
+
+  return '';
+}
+
+export default ExtraFileDetailsPopover;

frontend/src/MovieFile/Extras/ExtraFileRow.js

@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import IconButton from 'Components/Link/IconButton';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
-import { icons } from 'Helpers/Props';
 import titleCase from 'Utilities/String/titleCase';
+import ExtraFileDetailsPopover from './ExtraFileDetailsPopover';
 import styles from './ExtraFileRow.css';
 
 class ExtraFileRow extends Component {
@@ -16,7 +15,9 @@ class ExtraFileRow extends Component {
     const {
       relativePath,
       extension,
-      type
+      type,
+      title,
+      languageTags
     } = this.props;
 
     return (
@@ -43,8 +44,10 @@ class ExtraFileRow extends Component {
         </TableRowCell>
 
         <TableRowCell className={styles.actions}>
-          <IconButton
-            name={icons.INFO}
+          <ExtraFileDetailsPopover
+            type={type}
+            title={title}
+            languageTags={languageTags}
           />
         </TableRowCell>
       </TableRow>
@@ -57,7 +60,9 @@ ExtraFileRow.propTypes = {
   id: PropTypes.number.isRequired,
   extension: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
-  relativePath: PropTypes.string.isRequired
+  relativePath: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  languageTags: PropTypes.arrayOf(PropTypes.string)
 };
 
 export default ExtraFileRow;