OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Embed avatar and chat images into HTML

pull/21833/head
Jaiwanth 2021-05-21 20:00:01 +05:30
parent cea60ef26c
commit 2676e61d69
1 changed files with 137 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
src/utils/exportUtils.js
View File

@ -4,6 +4,8 @@ import { TimelineWindow } from "matrix-js-sdk/src/timeline-window";
import JSZip from "jszip"; import JSZip from "jszip";
import { textForEvent } from "../TextForEvent"; import { textForEvent } from "../TextForEvent";
import streamSaver from "streamsaver"; import streamSaver from "streamsaver";
import { decryptFile } from "./DecryptFile";
import { mediaFromContent, mediaFromMxc } from "../customisations/Media";
const wrapHTML = (content, room) => (` const wrapHTML = (content, room) => (`
<!DOCTYPE html> <!DOCTYPE html>
@ -33,36 +35,6 @@ const wrapHTML = (content, room) => (`
`); `);
const getTimelineConversation = (room) => {
if (!room) return;
const cli = MatrixClientPeg.get();
const timelineSet = room.getUnfilteredTimelineSet();
const timelineWindow = new TimelineWindow(
cli, timelineSet,
{windowLimit: Number.MAX_VALUE});
timelineWindow.load(null, 20);
const events = timelineWindow.getEvents();
// Clone and reverse the events so that we preserve the order
arrayFastClone(events)
.reverse()
.forEach(event => {
cli.decryptEventIfNeeded(event);
});
if (!timelineWindow.canPaginate('f')) {
events.push(...timelineSet.getPendingEvents());
}
console.log(events);
return events;
};
const css = ` const css = `
body { body {
margin: 0; margin: 0;
@ -297,6 +269,37 @@ div.selected {
} }
`; `;
const getTimelineConversation = (room) => {
if (!room) return;
const cli = MatrixClientPeg.get();
const timelineSet = room.getUnfilteredTimelineSet();
const timelineWindow = new TimelineWindow(
cli, timelineSet,
{windowLimit: Number.MAX_VALUE});
timelineWindow.load(null, 20);
const events = timelineWindow.getEvents();
// Clone and reverse the events so that we preserve the order
arrayFastClone(events)
.reverse()
.forEach(event => {
cli.decryptEventIfNeeded(event);
});
if (!timelineWindow.canPaginate('f')) {
events.push(...timelineSet.getPendingEvents());
}
console.log(events);
return events;
};
const userColors = [ const userColors = [
"#64bf47", "#64bf47",
"#4f9cd9", "#4f9cd9",
@ -307,41 +310,50 @@ const userColors = [
]; ];
//Get a color associated with a string. This is to map userId to a specific color //Get a color associated with string length. This is to map userId to a specific color
const getUserColor = (userId) => { const getUserColor = (userId) => {
return userColors[userId.length % 4]; return userColors[userId.length % 4];
}; };
const createMessageBody = (event, joined = false, isReply = false, replyId = null) => {
return ` const getUserPic = async (event) => {
<div class="message default clearfix ${joined ? `joined` : ``}" id="message2680"> const member = event.sender;
${!joined ? `<div class="pull_left userpic_wrap"> if (!member.getMxcAvatarUrl()) {
<div class="userpic" style="width: 42px; height: 42px; background-color: ${getUserColor(event.sender.name)}"> return `
<div class="initials" style="line-height: 42px">${event.sender.name[0]}</div> <div class="pull_left userpic_wrap">
</div> <div class="userpic" style="width: 42px;height: 42px;background-color: ${getUserColor(member.userId)}">
</div>` : ``} <div class="initials" style="line-height: 42px;" src="users/${member.userId}">${event.sender.name[0]}</div>
<div class="body"> </div>
<div class="pull_right date details" title="${new Date(event.getTs())}">${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}</div> </div>
${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}"> `;
${event.sender.name} } else {
</div>`: ``} const imageUrl = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(42, 42, "crop");
${isReply ?
`<div class="reply_to details"> if (!avatars.has(member.userId)) {
In reply to <a href="#${replyId}">this message</a> avatars.set(member.userId, true);
</div>`: ``} const image = await fetch(imageUrl);
<div class="text"> ${event.getContent().body} </div> const blob = await image.blob();
</div> zip.file(`users/${member.userId}`, blob);
</div> }
`;
return `
<div class="pull_left userpic_wrap">
<div class="userpic" style="width: 42px; height: 42px;">
<img class="initials" style="width: 42px;height: 42px;line-height:42px;" src="users/${member.userId}"/>
</div>
</div>
`;
}
}; };
//Gets the event_id of an event to which an event is replied
const baseEventId = (event) => { const baseEventId = (event) => {
const isEncrypted = event.isEncrypted(); const isEncrypted = event.isEncrypted();
// If encrypted, in_reply_to lies in event.event.content // If encrypted, in_reply_to lies in event.event.content
const content = isEncrypted ? event.event.content : event.getContent(); const content = isEncrypted ? event.event.content : event.getContent();
const relatesTo = content["m.relates_to"]; const relatesTo = content["m.relates_to"];
return relatesTo ? relatesTo["m.in_reply_to"].event_id : null; return (relatesTo && relatesTo["m.in_reply_to"]) ? relatesTo["m.in_reply_to"]["event_id"] : null;
}; };
@ -361,16 +373,75 @@ const dateSeparator = (event, prevEvent) => {
return ""; return "";
}; };
const createHTML = (events, room) => { const getImageData = async (event) => {
let blob;
try {
const isEncrypted = event.isEncrypted();
const content = event.getContent();
if (isEncrypted) {
blob = await decryptFile(content.file);
} else {
const media = mediaFromContent(event.getContent());
const image = await fetch(media.srcHttp);
blob = image.blob();
}
} catch (err) {
console.log("Error decrypting image");
}
return blob;
};
const createMessageBody = async (event, joined = false, isReply = false, replyId = null) => {
const userPic = await getUserPic(event);
let messageBody = "";
switch (event.getContent().msgtype) {
case "m.text":
messageBody = `<div class="text"> ${event.getContent().body} </div>`;
break;
case "m.image": {
messageBody = `<a class="photo_wrap clearfix pull_left" href="images/${event.getId()}.png">
<img class="photo" src="images/${event.getId()}.png" style="width: 260px; height: 156px">
</a>`;
const blob = await getImageData(event);
zip.file(`images/${event.getId()}.png`, blob);
}
break;
default:
break;
}
return `
<div class="message default clearfix ${joined ? `joined` : ``}" id="message2680">
${!joined ? userPic : ``}
<div class="body">
<div class="pull_right date details" title="${new Date(event.getTs())}">${new Date(event.getTs()).toLocaleTimeString().slice(0, -3)}</div>
${!joined ? `<div class="from_name" style="color:${getUserColor(event.sender.name)}">
${event.sender.name}
</div>`: ``}
${isReply ?
`<div class="reply_to details">
In reply to <a href="#${replyId}">this message</a>
</div>`: ``}
${messageBody}
</div>
</div>
`;
};
const createHTML = async (events, room) => {
let content = ""; let content = "";
let prevEvent = null; let prevEvent = null;
for (const event of events) { for (const event of events) {
content += dateSeparator(event, prevEvent); content += dateSeparator(event, prevEvent);
if (event.getType() === "m.room.message") { if (event.getType() === "m.room.message") {
const replyTo = baseEventId(event); const replyTo = baseEventId(event);
const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text" const shouldBeJoined = prevEvent && prevEvent.getContent().msgtype === "m.text"
&& event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent) && !replyTo; && event.sender.userId === prevEvent.sender.userId && !dateSeparator(event, prevEvent) && !replyTo;
const body = createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
const body = await createMessageBody(event, shouldBeJoined, !!replyTo, replyTo);
content += body; content += body;
} else { } else {
content += ` content += `
@ -387,22 +458,27 @@ const createHTML = (events, room) => {
}; };
const avatars = new Map();
let zip;
const exportConversationalHistory = async (room) => { const exportConversationalHistory = async (room) => {
const res = getTimelineConversation(room); const res = getTimelineConversation(room);
const zip = new JSZip(); zip = new JSZip();
const html = createHTML(res, room);
zip.file("css/style.css", css); const html = await createHTML(res, room, avatars);
zip.file("index.html", html); zip.file("index.html", html);
zip.file("css/style.css", css);
avatars.clear();
const filename = `matrix-export-${new Date().toISOString()}.zip`; const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously //Generate the zip file asynchronously
const blob = await zip.generateAsync({ type: "blob" }); const blob = await zip.generateAsync({ type: "blob" });
//Create a writable stream to the directory //Create a writable stream to the directory
const fileStream = streamSaver.createWriteStream(filename, blob.size); const fileStream = streamSaver.createWriteStream(filename, blob.size);
const writer = fileStream.getWriter(); const writer = fileStream.getWriter();
// console.log(blob.size);
// Here we chunk the blob into pieces of 10 MiB // Here we chunk the blob into pieces of 10 MiB
const sliceSize = 10 * 1e6; const sliceSize = 10 * 1e6;
for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) { for (let fPointer = 0; fPointer < blob.size; fPointer += sliceSize) {