added loader when stopping a recording.

background.js

 var getUserDetails = null
 
 !function () {
-    var origin = "https://begenieus.com"
+    var origin = "http://localhost:3039"
     var tutorShotId = null
     var imageNumber = 0;
     var recording = false;
     var loggedIn = false;
     var userDetails = {}
+    var generatingVideo = false;
 
 
     function setData(key, value, callback) {
@@ -51,6 +52,10 @@ var getUserDetails = null
         }
     })
 
+    function getStatus(){
+        return tutorShotId ? (generatingVideo?'generatingVideo':recording ? "recording" : "paused"):"stopped"
+    }
+
 
     function createAPI(origin) {
         var baseURL = origin
@@ -191,7 +196,7 @@ var getUserDetails = null
                 userDetails,
                 tutorShotOid: tutorShotId,
                 imageNumber: imageNumber,
-                status: tutorShotId ? (recording ? "recording" : "paused") : "stopped",
+                status: getStatus(),
 
             })
             sendMessageToActiveTab("loggedIn")
@@ -209,7 +214,7 @@ var getUserDetails = null
                 recording,
                 tutorShotOid: tutorShotId,
                 imageNumber: imageNumber,
-                status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
+                status: getStatus()
             })
             return
         }
@@ -222,7 +227,7 @@ var getUserDetails = null
                 userDetails,
                 loggedIn,
                 recording,
-                status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
+                status: getStatus()
             });
             sendMessageToActiveTab("recordingStarted")
             setData("recording", true)
@@ -236,7 +241,7 @@ var getUserDetails = null
                 userDetails,
                 loggedIn,
                 recording,
-                status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
+                status: getStatus()
             });
             sendMessageToActiveTab("recordingPaused")
             setData("recording", false)
@@ -248,22 +253,25 @@ var getUserDetails = null
                 userDetails,
                 loggedIn,
                 recording,
-                status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
+                status: getStatus()
             });
             sendMessageToActiveTab("recordingResumed")
             setData("recording", true)
             return
         }
         if (loggedIn && request.action === 'stopRecording') {
-            await api.post('/tutor-shot/finalize', { _id: tutorShotId }, { headers: { userid: userDetails.uid } })
+            generatingVideo = true
             recording = false;
-            tutorShotId = null
             sendResponse({
                 userDetails,
                 loggedIn,
                 recording,
-                status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
+                status: getStatus()
             });
+            sendMessageToActiveTab("generatingVideo")
+            await api.post('/tutor-shot/finalize', { _id: tutorShotId }, { headers: { userid: userDetails.uid } })
+            generatingVideo = false
+            tutorShotId = null
             sendMessageToActiveTab("recordingStopped")
             setData("recording", false)
             setData("imageNumber", 0)
@@ -274,6 +282,7 @@ var getUserDetails = null
         if (request.action === 'logout') {
             loggedIn = false;
             recording = false;
+            generatingVideo = false;
             userDetails = {};
             tutorShotId = null;
             imageNumber = 0;
@@ -283,13 +292,12 @@ var getUserDetails = null
                 recording,
                 status: "stopped"
             });
-            sendMessageToActiveTab("recordingStopped")
+            sendMessageToActiveTab("loggedOut")
             setData("recording", false)
             setData("imageNumber", 0)
             setData("tutorShotId", null)
             setData("userDetails", {})
             setData("loggedIn", false)
-            // setData()
             return
         }
         if (loggedIn && request.action === 'restartRecording') {
@@ -298,7 +306,7 @@ var getUserDetails = null
                 userDetails,
                 loggedIn,
                 recording,
-                status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
+                status: getStatus()
             });
             await api.delete('/tutor-shot/segments', { params: { tutorShotOid: tutorShotId } })
             sendMessageToActiveTab("recordingRestarted")
@@ -325,7 +333,7 @@ var getUserDetails = null
                             tutorShotOid: tutorShotId,
                             action: 'SSCaptured',
                             dataUrl: dataUrl, imageNumber: imageNumber++,
-                            status: tutorShotId ? (recording ? "recording" : "paused") : "stopped",
+                            status: getStatus(),
                             ...request.captureInfo ? request.captureInfo : {}
                         }
                         setData("imageNumber", imageNumber)
@@ -362,10 +370,10 @@ var getUserDetails = null
                         userDetails,
                         tutorShotOid: tutorShotId,
                         imageNumber: imageNumber,
-                        status: tutorShotId ? (recording ? "recording" : "paused") : "stopped",
+                        status: getStatus(),
                         message: messageObj
                     }
-                    chrome.tabs.sendMessage(activeTab.id, message);
+                    chrome.tabs.sendMessage(activeTab?.id, message);
                 }
             })
         } catch (err) {

content.js

@@ -5,7 +5,7 @@ var loggedIn = false;
 var floatingBar = null;
 var startingOverlay = null;
 var overlayInterval = null;
-const origin = "https://begenieus.com"
+const origin = "http://localhost:3039"
 var userDetails = {};
 var btn = {};
 var tutorShotOid = null;
@@ -86,9 +86,11 @@ var tutorShotOid = null;
     }
 
     .tutor-shot .logo .logo-img {
+        display: block;
         all: unset;
         margin-top: -4px;
         margin-left: -1px;
+        height: 50px;
     }
 
     .tutor-shot .content {
@@ -106,6 +108,7 @@ var tutorShotOid = null;
         align-items: center;
         margin-right: 16px;
         transition: 0.3s;
+        cursor: pointer;
     }
   
     .tutor-shot .content .item .img {
@@ -119,6 +122,10 @@ var tutorShotOid = null;
         all: unset;
         padding-top: 2px;
     }
+    .tutor-shot .content .item.width-100 {
+        width: 100%;
+        background: red;
+    }
 
     `
     styleTag.innerHTML = styleString
@@ -131,7 +138,8 @@ var tutorShotOid = null;
 
 <div class="counter-count" tutor-shot="counter" style="display:none;"></div>
 <div class="logo">
-    <img class="logo-img" src="${origin}/assets/images/tutor-shot-48.png" width="40">
+    <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">
@@ -204,7 +212,8 @@ function reRenderFloatingBar(data) {
         if (data.status == 'stopped') {
             floatingBar.remove()
             return
-        } else if (!document.body.contains(floatingBar)) {
+        }
+        else if (!document.body.contains(floatingBar)) {
             document.body.append(floatingBar)
         }
     }
@@ -212,6 +221,12 @@ function reRenderFloatingBar(data) {
         btn.play = document.querySelector('[tutor-shot="play-btn"]')
         btn.play.addEventListener('click', resumeRecording)
     }
+    if (!btn.mainLogo){
+        btn.mainLogo = document.querySelector('[tutor-shot="main-logo"]')
+    }
+    if (!btn.generatingVideo){
+        btn.generatingVideo = document.querySelector('[tutor-shot="generating-video"]')
+    }
     if (!btn.capture) {
         btn.capture = document.querySelector('[tutor-shot="capture-btn"]')
     }
@@ -244,23 +259,34 @@ function reRenderFloatingBar(data) {
         btn.pause.style.display = 'none'
         btn.stop.style.display = 'flex'
         btn.restart.style.display = 'flex'
-        // btn.capture.style.display = 'flex'
+        btn.generatingVideo.style.display = 'none'
+        btn.mainLogo.style.display = 'block'
     }
     else if (data?.status == 'recording') {
         btn.play.style.display = 'none'
         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.capture.style.display = 'none'
+        btn.generatingVideo.style.display = 'none'
+        btn.mainLogo.style.display = 'block'
     }
-    // floatingBar.innerHTML = innerHTML
 }
 
 var recording = false;
@@ -300,7 +326,6 @@ window.addEventListener('mousedown', async function (e) {
 })
 // content.js
 chrome.runtime.onMessage.addListener(async function (message, sender, sendResponse) {
-
     if (message.action == 'tabChanged') {
         // console.log('tabChanged', message)
     }
@@ -338,7 +363,10 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
         }
 
     }
-    if (message.message == 'recordingStopped') {
+    else if (message.message == 'generatingVideo') {
+        reRenderFloatingBar(data)
+    }
+    else if (message.message == 'recordingStopped') {
         window.open(`${origin}/tutor-shot-list`)
     }
 

manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Tutor Shot",
     "version": "1.0",
-    "description": "Capture web-page screenshots instantly with a single click. They're saved to your account at https://begenieus.com.",
+    "description": "Capture web-page screenshots instantly with a single click. They're saved to your account at http://localhost:3039.",
     "permissions": [
         "activeTab",
         "storage"

popup.js

 !function () {
-    const origin = "https://begenieus.com"
+    const origin = "http://localhost:3039"
 
     const api = axios.create({
         baseURL: `${origin}/api`, // the base URL for nodeserver is okay but NGINX is giving error
@@ -88,7 +88,6 @@
 
     function domLoadHandler() {
         chrome.runtime.sendMessage({ action: "checkStatus" }, function (response) {
-            console.log('response',response)
             userDetails = response.userDetails;
             loggedIn = response.loggedIn,
                 recording = response.recording