Other Audible tabs list implemented

home.html

@@ -130,9 +130,9 @@ <h1 class="text-white text-center text-xl ">Not in Production Yet.</hi>
         </div> 
     -->
 
-    <div class="text-white text-center " id="tabList">
+    <div class="text-green-500 text-center " id="tabList">
 
-      <p>test 1</p>
+      <p class="text-center text-pink-300 ">Other Audio</p>
       <!--<p>test 2</p>-->
 
     </div>

src/css/output.css

@@ -868,6 +868,11 @@ video {
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
 .text-indigo-400 {
   --tw-text-opacity: 1;
   color: rgb(129 140 248 / var(--tw-text-opacity));
@@ -883,11 +888,21 @@ video {
   color: rgb(251 207 232 / var(--tw-text-opacity));
 }
 
+.text-pink-300 {
+  --tw-text-opacity: 1;
+  color: rgb(249 168 212 / var(--tw-text-opacity));
+}
+
 .text-pink-500 {
   --tw-text-opacity: 1;
   color: rgb(236 72 153 / var(--tw-text-opacity));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));

src/js/popup.js

@@ -185,11 +185,18 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     function updateTabMuteStatus(muted) {
       if (muted === "true"){
-        tabMuteIcon.className = 'fa-solid fa-volume-xmark';
+        tabMuteIcon.className = 'fa-solid fa-volume-xmark ';
         tabMuted.style.color = "green";
+
+        // NOTE: Get this working in the future
+        //tabMuted.classList.contains('text-red-500') ? tabMuted.classList.remove('text-red-500') : null;
+        //tabMuted.classList.add('text-green-500');
       }
       else {
         tabMuteIcon.className = 'fa-solid fa-volume-high';
+        // NOTE: Get this working in the future
+        //tabMuted.classList.contains('text-green-500') ? tabMuted.classList.remove('text-green-500') : null;
+        //tabMuted.classList.add('text-red-500');
         tabMuted.style.color = "red"; 
       }
     }

src/js/worker.js

@@ -41,7 +41,7 @@ chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
       let title = arr[0];
       let audible = arr[1];
       muted = arr[2];
-      let allTabs = await getAllTabTitles();
+      let allTabs = await getAllTabTitlesWithAudio();
       /*for(let t of allTabs){
         console.log("__Tab--:", t);
       }
@@ -201,6 +201,27 @@ async function getAllTabTitlesAndSounds() {
 }
 
 
+/**
+ *
+ *
+ */
+async function getAllTabTitlesWithAudio() {
+  let queryOptions = {}; // * Get tabs across all chrome windows
+  let tabs = await chrome.tabs.query(queryOptions);
+  let titles = []; 
+  // Get all tab titles that are currently audible
+  for (const tab of tabs) {
+    if (tab) {
+      if (tab.audible) {
+        console.log(` Titleee: ${tab.title}`);
+        titles.push(tab.title);
+      }
+    }
+
+  }
+  return titles
+}
+
 /**
  *
  *

tailwind.config.js

@@ -9,6 +9,9 @@ module.exports = {
     "./src/**/*.js",
     "./*.html"
   ],
+  options : {
+    safelist: ['text-green-500', 'text-red-500'],
+  },
   theme: {
     extend: {},
   },