4662bcdc7d
E.g. TIFF will now be handled as a generic file, not image, even though it has mime prefix "image/"
70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<template>
|
|
<v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker():null" v-if="isRoomAvatarLoaded">
|
|
<AuthedImage v-if="roomAvatar" :src="roomAvatar"/>
|
|
<span v-else class="text-white headline">{{
|
|
roomName.substring(0, 1).toUpperCase()
|
|
}}</span>
|
|
<input
|
|
id="room-avatar-picker"
|
|
ref="roomAvatar"
|
|
type="file"
|
|
name="roomAvatar"
|
|
@change="handleRoomPickedAvatar($event)"
|
|
:accept="supportedImageTypes"
|
|
class="d-none"
|
|
/>
|
|
</v-avatar>
|
|
<v-progress-circular
|
|
:rotate="360"
|
|
v-else
|
|
:width="3"
|
|
:model-value="loadValue"
|
|
color="primary"
|
|
>
|
|
{{ loadValue }}
|
|
</v-progress-circular>
|
|
</template>
|
|
|
|
<script>
|
|
import util from "../plugins/utils";
|
|
import roomInfoMixin from "./roomInfoMixin";
|
|
import AuthedImage from "./AuthedImage.vue";
|
|
|
|
export default {
|
|
name: "RoomAvatarPicker",
|
|
mixins: [roomInfoMixin],
|
|
components: { AuthedImage },
|
|
data() {
|
|
return {
|
|
isRoomAvatarLoaded: true,
|
|
loadValue: 0
|
|
};
|
|
},
|
|
methods: {
|
|
showRoomAvatarPicker() {
|
|
this.$refs.roomAvatar.click();
|
|
},
|
|
|
|
setRoomAvatar(file) {
|
|
const self = this;
|
|
this.isRoomAvatarLoaded = false;
|
|
return util.setRoomAvatar(
|
|
this.$matrix.matrixClient,
|
|
this.room.roomId,
|
|
file,
|
|
function (progress) {
|
|
self.loadValue = Math.round(progress.loaded/progress.total * 100);
|
|
if(progress.loaded === progress.total) {
|
|
self.isRoomAvatarLoaded = true;
|
|
}
|
|
}
|
|
)
|
|
},
|
|
handleRoomPickedAvatar(event) {
|
|
if (event.target.files && event.target.files[0]) {
|
|
this.setRoomAvatar(event.target.files[0]);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|