Option to show audio/subtitle language on series details

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

Closes #3189

frontend/src/EpisodeFile/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/EpisodeFile/mediaInfoTypes.js

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

frontend/src/Series/Details/EpisodeRow.css

@@ -37,6 +37,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/Series/Details/EpisodeRow.js

@@ -196,6 +196,34 @@ class EpisodeRow extends Component {
               );
             }
 
+            if (name === 'audioLanguages') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.audioLanguages}
+                >
+                  <MediaInfoConnector
+                    type={mediaInfoTypes.AUDIO_LANGUAGES}
+                    episodeFileId={episodeFileId}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'subtitleLanguages') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.subtitles}
+                >
+                  <MediaInfoConnector
+                    type={mediaInfoTypes.SUBTITLES}
+                    episodeFileId={episodeFileId}
+                  />
+                </TableRowCell>
+              );
+            }
+
             if (name === 'videoCodec') {
               return (
                 <TableRowCell

frontend/src/Store/Actions/episodeActions.js

@@ -74,6 +74,16 @@ export const defaultState = {
       label: 'Video Codec',
       isVisible: false
     },
+    {
+      name: 'audioLanguages',
+      label: 'Audio Languages',
+      isVisible: false
+    },
+    {
+      name: 'subtitleLanguages',
+      label: 'Subtitle Languages',
+      isVisible: false
+    },
     {
       name: 'size',
       label: 'Size',