whole queue working with the timeline

2022-02-06 13:25:58 -08:00
parent 19a706fd93
commit 6fab106512
3 changed files with 5 additions and 3 deletions
@@ -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];
@@ -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];
    });
  };

@@ -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}
                />
              );
            })}