Popup playing memory, tooltip titles, and console.log cleaning (#54)

* Extension popup now remembers if it was playing

* Sorted imports and changed -1 to null

Author: rhyderswen

extension/src/components/button.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import "./button.css";
 import { GearIcon } from "@radix-ui/react-icons";
 import { IconProps } from "@radix-ui/react-icons/dist/types";
+import * as React from "react";
+import "./button.css";
 
 export interface SoundButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -22,7 +22,7 @@ const SoundButton = ({
   const classes = `soundButton ${className}`.trim();
 
   return (
-    <div className="soundButtonWrapper">
+    <div className="soundButtonWrapper" title={label}>
       <button
         className={classes}
         name={label}
@@ -81,4 +81,4 @@ function chooseIcon(icon: string, props?: IconProps) {
   }
 }
 
-export { SoundButton, IconButton };
+export { IconButton, SoundButton };

extension/src/entrypoints/background.ts

@@ -3,6 +3,8 @@ import { CrossFunctions } from "@/utils/constants";
 export default defineBackground(() => {
   console.log("Background loaded!", { id: browser.runtime.id });
 
+  let audioPlaying: number | null = null;
+
   browser.runtime.onInstalled.addListener(function (object) {
     if (object.reason === browser.runtime.OnInstalledReason.INSTALL) {
       openInfoPage();
@@ -28,6 +30,13 @@ export default defineBackground(() => {
       } catch (e) {
         console.error("openPopup failed:", e);
       }
+    } else if (msg.type === CrossFunctions.SET_AUDIO_PLAYING) {
+      audioPlaying = msg.audioID;
+    } else if (msg.type === CrossFunctions.GET_AUDIO_PLAYING) {
+      sendResponse(audioPlaying);
+      return true;
+    } else if (msg.type === CrossFunctions.AUDIO_ENDED) {
+      audioPlaying = null;
     }
   });
 

extension/src/entrypoints/inject.ts

@@ -27,21 +27,21 @@ function sendMessage(command: CrossFunctions) {
 }
 
 function base64ToArrayBuffer(base64: string) {
-  const real_base64 = base64.split(',')[1];
+  const real_base64 = base64.split(",")[1];
   const binaryString = atob(real_base64);
 
-    const length = binaryString.length;
-    const bytes = new Uint8Array(length);
+  const length = binaryString.length;
+  const bytes = new Uint8Array(length);
 
-    for (let i = 0; i < length; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-    }
+  for (let i = 0; i < length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
 
-    return bytes.buffer;
+  return bytes.buffer;
 }
 
 export default defineUnlistedScript(() => {
-  console.log("Successfully Injected!");
+  console.log("Parakeet Successfully Injected!");
 
   (async function () {
     const originalGUM = navigator.mediaDevices.getUserMedia.bind(
@@ -66,7 +66,6 @@ export default defineUnlistedScript(() => {
 
         async function playSoundEffect(base64: string, volume: number) {
           // Prepare sound‐effect node (but don’t play yet)
-          console.log("(inject.ts)Received sound effect base64");
           const buffer = base64ToArrayBuffer(base64);
           const fxBuffer = await loadEffectBuffer(audioCtx, buffer);
           let fxNode = null;
@@ -80,7 +79,6 @@ export default defineUnlistedScript(() => {
             fxGain.gain.value = 0;
           };
           fxNode.start();
-          console.log("playing new audio");
 
           window.soundboard.stopAudio = () => {
             fxGain.gain.value = 0;
@@ -155,7 +153,6 @@ export default defineUnlistedScript(() => {
     if (event.source !== window) return;
     switch (event.data.command) {
       case CrossFunctions.INJECT_AUDIO:
-        console.log("Event received for playing audio:", event.data);
         if (window.soundboard.triggerAudio) {
           window.soundboard.triggerAudio(
             event.data.base64,

extension/src/entrypoints/popup/App.tsx

@@ -1,17 +1,16 @@
-import { useEffect, useState } from "react";
-import "./App.css";
-import { PublicPath } from "wxt/browser";
+import { storage } from "#imports";
 import {
-  postMessage,
+  openInfoPage,
   playLocalAudio,
-  stopLocalAudio,
+  postMessage,
   setLocalVolume,
-  openInfoPage,
+  stopLocalAudio,
 } from "@/utils";
-import { storage } from "#imports";
+import { getMySounds, getSounds, login } from "@/utils/api";
 import { CrossFunctions } from "@/utils/constants";
-import { login, getMySounds, getSounds } from "@/utils/api";
-import { storeSound, retrieveSound, isSoundCached } from "@/utils/db.ts";
+import { isSoundCached, retrieveSound, storeSound } from "@/utils/db.ts";
+import { useEffect, useState } from "react";
+import "./App.css";
 
 import {
   BoxIcon,
@@ -23,12 +22,12 @@ import {
   SpeakerLoudIcon,
   UpdateIcon,
 } from "@radix-ui/react-icons";
-import { DropdownMenu, Popover, Separator, Slider } from "radix-ui";
-import { MicIcon, MicOffIcon, VideoIcon, VideoOffIcon } from "../../icons";
 import fuzzysort from "fuzzysort";
+import { DropdownMenu, Separator, Slider, Tooltip } from "radix-ui";
+import { MicIcon, MicOffIcon, VideoIcon, VideoOffIcon } from "../../icons";
 
 function App() {
-  const [currentlyPlaying, setCurrentlyPlaying] = useState(-1);
+  const [currentlyPlaying, setCurrentlyPlaying] = useState<number | null>(null);
   const [searchInput, setSearchInput] = useState("");
   const [isMeet, setIsMeet] = useState<boolean>(false);
   const [soundButtons, setSoundButtons] = useState<any[]>([]);
@@ -81,10 +80,8 @@ function App() {
 
   async function fetchSounds() {
     setIsSyncing(true);
-    console.log("Fetching sounds...");
     try {
       const response = await getSounds();
-      console.log("Default Sounds:", response);
       const sounds = await Promise.all(
         response.data.map(async (sound: any) => {
           const id = sound.id;
@@ -96,10 +93,8 @@ function App() {
           if (!isCached) {
             const audioResponse = await fetch(fullUrl);
             const blob = await audioResponse.blob();
-            console.log("Caching new sound:", id);
             await storeSound(id, blob);
           } else {
-            console.log("Sound already cached:", id);
           }
 
           return {
@@ -151,9 +146,7 @@ function App() {
   }
 
   async function playSound(id: number) {
-    console.log("Playing sound with id:", id);
     const blob = await retrieveSound(id);
-    console.log("(app.tsx)Retrieved sound blob:", blob);
     const base64 = await blobToBase64(blob);
     if (isMeet) {
       postMessage(CrossFunctions.INJECT_AUDIO, {
@@ -163,6 +156,10 @@ function App() {
     }
     const success = await playLocalAudio(base64, fxVolume);
     if (success) {
+      browser.runtime.sendMessage({
+        type: CrossFunctions.SET_AUDIO_PLAYING,
+        audioID: id,
+      });
       setCurrentlyPlaying(id);
     }
   }
@@ -172,7 +169,7 @@ function App() {
       postMessage(CrossFunctions.STOP_AUDIO);
     }
     stopLocalAudio();
-    setCurrentlyPlaying(-1);
+    setCurrentlyPlaying(null);
   }
 
   async function handleMicMute(muteMic: boolean) {
@@ -219,15 +216,19 @@ function App() {
       setFxVolume(await fxVolumeStorage.getValue());
       setMicMuted(await micMutedStorage.getValue());
       setSelectedFolder(await selectedFolderStorage.getValue());
+      setCurrentlyPlaying(
+        await browser.runtime.sendMessage({
+          type: CrossFunctions.GET_AUDIO_PLAYING,
+        })
+      );
     }
     loadStates();
   }, []);
 
   useEffect(() => {
-    // TODO: Make it check if the audio is still playing on reopen
     const listener = (msg: any) => {
       if (msg.type === CrossFunctions.AUDIO_ENDED) {
-        setCurrentlyPlaying(-1);
+        setCurrentlyPlaying(null);
       }
     };
 
@@ -305,13 +306,11 @@ function App() {
     try {
       const res = await fetch("http://localhost:3001/login", {
         method: "POST",
-        headers: { "Content-Type": "application/json",
-          "Authorization": ""
-         },
+        headers: { "Content-Type": "application/json", Authorization: "" },
         body: JSON.stringify({
           user: { email: loginEmail, password: loginPassword },
         }),
-        credentials: "omit"
+        credentials: "omit",
       });
       const response = await res.json();
       const authHeader = res.headers.get("Authorization");
@@ -325,13 +324,14 @@ function App() {
       } catch (e) {
         console.error("Failed to store JWT in browser storage:", e);
       }
-      await browser.storage.local.get("jwt").then((result) => {
-      });
+      await browser.storage.local.get("jwt").then((result) => {});
       setShowLogin(false);
       setLoginEmail("");
       setLoginPassword("");
       setUsername(response.status.data.user.username);
-      await browser.storage.local.set({ username: response.status.data.user.username });
+      await browser.storage.local.set({
+        username: response.status.data.user.username,
+      });
       alert("Logged in!");
     } catch {
       setLoginError("Login failed");
@@ -444,7 +444,7 @@ function App() {
               <button
                 className="iconButton stopButton"
                 onClick={stopSound}
-                disabled={currentlyPlaying === -1}
+                disabled={currentlyPlaying === null}
               >
                 <BoxIcon className="buttonIcon stopButtonIcon" />
               </button>
@@ -458,28 +458,34 @@ function App() {
           <div className="controlPanelContainer">
             <h2 className="voiceLabel">
               Voice{" "}
-              <Popover.Root>
-                <Popover.Trigger asChild>
-                  <button className="iconButton infoButton">
-                    <InfoCircledIcon className="infoButtonIcon" />
-                  </button>
-                </Popover.Trigger>
-                <Popover.Portal>
-                  <Popover.Content
-                    className="infoButtonPopover"
-                    side="top"
-                    sideOffset={2}
-                    collisionPadding={8}
+              <Tooltip.Provider delayDuration={200}>
+                <Tooltip.Root>
+                  <Tooltip.Trigger
+                    asChild
+                    onClick={(event) => event.preventDefault()}
                   >
-                    <p>
-                      This extension can only inject audio when your Google Meet
-                      microphone is unmuted. To play sound effects but mute your
-                      microphone, use this button!
-                    </p>
-                    <Popover.Arrow className="infoButtonArrow" />
-                  </Popover.Content>
-                </Popover.Portal>
-              </Popover.Root>
+                    <button className="iconButton infoButton">
+                      <InfoCircledIcon className="infoButtonIcon" />
+                    </button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Portal>
+                    <Tooltip.Content
+                      className="infoButtonPopover"
+                      side="top"
+                      sideOffset={2}
+                      collisionPadding={8}
+                      onClick={(event) => event.preventDefault()}
+                    >
+                      <p>
+                        This extension can only inject audio when your Google
+                        Meet microphone is unmuted. To play sound effects but
+                        mute your microphone, use this button!
+                      </p>
+                      <Tooltip.Arrow className="infoButtonArrow" />
+                    </Tooltip.Content>
+                  </Tooltip.Portal>
+                </Tooltip.Root>
+              </Tooltip.Provider>
             </h2>
             <button
               className={

extension/src/utils/constants.ts

@@ -6,5 +6,7 @@ export enum CrossFunctions {
   SET_VOLUME = "setVolume",
   GET_MIC_MUTED = "getMicMuted",
   AUDIO_ENDED = "audioEnded",
+  SET_AUDIO_PLAYING = "setAudioPlaying",
+  GET_AUDIO_PLAYING = "getAudioPlaying",
   OPEN_POPUP = "openPopup",
 }

extension/src/utils/db.ts

@@ -9,10 +9,8 @@ export async function storeSound(id: string, blob: Blob) {
   });
   const existing = await db.get("sounds", id);
   if (!existing) {
-    console.log("Storing sound in IndexedDB:", id);
     await db.put("sounds", blob, id);
   } else {
-    console.log("Sound already cached:", id);
   }
 }
 
@@ -23,10 +21,8 @@ export async function retrieveSound(id: number): Promise<Blob> {
 }
 
 export async function isSoundCached(id: string): Promise<boolean> {
-  console.log("checking if sound is cached");
   const db = await openDB("SoundCacheDB", 1, {
     upgrade(db) {
-      console.log("in upgrade");
       if (!db.objectStoreNames.contains("sounds")) {
         db.createObjectStore("sounds");
       }

ui/src/App.tsx

@@ -1,15 +1,15 @@
-import "./App.css";
+import { useEffect } from "react";
 import {
+  Navigate,
+  Route,
   BrowserRouter as Router,
   Routes,
-  Route,
-  Navigate,
 } from "react-router-dom";
-import Home from "./components/Home";
+import "./App.css";
 import Folders from "./components/Folders";
-import Sidebar from "./components/Sidebar";
 import FolderView from "./components/FolderView";
-import { useEffect } from "react";
+import Home from "./components/Home";
+import Sidebar from "./components/Sidebar";
 
 function App() {
   useEffect(() => {

ui/src/components/FolderView.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useNavigate, useParams } from "react-router-dom";
-import SoundGroup from "./SoundGroup";
-import { useEffect } from "react";
-import { useQuery } from "@tanstack/react-query";
 import { UpdateIcon } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import { API_URL } from "../util/db";
+import SoundGroup from "./SoundGroup";
 
 const FolderView = () => {
   const navigate = useNavigate();