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

Use vite as bundler

Browse source
This commit is contained in:
N-Pex 2025-03-31 16:33:54 +02:00
parent 16dc5df9e5
commit b6f7f75fdd
44 changed files with 4308 additions and 15961 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/AudioLayout.vue
View file

@ -8,7 +8,7 @@
<div class="typing-users">
<transition-group name="list" tag="div">
<v-avatar v-for="(member) in recordingMembersExceptMe" :key="member.userId" class="typing-user" size="32" color="grey">
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<AuthedImage v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<span v-else class="white--text headline">{{
member.name.substring(0, 1).toUpperCase()
}}</span>
@ -33,7 +33,7 @@
<div class="typing-users">
<transition-group name="list" tag="div">
<v-avatar v-for="reaction in reactions" :key="reaction.member.userId" class="typing-user" size="32" color="grey">
<img v-if="memberAvatar(reaction.member)" :src="memberAvatar(reaction.member)" />
<AuthedImage v-if="memberAvatar(reaction.member)" :src="memberAvatar(reaction.member)" />
<span v-else class="white--text headline">{{
reaction.member.name.substring(0, 1).toUpperCase()
}}</span>
@ -85,10 +85,12 @@
<script>
import messageMixin from "./messages/messageMixin";
import util from "../plugins/utils";
import AuthedImage from "./AuthedImage.vue";
import clapping from "@/assets/sounds/clapping.mp3";
export default {
mixins: [messageMixin],
components: {},
components: { AuthedImage },
props: {
autoplay: {
type: Boolean,
@ -270,7 +272,7 @@ export default {
},
audioPlaybackReaction(reaction) {
// Play sound!
const audio = new Audio(require("@/assets/sounds/clapping.mp3"));
const audio = new Audio(clapping);
audio.volume = 0.6;
audio.play();
@ -407,7 +409,9 @@ export default {
40,
40,
"scale",
true
true,
false,
this.$matrix.useAuthedMedia,
);
}
return null;

56
src/components/AuthedImage.vue Normal file
View file

@ -0,0 +1,56 @@
<template>
<img v-if="imageSrc" :src="imageSrc" />
</template>
<script>
import axios from 'axios';
export default {
name: "AuthedImage",
props: {
src: {
type: String,
default: function () {
return null;
},
},
},
mounted() {
if (this.src) {
console.error("GOT URL", this.src);
if (this.$matrix.useAuthedMedia) {
axios
.get(this.src, { responseType: "blob", headers: {
Authorization: `Bearer ${this.$matrix.matrixClient.getAccessToken()}`,
}})
.then((response) => {
this.imageSrc = URL.createObjectURL(response.data);
})
.catch((err) => {
console.log("Download error: ", err);
});
} else {
this.imageSrc = this.src;
}
}
},
destroyed() {
if (this.imageSrc && this.src != this.imageSrc) {
const url = this.imageSrc;
this.imageSrc = null;
URL.revokeObjectURL(url);
}
},
data() {
return {
imageSrc: null
}
},
methods: {
}
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

28
src/components/Chat.vue
View file

@ -4,11 +4,13 @@
v-on:header-click="onHeaderClick"
v-on:view-room-details="viewRoomDetails"
v-on:purge="showPurgeConfirmation = true"
v-on:download="downloadingChat = true"
v-if="!useFileModeNonAdmin && $matrix.isDirectRoom(room)" />
<ChatHeader class="chat-header flex-grow-0 flex-shrink-0"
v-on:header-click="onHeaderClick"
v-on:view-room-details="viewRoomDetails"
v-on:purge="showPurgeConfirmation = true"
v-on:download="downloadingChat = true"
v-else-if="!useFileModeNonAdmin" />
<AudioLayout ref="chatContainer" class="auto-audio-player-root" v-if="useVoiceMode" :room="room"
:events="events" :autoplay="!showRecorder"
@ -311,7 +313,7 @@
</div>
<MessageOperationsBottomSheet ref="messageOperationsSheet">
<VEmojiPicker ref="emojiPicker" @select="emojiSelected" :i18n="i18nEmoji"/>
<!-- <VEmojiPicker ref="emojiPicker" @select="emojiSelected" :i18n="i18nEmoji"/> -->
</MessageOperationsBottomSheet>
<StickerPickerBottomSheet ref="stickerPickerSheet" v-on:selectSticker="sendSticker" />
@ -354,6 +356,8 @@
<!-- PURGE ROOM POPUP -->
<PurgeRoomDialog :show="showPurgeConfirmation" :room="room" @close="showPurgeConfirmation = false" />
<RoomExport :room="room" v-if="downloadingChat" v-on:close="downloadingChat = false" />
<!-- Heart animation -->
<div :class="['heart-wrapper', { 'is-active': heartAnimation }]" :style="hearAnimationPosition">
<div :class="['heart', { 'is-active': heartAnimation }]" />
@ -390,10 +394,13 @@ import roomMembersMixin from "./roomMembersMixin";
import PurgeRoomDialog from "../components/PurgeRoomDialog";
import MessageErrorHandler from "./MessageErrorHandler";
import MessageOperationsChannel from './messages/channel/MessageOperationsChannel.vue';
import sizeOf from "image-size";
import dataUriToBuffer from "data-uri-to-buffer";
import prettyBytes from "pretty-bytes";
import RoomExport from "./RoomExport.vue";
//import { VEmojiPicker } from 'v-emoji-picker';
const sizeOf = require("image-size");
const dataUriToBuffer = require("data-uri-to-buffer");
const prettyBytes = require("pretty-bytes");
const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */
const WINDOW_BUFFER_SIZE = 0.3; /** Relative window height of when we start paginating. Always keep this much loaded before and after our scroll position! */
@ -445,7 +452,9 @@ export default {
PurgeRoomDialog,
WelcomeHeaderChannelUser,
MessageErrorHandler,
MessageOperationsChannel
MessageOperationsChannel,
RoomExport,
//VEmojiPicker
},
data() {
@ -540,7 +549,8 @@ export default {
top: 0,
left: 0
},
reverseOrder: false
reverseOrder: false,
downloadingChat: false
};
},
@ -1748,7 +1758,7 @@ export default {
setReplyToImage(event) {
util
.getThumbnail(this.$matrix.matrixClient, event, this.$config)
.getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, event, this.$config)
.then((url) => {
this.replyToImg = url;
})
@ -1796,9 +1806,9 @@ export default {
download(event) {
if ((event.isThreadRoot || event.isMxThread) && this.timelineSet) {
const children = this.timelineSet.relations.getAllChildEventsForEvent(event.getId()).filter(e => util.downloadableTypes().includes(e.getContent().msgtype));
children.forEach(child => util.download(this.$matrix.matrixClient, child));
children.forEach(child => util.download(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, child));
} else {
util.download(this.$matrix.matrixClient, event);
util.download(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, event);
}
},

18
src/components/ChatHeader.vue
View file

@ -6,7 +6,7 @@
class="chat-header-members text-start ma-0 pa-0"
>
<v-avatar size="48" class="clickable me-2 chat-header-avatar" color="grey" @click.stop="onAvatarClicked">
<v-img v-if="roomAvatar" :src="roomAvatar" />
<AuthedImage v-if="roomAvatar" :src="roomAvatar" />
<span v-else class="white--text headline">{{
room.name.substring(0, 1).toUpperCase()
}}</span>
@ -33,7 +33,7 @@
<v-col cols="auto" class="text-end ma-0 pa-0 ms-1">
<v-avatar :class="{ 'avatar-32': true, 'clickable': true, 'popup-open': showProfileInfo }" size="26"
color="#e0e0e0" @click.stop="showProfileInfo = true">
<img v-if="userAvatar" :src="userAvatar" />
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
</v-avatar>
</v-col>
@ -65,8 +65,6 @@
<MoreMenuPopup :show="showMoreMenu" :menuItems="moreMenuItems" @close="showMoreMenu = false"
v-on:leave="showLeaveConfirmation = true" />
<RoomExport :room="room" v-if="downloadingChat" v-on:close="downloadingChat = false" />
</v-container>
</template>
@ -75,8 +73,7 @@ import LeaveRoomDialog from "../components/LeaveRoomDialog";
import ProfileInfoPopup from "../components/ProfileInfoPopup";
import MoreMenuPopup from "../components/MoreMenuPopup";
import profileInfoMixin from "../components/profileInfoMixin";
import RoomExport from "../components/RoomExport";
import AuthedImage from "./AuthedImage.vue";
import roomInfoMixin from "./roomInfoMixin";
export default {
@ -86,7 +83,7 @@ export default {
LeaveRoomDialog,
ProfileInfoPopup,
MoreMenuPopup,
RoomExport
AuthedImage
},
data() {
return {
@ -94,7 +91,6 @@ export default {
showLeaveConfirmation: false,
showProfileInfo: false,
showMoreMenu: false,
downloadingChat: false,
showMissedItemsInfo: false,
/** Timer for showing the "missed items" hint */
@ -142,7 +138,7 @@ export default {
if (this.userCanExportChat) {
items.push({
icon: '$vuetify.icons.ic_download', text: this.$t('room_info.download_chat'), handler: () => {
this.downloadingChat = true;
this.$emit("download", { event: this.event });
}
});
}
@ -171,7 +167,9 @@ export default {
40,
40,
"scale",
true
true,
false,
this.$matrix.useAuthedMedia
);
}
}

9
src/components/ChatHeaderPrivate.vue
View file

@ -37,7 +37,7 @@
<v-col v-if="$matrix.joinedRooms.length > 1" cols="auto" class="text-end ma-0 pa-0 ms-1">
<v-avatar :class="{ 'avatar-32': true, 'clickable': true, 'popup-open': showProfileInfo }" size="26"
color="#e0e0e0" @click.stop="showProfileInfo = true">
<img v-if="userAvatar" :src="userAvatar" />
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
</v-avatar>
</v-col>
@ -75,8 +75,6 @@
<MoreMenuPopup :show="showMoreMenu" :menuItems="moreMenuItems" @close="showMoreMenu = false"
v-on:leave="showLeaveConfirmation = true" />
<RoomExport :room="room" v-if="downloadingChat" v-on:close="downloadingChat = false" />
</v-container>
</template>
@ -84,8 +82,7 @@
import LeaveRoomDialog from "../components/LeaveRoomDialog";
import ProfileInfoPopup from "../components/ProfileInfoPopup";
import MoreMenuPopup from "../components/MoreMenuPopup";
import RoomExport from "../components/RoomExport";
import AuthedImage from "./AuthedImage.vue";
import ChatHeader from "./ChatHeader.vue";
export default {
@ -95,7 +92,7 @@ export default {
LeaveRoomDialog,
ProfileInfoPopup,
MoreMenuPopup,
RoomExport
AuthedImage
},
};
</script>

8
src/components/Invite.vue
View file

@ -38,7 +38,7 @@
>
<template v-slot:default="{ active }">
<v-list-item-avatar color="grey">
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<AuthedImage v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<span v-else class="white--text headline">{{
member.name.substring(0, 1).toUpperCase()
}}</span>
@ -64,9 +64,11 @@
<script>
import util from "../plugins/utils";
import AuthedImage from "./AuthedImage.vue";
export default {
name: "Invite",
comments: { AuthedImage },
data() {
return {
status: "",
@ -155,7 +157,9 @@ export default {
40,
40,
"scale",
true
true,
false,
this.$matrix.useAuthedMedia
);
}
return null;

10
src/components/Join.vue
View file

@ -4,7 +4,7 @@
<div>
<div class="text-center">
<v-avatar class="join-avatar">
<v-img v-if="roomAvatar" :src="roomAvatar" />
<AuthedImage v-if="roomAvatar" :src="roomAvatar" />
<span v-else class="white--text headline">
{{ roomName.substring(0, 1).toUpperCase() }}
</span>
@ -50,7 +50,7 @@
{{ $t("join.joining_as") }}
<div class="d-inline-block">
<v-avatar color="#e0e0e0">
<v-img v-if="userAvatar" :src="userAvatar" />
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text headline">{{ userAvatarLetter }}</span>
</v-avatar>
</div>
@ -134,13 +134,15 @@ import LanguageMixin from "./languageMixin";
import rememberMeMixin from "./rememberMeMixin";
import logoMixin from "./logoMixin";
import SelectLanguageDialog from "./SelectLanguageDialog.vue";
import AuthedImage from "./AuthedImage.vue";
export default {
name: "Join",
mixins: [LanguageMixin, rememberMeMixin, logoMixin],
components: {
SelectLanguageDialog,
InteractiveAuth
InteractiveAuth,
AuthedImage
},
data() {
return {
@ -194,7 +196,7 @@ export default {
if (!this.$matrix.userAvatar) {
return null;
}
return this.$matrix.matrixClient.mxcUrlToHttp(this.$matrix.userAvatar, 80, 80, "scale", true);
return this.$matrix.matrixClient.mxcUrlToHttp(this.$matrix.userAvatar, 80, 80, "scale", true, undefined, this.$matrix.useAuthedMedia);
},
userAvatarLetter() {

1
src/components/MessageErrorHandler.vue
View file

@ -20,6 +20,7 @@ export default {
},
errorCaptured(err, ignoredvm, ignoredinfo) {
this.err = err;
console.error("IGNORE", err, ignoredvm, ignoredinfo);
return false;
}
};

5
src/components/MoreMenuPopup.vue
View file

@ -10,7 +10,7 @@
<v-row v-if="showProfile" class="profile-row clickable" @click="viewProfile" no-gutters align-content="center">
<v-col cols="auto" class="me-2">
<v-avatar class="avatar-32" size="32" color="#e0e0e0" @click.stop="viewProfile">
<img v-if="userAvatar" :src="userAvatar" />
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
</v-avatar>
</v-col>
@ -28,11 +28,12 @@
<script>
import profileInfoMixin from "./profileInfoMixin";
import ActionRow from "./ActionRow.vue";
import AuthedImage from "./AuthedImage.vue";
export default {
name: "MoreMenuPopup",
mixins: [profileInfoMixin],
components: { ActionRow },
components: { ActionRow, AuthedImage },
props: {
show: {
type: Boolean,

6
src/components/Profile.vue
View file

@ -25,7 +25,7 @@
@click="showAvatarPicker"
v-if="isAvatarLoaded"
>
<img v-if="userAvatar" :src="userAvatar" />
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
<input
id="avatar-picker"
@ -261,6 +261,7 @@ import ActionRow from "./ActionRow.vue";
import util from "../plugins/utils";
import profileInfoMixin from "./profileInfoMixin";
import LogoutRoomDialog from './LogoutRoomDialog.vue';
import AuthedImage from "./AuthedImage.vue";
import CopyLink from "./CopyLink.vue"
import { requestNotificationPermission, windowNotificationPermission } from "../plugins/notificationAndServiceWorker.js"
import { mapState } from 'vuex'
@ -272,7 +273,8 @@ export default {
ActionRow,
SelectLanguageDialog,
LogoutRoomDialog,
CopyLink
CopyLink,
AuthedImage
},
data() {
return {

4
src/components/ProfileInfoPopup.vue
View file

@ -33,7 +33,7 @@
</v-col>
<v-col cols="auto" class="pa-2">
<v-avatar class="avatar-32" size="32" color="#e0e0e0" @click.stop="viewProfile">
<img v-if="userAvatar" :src="userAvatar" />
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
</v-avatar>
</v-col>
@ -64,10 +64,12 @@
</template>
<script>
import profileInfoMixin from "./profileInfoMixin";
import AuthedImage from "./AuthedImage.vue";
export default {
name: "ProfileInfoPopup",
mixins: [profileInfoMixin],
components: { AuthedImage },
props: {
show: {
type: Boolean,

4
src/components/QuoteView.vue
View file

@ -68,7 +68,7 @@
size="32"
color="#e0e0e0"
>
<img v-if="userAvatar" :src="userAvatar" />
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
</v-avatar>
</div>
@ -77,10 +77,12 @@
</template>
<script>
import profileInfoMixin from "./profileInfoMixin";
import AuthedImage from "./AuthedImage.vue";
export default {
name: "QuoteView",
mixins: [profileInfoMixin],
components: { AuthedImage },
props: {
roomWasPurged: {
type: Boolean,

9
src/components/RoomAvatarPicker.vue
View file

@ -1,6 +1,6 @@
<template>
<v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker():null" v-if="isRoomAvatarLoaded">
<v-img v-if="roomAvatar" :src="roomAvatar"/>
<AuthedImage v-if="roomAvatar" :src="roomAvatar"/>
<span v-else class="white--text headline">{{
roomName.substring(0, 1).toUpperCase()
}}</span>
@ -28,10 +28,12 @@
<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,
@ -56,7 +58,10 @@ export default {
self.isRoomAvatarLoaded = true;
}
}
)
).then((url) => {
console.error("UPDATE AVATAR", url);
this.room.avatar = url;
})
},
handleRoomPickedAvatar(event) {
if (event.target.files && event.target.files[0]) {

10
src/components/RoomExport.vue
View file

@ -328,7 +328,7 @@ export default {
}
if (!avatarFolder.file(fileName)) {
const url = member.getAvatarUrl(this.$matrix.matrixClient.getHomeserverUrl(), 40, 40, "scale", true);
const url = member.getAvatarUrl(this.$matrix.matrixClient.getHomeserverUrl(), 40, 40, "scale", true, false, this.$matrix.useAuthedMedia);
if (url) {
avatarFolder.file(fileName, "empty");
downloadPromises.push(
@ -367,7 +367,7 @@ export default {
downloadPromises.push(
util
.getAttachment(this.$matrix.matrixClient, comp.event, null, true)
.getAttachment(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, comp.event, null, true)
.then((blob) => {
return new Promise((resolve, ignoredReject) => {
let mime = blob.type;
@ -413,7 +413,7 @@ export default {
case "MessageOutgoingAudioExport":
downloadPromises.push(
util
.getAttachment(this.$matrix.matrixClient, comp.event, null, true)
.getAttachment(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, comp.event, null, true)
.then((blob) => {
if (currentMediaSize + blob.size <= maxMediaSize) {
currentMediaSize += blob.size;
@ -443,7 +443,7 @@ export default {
case "MessageOutgoingVideoExport":
downloadPromises.push(
util
.getAttachment(this.$matrix.matrixClient, comp.event, null, true)
.getAttachment(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, comp.event, null, true)
.then((blob) => {
if (currentMediaSize + blob.size <= maxMediaSize) {
currentMediaSize += blob.size;
@ -472,7 +472,7 @@ export default {
case "MessageOutgoingFileExport":
downloadPromises.push(
util
.getAttachment(this.$matrix.matrixClient, comp.event, null, true)
.getAttachment(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, comp.event, null, true)
.then((blob) => {
if (currentMediaSize + blob.size <= maxMediaSize) {
currentMediaSize += blob.size;

13
src/components/RoomInfo.vue
View file

@ -212,7 +212,7 @@
<div>
<div class="user-icon-with-badge">
<v-avatar class="avatar" size="32" color="grey">
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<AuthedImage v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<span v-else class="white--text headline">{{
member.name.substring(0, 1).toUpperCase()
}}</span>
@ -311,10 +311,12 @@ import ReportRoomDialog from "../components/ReportRoomDialog";
import RoomExport from "../components/RoomExport";
import RoomAvatarPicker from "../components/RoomAvatarPicker";
import CopyLink from "../components/CopyLink.vue"
import UserProfileDialog from "./UserProfileDialog.vue"
import UserProfileDialog from "./UserProfileDialog.vue";
import AuthedImage from "./AuthedImage.vue";
import roomInfoMixin from "./roomInfoMixin";
import roomTypeMixin from "./roomTypeMixin";
import util, { STATE_EVENT_ROOM_TYPE } from "../plugins/utils";
import buildVersion from "../assets/version.txt?raw";
export default {
name: "RoomInfo",
@ -327,7 +329,8 @@ export default {
UserProfileDialog,
RoomExport,
RoomAvatarPicker,
CopyLink
CopyLink,
AuthedImage
},
data() {
return {
@ -365,9 +368,7 @@ export default {
this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
// Display build version
const version = require("!!raw-loader!../assets/version.txt").default;
console.log("Version", version);
this.buildVersion = version;
this.buildVersion = buildVersion;
},
destroyed() {

11
src/components/RoomList.vue
View file

@ -17,7 +17,7 @@
<v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in invitedRooms" :key="room.roomId"
:value="room" class="room-list-room">
<v-list-item-avatar size="42" color="#d9d9d9">
<v-img v-if="roomAvatar(room)" :src="roomAvatar(room)" />
<AuthedImage v-if="roomAvatar(room)" :src="roomAvatar(room)" />
<span v-else class="white--text headline">{{
room.name.substring(0, 1).toUpperCase()
}}</span>
@ -36,7 +36,7 @@
<v-list-item v-for="room in joinedRooms" :key="room.roomId" :value="room" class="room-list-room">
<v-list-item-avatar size="42" color="#d9d9d9" :class="[{'rounded-circle': isDirect(room)}]">
<v-img v-if="roomAvatar(room)" :src="roomAvatar(room)" />
<AuthedImage v-if="roomAvatar(room)" :src="roomAvatar(room)" />
<span v-else class="white--text headline">{{
room.name.substring(0, 1).toUpperCase()
}}</span>
@ -61,10 +61,11 @@
<script>
import util from "../plugins/utils";
import Vue from "vue";
import AuthedImage from "./AuthedImage.vue";
export default {
name: "RoomList",
components: { AuthedImage },
props: {
title: {
type: String,
@ -111,7 +112,9 @@ export default {
42,
42,
"scale",
true
true,
false,
this.$matrix.useAuthedMedia
);
}
} else {

6
src/components/UserProfileDialog.vue
View file

@ -9,7 +9,7 @@
<div class="dialog-content text-center member-action-dialog">
<div class="pt-4">
<v-avatar class="avatar" size="56" color="grey">
<img v-if="memberAvatarComp" :src="memberAvatarComp" />
<AuthedImage v-if="memberAvatarComp" :src="memberAvatarComp" />
<span v-else class="white--text headline">{{ firstLetterUserName }}</span>
</v-avatar>
<div>
@ -63,13 +63,15 @@
<script>
import roomInfoMixin from "./roomInfoMixin";
import DeviceList from "../components/DeviceList";
import AuthedImage from "./AuthedImage.vue";
import util from "../plugins/utils";
export default {
name: "UserProfileDialog",
mixins: [roomInfoMixin],
components: {
DeviceList
DeviceList,
AuthedImage
},
props: {
show: {

5
src/components/VoiceRecorder.vue
View file

@ -167,10 +167,11 @@ const State = {
};
import util from "../plugins/utils";
import VoiceRecorderLock from "./VoiceRecorderLock";
require("md-gum-polyfill");
import "md-gum-polyfill";
import MicRecorder from "mic-recorder-to-mp3";
import ysFixWebmDuration from "fix-webm-duration";
//import { duration } from "dayjs";
import recordStop from "@/assets/sounds/record_stop.mp3";
export default {
name: "VoiceRecorder",
@ -400,7 +401,7 @@ export default {
}
},
playRecordedSound() {
const audio = new Audio(require("@/assets/sounds/record_stop.mp3"));
const audio = new Audio(recordStop);
audio.play();
},
aquireWakeLock() {

4
src/components/YouAre.vue
View file

@ -22,7 +22,7 @@
</i18n>
</span>
<v-avatar color="#e0e0e0" right @click.stop="viewProfile">
<img v-if="userAvatar" :src="userAvatar" />
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
</v-avatar>
</v-chip>
@ -30,10 +30,12 @@
</template>
<script>
import profileInfoMixin from "./profileInfoMixin";
import AuthedImage from "./AuthedImage.vue";
export default {
name: "YouAre",
mixins: [profileInfoMixin],
components: { AuthedImage },
props: {
dark: {
type: Boolean,

5
src/components/create/CreateRoomAvatar.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="create-room-avatar" color="#ededed">
<v-img class="create-room-avatar__icon clickable" @click.stop="showRoomAvatarPicker" v-if="modelValue && modelValue.image" :src="modelValue.image" />
<AuthedImage class="create-room-avatar__icon clickable" @click.stop="showRoomAvatarPicker" v-if="modelValue && modelValue.image" :src="modelValue.image" />
<v-icon class="create-room-avatar__icon default" v-else>$vuetify.icons.room_avatar_placeholder</v-icon>
<v-icon class="create-room-avatar__camera clickable" v-if="!modelValue || !modelValue.image" @click.stop="showRoomAvatarPicker">$vuetify.icons.ic_camera</v-icon>
<input id="room-avatar-picker" ref="roomAvatar" type="file" name="roomAvatar"
@ -9,8 +9,11 @@
</template>
<script>
import AuthedImage from '../AuthedImage.vue';
export default {
name: "CreateRoomAvatar",
components: { AuthedImage },
model: {
prop: "modelValue",
event: "update:modelValue",

2
src/components/file_mode/FileDropLayout.vue
View file

@ -106,7 +106,7 @@
<script>
import messageMixin from "../messages/messageMixin";
import sendAttachmentsMixin from "../sendAttachmentsMixin";
const prettyBytes = require("pretty-bytes");
import prettyBytes from "pretty-bytes";
export default {
mixins: [messageMixin, sendAttachmentsMixin],

4
src/components/file_mode/GalleryItemsView.vue
View file

@ -95,11 +95,11 @@ export default {
methods: {
downloadOne() {
if (this.currentItemIndex >= 0 && this.currentItemIndex < this.items.length) {
util.download(this.$matrix.matrixClient, this.items[this.currentItemIndex].event);
util.download(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, this.items[this.currentItemIndex].event);
}
},
downloadAll() {
this.items.forEach(item => util.download(this.$matrix.matrixClient, item.event));
this.items.forEach(item => util.download(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, item.event));
}
}
};

4
src/components/logoMixin.js
View file

@ -1,10 +1,12 @@
import defaultLogo from "@/assets/logo.svg";
export default {
computed: {
logotype() {
if (this.$config.logo) {
return this.$config.logo;
}
return require("@/assets/logo.svg");
return defaultLogo;
}
}
}

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

@ -50,7 +50,7 @@ export default {
const width = this.$refs.image.$el.clientWidth;
const height = (width * 9) / 16;
util
.getThumbnail(this.$matrix.matrixClient, this.event, this.$config, width, height)
.getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, this.event, this.$config, width, height)
.then((url) => {
const info = this.event.getContent().info;
// JPEGs use cover, PNG and GIF ect contain. This is because PNG and GIF are expected to

4
src/components/messages/MessageIncomingThread.vue
View file

@ -88,7 +88,7 @@ export default {
};
ret.promise =
util
.getThumbnail(this.$matrix.matrixClient, e, this.$config, 100, 100)
.getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, e, this.$config, 100, 100)
.then((url) => {
ret.src = url;
})
@ -130,7 +130,7 @@ export default {
return rows
},
downloadAll() {
this.items.forEach(item => util.download(this.$matrix.matrixClient, item.event));
this.items.forEach(item => util.download(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, item.event));
}
}
};

5
src/components/messages/MessageOutgoing.vue
View file

@ -26,7 +26,7 @@
color="#ededed"
@click.stop="ownAvatarClicked"
>
<img v-if="userAvatar" :src="userAvatar" />
<AuthedImage v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text headline">{{ userAvatarLetter }}</span>
</v-avatar>
<QuickReactionsChannel v-if="room.displayType == ROOM_TYPE_CHANNEL" :event="eventForReactions" :timelineSet="timelineSet" v-on="$listeners"/>
@ -41,10 +41,11 @@ import messageMixin from "./messageMixin";
import util, { ROOM_TYPE_CHANNEL } from "../../plugins/utils";
import QuickReactions from "./QuickReactions.vue";
import QuickReactionsChannel from "./channel/QuickReactionsChannel.vue";
import AuthedImage from "../AuthedImage.vue";
export default {
mixins: [messageMixin],
components: { QuickReactions, QuickReactionsChannel, SeenBy },
components: { QuickReactions, QuickReactionsChannel, SeenBy, AuthedImage },
data() {
return { ROOM_TYPE_CHANNEL: ROOM_TYPE_CHANNEL }
},

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

@ -49,7 +49,7 @@ export default {
const width = this.$refs.image.$el.clientWidth;
const height = (width * 9) / 16;
util
.getThumbnail(this.$matrix.matrixClient, this.event, this.$config, width, height)
.getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, this.event, this.$config, width, height)
.then((url) => {
const info = this.event.getContent().info;
// JPEGs use cover, PNG and GIF ect contain. This is because PNG and GIF are expected to

2
src/components/messages/MessageOutgoingThread.vue
View file

@ -89,7 +89,7 @@ export default {
};
ret.promise =
util
.getThumbnail(this.$matrix.matrixClient, e, this.$config, 100, 100)
.getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, e, this.$config, 100, 100)
.then((url) => {
ret.src = url;
})

14
src/components/messages/SeenBy.vue
View file

@ -8,7 +8,7 @@
<transition-group name="list" tag="div" v-if="seenBy.length > 0">
<v-avatar v-for="(member, index) in seenBy" :key="member.roomMember.userId" class="seen-by-user" size="16" color="grey"
v-show="index < SHOW_LIMIT" @click="open">
<img v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<AuthedImage v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<span v-else class="white--text headline">{{
member.roomMember.name.substring(0, 1).toUpperCase()
}}</span>
@ -28,7 +28,7 @@
<v-list-item v-for="(member, index) in seenBy" :key="index">
<v-list-item-icon>
<v-avatar size="40" color="grey">
<img v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<AuthedImage v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<span v-else class="white--text headline">{{
member.roomMember.name.substring(0, 1).toUpperCase()
}}</span>
@ -45,12 +45,14 @@
</template>
<script>
import BottomSheet from "../BottomSheet.vue"
import BottomSheet from "../BottomSheet.vue";
import AuthedImage from "../AuthedImage.vue";
import utils from "../../plugins/utils.js";
export default {
components: {
BottomSheet
BottomSheet,
AuthedImage
},
props: {
room: {
@ -114,7 +116,9 @@ export default {
16,
16,
"scale",
true
true,
false,
this.$matrix.useAuthedMedia
);
}
return null;

2
src/components/messages/attachmentMixin.js
View file

@ -44,7 +44,7 @@ export default {
return;
}
util
.getAttachment(this.$matrix.matrixClient, event, (progress) => {
.getAttachment(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, event, (progress) => {
this.downloadProgress = progress;
console.log("Progress: " + progress);
})

4
src/components/messages/messageMixin.js
View file

@ -200,7 +200,7 @@ export default {
if (!this.$matrix.userAvatar) {
return null;
}
return this.$matrix.matrixClient.mxcUrlToHttp(this.$matrix.userAvatar, 80, 80, "scale", true);
return this.$matrix.matrixClient.mxcUrlToHttp(this.$matrix.userAvatar, 80, 80, "scale", true, undefined, this.$matrix.useAuthedMedia);
},
userAvatarLetter() {
@ -268,7 +268,7 @@ export default {
if (this.room) {
const member = this.room.getMember(event.getSender());
if (member) {
return member.getAvatarUrl(this.$matrix.matrixClient.getHomeserverUrl(), 40, 40, "scale", true);
return member.getAvatarUrl(this.$matrix.matrixClient.getHomeserverUrl(), 40, 40, "scale", true, false, this.$matrix.useAuthedMedia);
}
}
return null;

2
src/components/profileInfoMixin.js
View file

@ -23,7 +23,7 @@ export default {
if (!this.$matrix.userAvatar) {
return null;
}
return this.$matrix.matrixClient.mxcUrlToHttp(this.$matrix.userAvatar, 80, 80, 'scale', true);
return this.$matrix.matrixClient.mxcUrlToHttp(this.$matrix.userAvatar, 80, 80, 'scale', true, undefined, this.$matrix.useAuthedMedia);
},
userAvatarLetter() {

6
src/components/roomInfoMixin.js
View file

@ -140,7 +140,9 @@ export default {
40,
40,
"scale",
true
true,
false,
this.$matrix.useAuthedMedia
);
}
return null;
@ -243,7 +245,7 @@ export default {
privatePartyAvatar(size) {
const other = this.privateParty;
if (other) {
return other.getAvatarUrl(this.$matrix.matrixClient.getHomeserverUrl(), size, size, "scale", true);
return other.getAvatarUrl(this.$matrix.matrixClient.getHomeserverUrl(), size, size, "scale", true, false, this.$matrix.useAuthedMedia);
}
return undefined;
},