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

Initial implementation of "audio mode"

Browse source
This commit is contained in:
N Pex 2023-01-30 08:36:02 +00:00
parent d5942fdb8e
commit 09173a65f1
14 changed files with 944 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/messages/AudioPlayer.vue
View file

@ -54,9 +54,10 @@ export default {
this.player.addEventListener("pause", () => {
this.playing = false;
});
this.player.addEventListener("ended", function () {
this.player.addEventListener("ended", () => {
this.pause();
this.playing = false;
this.$emit("playback-ended");
});
},
beforeDestroy() {

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

@ -7,25 +7,41 @@ export default {
downloadProgress: null
}
},
mounted() {
console.log("Mounted with event:", JSON.stringify(this.event.getContent()))
util
.getAttachment(this.$matrix.matrixClient, this.event, (progress) => {
this.downloadProgress = progress;
console.log("Progress: " + progress);
})
.then((url) => {
this.src = url;
})
.catch((err) => {
console.log("Failed to fetch attachment: ", err);
});
},
beforeDestroy() {
if (this.src) {
const objectUrl = this.src;
this.src = null;
URL.revokeObjectURL(objectUrl);
watch: {
event: {
immediate: false,
handler(value, ignoredOldValue) {
this.loadAttachmentSource(value);
}
}
},
mounted() {
this.loadAttachmentSource(this.event);
},
beforeDestroy() {
this.loadAttachmentSource(null); // Release
},
methods: {
loadAttachmentSource(event) {
if (this.src) {
const objectUrl = this.src;
this.src = null;
URL.revokeObjectURL(objectUrl);
}
if (event) {
util
.getAttachment(this.$matrix.matrixClient, event, (progress) => {
this.downloadProgress = progress;
console.log("Progress: " + progress);
})
.then((url) => {
this.src = url;
})
.catch((err) => {
console.log("Failed to fetch attachment: ", err);
});
}
}
}
}

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

@ -1,51 +1,51 @@
import QuickReactions from './QuickReactions.vue';
var linkify = require('linkifyjs');
var linkifyHtml = require('linkifyjs/html');
import QuickReactions from "./QuickReactions.vue";
var linkify = require("linkifyjs");
var linkifyHtml = require("linkifyjs/html");
linkify.options.defaults.className = "link";
linkify.options.defaults.target = { url: '_blank' };
linkify.options.defaults.target = { url: "_blank" };
export default {
components: {
QuickReactions
QuickReactions,
},
props: {
room: {
type: Object,
default: function () {
return null
}
return null;
},
},
event: {
originalEvent: {
type: Object,
default: function () {
return {}
}
return {};
},
},
nextEvent: {
type: Object,
default: function () {
return null
}
return null;
},
},
timelineSet: {
type: Object,
default: function () {
return null
}
return null;
},
},
},
data() {
return {
event: {},
inReplyToEvent: null,
inReplyToSender: null
}
inReplyToSender: null,
};
},
mounted() {
const relatesTo = this.event.getWireContent()['m.relates_to'];
if (relatesTo && relatesTo['m.in_reply_to'])
{
const relatesTo = this.validEvent && this.event.getWireContent()["m.relates_to"];
if (relatesTo && relatesTo["m.in_reply_to"]) {
// Can we find the original message?
const originalEventId = relatesTo['m.in_reply_to'].event_id;
const originalEventId = relatesTo["m.in_reply_to"].event_id;
if (originalEventId && this.timelineSet) {
const originalEvent = this.timelineSet.findEventById(originalEventId);
if (originalEvent) {
@ -55,7 +55,29 @@ export default {
}
}
},
watch: {
originalEvent: {
immediate: true,
handler(originalEvent, ignoredOldValue) {
this.event = originalEvent;
// Check not null and not {}
if (originalEvent && originalEvent.isBeingDecrypted && originalEvent.isBeingDecrypted()) {
this.originalEvent.getDecryptionPromise().then(() => {
this.event = originalEvent;
});
}
},
},
},
computed: {
/**
*
* @returns true if event is non-null and contains data
*/
validEvent() {
return this.event && Object.keys(this.event).length !== 0;
},
incoming() {
return this.event && this.event.getSender() != this.$matrix.currentUserId;
},
@ -67,21 +89,20 @@ export default {
if (this.nextEvent && this.nextEvent.getSender() == this.event.getSender()) {
const ts1 = this.nextEvent.event.origin_server_ts;
const ts2 = this.event.event.origin_server_ts;
return (ts1 - ts2) < (2 * 60 * 1000); // less than 2 minutes
return ts1 - ts2 < 2 * 60 * 1000; // less than 2 minutes
}
return true;
},
inReplyToText() {
const relatesTo = this.event.getWireContent()['m.relates_to'];
if (relatesTo && relatesTo['m.in_reply_to'])
{
const relatesTo = this.event.getWireContent()["m.relates_to"];
if (relatesTo && relatesTo["m.in_reply_to"]) {
const content = this.event.getContent();
const lines = content.body.split('\n').reverse();
while (lines.length && !lines[0].startsWith('> ')) lines.shift();
const lines = content.body.split("\n").reverse();
while (lines.length && !lines[0].startsWith("> ")) lines.shift();
// Reply fallback has a blank line after it, so remove it to prevent leading newline
if (lines[0] === '') lines.shift();
const text = lines[0] && lines[0].replace(/^> (<.*> )?/g, '');
if (lines[0] === "") lines.shift();
const text = lines[0] && lines[0].replace(/^> (<.*> )?/g, "");
if (text) {
return text;
}
@ -92,23 +113,22 @@ export default {
}
// We don't have the original text (at the moment at least)
return this.$t('fallbacks.original_text');
return this.$t("fallbacks.original_text");
}
return null;
},
messageText() {
const relatesTo = this.event.getWireContent()['m.relates_to'];
if (relatesTo && relatesTo['m.in_reply_to'])
{
const relatesTo = this.event.getWireContent()["m.relates_to"];
if (relatesTo && relatesTo["m.in_reply_to"]) {
const content = this.event.getContent();
// Remove the new text and strip "> " from the old original text
const lines = content.body.split('\n');
while (lines.length && lines[0].startsWith('> ')) lines.shift();
const lines = content.body.split("\n");
while (lines.length && lines[0].startsWith("> ")) lines.shift();
// Reply fallback has a blank line after it, so remove it to prevent leading newline
if (lines[0] === '') lines.shift();
return lines.join('\n');
if (lines[0] === "") lines.shift();
return lines.join("\n");
}
return this.event.getContent().body;
},
@ -118,40 +138,36 @@ export default {
*/
messageClasses() {
return {'messageIn':true,'from-admin':this.senderIsAdminOrModerator(this.event)}
return { messageIn: true, "from-admin": this.senderIsAdminOrModerator(this.event) };
},
userAvatar() {
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);
},
userAvatarLetter() {
if (!this.$matrix.currentUser) {
return null;
}
return (this.$matrix.currentUserDisplayName || this.$matrix.currentUserId.substring(1)).substring(0, 1).toUpperCase();
}
return (this.$matrix.currentUserDisplayName || this.$matrix.currentUserId.substring(1))
.substring(0, 1)
.toUpperCase();
},
},
methods: {
ownAvatarClicked() {
this.$emit("own-avatar-clicked", {event: this.event});
this.$emit("own-avatar-clicked", { event: this.event });
},
otherAvatarClicked(avatarRef) {
this.$emit("other-avatar-clicked", {event: this.event, anchor: avatarRef});
this.$emit("other-avatar-clicked", { event: this.event, anchor: avatarRef });
},
showContextMenu(buttonRef) {
this.$emit("context-menu", {event: this.event,anchor: buttonRef});
this.$emit("context-menu", { event: this.event, anchor: buttonRef });
},
/**
@ -159,7 +175,7 @@ export default {
*/
eventSenderDisplayName(event) {
if (event.getSender() == this.$matrix.currentUserId) {
return this.$t('message.you');
return this.$t("message.you");
}
if (this.room) {
const member = this.room.getMember(event.getSender());
@ -173,12 +189,12 @@ export default {
/**
* In the case where the state_key points out a userId for an operation (e.g. membership events)
* return the display name of the affected user.
* @param event
* @returns
* @param event
* @returns
*/
eventStateKeyDisplayName(event) {
if (event.getStateKey() == this.$matrix.currentUserId) {
return this.$t('message.you');
return this.$t("message.you");
}
if (this.room) {
const member = this.room.getMember(event.getStateKey());
@ -193,13 +209,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);
}
}
return null;
@ -236,6 +246,6 @@ export default {
linkify(text) {
return linkifyHtml(text);
}
},
},
}
};