diff --git a/src/StreamsSelector.jsx b/src/StreamsSelector.jsx index 6803900d..d35ec6d6 100644 --- a/src/StreamsSelector.jsx +++ b/src/StreamsSelector.jsx @@ -1,4 +1,4 @@ -import React, { memo, Fragment } from 'react'; +import React, { memo } from 'react'; import { FaVideo, FaVideoSlash, FaFileExport, FaFileImport, FaVolumeUp, FaVolumeMute, FaBan, FaTrashAlt, FaInfoCircle } from 'react-icons/fa'; import { GoFileBinary } from 'react-icons/go'; @@ -56,8 +56,10 @@ const Stream = memo(({ stream, onToggle, copyStream, fileDuration }) => { return ( - - {stream.index} + + {stream.index} + + {stream.codec_type} {stream.codec_tag !== '0x0000' && stream.codec_tag_string} {stream.codec_name} @@ -66,23 +68,46 @@ const Stream = memo(({ stream, onToggle, copyStream, fileDuration }) => { {!Number.isNaN(bitrate) && `${(bitrate / 1e6).toFixed(1)}MBit/s`} {language} {stream.width && stream.height && `${stream.width}x${stream.height}`} {stream.channels && `${stream.channels}c`} {stream.channel_layout} {streamFps && `${streamFps.toFixed(2)}fps`} - onInfoClick(stream, t('Stream info'))} size={26} /> + onInfoClick(stream, t('Stream info'))} size={22} /> ); }); -const FileRow = ({ path, formatData, onTrashClick }) => { +const FileHeading = ({ path, formatData, onTrashClick }) => { const { t } = useTranslation(); return ( - - {onTrashClick && } - {path.replace(/.*\/([^/]+)$/, '$1')} - onInfoClick(formatData, t('File info'))} size={26} /> - +
+
{path.replace(/.*\/([^/]+)$/, '$1')}
+ onInfoClick(formatData, t('File info'))} size={20} style={{ padding: '0 5px 0 10px' }} /> + {onTrashClick && } +
); }; +const Thead = () => { + const { t } = useTranslation(); + return ( + + + {t('Keep?')} + {t('Type')} + {t('Tag')} + {t('Codec')} + {t('Duration')} + {t('Frames')} + {t('Bitrate')} + {t('Lang')} + {t('Data')} + + + + ); +}; + +const tableStyle = { fontSize: 14, width: '100%' }; +const fileStyle = { marginBottom: 10, backgroundColor: 'rgba(0,0,0,0.04)', padding: 5, borderRadius: 7 }; + const StreamsSelector = memo(({ mainFilePath, mainFileFormatData, streams: existingStreams, isCopyingStreamId, toggleCopyStreamId, setCopyStreamIdsForPath, onExtractAllStreamsPress, externalFiles, setExternalFiles, @@ -114,42 +139,30 @@ const StreamsSelector = memo(({

{t('Click to select which tracks to keep when exporting:')}

- - - - - - - - - - - - - - - - - - - {existingStreams.map((stream) => ( - toggleCopyStreamId(mainFilePath, streamId)} - fileDuration={getFormatDuration(mainFileFormatData)} - /> - ))} - - {externalFilesEntries.map(([path, { streams, formatData }]) => ( - - - - removeFile(path)} /> +
+ +
{t('Keep?')} - {t('Type')}{t('Tag')}{t('Codec')}{t('Duration')}{t('Frames')}{t('Bitrate')}{t('Lang')}{t('Data')} -
+ + + {existingStreams.map((stream) => ( + toggleCopyStreamId(mainFilePath, streamId)} + fileDuration={getFormatDuration(mainFileFormatData)} + /> + ))} + +
+
+ {externalFilesEntries.map(([path, { streams, formatData }]) => ( +
+ removeFile(path)} /> + + + {streams.map((stream) => ( ))} - - ))} - -
+ + +
+ ))} {externalFilesEntries.length > 0 && (
@@ -178,6 +191,10 @@ const StreamsSelector = memo(({
)} +
+ {t('Include more tracks from other file')} +
+ {nonCopiedExtraStreams.length > 0 && (
{t('Discard or extract unprocessable tracks to separate files?')} @@ -185,10 +202,6 @@ const StreamsSelector = memo(({
)} -
- {t('Include more tracks from other file')} -
- {externalFilesEntries.length === 0 && (
{t('Export each track as individual files')}