From 3853f21f90bf9ae073a0e98e9c295bdf525fc0d5 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 17 Feb 2023 17:20:26 +0100
Subject: [PATCH] Fix playback bug on first load

Also, don't replay our own messages when just sent.
---
 src/components/AudioLayout.vue | 47 ++++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/AudioLayout.vue b/src/components/AudioLayout.vue
index ff47abd..a3f145c 100644
--- a/src/components/AudioLayout.vue
+++ b/src/components/AudioLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="{...$props, ...$attrs}" v-on="$listeners" class="messageIn">
+  <div v-bind="{ ...$props, ...$attrs }" v-on="$listeners" class="messageIn">
     <div class="load-earlier clickable" @click="loadPrevious">
       <v-icon color="white" size="28">expand_less</v-icon>
     </div>
@@ -11,7 +11,7 @@
         @click.stop="otherAvatarClicked($refs.avatar.$el)">
         <img v-if="messageEventAvatar(currentAudioEvent)" :src="messageEventAvatar(currentAudioEvent)" />
         <span v-else class="white--text headline">{{
-        eventSenderDisplayName(currentAudioEvent).substring(0, 1).toUpperCase()
+          eventSenderDisplayName(currentAudioEvent).substring(0, 1).toUpperCase()
         }}</span>
       </v-avatar>
     </div>
@@ -25,7 +25,7 @@
       {{ currentTime }} / {{ totalTime }}
     </div>
     <audio ref="player" :src="src" @durationchange="updateDuration">
-      {{ $t('fallbacks.audio_file')}}
+      {{ $t('fallbacks.audio_file') }}
     </audio>
     <div v-if="currentAudioEvent" class="auto-audio-player">
       <v-btn id="btn-rewind" @click.stop="rewind" icon>
@@ -98,8 +98,26 @@ export default {
     document.body.classList.add("dark");
     this.$root.$on('playback-start', this.onPlaybackStart);
     this.player = this.$refs.player;
+    this.player.autoplay = false;
     this.player.addEventListener("timeupdate", this.updateProgressBar);
     this.player.addEventListener("play", () => {
+      if (!this.analyser) {
+
+        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        let audioSource = null;
+        if (audioCtx) {
+          audioSource = audioCtx.createMediaElementSource(this.player);
+          this.analyser = audioCtx.createAnalyser();
+          audioSource.connect(this.analyser);
+          this.analyser.connect(audioCtx.destination);
+
+          this.analyser.fftSize = 128;
+          const bufferLength = this.analyser.frequencyBinCount;
+          this.analyzerDataArray = new Uint8Array(bufferLength);
+        }
+      }
+
+
       this.playing = true;
       this.updateVisualization();
       if (this.currentAudioEvent) {
@@ -116,19 +134,6 @@ export default {
       this.clearVisualization();
       this.onPlaybackEnd();
     });
-
-    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    let audioSource = null;
-    if (audioCtx) {
-      audioSource = audioCtx.createMediaElementSource(this.player);
-      this.analyser = audioCtx.createAnalyser();
-      audioSource.connect(this.analyser);
-      this.analyser.connect(audioCtx.destination);
-
-      this.analyser.fftSize = 128;
-      const bufferLength = this.analyser.frequencyBinCount;
-      this.analyzerDataArray = new Uint8Array(bufferLength);
-    }
   },
   beforeDestroy() {
     document.body.classList.remove("dark");
@@ -204,7 +209,17 @@ export default {
           return;
         }
         this.src = null;
+        const autoPlayWasSet = this.autoPlayNextEvent;
         this.autoPlayNextEvent = false;
+
+        if (value.getSender() == this.$matrix.currentUserId) {
+          // Sent by us. Don't autoplay if we just sent this (i.e. it is ahead of our read marker)
+          if (this.room && !this.room.getReceiptsForEvent(value).includes(value.getSender())) {
+            this.player.autoplay = false;
+            this.autoPlayNextEvent = autoPlayWasSet;
+          }
+        }
+
         this.loadAudioAttachmentSource();
       }
     },