diff --git a/frontend/src/Episode/Summary/MediaInfo.tsx b/frontend/src/Episode/Summary/MediaInfo.tsx index f5e3db21f..22f5e5b11 100644 --- a/frontend/src/Episode/Summary/MediaInfo.tsx +++ b/frontend/src/Episode/Summary/MediaInfo.tsx @@ -4,34 +4,54 @@ import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem' import MediaInfoProps from 'typings/MediaInfo'; import formatBitrate from 'Utilities/Number/formatBitrate'; import getEntries from 'Utilities/Object/getEntries'; +import styles from './MediaInfo.css'; function MediaInfo(props: MediaInfoProps) { return ( - - {getEntries(props).map(([key, value]) => { - const title = key - .replace(/([A-Z])/g, ' $1') - .replace(/^./, (str) => str.toUpperCase()); +
+
+ + {getEntries(props).map(([key, value]) => { + if (key === 'audioStreams') { + return null; + } - if (!value) { - return null; - } + const title = key + .replace(/([A-Z])/g, ' $1') + .replace(/^./, (str) => str.toUpperCase()); - if (key === 'audioBitrate' || key === 'videoBitrate') { - return ( - {formatBitrate(value)} - } - /> - ); - } + if (!value) { + return null; + } - return ; - })} - + if (key === 'audioBitrate' || key === 'videoBitrate') { + return ( + {formatBitrate(value)} + } + /> + ); + } + + return ; + })} + +
+
+ {props.audioStreams && props.audioStreams.length > 0 && ( + (() => { + const audioStreamsArray = props.audioStreams.split('+'); + return audioStreamsArray.map((audioStream, index) => { + const title = audioStreamsArray.length === 1 ? 'Audio Stream' : `Audio Stream #${index + 1}`; + return ; + }); + })() + )} +
+
); }