getting it to play and stuff

components/Dashboard/TeamVoiceLine.tsx

@@ -7,9 +7,13 @@ import { toast } from "react-hot-toast";
 import { TeamMemberRole, TeamMemberStatus } from "../../models/teamMember";
 import { getFirestore } from "firebase/firestore";
 import { Tooltip } from "antd";
-import { useKeyboardContext } from "../../contexts/keyboardContext";
+import {
+  ShowModalType,
+  useKeyboardContext,
+} from "../../contexts/keyboardContext";
 import UserStatusBubble, { UserPulse } from "../UserStatusBubble";
 import { useAuth } from "../../contexts/authContext";
+import PowerPlayer from "../Modals/PowerPlayer";
 
 const maxNumberOfKeyboardMappings: number = 9;
 
@@ -20,6 +24,7 @@ export default function TeamVoiceLine() {
     selectTeamMember,
     selectedTeammate,
     isRecording,
+    handleModalType,
   } = useKeyboardContext();
   const router = useRouter();
   const { teamid } = router.query;
@@ -189,6 +194,19 @@ export default function TeamVoiceLine() {
     });
   }
 
+  const [showPowerPlayer, setShowPowerPlayer] = useState<boolean>(false);
+
+  function handleCloseModal() {
+    handleModalType(ShowModalType.na);
+    setShowPowerPlayer(false);
+  }
+
+  function handleShowModal() {
+    handleModalType(ShowModalType.powerPlayer); // disables controls
+
+    setShowPowerPlayer(true);
+  }
+
   return (
     <section className="p-5 flex flex-col w-full max-w-sm bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
       <span className="flex flex-row justify-start items-center pb-5">
@@ -197,7 +215,10 @@ export default function TeamVoiceLine() {
         </span>
 
         <Tooltip title="power playback mode">
-          <button className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
+          <button
+            onClick={handleShowModal}
+            className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40"
+          >
             <FaBackward className="text-lg text-white" />
           </button>
         </Tooltip>
@@ -211,6 +232,9 @@ export default function TeamVoiceLine() {
           </button>
         </Tooltip>
       </span>
+
+      <PowerPlayer show={showPowerPlayer} handleCloseModal={handleCloseModal} />
+
       {/* list of team members */}
       {renderTeamMemberList()}
     </section>

components/Modals/PowerPlayer.tsx

@@ -1,71 +1,98 @@
 import { Modal, Tooltip } from "antd";
 import { Message } from "../../models/message";
 import { FaBackward } from "react-icons/fa";
+import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
+import { useAuth } from "../../contexts/authContext";
+import { useKeyboardContext } from "../../contexts/keyboardContext";
 
-export default function PowerPlayer(props: { show: boolean }) {
+export default function PowerPlayer(props: {
+  show: boolean;
+  handleCloseModal: Function;
+}) {
+  const { currUser } = useAuth();
+  const { allMessages, teamUsersMap } = useTeamDashboardContext();
+  const { handleAddAudioToQueue } = useKeyboardContext();
   // two arrays:
   // 1. all of my messages in order date desc => top
-  // 2. all of incoming messages in order date desc => bottom
+  // const sentMessages = allMessages.filter(msg => msg.senderUserId == currUser.uid)
+
+  // // 2. all of incoming messages in order date desc => bottom
+  // const receivedMessages = allMessages.filter(msg => msg.receiverUserId == currUser.uid)
+
+  const messageRangeHalfToPlay = 2;
+  function handlePlayAudio(url: string) {
+    // todo play like 2 indexes lower to 2 indexes higher instead of
+    const indexOfMessage = 5;
+
+    var startPlay = indexOfMessage - messageRangeHalfToPlay;
+    if (startPlay < 0) {
+      startPlay = 0;
+    }
+
+    var endPlay = indexOfMessage + messageRangeHalfToPlay;
+    if (endPlay > allMessages.length) {
+      endPlay = allMessages.length;
+    }
+
+    // loop through start to end and add to queue
+
+    console.log(url);
+
+    handleAddAudioToQueue([url]);
+  }
 
   return (
-    <Modal title="Basic Modal" visible={false}>
-      <div className="flex flex-col p-10 overflow-x-scroll">
+    <Modal title="Power Playback " visible={props.show}>
+      <span className="flex flex-col items-start">
+        <span>One timeline to listen to the past 24 hours.</span>
+
+        <span className="text-sm text-gray-400">
+          The bottom are your messages. The top are incoming messages. Click on
+          the bubbles to listen to conversations during that period.
+        </span>
+      </span>
+
+      <div className="flex flex-col py-20 overflow-x-scroll">
         {/* top incoming messages */}
         <div className="flex flex-row">
-          <span className="border-r-2 border-r-orange-400 h-10 pl-1">
-            <Tooltip title={"Heran: 2 minutes ago"}>
-              <img
-                src="https://lh3.googleusercontent.com/a-/AOh14GhTB6LbOqohOA3csckho3OA976yp3lMEtl2MDzbgX0=s96-c"
-                alt="asdf"
-                className="rounded-full w-10 translate-x-2/4 -translate-y-2/4"
-              />
-            </Tooltip>
-          </span>
+          {allMessages.map((msg, i) => {
+            if (msg.senderUserId == currUser.uid) {
+              return (
+                <span
+                  key={i}
+                  onClick={() => handlePlayAudio(msg.audioDataUrl)}
+                  className="border-r-2 border-r-sky-400 translate-y-10 min-w-max hover:cursor-pointer"
+                >
+                  <Tooltip title={"you: 22 minutes ago"}>
+                    <div className="rounded-full w-5 h-5 translate-x-2/4 translate-y-full bg-teal-500"></div>
+                  </Tooltip>
+                </span>
+              );
+            }
 
-          <span className="border-r-2 border-r-orange-400 h-10 pl-2">
-            <Tooltip title={"Heran: 5 minutes ago"}>
-              <img
-                src="https://lh3.googleusercontent.com/a-/AOh14GhTB6LbOqohOA3csckho3OA976yp3lMEtl2MDzbgX0=s96-c"
-                alt="asdf"
-                className="rounded-full w-10 translate-x-2/4 -translate-y-2/4"
-              />
-            </Tooltip>
-          </span>
+            const sender = teamUsersMap[msg.senderUserId];
 
-          <span className="border-r-2 border-r-orange-400 h-10 pl-10">
-            <Tooltip title={"Kam: 2 hours ago"}>
-              <img
-                src="https://lh3.googleusercontent.com/a/AATXAJzgek1jh-qtptTj_VT_9QkCWlv9r02riUptU0Hk=s96-c"
-                alt="asdf"
-                className="rounded-full w-10 translate-x-2/4 -translate-y-2/4"
-              />
-            </Tooltip>
-          </span>
+            // incoming messages
+            return (
+              <span
+                key={i}
+                onClick={() => handlePlayAudio(msg.audioDataUrl)}
+                className="border-r-2 border-r-orange-400 min-w-max hover:cursor-pointer"
+              >
+                <Tooltip title={sender.firstName + ": " + "2 minutes ago"}>
+                  <img
+                    src={sender ? sender.avatarUrl : "K"}
+                    alt="K"
+                    className="rounded-full w-10 h-10 translate-x-2/4 -translate-y-2/4"
+                  />
+                </Tooltip>
+              </span>
+            );
+          })}
         </div>
 
         {/* middle line */}
-        <div className="border border-b-2 border-b-black flex-1"></div>
-
-        {/* bottom outgoing messages */}
-        <div className="flex flex-row">
-          <span className="border-r-2 border-r-orange-4 h-5 pl-5">
-            <Tooltip title={"you: 22 minutes ago"}>
-              <div className="rounded-full  w-5 h-5 translate-x-2/4 translate-y-2/4 bg-teal-500"></div>
-            </Tooltip>
-          </span>
-
-          <span className="border-r-2 border-r-orange-4 h-5 pl-0">
-            <Tooltip title={"you: 22 minutes ago"}>
-              <div className="rounded-full  w-5 h-5 translate-x-2/4 translate-y-2/4 bg-teal-500"></div>
-            </Tooltip>
-          </span>
-
-          <span className="border-r-2 border-r-orange-4 h-5 pl-5">
-            <Tooltip title={"you: 22 minutes ago"}>
-              <div className="rounded-full  w-5 h-5 translate-x-2/4 translate-y-2/4 bg-teal-500"></div>
-            </Tooltip>
-          </span>
-        </div>
+        <div className="border border-b-2 border-b-black flex-1 w-full"></div>
       </div>
     </Modal>
   );

contexts/keyboardContext.tsx

@@ -55,6 +55,7 @@ interface KeyboardContextInterface {
 export enum ShowModalType {
   createLink = "link",
   createRoom = "room",
+  powerPlayer = "powerPlayer",
   na = "none",
 }
 
@@ -361,7 +362,7 @@ export default function KeyboardContextProvider({ children }) {
       }
 
       // handle for when in modals, don't want any of this crap
-      if (showModalType == ShowModalType.createRoom) {
+      if (showModalType != ShowModalType.na) {
         return;
       }