starting recording from floating bar

background.js

@@ -20,7 +20,16 @@ var getUserDetails = null
                 imageNumber = 0
             }
             loggedIn = true
-            sendResponse({ message: "Logged In", success: true })
+            sendResponse({
+                message: "Logged In",
+                success: true,
+                userDetails,
+                tutorShotOid: tutorShotId,
+                imageNumber: imageNumber,
+                status: tutorShotId?(recording?"recording":"paused"):"stopped",
+            
+            })
+            sendMessageToActiveTab("loggedIn")
             return
         }
 
@@ -29,6 +38,8 @@ var getUserDetails = null
                 userDetails,
                 loggedIn,
                 recording,
+                tutorShotOid: tutorShotId,
+                imageNumber: imageNumber,
                 status: tutorShotId?(recording?"recording":"paused"):"stopped"
             })
             return
@@ -38,13 +49,25 @@ var getUserDetails = null
             imageNumber = 0
             recording = true;
             tutorShotId = request.tutorShotId
-            sendResponse({ userDetails, loggedIn, recording });
+            sendResponse({
+                userDetails,
+                loggedIn,
+                recording,
+                status: tutorShotId?(recording?"recording":"paused"):"stopped"
+            });
+            sendMessageToActiveTab("recordingStarted")
             return
         }
         if (loggedIn && request.action === 'stopRecording') {
             recording = false;
             tutorShotId = null
-            sendResponse({ userDetails, loggedIn, recording });
+            sendResponse({
+                userDetails,
+                loggedIn,
+                recording,
+                status: tutorShotId?(recording?"recording":"paused"):"stopped"
+            });
+            sendMessageToActiveTab("recordingStopped")
             return
         }
 
@@ -70,9 +93,9 @@ var getUserDetails = null
                             tutorShotOid: tutorShotId,
                             action: 'SSCaptured',
                             dataUrl: dataUrl, imageNumber: imageNumber++,
+                            status: tutorShotId?(recording?"recording":"paused"):"stopped",
                             ...request.captureInfo ? request.captureInfo : {}
                         }
-                        console.log('SS captured', message)
                         // to send message to the content instance of the
                         chrome.tabs.sendMessage(activeTab.id, message);
                     })
@@ -95,4 +118,24 @@ var getUserDetails = null
         }
         return dataSet
     }
+
+    function sendMessageToActiveTab(messageObj){
+        try{
+            chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+                if (tabs && tabs.length && tabs[0].url.slice(0,6)!='chrome') { // if any tab is active
+                    let message = {
+                        userDetails,
+                        tutorShotOid: tutorShotId,
+                        imageNumber: imageNumber,
+                        status: tutorShotId?(recording?"recording":"paused"):"stopped",
+                        message: messageObj
+                    }
+                    console.log('sending message:', message)
+                    chrome.tabs.sendMessage(tabs[0].id, message);
+                }
+            })
+        }catch(err){
+            console.log(err)
+        }
+    }
 }()

content.js

@@ -4,6 +4,7 @@
 var loggedIn = false;
 var floatingBar = null;
 const origin = "http://localhost:3039"
+var userDetails = {};
 var btn = {}
 !(async function () {
 
@@ -173,28 +174,40 @@ async function login() {
 
 async function getCaptureData() {
     let statusData = await chrome.runtime.sendMessage({ action: "checkStatus" })
+    userDetails = statusData.userDetails
     return statusData
 }
 
 function reRenderFloatingBar(data) {
-    console.log('reset floting bar data', data)
-    if (!btn.play) btn.play = document.querySelector('[tutor-shot="play-btn"]')
+    console.log('reRenderFloatingBar', data)
+    if (!btn.play){
+        btn.play = document.querySelector('[tutor-shot="play-btn"]')
+        btn.play.addEventListener('click', startRecording)
+    }
     if (!btn.playText) btn.playText = document.querySelector('[tutor-shot="play-text"]')
     if (!btn.pause) btn.pause = document.querySelector('[tutor-shot="pause-btn"]')
     if (!btn.stop) btn.stop = document.querySelector('[tutor-shot="stop-btn"]')
     if (!btn.restart) btn.restart = document.querySelector('[tutor-shot="restart-btn"]')
-    if (data?.state=='paused'){
+    if (!btn.counter) btn.counter = document.querySelector('[tutor-shot="counter"]')
+
+    if (data?.hasOwnProperty('imageNumber')){
+        console.log('set', data.imageNumber, btn.counter.innerHTML)
+        btn.counter.innerHTML = `${data.imageNumber}`
+        if (data.imageNumber<=0) btn.counter.style.display='none'
+        else btn.counter.style.display='flex'
+    }
+    if (data?.state == 'paused') {
         btn.play.style.display = 'flex'
         btn.pause.style.display = 'none'
         btn.stop.style.display = 'flex'
         btn.playText.innerHTML = 'CONTINUE'
     }
-    else if (data?.status=='recording'){
+    else if (data?.status == 'recording') {
         btn.play.style.display = 'none'
         btn.pause.style.display = 'flex'
         btn.stop.style.display = 'flex'
     }
-    else{ // stopped
+    else { // stopped
         btn.play.style.display = 'flex'
         btn.pause.style.display = 'none'
         btn.stop.style.display = 'none'
@@ -213,8 +226,12 @@ 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)){
+        return
+    }
     if (e.button === 0) { // only left click allowed
-        console.log('click received')
 
         let captureInfo = {
             targetDimensions: e.target.getBoundingClientRect(), // this is for the backdrop
@@ -248,8 +265,25 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
     if (message.action == 'tabChanged') {
         // console.log('tabChanged', message)
     }
+    if (message.status){
+        console.log('got message status', message)
+    }
     let data = await getCaptureData()
     reRenderFloatingBar(data)
 
 });
 
+
+async function startRecording() {
+    console.log('startRecording')
+    try {
+        await getCaptureData();
+        let { data } = await api.post('/tutor-shot', { title: "Some random title" }, { headers: { userId: userDetails.uid } })
+        if (data.success) {
+            await chrome.runtime.sendMessage({ action: "startRecording", tutorShotId: data.tutorShot._id })
+        }
+    } catch (err) {
+        console.log('error while starting to record', err)
+        inProgress = false
+    }
+}

popup.js

 !function () {
+    const origin = "http://localhost:3039"
     console.log('popup', chrome);
 
     const api = axios.create({
-        baseURL: "http://localhost:3039/api", // the base URL for nodeserver is okay but NGINX is giving error
+        baseURL: `${origin}/api`, // the base URL for nodeserver is okay but NGINX is giving error
         headers: {
             'Access-Control-Allow-Origin': '*', // Replace '*' with the origin you need
             'Content-Type': 'application/json',
         },
     });
-    console.log('api',api)
     
 
-    let origin = "http://localhost:3039"
     let recording = false;
     let loggedIn = false;
     let startBtn = document.getElementById('start-btn')
@@ -34,7 +33,6 @@
         }
         inProgress = true
         try{
-            console.log('apis', api)
             let { data } = await api.post('/tutor-shot', { title: "Some random title" }, { headers: { userId: userDetails.uid } } )
             console.log('creating reponse',data)
             if (data.success){