adding relative date which is pretty nice

components/Modals/PowerPlayer.tsx

@@ -4,6 +4,7 @@ import { FaBackward } from "react-icons/fa";
 import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
 import { useAuth } from "../../contexts/authContext";
 import { useKeyboardContext } from "../../contexts/keyboardContext";
+import moment from "moment";
 
 export default function PowerPlayer(props: {
   show: boolean;
@@ -55,6 +56,10 @@ export default function PowerPlayer(props: {
         {/* top incoming messages */}
         <div className="flex flex-row">
           {allMessages.map((msg, i) => {
+            const relativeDateTime: string = moment(
+              msg.createdDate.toDate()
+            ).fromNow();
+
             if (msg.senderUserId == currUser.uid) {
               // if I am the sender
               const receiverUser = teamUsersMap[msg.receiverUserId];
@@ -65,7 +70,11 @@ export default function PowerPlayer(props: {
               }
 
               return (
-                <Tooltip title={"you: " + receiverUser.nickName}>
+                <Tooltip
+                  title={
+                    "you -> " + receiverUser.nickName + ": " + relativeDateTime
+                  }
+                >
                   <span
                     key={i}
                     onClick={() => handlePlayAudio(msg.audioDataUrl)}
@@ -90,7 +99,7 @@ export default function PowerPlayer(props: {
                 onClick={() => handlePlayAudio(msg.audioDataUrl)}
                 className="border-r-2 border-r-orange-400 min-w-max hover:cursor-pointer border-b-2 border-b-black"
               >
-                <Tooltip title={sender?.firstName + ": " + "2 minutes ago"}>
+                <Tooltip title={sender?.firstName + ": " + relativeDateTime}>
                   <img
                     src={sender ? sender?.avatarUrl : "K"}
                     alt="K"

contexts/keyboardContext.tsx

@@ -142,6 +142,7 @@ export default function KeyboardContextProvider({ children }) {
     // setPlayerSrc as the next item if there is any
 
     if (audioQueue && audioQueue.length > 0) {
+      toast("Playing Clip");
       setPlayerSrc(audioQueue[0]);
     }
   }, [audioQueue]);
@@ -297,7 +298,7 @@ export default function KeyboardContextProvider({ children }) {
   }
 
   function onEndedPlaying(e) {
-    toast.success("finished playing");
+    // toast.success("finished playing");
 
     // remove from queue and the queue manager will handle the rest
     setAudioQueue((prevQueue) => {