47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<template>
|
|
<message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
|
|
<div class="bubble image-bubble">
|
|
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" :cover="cover" :contain="contain" />
|
|
</div>
|
|
</message-incoming>
|
|
</template>
|
|
|
|
<script>
|
|
import MessageIncoming from "../MessageIncoming.vue";
|
|
|
|
export default {
|
|
name: "MessageIncomingImageExport",
|
|
extends: MessageIncoming,
|
|
components: { MessageIncoming },
|
|
data() {
|
|
return {
|
|
src: null,
|
|
cover: true,
|
|
contain: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
const info = this.event.getContent().info;
|
|
// JPEGs use cover, PNG and GIF ect contain. This is because PNG and GIF are expected to
|
|
// be stickers and small emoji type things.
|
|
if (info && info.mimetype && info.mimetype.startsWith("image/jp")) {
|
|
this.cover = true;
|
|
this.contain = false;
|
|
} else {
|
|
this.cover = false;
|
|
this.contain = true;
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
if (this.src) {
|
|
const objectUrl = this.src;
|
|
this.src = null;
|
|
URL.revokeObjectURL(objectUrl);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "@/assets/css/chat.scss";
|
|
</style>
|