Resolve "for chat mode, auto-play next audio message"

src/components/messages/AudioPlayer.vue

@@ -1,25 +1,13 @@
 <template>
   <div class="audio-player d-flex flex-row align-center">
-    <audio ref="player" :src="src" @durationchange="updateDuration">
-      <slot></slot>
-    </audio>
-    <v-btn v-if="playing" id="btn-pause" @click.stop="pause" icon
-      ><v-icon size="20">pause</v-icon></v-btn
-    >
-    <v-btn v-else id="btn-play" @click.stop="play" icon
-      ><v-icon size="20">play_arrow</v-icon></v-btn
-    >
+    <v-progress-circular v-if="info.loading" @click.stop="pause" :value="info.loadPercent" size="24" width="2" style="margin:6px"></v-progress-circular>
+    <v-btn v-else-if="info.playing" id="btn-pause" @click.stop="pause" icon><v-icon size="20">pause</v-icon></v-btn>
+    <v-btn v-else id="btn-play" @click.stop="play" icon><v-icon size="20">play_arrow</v-icon></v-btn>
     <div class="play-time">
       {{ currentTime }} / {{ totalTime }}
     </div>
-    <v-slider
-      color="currentColor"
-      track-color="#cccccc"
-      class="play-progress"
-      v-model="playheadPercent"
-      min="0"
-      max="100"
-    />
+    <v-slider @change="seeked" :disabled="!info.url" color="currentColor" track-color="#cccccc" class="play-progress" :value="info.playPercent" min="0"
+      max="100" />
   </div>
 </template>
 
@@ -28,8 +16,8 @@ import util from "../../plugins/utils";
 
 export default {
   props: {
-    src: {
-      type: String,
+    event: {
+      type: Object,
       default: function () {
         return null;
       },
@@ -37,86 +25,37 @@ export default {
   },
   data() {
     return {
-      player: null,
-      duration: 0,
-      playPercent: 0,
-      playTime: 0,
-      playing: false,
+      info: this.install(),
     };
   },
-  mounted() {
-    this.$root.$on('playback-start', this.onPlaybackStart);
-    this.player = this.$refs.player;
-    this.player.addEventListener("timeupdate", this.updateProgressBar);
-    this.player.addEventListener("play", () => {
-      this.playing = true;
-    });
-    this.player.addEventListener("pause", () => {
-      this.playing = false;
-    });
-    this.player.addEventListener("ended", () => {
-      this.pause();
-      this.playing = false;
-      this.$emit("playback-ended");
-    });
-  },
   beforeDestroy() {
-    this.$root.$off('playback-start', this.onPlaybackStart);
+    this.$audioPlayer.removeListener(this._uid);
   },
   computed: {
     currentTime() {
-      return util.formatDuration(this.playTime);
+      return util.formatDuration(this.info.currentTime);
     },
     totalTime() {
-      return util.formatDuration(this.duration);
-    },
-    playheadPercent: {
-      get: function () {
-        return this.playPercent;
-      },
-      set: function (percent) {
-        if (this.player.src) {
-          this.playPercent = percent;
-          this.player.currentTime = (percent / 100) * this.player.duration;
-        }
-      },
+      return util.formatDuration(this.info.duration);
     },
   },
   methods: {
+    install() {
+      return this.$audioPlayer.addListener(this._uid, this.event);
+    },
     play() {
-      if (this.player.src) {
-        this.$root.$emit("playback-start", this);
-        if (this.player.paused) {
-          this.player.play();
-        } else if (this.player.ended) {
-          // restart
-          this.player.currentTime = 0;
-          this.player.play();
-        }
-      }
+      this.$audioPlayer.play(this.event);
     },
     pause() {
-      if (this.player.src) {
-        this.player.pause();
-      }
-    },
-    updateProgressBar() {
-      if (this.player.duration > 0) {
-        this.playPercent = Math.floor(
-          (100 / this.player.duration) * this.player.currentTime
-        );
-      } else {
-        this.playPercent = 0;
-      }
-      this.playTime = 1000 * this.player.currentTime;
-    },
-    updateDuration() {
-      this.duration = 1000 * this.player.duration;
+      this.$audioPlayer.pause(this.event);
     },
     onPlaybackStart(item) {
-      if (item != this && this.playing) {
+      if (item != this.src && this.info.playing) {
         this.pause();
       }
+    },
+    seeked(percent) {
+      this.$audioPlayer.seek(this.event, percent);
     }
   },
 };

src/components/messages/MessageIncomingAudio.vue

@@ -1,20 +1,18 @@
 <template>
   <message-incoming v-bind="{...$props, ...$attrs}" v-on="$listeners">
     <div class="bubble audio-bubble">
-      <audio-player :src="src">{{ $t('fallbacks.audio_file')}}</audio-player>
+      <audio-player :event="event">{{ $t('fallbacks.audio_file')}}</audio-player>
     </div>
   </message-incoming>
 </template>
 
 <script>
-import attachmentMixin from "./attachmentMixin";
 import MessageIncoming from './MessageIncoming.vue';
 import AudioPlayer from './AudioPlayer.vue';
 
 export default {
   extends: MessageIncoming,
-  mixins: [attachmentMixin],
-  components: { MessageIncoming, AudioPlayer }
+  components: { MessageIncoming, AudioPlayer },
 };
 </script>
 

src/components/messages/MessageOutgoingAudio.vue

@@ -1,20 +1,18 @@
 <template>
   <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
     <div class="audio-bubble">
-      <audio-player :src="src">{{ $t('fallbacks.audio_file')}}</audio-player>
+      <audio-player :event="event">{{ $t('fallbacks.audio_file')}}</audio-player>
     </div>
   </message-outgoing>
 </template>
 
 <script>
-import attachmentMixin from "./attachmentMixin";
 import AudioPlayer from './AudioPlayer.vue';
 import MessageOutgoing from "./MessageOutgoing.vue";
 
 export default {
   extends: MessageOutgoing,
   components: { MessageOutgoing, AudioPlayer },
-  mixins: [attachmentMixin],
 };
 </script>