From d7305fdd53123d842dad3d56e2290b7189a4f0f0 Mon Sep 17 00:00:00 2001
From: Bhav Kushwaha <75977991+bhavkushwaha@users.noreply.github.com>
Date: Sun, 26 Jan 2025 18:08:50 +0530
Subject: [PATCH] Video-Recording-Fixed

---
 dist/popup.js                    | 15 +++++++++++++--
 dist/styles/recording-dialog.css | 19 ++++++++++++++-----
 js/popup.js                      | 14 ++++++++++++--
 styles/recording-dialog.css      | 19 ++++++++++++++-----
 4 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/dist/popup.js b/dist/popup.js
index 5f2069e..f7ce4b7 100644
--- a/dist/popup.js
+++ b/dist/popup.js
@@ -946,6 +946,12 @@ ${description}
 
           // Store the video blob for later submission
           this.recordedVideo = mp4Blob;
+
+          // Show the main form again and restore window size
+          document.body.classList.remove('recording');
+          this.feedbackForm.classList.remove('hidden');
+          window.resizeTo(400, 600); // Restore original size
+
           this.showNotification('Recording saved successfully!', 'success');
         } catch (error) {
           console.error('Error converting video:', error);
@@ -956,7 +962,9 @@ ${description}
       // Start recording
       this.mediaRecorder.start(1000); // Collect data every second
 
-      // Show recording dialog
+      // Hide the main form and show recording dialog
+      document.body.classList.add('recording');
+      this.feedbackForm.classList.add('hidden');
       this.recordingDialog.classList.remove('hidden');
 
       // Set up stop recording button
@@ -967,11 +975,14 @@ ${description}
         }
       };
 
-      // Minimize extension popup
+      // Minimize window to only show recording controls
       window.resizeTo(300, 100);
     } catch (error) {
       console.error('Screen recording error:', error);
       this.showNotification('Error starting screen recording: ' + error.message, 'error');
+      // Make sure main form is visible if there's an error
+      document.body.classList.remove('recording');
+      this.feedbackForm.classList.remove('hidden');
     }
   }
   async convertToMP4(webmBlob) {
diff --git a/dist/styles/recording-dialog.css b/dist/styles/recording-dialog.css
index 83bd6a8..9040cfe 100644
--- a/dist/styles/recording-dialog.css
+++ b/dist/styles/recording-dialog.css
@@ -1,19 +1,27 @@
 .recording-dialog {
   position: fixed;
-  top: 10px;
-  right: 10px;
+  top: 0;
+  left: 0;
+  right: 0;
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   padding: 15px;
   z-index: 10000;
-  width: 250px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .recording-dialog.hidden {
   display: none;
 }
 
+body.recording {
+  min-height: 100px;
+  overflow: hidden;
+}
+
+body.recording #app > *:not(.recording-dialog) {
+  display: none;
+}
+
 .recording-content {
   display: flex;
   flex-direction: column;
@@ -52,6 +60,7 @@
 }
 
 #stop-recording {
+  width: 100%;
   background: #DE350B;
   color: white;
   border: none;
diff --git a/js/popup.js b/js/popup.js
index 64a5665..78e8ad3 100644
--- a/js/popup.js
+++ b/js/popup.js
@@ -513,6 +513,11 @@ ${description}
 
           // Store the video blob for later submission
           this.recordedVideo = mp4Blob;
+
+          // Show the main form again and restore window size
+          document.body.classList.remove('recording');
+          this.feedbackForm.classList.remove('hidden');
+          window.resizeTo(400, 600); // Restore original size
           
           this.showNotification('Recording saved successfully!', 'success');
         } catch (error) {
@@ -524,7 +529,9 @@ ${description}
       // Start recording
       this.mediaRecorder.start(1000); // Collect data every second
 
-      // Show recording dialog
+      // Hide the main form and show recording dialog
+      document.body.classList.add('recording');
+      this.feedbackForm.classList.add('hidden');
       this.recordingDialog.classList.remove('hidden');
 
       // Set up stop recording button
@@ -535,12 +542,15 @@ ${description}
         }
       };
 
-      // Minimize extension popup
+      // Minimize window to only show recording controls
       window.resizeTo(300, 100);
 
     } catch (error) {
       console.error('Screen recording error:', error);
       this.showNotification('Error starting screen recording: ' + error.message, 'error');
+      // Make sure main form is visible if there's an error
+      document.body.classList.remove('recording');
+      this.feedbackForm.classList.remove('hidden');
     }
   }
 
diff --git a/styles/recording-dialog.css b/styles/recording-dialog.css
index 83bd6a8..9040cfe 100644
--- a/styles/recording-dialog.css
+++ b/styles/recording-dialog.css
@@ -1,19 +1,27 @@
 .recording-dialog {
   position: fixed;
-  top: 10px;
-  right: 10px;
+  top: 0;
+  left: 0;
+  right: 0;
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   padding: 15px;
   z-index: 10000;
-  width: 250px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .recording-dialog.hidden {
   display: none;
 }
 
+body.recording {
+  min-height: 100px;
+  overflow: hidden;
+}
+
+body.recording #app > *:not(.recording-dialog) {
+  display: none;
+}
+
 .recording-content {
   display: flex;
   flex-direction: column;
@@ -52,6 +60,7 @@
 }
 
 #stop-recording {
+  width: 100%;
   background: #DE350B;
   color: white;
   border: none;