Clean up output for vainfo and ffprobe (#5586)

* Clean up output for vainfo and ffprobe

* Fix cleanup

* Format vainfo display

* Fix ffprobe output

* Fix stringification

* remove unused

frigate/http.py

@@ -1296,12 +1296,12 @@ def ffprobe():
         output.append(
             {
                 "return_code": ffprobe.returncode,
-                "stderr": json.loads(ffprobe.stderr.decode("unicode_escape").strip())
+                "stderr": ffprobe.stderr.decode("unicode_escape").strip()
-                if ffprobe.stderr.decode()
+                if ffprobe.returncode != 0
-                else {},
+                else "",
                 "stdout": json.loads(ffprobe.stdout.decode("unicode_escape").strip())
-                if ffprobe.stdout.decode()
+                if ffprobe.returncode == 0
-                else {},
+                else "",
             }
         )
 

web/src/components/Dialog.jsx

@@ -21,7 +21,7 @@ export default function Dialog({ children, portalRootID = 'dialogs' }) {
       >
         <div
           role="modal"
-          className={`absolute rounded shadow-2xl bg-white dark:bg-gray-700 max-w-sm text-gray-900 dark:text-white transition-transform transition-opacity duration-75 transform scale-90 opacity-0 ${
+          className={`absolute rounded shadow-2xl bg-white dark:bg-gray-700 sm:max-w-sm md:max-w-md lg:max-w-lg text-gray-900 dark:text-white transition-transform transition-opacity duration-75 transform scale-90 opacity-0 ${
             show ? 'scale-100 opacity-100' : ''
           }`}
         >

web/src/routes/System.jsx

@@ -49,14 +49,14 @@ export default function System() {
     });
 
     if (response.status === 200) {
-      setState({ ...state, showFfprobe: true, ffprobe: JSON.stringify(response.data, null, 2) });
+      setState({ ...state, showFfprobe: true, ffprobe: response.data });
     } else {
       setState({ ...state, showFfprobe: true, ffprobe: 'There was an error getting the ffprobe output.' });
     }
   };
 
   const onCopyFfprobe = async () => {
-    copy(JSON.stringify(state.ffprobe, null, 2));
+    copy(JSON.stringify(state.ffprobe).replace(/[\\\s]+/gi, ''));
     setState({ ...state, ffprobe: '', showFfprobe: false });
   };
 
@@ -68,14 +68,18 @@ export default function System() {
     const response = await axios.get('vainfo');
 
     if (response.status === 200) {
-      setState({ ...state, showVainfo: true, vainfo: JSON.stringify(response.data, null, 2) });
+      setState({
+        ...state,
+        showVainfo: true,
+        vainfo: response.data,
+      });
     } else {
       setState({ ...state, showVainfo: true, vainfo: 'There was an error getting the vainfo output.' });
     }
   };
 
   const onCopyVainfo = async () => {
-    copy(JSON.stringify(state.vainfo, null, 2));
+    copy(JSON.stringify(state.vainfo).replace(/[\\\s]+/gi, ''));
     setState({ ...state, vainfo: '', showVainfo: false });
   };
 
@@ -107,9 +111,52 @@ export default function System() {
 
       {state.showFfprobe && (
         <Dialog>
-          <div className="p-4">
+          <div className="p-4 mb-2 max-h-96 whitespace-pre-line overflow-scroll">
             <Heading size="lg">Ffprobe Output</Heading>
-            {state.ffprobe != '' ? <p className="mb-2">{state.ffprobe}</p> : <ActivityIndicator />}
+            {state.ffprobe != '' ? (
+              <div>
+                {state.ffprobe.map((stream, idx) => (
+                  <div key={idx} className="mb-2 max-h-96 whitespace-pre-line">
+                    <div>Stream {idx}:</div>
+                    <div className="px-2">Return Code: {stream.return_code}</div>
+                    <br />
+                    {stream.return_code == 0 ? (
+                      <div>
+                        {stream.stdout.streams.map((codec, idx) => (
+                          <div className="px-2" key={idx}>
+                            {codec.width ? (
+                              <div>
+                                <div>Video:</div>
+                                <br />
+                                <div>Codec: {codec.codec_long_name}</div>
+                                <div>
+                                  Resolution: {codec.width}x{codec.height}
+                                </div>
+                                <div>FPS: {codec.avg_frame_rate == '0/0' ? 'Unknown' : codec.avg_frame_rate}</div>
+                                <br />
+                              </div>
+                            ) : (
+                              <div>
+                                <div>Audio:</div>
+                                <br />
+                                <div>Codec: {codec.codec_long_name}</div>
+                                <br />
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="px-2">
+                        <div>Error: {stream.stderr}</div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <ActivityIndicator />
+            )}
           </div>
           <div className="p-2 flex justify-start flex-row-reverse space-x-2">
             <Button className="ml-2" onClick={() => onCopyFfprobe()} type="text">
@@ -128,10 +175,16 @@ export default function System() {
 
       {state.showVainfo && (
         <Dialog>
-          <div className="p-4">
+          <div className="p-4 overflow-scroll whitespace-pre-line">
             <Heading size="lg">Vainfo Output</Heading>
             {state.vainfo != '' ? (
-              <p className="mb-2 max-h-96 overflow-scroll">{state.vainfo}</p>
+              <div className="mb-2 max-h-96 whitespace-pre-line">
+                <div className="">Return Code: {state.vainfo.return_code}</div>
+                <br />
+                <div className="">Process {state.vainfo.return_code == 0 ? 'Output' : 'Error'}:</div>
+                <br />
+                <div>{state.vainfo.return_code == 0 ? state.vainfo.stdout : state.vainfo.stderr}</div>
+              </div>
             ) : (
               <ActivityIndicator />
             )}