diff --git a/src/components/ConcatDialog.jsx b/src/components/ConcatDialog.jsx index 9c5de0ef..70fb3e76 100644 --- a/src/components/ConcatDialog.jsx +++ b/src/components/ConcatDialog.jsx @@ -1,9 +1,11 @@ import React, { memo, useState, useCallback, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { Alert, Checkbox, Dialog, Button, Paragraph } from 'evergreen-ui'; +import { IconButton, Alert, Checkbox, Dialog, Button, Paragraph } from 'evergreen-ui'; import { AiOutlineMergeCells } from 'react-icons/ai'; import { FaQuestionCircle, FaCheckCircle, FaExclamationTriangle } from 'react-icons/fa'; import i18n from 'i18next'; +import Swal from 'sweetalert2'; +import withReactContent from 'sweetalert2-react-content'; import { readFileMeta, getSmarterOutFormat } from '../ffmpeg'; import useFileFormatState from '../hooks/useFileFormatState'; @@ -13,6 +15,8 @@ import { isMov } from '../util/streams'; const { basename } = window.require('path'); +const ReactSwal = withReactContent(Swal); + const containerStyle = { color: 'black' }; const rowStyle = { @@ -72,30 +76,42 @@ const ConcatDialog = memo(({ if (!allFilesMeta) return []; const allFilesMetaExceptFirstFile = allFilesMeta.slice(1); const [, firstFileMeta] = allFilesMeta[0]; - const errors = []; + const errors = {}; + function addError(path, error) { + if (!errors[path]) errors[path] = []; + errors[path].push(error); + } allFilesMetaExceptFirstFile.forEach(([path, { streams }]) => { - streams.some((stream, i) => { + streams.forEach((stream, i) => { const referenceStream = firstFileMeta.streams[i]; if (!referenceStream) { - errors.push([path, i18n.t('Extraneous track {{index}}', { index: stream.index })]); - return true; + addError(path, i18n.t('Extraneous track {{index}}', { index: stream.index })); + return; } // check all these parameters - ['codec_name', 'width', 'height', 'fps', 'pix_fmt', 'level', 'profile', 'sample_fmt', 'r_frame_rate', 'time_base'].some((key) => { + ['codec_name', 'width', 'height', 'fps', 'pix_fmt', 'level', 'profile', 'sample_fmt', 'r_frame_rate', 'time_base'].forEach((key) => { const val = stream[key]; const referenceVal = referenceStream[key]; if (val !== referenceVal) { - errors.push([path, i18n.t('Track {{index}} mismatch: {{key1}} {{value1}} != {{value2}}', { index: stream.index, key1: key, value1: val, value2: referenceVal })]); - return true; + addError(path, i18n.t('Track {{index}} mismatch: {{key1}} {{value1}} != {{value2}}', { index: stream.index, key1: key, value1: val || 'none', value2: referenceVal || 'none' })); } - return false; }); - return false; }); }); - return Object.fromEntries(errors); + return errors; }, [allFilesMeta]); + const onProblemsByFileClick = useCallback((path) => { + ReactSwal.fire({ + title: i18n.t('Mismatches detected'), + html: ( + + ), + }); + }, [problemsByFile]); + useEffect(() => { if (!isShown || !enableReadFileMeta) return undefined; @@ -156,9 +172,8 @@ const ConcatDialog = memo(({ {'. '} {basename(path)} {!allFilesMetaCache[path] && } - {problemsByFile[path] && } + {problemsByFile[path] && onProblemsByFileClick(path)} title={i18n.t('Mismatches detected')} color="#996A13" style={{ marginLeft: 10 }} />} - {problemsByFile[path] &&
{problemsByFile[path]}
} ))}