working on floating bar

content.js

-
+/**
+ * This file can access the DOM elements and also trigger DOM events
+ */
 var loggedIn = false;
-!function () {
+var floatingBar = null
+!(function () {
     let origin = "http://localhost:3039"
     if (window.origin == origin) login()
-}()
+    floatingBar = document.createElement('div')
+    floatingBar.setAttribute('style', `
+    position:fixed;
+    bottom:0;
+    width:100vw;
+    z-index:100;
+    background: linear-gradient(45deg, #ffb102, transparent);
+    margin: 40px;
+    padding: 10px;
+    border-radius: 10px;
+`)
+    document.body.append(floatingBar)
+
+    document.addEventListener("visibilitychange", function () {
+        if (document.visibilityState === 'visible') {
+            let data = getCaptureData()
+            reRenderFloatingBar(data.SSTaken, data.state)
+        }
+    })
+    let data = getCaptureData()
+    reRenderFloatingBar(data.SSTaken, data.state)
 
+})()
 function login() {
 
     let userDetails = {
@@ -18,6 +42,25 @@ function login() {
     }
 }
 
+function getCaptureData(){
+    return {
+        SSTaken: 28,
+        state: "paused"
+    }
+}
+
+function reRenderFloatingBar(ssTaken, state) {
+
+    let innerHTML = /*html*/`
+   
+        <span>${ssTaken?ssTaken:0} SS taken</span>
+        ${state=='paused'?'<button>Play</button>':''}
+
+        <button>SS</button>
+    `
+    floatingBar.innerHTML = innerHTML
+}
+
 var recording = false;
 const api = axios.create({
     baseURL: "http://localhost:3039/api",