<template>
  <div class="chat--message-audio">
    <div class="chat--message-audio-content">
      <!-- <button value="Play" v-on:click="play()">play</button> -->
      <audio
        ref="audio"
        controls>
          <source :src="attachmentUrl" />
        </audio>
    </div>
   </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Message, Attachment } from './type';
import ChatEngine from './ChatEngine';

@Component
export default class MessageAudio extends Vue {
  @Prop() private message!: Message;
    // The Chat engine
  @Prop() private chatEngine!: ChatEngine;

  private audioURL: string | null = null;

  public mounted() {
    console.log('[AudioMessage] play', this.message);
  }

  // public play() {
  //     if (!this.message || !this.message.attachment || this.message.attachment.length <= 0) { return; }

  //     // Could be a new message with no data URL
  //     const attach = this.message.attachment[0];
  //     if (this.audioURL == null) {
  //       this.audioURL = this.attachmentUrl;
  //     }

  //     console.log(attach.blob, this.audioURL);
  //     // chunks = [];
  //     (this.$refs.audio as HTMLAudioElement).src = this.audioURL;
  // }

  get attachmentUrl() {
    // RULE: New message don't have a 'path' (len 0) but they have an objectUrl
    if (this.message.attachment && this.message.attachment.length > 0) {
      return this.chatEngine.urlForAttachment( this.message.attachment[0] );
    }
    return '';
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
