half done

background.js

@@ -122,7 +122,8 @@ var getUserDetails = null
     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 activeTab = tabs[0]
+                if (activeTab?.url?.slice(0,6)!='chrome') { // if any tab is active
                     let message = {
                         userDetails,
                         tutorShotOid: tutorShotId,
@@ -131,7 +132,7 @@ var getUserDetails = null
                         message: messageObj
                     }
                     console.log('sending message:', message)
-                    chrome.tabs.sendMessage(tabs[0].id, message);
+                    chrome.tabs.sendMessage(activeTab.id, message);
                 }
             })
         }catch(err){

content.js

@@ -104,6 +104,7 @@ var btn = {}
   
     .tutor-shot .content .item .item-text {
         all: unset;
+        padding-top: 2px;
     }
 
     `
@@ -180,14 +181,35 @@ async function getCaptureData() {
 
 function reRenderFloatingBar(data) {
     console.log('reRenderFloatingBar', data)
+    if (data){
+        if (data.status=='stopped'){
+            floatingBar.remove()
+            return
+        }else if (!document.body.contains(floatingBar)){
+            document.body.append(floatingBar)
+        }
+    }
     if (!btn.play){
         btn.play = document.querySelector('[tutor-shot="play-btn"]')
         btn.play.addEventListener('click', startRecording)
     }
+    if (!btn.capture){
+        btn.capture = document.querySelector('[tutor-shot="capture-btn"]')
+        btn.capture.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 (!btn.pause){
+        btn.pause = document.querySelector('[tutor-shot="pause-btn"]')
+        btn.pause.addEventListener('click', pauseRecording)
+    }
+    if (!btn.stop){
+        btn.stop = document.querySelector('[tutor-shot="stop-btn"]')
+        btn.stop.addEventListener('clikc', stopRecording)
+    }
+    if (!btn.restart){
+        btn.restart = document.querySelector('[tutor-shot="restart-btn"]')
+        btn.restart.addEventListener('click', restartRecording)
+    }
     if (!btn.counter) btn.counter = document.querySelector('[tutor-shot="counter"]')
 
     if (data?.hasOwnProperty('imageNumber')){
@@ -200,17 +222,23 @@ function reRenderFloatingBar(data) {
         btn.play.style.display = 'flex'
         btn.pause.style.display = 'none'
         btn.stop.style.display = 'flex'
+        btn.restart.style.display = 'flex'
+        btn.capture.style.display = 'flex'
         btn.playText.innerHTML = 'CONTINUE'
     }
     else if (data?.status == 'recording') {
         btn.play.style.display = 'none'
         btn.pause.style.display = 'flex'
+        btn.restart.style.display = 'flex'
+        btn.capture.style.display = 'flex'
         btn.stop.style.display = 'flex'
     }
     else { // stopped
         btn.play.style.display = 'flex'
         btn.pause.style.display = 'none'
         btn.stop.style.display = 'none'
+        btn.capture.style.display = 'none'
+        btn.restart.style.display = 'none'
         btn.playText.innerHTML = 'START'
     }
     // floatingBar.innerHTML = innerHTML
@@ -287,3 +315,15 @@ async function startRecording() {
         inProgress = false
     }
 }
+
+async function pauseRecording(){
+    console.log('to pause recording')
+}
+
+async function stopRecording(){
+    console.log('to stop recocrding')
+}
+
+async function restartRecording(){
+    console.log('remove all the screenshot in current recording')
+}
\ No newline at end of file