From 69cea1a70f874644a6be7cdcec46921199c8b8bc Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Sat, 23 Jan 2021 20:45:45 +0100
Subject: [PATCH] pull out dialog

---
 src/App.jsx                     | 25 +++----------------------
 src/{dialogs.js => dialogs.jsx} | 25 +++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 22 deletions(-)
 rename src/{dialogs.js => dialogs.jsx} (87%)

diff --git a/src/App.jsx b/src/App.jsx
index 9a19f628..902471fe 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -53,7 +53,7 @@ import {
   isDurationValid, isWindows, filenamify, getOutFileExtension, generateSegFileName, defaultOutSegTemplate,
   hasDuplicates,
 } from './util';
-import { askForOutDir, askForImportChapters, createNumSegments, createFixedDurationSegments, promptTimeOffset, askForHtml5ifySpeed, askForYouTubeInput, askForFileOpenAction, confirmExtractAllStreamsDialog, cleanupFilesDialog, showDiskFull } from './dialogs';
+import { askForOutDir, askForImportChapters, createNumSegments, createFixedDurationSegments, promptTimeOffset, askForHtml5ifySpeed, askForYouTubeInput, askForFileOpenAction, confirmExtractAllStreamsDialog, cleanupFilesDialog, showDiskFull, showCutFailedDialog } from './dialogs';
 import { openSendReportDialog } from './reporting';
 import { fallbackLng } from './i18n';
 import { createSegment, createInitialCutSegments, getCleanCutSegments, getSegApparentStart, findSegmentsAtCursor } from './segments';
@@ -959,27 +959,8 @@ const App = memo(() => {
   }, [copyStreamIdsByFile, cutSegments, externalStreamFiles, fileFormat, fileFormatData, filePath, mainStreams, rotation, shortestFlag]);
 
   const handleCutFailed = useCallback(async (err) => {
-    const html = (
-      <div style={{ textAlign: 'left' }}>
-        Try one of the following before exporting again:
-        <ol>
-          {detectedFileFormat === 'mp4' && <li>Change output <b>Format</b> from <b>MP4</b> to <b>MOV</b></li>}
-          <li>Select a different output <b>Format</b> (<b>matroska</b> and <b>mp4</b> support most codecs)</li>
-          <li>Disable unnecessary <b>Tracks</b></li>
-          <li>Try both <b>Normal cut</b> and <b>Keyframe cut</b></li>
-          <li>Set a different <b>Working directory</b></li>
-          <li>Try with a <b>Different file</b></li>
-          <li>See <b>Help</b></li>
-          <li>If nothing helps, you can send an <b>Error report</b></li>
-        </ol>
-      </div>
-    );
-
-    const { value } = await ReactSwal.fire({ title: i18n.t('Unable to export this file'), html, timer: null, showConfirmButton: true, showCancelButton: true, cancelButtonText: i18n.t('OK'), confirmButtonText: i18n.t('Report'), reverseButtons: true, focusCancel: true });
-
-    if (value) {
-      openSendReportDialogWithState(err);
-    }
+    const sendErrorReport = await showCutFailedDialog({ detectedFileFormat });
+    if (sendErrorReport) openSendReportDialogWithState(err);
   }, [openSendReportDialogWithState, detectedFileFormat]);
 
   const closeExportConfirm = useCallback(() => setExportConfirmVisible(false), []);
diff --git a/src/dialogs.js b/src/dialogs.jsx
similarity index 87%
rename from src/dialogs.js
rename to src/dialogs.jsx
index c57d4017..af5736fe 100644
--- a/src/dialogs.js
+++ b/src/dialogs.jsx
@@ -1,5 +1,7 @@
+import React from 'react';
 import Swal from 'sweetalert2';
 import i18n from 'i18next';
+import withReactContent from 'sweetalert2-react-content';
 
 import { parseDuration } from './util';
 import { parseYouTube } from './edlFormats';
@@ -8,6 +10,8 @@ const electron = window.require('electron'); // eslint-disable-line
 
 const { dialog } = electron.remote;
 
+const ReactSwal = withReactContent(Swal);
+
 export async function promptTimeOffset(inputValue) {
   const { value } = await Swal.fire({
     title: i18n.t('Set custom start time offset'),
@@ -238,3 +242,24 @@ export async function createFixedDurationSegments(fileDuration) {
   }
   return edl;
 }
+
+export async function showCutFailedDialog({ detectedFileFormat }) {
+  const html = (
+    <div style={{ textAlign: 'left' }}>
+      Try one of the following before exporting again:
+      <ol>
+        {detectedFileFormat === 'mp4' && <li>Change output <b>Format</b> from <b>MP4</b> to <b>MOV</b></li>}
+        <li>Select a different output <b>Format</b> (<b>matroska</b> and <b>mp4</b> support most codecs)</li>
+        <li>Disable unnecessary <b>Tracks</b></li>
+        <li>Try both <b>Normal cut</b> and <b>Keyframe cut</b></li>
+        <li>Set a different <b>Working directory</b></li>
+        <li>Try with a <b>Different file</b></li>
+        <li>See <b>Help</b></li>
+        <li>If nothing helps, you can send an <b>Error report</b></li>
+      </ol>
+    </div>
+  );
+
+  const { value } = await ReactSwal.fire({ title: i18n.t('Unable to export this file'), html, timer: null, showConfirmButton: true, showCancelButton: true, cancelButtonText: i18n.t('OK'), confirmButtonText: i18n.t('Report'), reverseButtons: true, focusCancel: true });
+  return value;
+}