loader added when starting

background.js

@@ -77,7 +77,7 @@ var getUserDetails = null
                 recording,
                 status: tutorShotId?(recording?"recording":"paused"):"stopped"
             });
-            sendMessageToActiveTab("recordingPaused")
+            sendMessageToActiveTab("recordingResumed")
             return
         }
         if (loggedIn && request.action === 'stopRecording') {

content.js

@@ -3,6 +3,8 @@
  */
 var loggedIn = false;
 var floatingBar = null;
+var startingOverlay = null;
+var overlayInterval = null;
 const origin = "http://localhost:3039"
 var userDetails = {};
 var btn = {}
@@ -19,7 +21,22 @@ var btn = {}
     let styleTag = document.createElement('style')
     styleTag.setAttribute('tutor-shot-style', '')
     styleString = /*css*/`
-    
+    .tutor-shot-overlay{
+        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;
+    }
     .tutor-shot {
         all: unset;
         position: fixed;
@@ -256,7 +273,7 @@ const api = axios.create({
 window.addEventListener('mousedown', async function (e) {
 
     // to prevent the event when clicking inside the floating bar
-    if (floatingBar.contains(e.target)){
+    if (floatingBar?.contains(e.target) || startingOverlay?.contains(e.target)){
         return
     }
     if (e.button === 0) { // only left click allowed
@@ -282,14 +299,7 @@ window.addEventListener('mousedown', async function (e) {
 // content.js
 chrome.runtime.onMessage.addListener(async function (message, sender, sendResponse) {
 
-    if (message.action == 'SSCaptured') {
-        console.log('SSCaptured', message)
-        // api.post("/tutor-shot/screen-shot", message).then(res => {
-        //     console.log('response', res)
-        // }).catch(err => {
-        //     console.log('err', err)
-        // })   
-    }
+ 
     if (message.action == 'tabChanged') {
         // console.log('tabChanged', message)
     }
@@ -298,6 +308,36 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
     }
     let data = await getCaptureData()
     reRenderFloatingBar(data)
+    if (message.message == 'recordingStarted'){
+        if (floatingBar){
+            if(!startingOverlay){
+                clearInterval(overlayInterval)
+                let counter = 5
+                startingOverlay = document.createElement('div')
+                startingOverlay.setAttribute('class', 'tutor-shot-overlay')
+                document.body.append(startingOverlay)
+                function changeText(){
+                    if (counter<=0){
+                        clearInterval(overlayInterval)
+                        startingOverlay.remove()
+                        return
+                    }
+                    console.log('counter', counter)
+                    startingOverlay.innerHTML = `
+                    <div>
+                        Click on the webpage to take screenshot
+                        <br>
+                        Capture would start in ${counter--} seconds
+                    </div>
+                    `
+                }
+                changeText()
+                overlayInterval = setInterval(changeText, 1000 )
+
+            }
+        }
+        
+    }
 
 });
 

popup.html

@@ -111,7 +111,7 @@
 
       <div id="user-details">
         <div style=" background-color: #fff4e3;border-bottom:1px solid #f0f0f0;padding:16px;display:flex;">
-          <div style="display: flex; justify-content:space-between;align-items: center; width: 100%;">
+          <div style="justify-content:space-between;align-items: center; width: 100%;">
             <div  style="display: flex;align-items: center;flex: 1;">
               <img src="./images/photo.jpg" alt=""style="border: 2px solid #fff;;border-radius: 50%; 
               height: 32px;margin-right: 8px;max-width: 50px;overflow: hidden;width: 32px;">
@@ -125,7 +125,7 @@
               </div>
             </div>
             <div style="display: flex;align-items: center;">
-              <button id="my-captures-btn" type="button"  style="background-color: #f36418;background-image: linear-gradient(150deg,#f36418 19%, #fc9c2a 75%);border: none;cursor: pointer;border-radius:6px;font-size: 14px;font-weight: 600;height:30px;padding: 8px 12px;align-items: center;justify-content: center;color: #fff;display: flex; text-decoration: none;">My Captures
+              <button id="my-captures-btn" type="button"  style="background-color: #f36418;background-image: linear-gradient(150deg,#f36418 19%, #fc9c2a 75%);border: none;cursor: pointer;border-radius:6px;font-size: 14px;font-weight: 600;height:30px;padding: 8px 12px;align-items: center;justify-content: center;color: #fff;display: flex; text-decoration: none; margin-left: 40px; margin-top: 10px;">My Captures
               </button>
             </div>
           </div>