add more output format categories

closes #1539

src/components/OutputFormatSelect.jsx

@@ -1,30 +1,32 @@
 import React, { memo, useMemo } from 'react';
 import i18n from 'i18next';
-import fromPairs from 'lodash/fromPairs';
 
 import allOutFormats from '../outFormats';
 import { withBlur } from '../util';
 import Select from './Select';
 
-const commonFormats = ['mov', 'mp4', 'matroska', 'webm', 'mp3', 'ipod'];
+const commonVideoAudioFormats = ['matroska', 'mov', 'mp4', 'mpegts', 'ogv', 'webm'];
+const commonAudioFormats = ['flac', 'ipod', 'mp3', 'oga', 'ogg', 'opus', 'wav'];
+const commonSubtitleFormats = ['ass', 'srt', 'sup', 'webvtt'];
 
-function renderFormatOptions(map) {
-  return Object.entries(map).map(([f, name]) => (
-    <option key={f} value={f}>{f} - {name}</option>
+function renderFormatOptions(formats) {
+  return formats.map((format) => (
+    <option key={format} value={format}>{format} - {allOutFormats[format]}</option>
   ));
 }
 
 const OutputFormatSelect = memo(({ style, detectedFileFormat, fileFormat, onOutputFormatUserChange }) => {
-  const commonFormatsMap = useMemo(() => fromPairs(commonFormats.map(format => [format, allOutFormats[format]])
-    .filter(([f]) => f !== detectedFileFormat)), [detectedFileFormat]);
+  const commonVideoAudioFormatsExceptDetectedFormat = useMemo(() => commonVideoAudioFormats.filter((f) => f !== detectedFileFormat), [detectedFileFormat]);
+  const commonAudioFormatsExceptDetectedFormat = useMemo(() => commonAudioFormats.filter((f) => f !== detectedFileFormat), [detectedFileFormat]);
+  const commonSubtitleFormatsExceptDetectedFormat = useMemo(() => commonSubtitleFormats.filter((f) => f !== detectedFileFormat), [detectedFileFormat]);
+  const commonFormatsAndDetectedFormat = useMemo(() => new Set([...commonVideoAudioFormats, ...commonAudioFormats, commonSubtitleFormats, detectedFileFormat]), [detectedFileFormat]);
 
-  const otherFormatsMap = useMemo(() => fromPairs(Object.entries(allOutFormats)
-    .filter(([f]) => ![...commonFormats, detectedFileFormat].includes(f))), [detectedFileFormat]);
+  const otherFormats = useMemo(() => Object.keys(allOutFormats).filter((format) => !commonFormatsAndDetectedFormat.has(format)), [commonFormatsAndDetectedFormat]);
 
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <Select style={style} value={fileFormat || ''} title={i18n.t('Output format')} onChange={withBlur(e => onOutputFormatUserChange(e.target.value))}>
-      <option key="disabled1" value="" disabled>{i18n.t('Format')}</option>
+    <Select style={style} value={fileFormat || ''} title={i18n.t('Output container format:')} onChange={withBlur(e => onOutputFormatUserChange(e.target.value))}>
+      <option key="disabled1" value="" disabled>{i18n.t('Output container format:')}</option>
 
       {detectedFileFormat && (
         <option key={detectedFileFormat} value={detectedFileFormat}>
@@ -32,11 +34,17 @@ const OutputFormatSelect = memo(({ style, detectedFileFormat, fileFormat, onOutp
         </option>
       )}
 
-      <option key="disabled2" value="" disabled>--- {i18n.t('Common formats:')} ---</option>
-      {renderFormatOptions(commonFormatsMap)}
+      <option key="disabled2" value="" disabled>--- {i18n.t('Common video/audio formats:')} ---</option>
+      {renderFormatOptions(commonVideoAudioFormatsExceptDetectedFormat)}
 
-      <option key="disabled3" value="" disabled>--- {i18n.t('All formats:')} ---</option>
-      {renderFormatOptions(otherFormatsMap)}
+      <option key="disabled3" value="" disabled>--- {i18n.t('Common audio formats:')} ---</option>
+      {renderFormatOptions(commonAudioFormatsExceptDetectedFormat)}
+
+      <option key="disabled4" value="" disabled>--- {i18n.t('Common subtitle formats:')} ---</option>
+      {renderFormatOptions(commonSubtitleFormatsExceptDetectedFormat)}
+
+      <option key="disabled5" value="" disabled>--- {i18n.t('All other formats:')} ---</option>
+      {renderFormatOptions(otherFormats)}
     </Select>
   );
 });