nice touchups and fixing audio playing issues

components/AnnouncementCard.tsx

@@ -69,7 +69,7 @@ export default function AnnouncementCard(props: IAnnouncementCardProps) {
   }
 
   return (
-    <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
+    <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center shrink-0">
       <span className="relative mr-2 grid items-center justify-items-center">
         <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
 

components/Dashboard/Announcements.tsx

@@ -17,6 +17,7 @@ import Announcement, { AnnouncementState } from "../../models/announcement";
 import { getTime } from "../../helpers/dateTime";
 import AnnouncementCard from "../AnnouncementCard";
 import { Dropdown, Menu, Radio, Tooltip } from "antd";
+import { useKeyboardContext } from "../../contexts/keyboardContext";
 
 // for query
 const yesterday = new Date();
@@ -27,6 +28,7 @@ const db = getFirestore();
 export default function Announcements() {
   const { currUser } = useAuth();
   const { team } = useTeamDashboardContext();
+  const { isRecordingAnnouncement } = useKeyboardContext();
 
   const [annMap, setAnnMap] = useState<Map<string, Announcement>>(
     new Map<string, Announcement>()
@@ -125,8 +127,12 @@ export default function Announcements() {
             ANNOUNCEMENTS
             <Tooltip title={"Press and hold A to send an announcement."}>
               <button
-                className="right-1 rounded-lg py-1 px-2 ml-1 
+                className={`right-1 rounded-lg py-1 px-2 ml-1 
-                            shadow-md text-center text-white text-sm font-bold"
+                            shadow-md text-center text-white text-sm font-bold ${
+                              isRecordingAnnouncement
+                                ? "bg-orange-500 text-white"
+                                : ""
+                            }`}
               >
                 A
               </button>
@@ -163,15 +169,17 @@ export default function Announcements() {
           </span>
         </Dropdown>
 
+        <Tooltip title={"Press and hold A to record an announcement"}>
+          <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+            <FaMicrophoneAlt className="text-lg text-white" />
+          </button>
+        </Tooltip>
         {/* <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
-          <FaMicrophoneAlt className="text-lg text-white" />
-        </button>
-        <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
           <FaPlay className="text-lg text-white" />
         </button> */}
       </span>
 
-      <div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
+      <div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center pb-5">
         {getTabContent()}
       </div>
     </section>

components/Dashboard/Rooms.tsx

@@ -124,7 +124,6 @@ export default function DashboardRoom() {
     updatedRoom.id = change.doc.id;
 
     if (change.type === "added" || change.type === "modified") {
-      console.log("New or updated room: ", updatedRoom);
       // update rooms map
       setRoomsMap((prevMap) => {
         return new Map(prevMap.set(updatedRoom.id, updatedRoom));

contexts/keyboardContext.tsx

@@ -139,14 +139,38 @@ export default function KeyboardContextProvider({ children }) {
   // manage audio queue
   useEffect(() => {
     // every time queue changes,
-    // setPlayerSrc as the next item if there is any
+    // setPlayerSrc as the next item if there is any to play it
 
     if (audioQueue && audioQueue.length > 0) {
       toast("Adding Message to Queue");
-      setPlayerSrc(audioQueue[0]);
+
+      // todo: edge case, if it's the same link again, then still play it somehow
+      if (playerSrc == audioQueue[0]) {
+        // play empty one and then add the next audio file
+        setPlayerSrc("");
+
+        setTimeout(() => {
+          setPlayerSrc(audioQueue[0]);
+        }, 1000);
+      } else {
+        setPlayerSrc(audioQueue[0]);
+      }
+    }
+
+    if (!audioQueue || audioQueue.length == 0) {
+      setPlayerSrc(null);
     }
   }, [audioQueue]);
 
+  // show toast when recording
+  useEffect(() => {
+    if (isRecordingAnnouncement || isRecording) {
+      toast.loading("Recording...");
+    } else {
+      toast.dismiss();
+    }
+  }, [isRecording, isRecordingAnnouncement]);
+
   const value: KeyboardContextInterface = {
     selectedTeammate,
     selectTeamMember,
@@ -267,7 +291,8 @@ export default function KeyboardContextProvider({ children }) {
     recorder
       .start()
       .then(() => {
-        toast.success("started recording");
+        // toast.success("started recording");
+        console.log("recording started");
       })
       .catch((e) =>
         toast.error("there was a problem in starting your recording")
@@ -502,7 +527,8 @@ export default function KeyboardContextProvider({ children }) {
   function handleResetView() {
     setSelectedTeamMember(null);
     setShowModalType(ShowModalType.na);
-    setPlayerSrc(null);
+
+    setAudioQueue([]);
   }
 
   // IMPORTANT: shortcut handlers need to be updated as the function has to have the fresh state