<template>
    <img :src="image_data" :title="owner + ':' + src"/>
</template>

<style scoped>
img {
    max-width: 190px;
    height: 107px;
    object-fit: contain;
}
</style>

<script>
import {mapActions, mapGetters} from "vuex";

export default {
    name: "AuthenticatedImage",
    props: {
        src: {
            type: String,
            required: true
        },
        owner: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            image_data: "",
            servers: []
        }
    },
    computed: {
        ...mapGetters(["signAuth"])
    },
    methods: {
        ...mapActions(["getFriendServers"])
    },
    async mounted() {
        try {
            this.servers = await this.getFriendServers({username: this.owner});
            const response = await this.servers.getRaw(this.signAuth, this.src);
            const mime_type = response.headers.get("content-type");
            const base64 = btoa(new Uint8Array(await response.arrayBuffer())
                .reduce((data, byte) => data + String.fromCharCode(byte), ""));
            this.image_data = "data:" + mime_type + ";base64," + base64;
        } catch (e) {
            console.log(e);
        }
    }
}
</script>