From 7024057c036a3d5e1b00aa5731bbdd123d8772d5 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Fri, 22 Mar 2024 11:15:33 -0400
Subject: [PATCH] show user a preview of the video and allow them to re-record

---
 .../components/recording/ScreenRecorder.tsx   | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/recording/ScreenRecorder.tsx b/frontend/src/components/recording/ScreenRecorder.tsx
index c45c238..fa1d3db 100644
--- a/frontend/src/components/recording/ScreenRecorder.tsx
+++ b/frontend/src/components/recording/ScreenRecorder.tsx
@@ -118,7 +118,26 @@ function ScreenRecorder({
           <div className="flex items-center mr-2 text-xl gap-x-1">
             <span>Screen Recording Captured.</span>
           </div>
-          <Button onClick={kickoffGeneration}>Generate</Button>
+          {screenRecordingDataUrl && (
+            <video
+              muted
+              autoPlay
+              loop
+              className="w-[340px] border border-gray-200 rounded-md"
+              src={screenRecordingDataUrl}
+            />
+          )}
+          <div className="flex gap-x-2">
+            <Button
+              variant="secondary"
+              onClick={() =>
+                setScreenRecorderState(ScreenRecorderState.INITIAL)
+              }
+            >
+              Re-record
+            </Button>
+            <Button onClick={kickoffGeneration}>Generate</Button>
+          </div>
         </div>
       )}
     </div>