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