From f2d909ac1346527b8b13f2ebd518f963fc1426e7 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Fri, 11 Feb 2022 19:09:43 -0800
Subject: [PATCH] making it nicer

---
 .../web/components/Audio/AudioHandler.tsx     |  5 +++
 .../Conversations/TimelineAudioClip.tsx       | 32 -------------------
 .../components/MainTabsOrPages/ViewConvo.tsx  |  2 +-
 3 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/packages/web/components/Audio/AudioHandler.tsx b/packages/web/components/Audio/AudioHandler.tsx
index d99107d..bc0a584 100644
--- a/packages/web/components/Audio/AudioHandler.tsx
+++ b/packages/web/components/Audio/AudioHandler.tsx
@@ -213,6 +213,11 @@ export default function AudioHandler() {
   };
 
   const playLastClip = () => {
+    if (audioQueue.length > 0) {
+      setAudioQueue([]);
+      return;
+    }
+
     if (!selectedConvoId) {
       toast.error("select a conversation before playing");
       return;
diff --git a/packages/web/components/Conversations/TimelineAudioClip.tsx b/packages/web/components/Conversations/TimelineAudioClip.tsx
index 83090f5..2819797 100644
--- a/packages/web/components/Conversations/TimelineAudioClip.tsx
+++ b/packages/web/components/Conversations/TimelineAudioClip.tsx
@@ -59,38 +59,6 @@ export default function TimelineAudioClip(props: {
     customClasses = "bg-sky-100";
   }
 
-  return (
-    <span
-      onClick={playAudioClip}
-      className={`flex flex-row px-5 items-start group ${customClasses}`}
-    >
-      <span className="flex flex-col border-dashed border-l-2 h-[5rem] border-l-slate-500">
-        <span className="-translate-x-5 z-10">
-          <MasterAvatarGroupWithUserFetch
-            showCurrUser={true}
-            listOfUserIds={audioClipUser?.id ? [audioClipUser?.id] : []}
-            size={UserAvatarSizes.large}
-          />
-        </span>
-      </span>
-
-      <span className="flex flex-col ml-2 mr-10">
-        <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>
-
-      <Tooltip title={"Play from here."}>
-        <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 group-hover:visible invisible">
-          <FaPlay className="ml-auto text-lg text-emerald-500" />
-        </span>
-      </Tooltip>
-    </span>
-  );
-
   return (
     <span
       onClick={playAudioClip}
diff --git a/packages/web/components/MainTabsOrPages/ViewConvo.tsx b/packages/web/components/MainTabsOrPages/ViewConvo.tsx
index 04dcb7a..274020e 100644
--- a/packages/web/components/MainTabsOrPages/ViewConvo.tsx
+++ b/packages/web/components/MainTabsOrPages/ViewConvo.tsx
@@ -423,7 +423,7 @@ export default function ViewConvo(props: { conversationId: string }) {
               Conversation
             </span>
 
-            <span className="flex flex-col flex-nowrap pb-[10rem] mt-5">
+            <span className="flex flex-ro flex-nowrap pb-[10rem] mt-5">
               {audioClips?.length > 0 ? (
                 audioClips.reverse().map((audClip, index) => {
                   const restAudioClips = audioClips.slice(index);