show ffmpeg command log

src/HelpSheet.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { IoIosCloseCircleOutline } from 'react-icons/io';
 import { motion, AnimatePresence } from 'framer-motion';
 
-const HelpSheet = ({ visible, onTogglePress, renderSettings }) => (
+const HelpSheet = ({ visible, onTogglePress, renderSettings, ffmpegCommandLog }) => (
   <AnimatePresence>
     {visible && (
       <motion.div
@@ -45,6 +45,15 @@ const HelpSheet = ({ visible, onTogglePress, renderSettings }) => (
             {renderSettings()}
           </tbody>
         </table>
+
+        <h1>Last ffmpeg commands</h1>
+        <div style={{ overflowY: 'scroll', height: 200 }}>
+          {ffmpegCommandLog.reverse().map((log) => (
+            <div style={{ whiteSpace: 'pre' }}>
+              {log}
+            </div>
+          ))}
+        </div>
       </motion.div>
     )}
   </AnimatePresence>

src/ffmpeg.js

@@ -82,7 +82,7 @@ function getExtensionForFormat(format) {
 
 async function cut({
   filePath, outFormat, cutFrom, cutTo, videoDuration, rotation,
-  onProgress, copyStreamIds, keyframeCut, outPath,
+  onProgress, copyStreamIds, keyframeCut, outPath, appendFfmpegCommandLog,
 }) {
   console.log('Cutting from', cutFrom, 'to', cutTo);
 
@@ -126,7 +126,11 @@ async function cut({
     '-f', outFormat, '-y', outPath,
   ];
 
-  console.log('ffmpeg', ffmpegArgs.join(' '));
+  const mapArg = arg => (/[^0-9a-zA-Z-_]/.test(arg) ? `'${arg}'` : arg);
+  const ffmpegCommand = `ffmpeg ${ffmpegArgs.map(mapArg).join(' ')}`;
+
+  console.log(ffmpegCommand);
+  appendFfmpegCommandLog(ffmpegCommand);
 
   onProgress(0);
 
@@ -142,6 +146,7 @@ async function cut({
 async function cutMultiple({
   customOutDir, filePath, segments: segmentsUnsorted, videoDuration, rotation,
   onProgress, keyframeCut, copyStreamIds, outFormat, isOutFormatUserSelected,
+  appendFfmpegCommandLog,
 }) {
   const segments = sortBy(segmentsUnsorted, 'cutFrom');
   const singleProgresses = {};
@@ -174,6 +179,7 @@ async function cutMultiple({
       cutTo,
       // eslint-disable-next-line no-loop-func
       onProgress: progress => onSingleProgress(i, progress),
+      appendFfmpegCommandLog,
     });
 
     outFiles.push(outPath);

src/renderer.jsx

@@ -107,6 +107,7 @@ const App = memo(() => {
   const [streamsSelectorShown, setStreamsSelectorShown] = useState(false);
   const [zoom, setZoom] = useState(1);
   const [commandedTime, setCommandedTime] = useState(0);
+  const [ffmpegCommandLog, setFfmpegCommandLog] = useState([]);
 
   // Preferences
   const [captureFormat, setCaptureFormat] = useState(configStore.get('captureFormat'));
@@ -137,6 +138,11 @@ const App = memo(() => {
   const timelineScrollerRef = useRef();
   const timelineScrollerSkipEventRef = useRef();
 
+
+  function appendFfmpegCommandLog(command) {
+    setFfmpegCommandLog(old => [...old, command]);
+  }
+
   function setCopyStreamIdsForPath(path, cb) {
     setCopyStreamIdsByFile((old) => {
       const oldIds = old[path] || {};
@@ -641,6 +647,7 @@ const App = memo(() => {
         keyframeCut,
         segments: ffmpegSegments,
         onProgress: setCutProgress,
+        appendFfmpegCommandLog,
       });
 
       if (outFiles.length > 1 && autoMerge) {
@@ -1631,6 +1638,7 @@ const App = memo(() => {
         visible={!!helpVisible}
         onTogglePress={toggleHelp}
         renderSettings={renderSettings}
+        ffmpegCommandLog={ffmpegCommandLog}
       />
     </div>
   );