feat: v0.0.2

SeanMcP · Oct 5, 2022 · 8a2bb7a · 8a2bb7a
1 parent fcf2b93
commit 8a2bb7a
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.2] - 2022-10-05
+
+### Added
+
+- A secret debug output
+- Light type checking with `// @ts-check`
+
+### Changes
+
+- Don't count time when fewer than two participants
+- Replace instances of thumbnails with participants
+- Expand collapse icons to chevrons
+
 ## [0.0.1] - 2022-09-29
 
 ### Changes

diff --git a/amITalkingALot.js b/amITalkingALot.js
@@ -1,32 +1,31 @@
+// @ts-check
+
 (function () {
   // Create UI
-  const ui = document.createElement("details");
-  ui.open = true;
-  ui.dataset.id = "aital";
+  const details = document.createElement("details");
+  details.open = true;
+  details.dataset.id = "aital";
   const summary = document.createElement("summary");
-  const summaryText = document.createElement("span");
-  summaryText.textContent = "Am I Talking A Lot?";
-  summary.appendChild(summaryText);
-  const iconsContainer = document.createElement("div");
-  summary.appendChild(iconsContainer);
-  iconsContainer.outerHTML = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="128" y1="40" x2="128" y2="216" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
-    <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line></svg>
+  summary.innerHTML = `
+    <span>Am I Talking A Lot?</span>
+    <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><polyline points="208 96 128 176 48 96" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><polyline points="48 160 128 80 208 160" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
   `;
-  ui.appendChild(summary);
+  details.appendChild(summary);
   const content = document.createElement("div");
-  ui.appendChild(content);
+  details.appendChild(content);
 
-  document.body.appendChild(ui);
+  document.body.appendChild(details);
 
-  // IisKdb gjg47c u5mc1b BbJhmb YE1TS YFyDbd
   let quietClassString = null;
 
   const tally = {
     __seconds: 0,
   };
 
   const elementsByName = {};
+  let indicators;
+  let participants;
 
   function alphaStringifyClassList(classList) {
     return [...classList].sort().join(" ");
@@ -44,16 +43,15 @@
       .join(" ");
   }
 
-  function valueToLevel(string) {
-    const value = parseFloat(string);
-    if (value <= 50) {
-      return 0;
-    } else if (value <= 75) {
-      return 1;
-    } else if (value <= 90) {
-      return 2;
-    } else if (value <= 100) {
+  function valueToLevel(value) {
+    if (value >= 90) {
       return 3;
+    } else if (value >= 75) {
+      return 2;
+    } else if (value >= 50) {
+      return 1;
+    } else {
+      return 0;
     }
   }
 
@@ -82,21 +80,30 @@
           muteButton.click();
         }
       } catch (e) {
-        return console.debug(e);
+        return console.log(e);
       }
     }
 
-    const participants = document.querySelectorAll("[data-self-name]");
-    const thumbnails = document.querySelectorAll("[data-second-screen=false]");
+    participants = document.querySelectorAll("[data-self-name]");
 
-    if (thumbnails.length > 0) {
-      tally.__seconds++;
+    if (participants.length <= 1) {
+      return;
     }
 
-    const indicators = [];
+    tally.__seconds++;
+
+    indicators = [];
     document.querySelectorAll("i.google-material-icons").forEach((node) => {
       if (node.textContent === "devices") {
         const previous = node.previousSibling;
+
+        if (!previous) {
+          // There should always be a previous sibling, but better safe than
+          // sorry.
+          console.error("No previous sibling for node", node);
+          return;
+        }
+
         if (previous.dataset.useTooltip) {
           indicators.push(previous.lastChild);
         } else {
@@ -106,7 +113,17 @@
     });
 
     indicators.forEach((node, i) => {
-      const name = participants[i].textContent;
+      const participant = participants[i];
+      if (!participant) {
+        console.error("No matching participant for indicator", {
+          index: i,
+          indicators,
+          node,
+          participants,
+        });
+        return;
+      }
+      const name = participant.textContent;
       if (!tally[name]) {
         tally[name] = 0;
       }
@@ -116,27 +133,29 @@
     });
 
     const { __seconds, ...record } = tally;
-    Object.entries(record).forEach(([name, tally]) => {
-      const value = ((tally * 100) / __seconds).toFixed(2);
+    Object.entries(record).forEach(([name, count]) => {
+      const value = (count * 100) / __seconds;
+      const readableValue = value.toFixed(2);
 
       if (elementsByName[name]) {
+        // We have DOM references for this participant, so just update values
         const { progress, percent } = elementsByName[name];
         progress.value = value;
         progress.dataset.level = valueToLevel(value);
-
-        percent.textContent = value + "%";
+        percent.textContent = readableValue;
       } else {
+        // No DOM references, create UI elements and store them
         const label = document.createElement("label");
         label.textContent = truncate(name);
+        label.title = name;
 
         const progress = document.createElement("progress");
         progress.max = 100;
-        progress.min = 0;
         progress.value = value;
-        progress.dataset.level = valueToLevel(value);
+        progress.dataset.level = valueToLevel(value).toString();
 
         const percent = document.createElement("span");
-        percent.textContent = value + "%";
+        percent.textContent = readableValue;
 
         content.appendChild(label);
         content.appendChild(progress);
@@ -151,5 +170,17 @@
     });
   }
 
+  // Add a click handler for debugging purposes
+  content.addEventListener("click", (e) => {
+    if (e.shiftKey) {
+      console.log("Debugging output AITAL extension", {
+        data: tally,
+        elements: elementsByName,
+        participants,
+        indicators,
+      });
+    }
+  });
+
   setInterval(tick, 1000);
 })();
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Am I Talking A Lot?",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Measure talking times in Google Meet",
   "manifest_version": 3,
   "content_scripts": [