From 7741a3e4ee2af8facb18fa61b1952bffef6490d7 Mon Sep 17 00:00:00 2001
From: Bobby <zkd8907@live.com>
Date: Fri, 22 Mar 2024 20:59:39 +0800
Subject: [PATCH] feat(#1839): Add Audio and Video Preview (#1840)

Any audio and video response can be now be previewed.
---
 .../QueryResult/QueryResultPreview/index.js            | 10 ++++++++++
 .../src/components/ResponsePane/QueryResult/index.js   |  4 ++++
 packages/bruno-electron/src/index.js                   |  1 +
 3 files changed, 15 insertions(+)

diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
index dc67a5d10..13b280320 100644
--- 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
index a2a9337a4..ee956f1b1 100644
--- 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
index 678c07585..5157dae8a 100644
--- 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:"
 ];