feat(#1839): Add Audio and Video Preview (#1840)

Any audio and video response can be now be previewed.
usebruno · Mar 22, 2024 · 7741a3e · 7741a3e
1 parent 82c600a
commit 7741a3e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
@@ -65,6 +65,16 @@ const QueryResultPreview = ({
         </div>
       );
     }
+    case 'preview-audio': {
+      return (
+        <audio controls src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} className="mx-auto" />
+      );
+    }
+    case 'preview-video': {
+      return (
+        <video controls src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} className="mx-auto" />
+      );
+    }
     default:
     case 'raw': {
       return (

diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -67,6 +67,10 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
       allowedPreviewModes.unshift('preview-image');
     } else if (contentType.includes('pdf')) {
       allowedPreviewModes.unshift('preview-pdf');
+    } else if (contentType.includes('audio')) {
+      allowedPreviewModes.unshift('preview-audio');
+    } else if (contentType.includes('video')) {
+      allowedPreviewModes.unshift('preview-video');
     }
 
     return allowedPreviewModes;

diff --git a/packages/bruno-electron/src/index.js b/packages/bruno-electron/src/index.js
@@ -25,6 +25,7 @@ const contentSecurityPolicy = [
   // this has been commented out to make oauth2 work
   // "form-action 'none'",
   "img-src 'self' blob: data: https:",
+  "media-src 'self' blob: data: https:",
   "style-src 'self' 'unsafe-inline' https:"
 ];