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

(cherry picked from commit c10677dfe7098295fde39517b3983e8f3f22823d)

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
 };