<template>
    <div class="audio-message-container" :style="widthStyle">
        <!--    <i class="icon-ion-android-volume-up"></i>-->
        <!--    <span> {{ duration }} </span>-->

        <audio preload="auto" controls controlsList="nodownload" @ended="onAudioComplete">
            <source :src="remotePath" type="audio/mp4"/>
        </audio>
    </div>
</template>

<script>
import Message from "../../../../../wfc/messages/message";
import Config from "../../../../../config";
import wfc from "../../../../../wfc/client/wfc";
import MessageStatus from "../../../../../wfc/messages/messageStatus";

export default {
    name: "AudioMessageContentView",
    props: {
        message: {
            type: Message,
            required: true,
        },

        data() {
            return {}
        },

        widthStyle() {
            return {
                width: '10px',
            }
        },
    },
    mounted() {
    },

    methods: {
        onAudioComplete() {
            if (this.message.status === MessageStatus.Unread){
                wfc.updateMessageStatus(this.message.messageId, MessageStatus.Played);
            }
        }
    },
    computed: {
        voice() {
            return this.message.messageContent;
        },

        remotePath() {
            let voice = this.message.messageContent;
            return Config.AMR_TO_MP3_SERVER_ADDRESS + voice.remotePath;
        },

        duration() {
            let voice = this.message.messageContent;
            let times = voice.duration * 1000;
            let seconds = 0;

            if (times <= 60 * 1000) {
                seconds = Math.ceil(times / 1000);
            } else {
                seconds = 60;
            }
            return seconds;
        },
    }
}
</script>

<style lang="css" scoped>

.audio-message-container {
    margin: 0 10px;
}

.audio-message-container audio {
    outline: none;
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
}

</style>
