removing events for getting generated video response

background.js

@@ -7,7 +7,6 @@ var getUserDetails = null
     var recording = false;
     var loggedIn = false;
     var userDetails = {}
-    var generatingVideo = false;
 
 
     function setData(key, value, callback) {
@@ -53,7 +52,7 @@ var getUserDetails = null
     })
 
     function getStatus(){
-        return tutorShotId ? (generatingVideo?'generatingVideo':recording ? "recording" : "paused"):"stopped"
+        return tutorShotId ? (recording ? "recording" : "paused"):"stopped"
     }
 
 
@@ -260,7 +259,7 @@ var getUserDetails = null
             return
         }
         if (loggedIn && request.action === 'stopRecording') {
-            generatingVideo = true
+            console.log('to stop recording')
             recording = false;
             sendResponse({
                 userDetails,
@@ -268,21 +267,20 @@ var getUserDetails = null
                 recording,
                 status: getStatus()
             });
+            console.log('sending generatingVideo message, ')
             sendMessageToActiveTab("generatingVideo")
+            console.log('sent generatingVideo message, ')
             await api.post('/tutor-shot/finalize', { _id: tutorShotId }, { headers: { userid: userDetails.uid } })
-            generatingVideo = false
             tutorShotId = null
-            sendMessageToActiveTab("recordingStopped")
             setData("recording", false)
             setData("imageNumber", 0)
-            setData("tutorShotId", tutorShotId)
+            setData("tutorShotId", null)
             imageNumber = 0;
             return
         }
         if (request.action === 'logout') {
             loggedIn = false;
             recording = false;
-            generatingVideo = false;
             userDetails = {};
             tutorShotId = null;
             imageNumber = 0;
@@ -373,7 +371,12 @@ var getUserDetails = null
                         status: getStatus(),
                         message: messageObj
                     }
-                    chrome.tabs.sendMessage(activeTab?.id, message);
+                    try{
+                        chrome.tabs.sendMessage(activeTab?.id, message);
+                    }catch(err){
+                        console.log('error while sending data', activeTab, message)
+                        console.log(err)
+                    }
                 }
             })
         } catch (err) {

content.js

@@ -4,6 +4,7 @@
 var loggedIn = false;
 var floatingBar = null;
 var startingOverlay = null;
+var finalizingOverlay = null;
 var overlayInterval = null;
 const origin = "http://localhost:3039"
 var userDetails = {};
@@ -11,21 +12,21 @@ var btn = {};
 var tutorShotOid = null;
 var containerDiv;
 var sr;
-var webpageObserver = { disconnect(){} }
+var webpageObserver = { disconnect() { } }
 !(async function () {
 
-    if (window.origin == origin){ login() }
-    else{
-        window.clearInterval( window.tutorShotInterval )
+    if (window.origin == origin) { login() }
+    else {
+        window.clearInterval(window.tutorShotInterval)
 
-        window.tutorShotInterval = setInterval( async ()=>{
-            try{
+        window.tutorShotInterval = setInterval(async () => {
+            try {
                 let data = await getCaptureData()
                 reRenderFloatingBar(data)
-            }catch(err){
+            } catch (err) {
                 console.log(err)
             }
-        }, 1000 )
+        }, 1000)
     }
 
     containerDiv = document.createElement('div')
@@ -165,7 +166,6 @@ var webpageObserver = { disconnect(){} }
 <div class="counter-count" tutor-shot="counter" style="display:none;"></div>
 <div class="logo">
     <img tutor-shot="main-logo" class="logo-img" src="${origin}/assets/images/tutor-shot-48.png" width="40">
-    <img tutor-shot="generating-video" class="logo-img" src="${origin}/assets/images/logo-loader.gif" width="40">
 </div>
 <div class="content">
     <div class="item" tutor-shot="play-btn">
@@ -237,6 +237,7 @@ async function getCaptureData() {
 }
 
 function reRenderFloatingBar(data) {
+    console.log('reRenderFloatingBar', data)
     if (data) {
         if (data.status == 'stopped') {
             containerDiv.remove()
@@ -253,9 +254,6 @@ function reRenderFloatingBar(data) {
     if (!btn.mainLogo) {
         btn.mainLogo = sr.querySelector('[tutor-shot="main-logo"]')
     }
-    if (!btn.generatingVideo) {
-        btn.generatingVideo = sr.querySelector('[tutor-shot="generating-video"]')
-    }
     if (!btn.capture) {
         btn.capture = sr.querySelector('[tutor-shot="capture-btn"]')
     }
@@ -288,7 +286,6 @@ function reRenderFloatingBar(data) {
         btn.pause.style.display = 'none'
         btn.stop.style.display = 'flex'
         btn.restart.style.display = 'flex'
-        btn.generatingVideo.style.display = 'none'
         btn.mainLogo.style.display = 'block'
     }
     else if (data?.status == 'recording') {
@@ -296,24 +293,14 @@ function reRenderFloatingBar(data) {
         btn.pause.style.display = 'flex'
         btn.restart.style.display = 'flex'
         btn.stop.style.display = 'flex'
-        btn.generatingVideo.style.display = 'none'
         btn.mainLogo.style.display = 'block'
         // btn.capture.style.display = 'flex'
     }
-    else if (data?.status == 'generatingVideo') {
-        btn.play.style.display = 'none'
-        btn.pause.style.display = 'none'
-        btn.stop.style.display = 'none'
-        btn.restart.style.display = 'none'
-        btn.generatingVideo.style.display = 'block'
-        btn.mainLogo.style.display = 'none'
-    }
     else { // stopped
         btn.play.style.display = 'flex'
         btn.pause.style.display = 'none'
         btn.stop.style.display = 'none'
         btn.restart.style.display = 'none'
-        btn.generatingVideo.style.display = 'none'
         btn.mainLogo.style.display = 'block'
     }
 }
@@ -346,8 +333,8 @@ window.addEventListener('mousedown', async function (e) {
             url: location.href,
             origin: location.origin,
         }
-        let newLineBreakIndex = captureInfo.text.search( '\n' )
-        if (newLineBreakIndex!=-1) captureInfo.text = captureInfo.text.slice(0, newLineBreakIndex)
+        let newLineBreakIndex = captureInfo.text.search('\n')
+        if (newLineBreakIndex != -1) captureInfo.text = captureInfo.text.slice(0, newLineBreakIndex)
         // console.log('sending capture info', captureInfo)
         chrome.runtime.sendMessage({ action: "captureSS", captureInfo })
         let data = await getCaptureData()
@@ -357,6 +344,7 @@ 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)
     }
@@ -396,14 +384,26 @@ 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.innerHTML = `
+        <div>
+            Your video is being saved.
+        </div>
+        `
+        setTimeout(() => {
+            finalizingOverlay.remove()
+            if (window.location.href == `${origin}/tutor-shot-list`) {
+                window.location.reload()
+            } else {
+                window.open(`${origin}/tutor-shot-list`)
+            }
+            reRenderFloatingBar(data)
+        }, 2000)
         reRenderFloatingBar(data)
-    }
-    else if (message.message == 'recordingStopped') {
-        if (window.location.href == `${origin}/tutor-shot-list`){
-            window.location.reload()
-        }else {
-            window.open(`${origin}/tutor-shot-list`)
-        }
+
     }
 
 });
@@ -412,7 +412,7 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
 async function startRecording() {
     try {
         await getCaptureData();
-        let { data } = await api.post('/tutor-shot', { title: "Some random title" }, { headers: { userId: userDetails.uid } })
+        let { data } = await api.post('/tutor-shot', { title: "No Title" }, { headers: { userId: userDetails.uid } })
         if (data.success) {
             await chrome.runtime.sendMessage({ action: "startRecording", tutorShotId: data.tutorShot._id })
         }

manifest.json

 {
     "manifest_version": 3,
     "name": "Tutor Shot Local",
-    "version": "1.8",
+    "version": "1.10",
     "description": "Capture web-page screenshots instantly with a single click. They're saved to your account at http://localhost:3039.",
     "permissions": [
         "activeTab",

popup.js

@@ -42,7 +42,7 @@
         }
         inProgress = true
         try{
-            let { data } = await api.post('/tutor-shot', { title: "Some random title" }, { headers: { userId: userDetails.uid } } )
+            let { data } = await api.post('/tutor-shot', { title: "No Title" }, { headers: { userId: userDetails.uid } } )
             if (data.success){
                 chrome.runtime.sendMessage({ action: "startRecording", tutorShotId:data.tutorShot._id }, async function (response) {
                     recording = response.recording