having one solution for different components of app

2022-01-27 20:17:00 -08:00
parent 0d23d1dfd7
commit 0f7e5a831b
256 changed files with 7997 additions and 0 deletions
@@ -0,0 +1,134 @@
+import { Avatar, 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";
+import moment from "moment";
+
+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
+  // 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
+    // var convoChunk: string[] = []
+
+    handleAddAudioToQueue([url], true);
+  }
+
+  function handleClose(e) {
+    props.handleCloseModal();
+  }
+
+  return (
+    <Modal
+      title="Power Playback "
+      visible={props.show}
+      onCancel={handleClose}
+      footer={
+        <button
+          onClick={handleClose}
+          className="ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded"
+        >
+          👋 Close
+        </button>
+      }
+    >
+      <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">
+          {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];
+
+              if (!receiverUser) {
+                return;
+              }
+
+              return (
+                <Tooltip
+                  title={
+                    "you -> " + receiverUser.nickName + ": " + relativeDateTime
+                  }
+                >
+                  <span
+                    key={i}
+                    onClick={() => handlePlayAudio(msg.audioDataUrl)}
+                    className="border-r-2 border-r-sky-400 translate-y-10 min-w-max hover:cursor-pointer border-t-2 border-t-black"
+                  >
+                    <Avatar.Group className="translate-x-8 pl-2 translate-y-10">
+                      <Avatar src={receiverUser.avatarUrl} />
+                      {/* <Avatar src={currUser.photoURL} /> */}
+                      <div className="rounded-full w-8 h-8 -translate-x-2 bg-teal-500"></div>
+                    </Avatar.Group>
+                  </span>
+                </Tooltip>
+              );
+            }
+
+            const sender = teamUsersMap[msg.senderUserId];
+
+            // incoming messages
+            return (
+              <span
+                key={i}
+                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 + ": " + relativeDateTime}>
+                  <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 w-full"></div> */}
+      </div>
+    </Modal>
+  );
+}