adding subcomponent and rending audio clips at least although not all working properly

2022-02-05 22:20:24 -08:00
parent 389ea67b94
commit 998ec37b5b
2 changed files with 92 additions and 79 deletions
@@ -0,0 +1,76 @@
+import { yesterday } from "@nirvana/common/helpers/dateTime";
+import { AudioClip } from "@nirvana/common/models/conversation";
+import moment from "moment";
+import toast from "react-hot-toast";
+import { useRecoilValue } from "recoil";
+import {
+  allRelevantContactsAtom,
+  allUsersConversationsAtom,
+} from "../../recoil/main";
+import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
+import { useState } from "react";
+
+export default function TimelineAudioClip(props: {
+  index: number;
+  audioClip: AudioClip;
+  convoId: string;
+}) {
+  const relContactsMap = useRecoilValue(allRelevantContactsAtom);
+  const userConvosMap = useRecoilValue(allUsersConversationsAtom);
+
+  const audioClipUser = relContactsMap.get(props.audioClip.senderUserId);
+  const userConvoAssoc = userConvosMap.get(props.convoId);
+
+  const [audioDuration, setAudioDuration] = useState<number>();
+
+  const loadedMetadata = (data) => {
+    console.log(data);
+
+    // set duration
+  };
+
+  const audio = new Audio(props.audioClip.audioDataUrl);
+  audio.onloadedmetadata = loadedMetadata;
+
+  const playAudioClip = () => {
+    toast(`${audioClipUser?.firstName} speaking...`);
+
+    audio.play();
+  };
+
+  return (
+    <span
+      onClick={playAudioClip}
+      key={props.index}
+      className={`hover:cursor-pointer flex flex-row items-center 
+                  p-5 h-[5rem] shadow shrink-0 last:animate-pulse last:bg-orange-200
+                 ${
+                   props.index % 2 == 1 &&
+                   "translate-y-[4.75rem] border-t-4 border-t-teal-600"
+                 } ${props.index % 2 == 0 && "border-b-4 border-b-teal-600"} ${
+        props.audioClip.createdDate <
+        (userConvoAssoc?.lastInteractionDate || yesterday)
+          ? "bg-slate-100 border"
+          : "bg-sky-100 "
+      }`}
+      style={{
+        minWidth: "max-content",
+        width: `100px`,
+      }}
+    >
+      <MasterAvatarGroupWithUserFetch
+        showCurrUser={true}
+        listOfUserIds={audioClipUser?.id ? [audioClipUser?.id] : []}
+      />
+
+      <span className="flex flex-col ml-2">
+        <span className="text-slate-500 font-semibold">
+          {audioClipUser?.firstName + " " + audioClipUser?.lastName}
+        </span>
+        <span className="text-slate-400 text-xs">
+          {moment(props.audioClip.createdDate.toDate()).fromNow()}
+        </span>
+      </span>
+    </span>
+  );
+}