restart recording feature added

background.js

@@ -92,6 +92,17 @@ var getUserDetails = null
             sendMessageToActiveTab("recordingStopped")
             return
         }
+        if (loggedIn && request.action === 'restartRecording') {
+            imageNumber = 0;
+            sendResponse({
+                userDetails,
+                loggedIn,
+                recording,
+                status: tutorShotId?(recording?"recording":"paused"):"stopped"
+            });
+            sendMessageToActiveTab("recordingRestarted")
+            return
+        }
 
         if (request.action === 'captureSS') {
             if (!loggedIn) {

content.js

@@ -10,11 +10,7 @@ var userDetails = {};
 var btn = {}
 !(async function () {
 
-    // this is load custom font
-    let customFont = new FontFace('tutor-shot-calibri', `url(${origin}/assets/fonts/calibri-regular.ttf)  format("truetype")`)
-    customFont.load().then(function (font) {
-        document.fonts.add(font);
-    })
+    loadFont('tutor-shot-calibri', `${origin}/assets/fonts/calibri-regular.ttf`, 'truetype')
 
     if (window.origin == origin) login()
 
@@ -50,7 +46,8 @@ var btn = {}
         box-shadow: 0px 0px 20px #cccccc;
         display: flex;
         align-items: center;
-        font-family: 'tutor-shot-calibri';
+        /* font-family: 'tutor-shot-calibri'; */
+        font-family: 'sans serif';
         transition: 0.3s;
     }
 
@@ -200,42 +197,42 @@ async function getCaptureData() {
 
 function reRenderFloatingBar(data) {
     console.log('reRenderFloatingBar', data)
-    if (data){
-        if (data.status=='stopped'){
+    if (data) {
+        if (data.status == 'stopped') {
             floatingBar.remove()
             return
-        }else if (!document.body.contains(floatingBar)){
+        } else if (!document.body.contains(floatingBar)) {
             document.body.append(floatingBar)
         }
     }
-    if (!btn.play){
+    if (!btn.play) {
         btn.play = document.querySelector('[tutor-shot="play-btn"]')
         btn.play.addEventListener('click', resumeRecording)
     }
-    if (!btn.capture){
+    if (!btn.capture) {
         btn.capture = document.querySelector('[tutor-shot="capture-btn"]')
         console.log('take screen shot')
     }
     if (!btn.playText) btn.playText = document.querySelector('[tutor-shot="play-text"]')
-    if (!btn.pause){
+    if (!btn.pause) {
         btn.pause = document.querySelector('[tutor-shot="pause-btn"]')
         btn.pause.addEventListener('click', pauseRecording)
     }
-    if (!btn.stop){
+    if (!btn.stop) {
         btn.stop = document.querySelector('[tutor-shot="stop-btn"]')
         btn.stop.addEventListener('click', stopRecording)
     }
-    if (!btn.restart){
+    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')){
+    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.imageNumber <= 0) btn.counter.style.display = 'none'
+        else btn.counter.style.display = 'flex'
     }
     if (data?.state == 'paused') {
         btn.play.style.display = 'flex'
@@ -273,7 +270,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) || startingOverlay?.contains(e.target)){
+    if (floatingBar?.contains(e.target) || startingOverlay?.contains(e.target)) {
         return
     }
     if (e.button === 0) { // only left click allowed
@@ -299,25 +296,25 @@ 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)
     }
-    if (message.status){
+    if (message.status) {
         console.log('got message status', message)
     }
     let data = await getCaptureData()
     reRenderFloatingBar(data)
-    if (message.message == 'recordingStarted'){
-        if (floatingBar){
-            if(!startingOverlay){
+    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){
+                function changeText() {
+                    if (counter <= 0) {
                         clearInterval(overlayInterval)
                         startingOverlay.remove()
                         return
@@ -332,11 +329,14 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
                     `
                 }
                 changeText()
-                overlayInterval = setInterval(changeText, 1000 )
+                overlayInterval = setInterval(changeText, 1000)
 
             }
         }
-        
+
+    }
+    if (message.message == 'recordingStopped') {
+        window.open(`${origin}/tutor-shot-list`)
     }
 
 });
@@ -356,19 +356,44 @@ async function startRecording() {
     }
 }
 
-async function pauseRecording(){
-    console.log('to pause recording')
-    await chrome.runtime.sendMessage({action: "pauseRecording"})
+async function pauseRecording() {
+    await chrome.runtime.sendMessage({ action: "pauseRecording" })
+}
+async function resumeRecording() {
+    await chrome.runtime.sendMessage({ action: "resumeRecording" })
+}
+
+async function stopRecording() {
+    await chrome.runtime.sendMessage({ action: "stopRecording" })
 }
-async function resumeRecording(){
-    await chrome.runtime.sendMessage({action: "resumeRecording"})
+
+async function restartRecording() {
+    await chrome.runtime.sendMessage({ action: "restartRecording" })
+    try{
+        let captureData = await getCaptureData()
+        await api.delete('/tutor-shot/segments', { params: {tutorShotOid: captureData.tutorShotOid} })
+    }catch(err){
+        console.log(err)
+    }
 }
 
-async function stopRecording(){
-    console.log('stop recording')
-    await chrome.runtime.sendMessage({action: "stopRecording"})
+async function checkFont(fontName) {  // Use FontFace API to check if the font is available
+    try {
+        await document.fonts.load('1em ' + fontName); // Attempt to load the font
+        return true; // Font successfully loaded
+    } catch (error) {
+        return false; // Font couldn't be loaded
+    }
 }
 
-async function restartRecording(){
-    console.log('remove all the screenshot in current recording')
+async function loadFont(name, url, type='true'){
+
+    return new Promise( (res, rej)=>{
+        // this is load custom font
+        let customFont = new FontFace(name, `url(${url})  format("${type}")`)
+        customFont.load().then(function (font) {
+            document.fonts.add(font);
+            res(true)
+        })
+    } )
 }
\ No newline at end of file