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

Save and display room avatars

pull/21833/head
Jaiwanth 2021-05-31 21:35:08 +05:30
parent 59c1b67b7d
commit fa073cd958
3 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/views/avatars/BaseAvatar.tsx
View File

@ -44,7 +44,7 @@ interface IProps {
className?: string; className?: string;
} }
const calculateUrls = (url, urls) => { const calculateUrls = (url: string, urls: string[]) => {
// work out the full set of urls to try to load. This is formed like so: // work out the full set of urls to try to load. This is formed like so:
// imageUrls: [ props.url, ...props.urls ] // imageUrls: [ props.url, ...props.urls ]

4
src/components/views/avatars/DecoratedRoomAvatar.tsx
View File

@ -201,8 +201,8 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
oobData={this.props.oobData} oobData={this.props.oobData}
viewAvatarOnClick={this.props.viewAvatarOnClick} viewAvatarOnClick={this.props.viewAvatarOnClick}
/> />
{icon} { icon }
{badge} { badge }
</div>; </div>;
} }
} }

47
src/utils/exportUtils/HtmlExport.tsx
View File

@ -6,16 +6,18 @@ import { mediaFromContent } from "../../customisations/Media";
import { Room } from "matrix-js-sdk/src/models/room"; import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Exporter } from "./Exporter"; import { Exporter } from "./Exporter";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import { renderToStaticMarkup } from 'react-dom/server' import { renderToStaticMarkup } from 'react-dom/server'
import { Layout } from "../../settings/Layout"; import { Layout } from "../../settings/Layout";
import { shouldFormContinuation } from "../../components/structures/MessagePanel"; import { shouldFormContinuation } from "../../components/structures/MessagePanel";
import { wantsDateSeparator } from "../../DateUtils"; import { wantsDateSeparator } from "../../DateUtils";
import { RoomPermalinkCreator } from "../permalinks/Permalinks"; import { RoomPermalinkCreator } from "../permalinks/Permalinks";
import * as ponyfill from "web-streams-polyfill/ponyfill"
import * as Avatar from "../../Avatar";
import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile"; import EventTile, { haveTileForEvent } from "../../components/views/rooms/EventTile";
import DateSeparator from "../../components/views/messages/DateSeparator"; import DateSeparator from "../../components/views/messages/DateSeparator";
import exportCSS from "./exportCSS"; import exportCSS from "./exportCSS";
import exportJS from "./exportJS"; import exportJS from "./exportJS";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
export default class HTMLExporter extends Exporter { export default class HTMLExporter extends Exporter {
protected zip: JSZip; protected zip: JSZip;
@ -29,7 +31,29 @@ export default class HTMLExporter extends Exporter {
this.permalinkCreator = new RoomPermalinkCreator(this.room); this.permalinkCreator = new RoomPermalinkCreator(this.room);
} }
protected wrapHTML(content: string, room: Room) { protected async getRoomAvatar() {
let blob: Blob;
const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
if (avatarUrl) {
const image = await fetch(avatarUrl);
blob = await image.blob();
this.zip.file("room.png", blob);
}
const avatar = (
<BaseAvatar
width={32}
height={32}
name={this.room.name}
title={this.room.name}
url={blob ? "room.png" : null}
resizeMethod={"crop"}
/>
);
return renderToStaticMarkup(avatar);
}
protected async wrapHTML(content: string, room: Room) {
const roomAvatar = await this.getRoomAvatar();
return ` return `
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -54,22 +78,7 @@ export default class HTMLExporter extends Exporter {
<div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel"> <div class="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_RoomHeader_avatar"> <div class="mx_RoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar"> <div class="mx_DecoratedRoomAvatar">
<span class="mx_BaseAvatar" role="presentation" ${roomAvatar}
><span
class="mx_BaseAvatar_initial"
aria-hidden="true"
style="
font-size: 20.8px;
width: 32px;
line-height: 32px;
"
>G</span
><img
class="mx_BaseAvatar_image"
alt=""
aria-hidden="true"
style="width: 32px; height: 32px"
/></span>
</div> </div>
</div> </div>
<div class="mx_RoomHeader_name"> <div class="mx_RoomHeader_name">
@ -228,7 +237,7 @@ export default class HTMLExporter extends Exporter {
content += body; content += body;
prevEvent = event; prevEvent = event;
} }
return this.wrapHTML(content, room); return await this.wrapHTML(content, room);
} }
public async export() { public async export() {