styling done

background.js

@@ -25,7 +25,12 @@ var getUserDetails = null
         }
 
         if (request.action === 'checkStatus') {
-            sendResponse({ userDetails, loggedIn, recording })
+            sendResponse({
+                userDetails,
+                loggedIn,
+                recording,
+                status: tutorShotId?(recording?"recording":"paused"):"stopped"
+            })
             return
         }
 

content.js

@@ -2,12 +2,13 @@
  * This file can access the DOM elements and also trigger DOM events
  */
 var loggedIn = false;
-var floatingBar = null
-!(function () {
-    let origin = "http://localhost:3039"
+var floatingBar = null;
+const origin = "http://localhost:3039"
+var btn = {}
+!(async function () {
 
     // this is load custom font
-    let customFont = new FontFace('tutor-shot-calibri', "http://localhost:3039/assets/fonts/calibri-regular.ttf")
+    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);
     })
@@ -16,7 +17,7 @@ var floatingBar = null
 
     let styleTag = document.createElement('style')
     styleTag.setAttribute('tutor-shot-style', '')
-    styleString = `
+    styleString = /*css*/`
     
     .tutor-shot {
         all: unset;
@@ -31,7 +32,7 @@ var floatingBar = null
         box-shadow: 0px 0px 20px #cccccc;
         display: flex;
         align-items: center;
-        font-family: 'calibri';
+        font-family: 'tutor-shot-calibri';
         transition: 0.3s;
     }
 
@@ -103,6 +104,7 @@ var floatingBar = null
     .tutor-shot .content .item .item-text {
         all: unset;
     }
+
     `
     styleTag.innerHTML = styleString
     document.body.append(styleTag)
@@ -112,44 +114,51 @@ var floatingBar = null
     document.body.append(floatingBar)
     let innerHTML = /*html*/`
 
-<div class="counter-count">1</div>
+<div class="counter-count" tutor-shot="counter">1</div>
 <div class="logo">
     <img class="logo-img" src="${origin}/assets/images/tutor-shot-48.png" width="40">
 </div>
 <div class="content">
-    <div class="item">
+    <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>
+    </div>
+    <div class="item" tutor-shot="pause-btn">
         <img class="img" src="${origin}/assets/icons/pause.svg" width="20">
         <span class="item-text">PAUSE</span>
     </div>
-    <div class="item">
+    <div class="item" tutor-shot="stop-btn">
         <img class="img" src="${origin}/assets/icons/stop-circle.svg" width="20">
         <span class="item-text">STOP</span>
     </div>
-    <div class="item">
+    <div class="item" tutor-shot="restart-btn">
         <img class="img" src="${origin}/assets/icons/redo.svg" width="20">
         <span class="item-text">RESTART</span>
     </div>
-    <div class="item">
+    <div class="item" tutor-shot="capture-btn">
         <img class="img" src="${origin}/assets/icons/capture.svg" width="20">
         <span class="item-text">CAPTURE</span>
     </div>
+    <div class="item" tutor-shot="capture-btn">
+        <img class="img" src="${origin}/assets/icons/left-arrow-to-left.svg" width="20">
+    </div>
 </div>
 
     `
     floatingBar.innerHTML = innerHTML
 
 
-    document.addEventListener("visibilitychange", function () {
+    document.addEventListener("visibilitychange", async function () {
         if (document.visibilityState === 'visible') {
-            let data = getCaptureData()
-            reRenderFloatingBar(data.SSTaken, data.state)
+            let data = await getCaptureData()
+            reRenderFloatingBar(data)
         }
     })
-    let data = getCaptureData()
-    reRenderFloatingBar(data.SSTaken, data.state)
+    let data = await getCaptureData()
+    reRenderFloatingBar(data)
 
 })()
-function login() {
+async function login() {
 
     let userDetails = {
         uid: localStorage.getItem('userId'),
@@ -162,29 +171,48 @@ function login() {
     }
 }
 
-function getCaptureData() {
-    return {
-        SSTaken: 28,
-        state: "paused"
-    }
+async function getCaptureData() {
+    let statusData = await chrome.runtime.sendMessage({ action: "checkStatus" })
+    return statusData
 }
 
-function reRenderFloatingBar(ssTaken, state) {
-    console.log('reset floting bar data')
-
+function reRenderFloatingBar(data) {
+    console.log('reset floting bar data', data)
+    if (!btn.play) btn.play = document.querySelector('[tutor-shot="play-btn"]')
+    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'){
+        btn.play.style.display = 'flex'
+        btn.pause.style.display = 'none'
+        btn.stop.style.display = 'flex'
+        btn.playText.innerHTML = 'CONTINUE'
+    }
+    else if (data?.status=='recording'){
+        btn.play.style.display = 'none'
+        btn.pause.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.playText.innerHTML = 'START'
+    }
     // floatingBar.innerHTML = innerHTML
 }
 
 var recording = false;
 const api = axios.create({
-    baseURL: "http://localhost:3039/api",
+    baseURL: `${origin}/api`,
     headers: {
         'Access-Control-Allow-Origin': '*', // Replace '*' with the origin you need
         'Content-Type': 'application/json',
     },
 });
 
-window.addEventListener('mousedown', function (e) {
+window.addEventListener('mousedown', async function (e) {
     if (e.button === 0) { // only left click allowed
         console.log('click received')
 
@@ -201,23 +229,27 @@ window.addEventListener('mousedown', function (e) {
             origin: location.origin,
         }
         chrome.runtime.sendMessage({ action: "captureSS", captureInfo })
+        let data = await getCaptureData()
+        reRenderFloatingBar(data)
     }
 
 })
 // content.js
-chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
+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)
-        })
+        // 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)
+        // console.log('tabChanged', message)
     }
+    let data = await getCaptureData()
+    reRenderFloatingBar(data)
 
 });