whole queue working with the timeline

packages/web/components/Audio/AudioHandler.tsx

@@ -43,8 +43,6 @@ export default function AudioHandler() {
   const [audioQueue, setAudioQueue] = useRecoilState(audioQueueAtom);
 
   function onEndedPlaying(e) {
-    toast.success("finished playing");
-
     // remove from queue and the queue manager will handle the rest
     setAudioQueue((prevQueue) => {
       const newQueue: AudioClip[] = [...prevQueue];

packages/web/components/Conversations/TimelineAudioClip.tsx

@@ -17,6 +17,7 @@ export default function TimelineAudioClip(props: {
   index: number;
   audioClip: AudioClip;
   convoId: string;
+  audioClipsToPlay: AudioClip[];
 }) {
   const relContactsMap = useRecoilValue(allRelevantContactsAtom);
   const userConvosMap = useRecoilValue(allUsersConversationsAtom);
@@ -39,8 +40,9 @@ export default function TimelineAudioClip(props: {
   // audio.onloadedmetadata = loadedMetadata;
 
   const playAudioClip = () => {
+    // current audioclip included in the array of audioclipstoplay
     setAudioQueue((prevQueue) => {
-      return [...prevQueue, props.audioClip];
+      return [...prevQueue, ...props.audioClipsToPlay];
     });
   };
 

packages/web/components/MainTabsOrPages/ViewConvo.tsx

@@ -277,12 +277,14 @@ export default function ViewConvo(props: { conversationId: string }) {
           {/* have one row, but just translate it along y downward to put it in it's own place */}
           <span className="flex flex-row flex-nowrap pb-[10rem] py-[5rem] overflow-auto min-h-max">
             {audioClips.reverse().map((audClip, index) => {
+              const restAudioClips = audioClips.slice(index);
               return (
                 <TimelineAudioClip
                   key={audClip.id}
                   index={index}
                   audioClip={audClip}
                   convoId={props.conversationId}
+                  audioClipsToPlay={restAudioClips}
                 />
               );
             })}