pause added

background.js

@@ -58,6 +58,28 @@ var getUserDetails = null
             sendMessageToActiveTab("recordingStarted")
             return
         }
+        if (loggedIn && request.action === 'pauseRecording') {
+            recording = false;
+            sendResponse({
+                userDetails,
+                loggedIn,
+                recording,
+                status: tutorShotId?(recording?"recording":"paused"):"stopped"
+            });
+            sendMessageToActiveTab("recordingPaused")
+            return
+        }
+        if (loggedIn && request.action === 'resumeRecording') {
+            recording = true;
+            sendResponse({
+                userDetails,
+                loggedIn,
+                recording,
+                status: tutorShotId?(recording?"recording":"paused"):"stopped"
+            });
+            sendMessageToActiveTab("recordingPaused")
+            return
+        }
         if (loggedIn && request.action === 'stopRecording') {
             recording = false;
             tutorShotId = null

content.js

@@ -86,6 +86,8 @@ var btn = {}
         align-items: center;
         overflow: hidden;
         width: 420px;
+        margin-left: 5px;
+        margin-right: 5px;
     }
   
     .tutor-shot .content .item {
@@ -123,7 +125,7 @@ var btn = {}
 <div class="content">
     <div class="item" tutor-shot="play-btn">
         <img class="img" src="${origin}/assets/icons/play.svg" width="20">
-        <span class="item-text" tutor-shot="play-text">CONTINUE</span>
+        <span class="item-text" tutor-shot="play-text">RESUME</span>
     </div>
     <div class="item" tutor-shot="pause-btn">
         <img class="img" src="${origin}/assets/icons/pause.svg" width="20">
@@ -191,11 +193,11 @@ function reRenderFloatingBar(data) {
     }
     if (!btn.play){
         btn.play = document.querySelector('[tutor-shot="play-btn"]')
-        btn.play.addEventListener('click', startRecording)
+        btn.play.addEventListener('click', resumeRecording)
     }
     if (!btn.capture){
         btn.capture = document.querySelector('[tutor-shot="capture-btn"]')
-        btn.capture.addEventListener('click', startRecording)
+        console.log('take screen shot')
     }
     if (!btn.playText) btn.playText = document.querySelector('[tutor-shot="play-text"]')
     if (!btn.pause){
@@ -204,7 +206,7 @@ function reRenderFloatingBar(data) {
     }
     if (!btn.stop){
         btn.stop = document.querySelector('[tutor-shot="stop-btn"]')
-        btn.stop.addEventListener('clikc', stopRecording)
+        btn.stop.addEventListener('click', stopRecording)
     }
     if (!btn.restart){
         btn.restart = document.querySelector('[tutor-shot="restart-btn"]')
@@ -224,7 +226,6 @@ function reRenderFloatingBar(data) {
         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'
@@ -239,7 +240,6 @@ function reRenderFloatingBar(data) {
         btn.stop.style.display = 'none'
         btn.capture.style.display = 'none'
         btn.restart.style.display = 'none'
-        btn.playText.innerHTML = 'START'
     }
     // floatingBar.innerHTML = innerHTML
 }
@@ -318,10 +318,15 @@ async function startRecording() {
 
 async function pauseRecording(){
     console.log('to pause recording')
+    await chrome.runtime.sendMessage({action: "pauseRecording"})
+}
+async function resumeRecording(){
+    await chrome.runtime.sendMessage({action: "resumeRecording"})
 }
 
 async function stopRecording(){
-    console.log('to stop recocrding')
+    console.log('stop recording')
+    await chrome.runtime.sendMessage({action: "stopRecording"})
 }
 
 async function restartRecording(){