Option to show audio/subtitle language on movie details (first two unique languages will be shown)

(cherry picked from commit c10677dfe7098295fde39517b3983e8f3f22823d)

frontend/src/MovieFile/Editor/MovieFileEditorRow.css

@@ -34,6 +34,13 @@
   width: 100px;
 }
 
+.audioLanguages,
+.subtitles {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 165px;
+}
+
 .releaseGroup {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/MovieFile/Editor/MovieFileEditorRow.css.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'actions': string;
   'age': string;
+  'audioLanguages': string;
   'customFormatScore': string;
   'download': string;
   'formats': string;
@@ -12,6 +13,7 @@ interface CssExports {
   'relativePath': string;
   'releaseGroup': string;
   'size': string;
+  'subtitles': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/MovieFile/Editor/MovieFileEditorRow.js

@@ -117,6 +117,24 @@ class MovieFileEditorRow extends Component {
           />
         </TableRowCell>
 
+        <TableRowCell
+          className={styles.audioLanguages}
+        >
+          <MediaInfoConnector
+            type={mediaInfoTypes.AUDIO_LANGUAGES}
+            movieFileId={id}
+          />
+        </TableRowCell>
+
+        <TableRowCell
+          className={styles.subtitles}
+        >
+          <MediaInfoConnector
+            type={mediaInfoTypes.SUBTITLES}
+            movieFileId={id}
+          />
+        </TableRowCell>
+
         <TableRowCell
           className={styles.size}
           title={size}

frontend/src/MovieFile/Editor/MovieFileEditorTableContent.js

@@ -25,6 +25,16 @@ const columns = [
     label: () => translate('AudioInfo'),
     isVisible: true
   },
+  {
+    name: 'audioLanguages',
+    label: () => translate('AudioLanguages'),
+    isVisible: true
+  },
+  {
+    name: 'subtitleLanguages',
+    label: () => translate('SubtitleLanguages'),
+    isVisible: true
+  },
   {
     name: 'size',
     label: () => translate('Size'),

frontend/src/MovieFile/MediaInfo.js

@@ -1,12 +1,37 @@
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import * as mediaInfoTypes from './mediaInfoTypes';
 
+function formatLanguages(languages) {
+  if (!languages) {
+    return null;
+  }
+
+  const splitLanguages = _.uniq(languages.split(' / '));
+
+  if (splitLanguages.length > 3) {
+    return (
+      <span title={splitLanguages.join(', ')}>
+        {splitLanguages.slice(0, 2).join(', ')}, {splitLanguages.length - 2} more
+      </span>
+    );
+  }
+
+  return (
+    <span>
+      {splitLanguages.join(', ')}
+    </span>
+  );
+}
+
 function MediaInfo(props) {
   const {
     type,
     audioChannels,
     audioCodec,
+    audioLanguages,
+    subtitles,
     videoCodec
   } = props;
 
@@ -31,6 +56,14 @@ function MediaInfo(props) {
     );
   }
 
+  if (type === mediaInfoTypes.AUDIO_LANGUAGES) {
+    return formatLanguages(audioLanguages);
+  }
+
+  if (type === mediaInfoTypes.SUBTITLES) {
+    return formatLanguages(subtitles);
+  }
+
   if (type === mediaInfoTypes.VIDEO) {
     return (
       <span>
@@ -46,6 +79,8 @@ MediaInfo.propTypes = {
   type: PropTypes.string.isRequired,
   audioChannels: PropTypes.number,
   audioCodec: PropTypes.string,
+  audioLanguages: PropTypes.string,
+  subtitles: PropTypes.string,
   videoCodec: PropTypes.string
 };
 

frontend/src/MovieFile/mediaInfoTypes.js

@@ -1,2 +1,4 @@
 export const AUDIO = 'audio';
+export const AUDIO_LANGUAGES = 'audioLanguages';
+export const SUBTITLES = 'subtitles';
 export const VIDEO = 'video';

src/NzbDrone.Core/Localization/Core/en.json

@@ -74,6 +74,7 @@
   "AptUpdater": "Use apt to install the update",
   "AsAllDayHelpText": "Events will appear as all-day events in your calendar",
   "AudioInfo": "Audio Info",
+  "AudioLanguages": "Audio Languages",
   "AuthBasic": "Basic (Browser Popup)",
   "AuthForm": "Forms (Login Page)",
   "Authentication": "Authentication",
@@ -1099,6 +1100,7 @@
   "Studio": "Studio",
   "Style": "Style",
   "SubfolderWillBeCreatedAutomaticallyInterp": "'{0}' subfolder will be created automatically",
+  "SubtitleLanguages": "Subtitle Languages",
   "SuggestTranslationChange": "Suggest translation change",
   "Sunday": "Sunday",
   "System": "System",