From 77d3fa7e1e8b3938e6ac502f2e6c1776139a2118 Mon Sep 17 00:00:00 2001
From: Sanjai Kumar <84461672+sanjai0py@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:34:00 +0530
Subject: [PATCH] bugfix / Update video preview functionality (#3433)

* Add video preview functionality and update dependencies
* Refactor video preview component to use Buffer for base64 decoding and update muted prop syntax

---------

Co-authored-by: Anoop M D <anoop.md1421@gmail.com>
---
 packages/bruno-app/package.json               |  1 +
 .../QueryResult/QueryResultPreview/index.js   | 33 ++++++++++++++++---
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json
index f4d5fd0f8..52553b002 100644
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -66,6 +66,7 @@
     "react-i18next": "^15.0.1",
     "react-inspector": "^6.0.2",
     "react-pdf": "9.1.1",
+    "react-player": "^2.16.0",
     "react-redux": "^7.2.6",
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",
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 5683801ab..6cb9ee245 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
@@ -1,14 +1,41 @@
+import React, { useState, useEffect } from 'react';
 import CodeEditor from 'components/CodeEditor/index';
 import { get } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { Document, Page } from 'react-pdf';
-import { useState } from 'react';
 import 'pdfjs-dist/build/pdf.worker';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 import { GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';
 GlobalWorkerOptions.workerSrc = 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
+import ReactPlayer from 'react-player';
+
+const VideoPreview = memo(({ contentType, dataBuffer }) => {
+  const [videoUrl, setVideoUrl] = useState(null);
+
+  useEffect(() => {
+    const videoType = contentType.split(';')[0];
+    const byteArray = Buffer.from(dataBuffer, 'base64');
+    const blob = new Blob([byteArray], { type: videoType });
+    const url = URL.createObjectURL(blob);
+    setVideoUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [contentType, dataBuffer]);
+
+  if (!videoUrl) return <div>Loading video...</div>;
+
+  return (
+    <ReactPlayer
+      url={videoUrl}
+      controls
+      muted={true}
+      width="100%"
+      height="100%"
+      onError={(e) => console.error('Error loading video:', e)}
+    />
+  );
+});
 
 const QueryResultPreview = ({
   previewTab,
@@ -73,9 +100,7 @@ const QueryResultPreview = ({
       );
     }
     case 'preview-video': {
-      return (
-        <video controls src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} className="mx-auto" />
-      );
+      return <VideoPreview contentType={contentType} dataBuffer={dataBuffer} />;
     }
     default:
     case 'raw': {