background overlay when saving video

background.js

@@ -259,19 +259,17 @@ var getUserDetails = null
             return
         }
         if (loggedIn && request.action === 'stopRecording') {
-            console.log('to stop recording')
             recording = false;
+            let generatingOid = tutorShotId
+            tutorShotId = null
             sendResponse({
                 userDetails,
                 loggedIn,
                 recording,
-                status: getStatus()
+                status: "generatingVideo"
             });
-            console.log('sending generatingVideo message, ')
             sendMessageToActiveTab("generatingVideo")
-            console.log('sent generatingVideo message, ')
-            await api.post('/tutor-shot/finalize', { _id: tutorShotId }, { headers: { userid: userDetails.uid } })
-            tutorShotId = null
+            await api.post('/tutor-shot/finalize', { _id: generatingOid }, { headers: { userid: userDetails.uid } })
             setData("recording", false)
             setData("imageNumber", 0)
             setData("tutorShotId", null)

content.js

@@ -30,6 +30,7 @@ var webpageObserver = { disconnect() { } }
     }
 
     containerDiv = document.createElement('div')
+    containerDiv.setAttribute('test', 'tutor-shot')
     containerDiv.style.position = "fixed"
     containerDiv.style.display = "block"
     containerDiv.style.background = "transparent"
@@ -237,7 +238,6 @@ async function getCaptureData() {
 }
 
 function reRenderFloatingBar(data) {
-    console.log('reRenderFloatingBar', data)
     if (data) {
         if (data.status == 'stopped') {
             containerDiv.remove()
@@ -344,7 +344,6 @@ window.addEventListener('mousedown', async function (e) {
 })
 // content.js
 chrome.runtime.onMessage.addListener(async function (message, sender, sendResponse) {
-    console.log('getting message')
     if (message.action == 'tabChanged') {
         // console.log('tabChanged', message)
     }
@@ -384,10 +383,10 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
 
     }
     else if (message.message == 'generatingVideo') {
-        console.log('generating Video')
         finalizingOverlay = document.createElement('div')
         finalizingOverlay.setAttribute('class', 'tutor-shot-overlay')
-        sr.append(finalizingOverlay)
+        finalizingOverlay.setAttribute('style', `all: unset; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: #000000a0; pointer-events: inherit; z-index: 101; display: flex; color: white; justify-content: center; align-items: center; font-size: 28px;`)
+        document.body.append(finalizingOverlay)
         finalizingOverlay.innerHTML = `
         <div>
             Your video is being saved.