butter/keanu-weblite
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Decode incoming images

Browse source
This commit is contained in:
N-Pex 2020-11-19 17:08:58 +01:00
parent c4230b8abc
commit dd3efe0d61
8 changed files with 15923 additions and 1381 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Chat.vue
View file

@ -6,7 +6,7 @@
style="overflow-x: hidden; overflow-y: auto"
v-on:scroll="onScroll"
>
<div v-for="event in events" :key="event.eventId">
<div v-for="event in events" :key="event.getId()">
<component
:is="componentForEvent(event)"
:room="room"

43
src/components/messages/MessageIncomingImage.vue
View file

@ -2,6 +2,9 @@
<div>
<div class="messageIn">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="bubble image-bubble">
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
</div>
<v-avatar class="avatar" size="40" color="grey">
<img
v-if="messageEventAvatar(event)"
@ -11,10 +14,6 @@
messageEventDisplayName(event).substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
<div class="bubble">
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" contain />
</div>
</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
@ -24,6 +23,8 @@
<script>
import messageMixin from "./messageMixin";
//import axios from 'axios';
import util from "../../plugins/utils";
export default {
mixins: [messageMixin],
@ -33,23 +34,23 @@ export default {
};
},
mounted() {
// const width = this.$refs.image.$el.clientWidth;
// const height = (width * 9) / 16;
const content = this.event.getContent();
if (
content &&
content.info &&
content.info.thumbnail_file &&
content.info.thumbnail_file.url
) {
this.src = this.$matrix.matrixClient.mxcUrlToHttp(
content.info.thumbnail_file.url,
content.info.w,
content.info.h,
"scale",
true
);
console.log("SRC set to: ", this.src);
console.log("Mounted with event:", JSON.stringify(this.event.getContent()));
const width = this.$refs.image.$el.clientWidth;
const height = (width * 9) / 16;
util
.getThumbnail(this.$matrix.matrixClient, this.event, width, height)
.then((url) => {
this.src = url;
})
.catch((err) => {
console.log("Failed to fetch thumbnail: ", err);
});
},
beforeDestroy() {
if (this.src) {
const objectUrl = this.src;
this.src = null;
URL.revokeObjectURL(objectUrl);
}
},
};

11
src/components/messages/MessageOutgoingImage.vue
View file

@ -2,8 +2,8 @@
<div>
<div class="messageOut">
<div class="sender">{{ "You" }}</div>
<div class="bubble">
<v-img :aspect-ratio="16/9" ref="image" :src="src" contain />
<div class="bubble image-bubble">
<v-img :aspect-ratio="16/9" ref="image" :src="src" cover />
</div>
<div class="status">{{ event.status }}</div>
</div>
@ -27,6 +27,13 @@ export default {
const width = this.$refs.image.$el.clientWidth;
const height = (width * 9) / 16;
this.src = this.$matrix.matrixClient.mxcUrlToHttp(this.event.getContent().url, width, height, 'scale', false);
},
beforeDestroy() {
if (this.src) {
const objectUrl = this.src;
this.src = null;
URL.revokeObjectURL(objectUrl);
}
}
};
</script>