making it nicer

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;

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}

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);