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

Add support for displaying avatars and links in bridge info

pull/21833/head
Half-Shot 2019-12-04 15:02:36 +00:00
parent 2bc6e2e332
commit 9f2ccdf913
1 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/views/settings/tabs/room/BridgeSettingsTab.js
View File

@ -20,6 +20,8 @@ import {_t} from "../../../../../languageHandler";
import MatrixClientPeg from "../../../../../MatrixClientPeg"; import MatrixClientPeg from "../../../../../MatrixClientPeg";
import Pill from "../../../elements/Pill"; import Pill from "../../../elements/Pill";
import {makeUserPermalink} from "../../../../../utils/permalinks/Permalinks"; import {makeUserPermalink} from "../../../../../utils/permalinks/Permalinks";
import BaseAvatar from "../../../avatars/BaseAvatar";
import { ContentRepo } from "matrix-js-sdk";
const BRIDGE_EVENT_TYPES = [ const BRIDGE_EVENT_TYPES = [
"uk.half-shot.bridge", "uk.half-shot.bridge",
@ -47,9 +49,10 @@ export default class BridgeSettingsTab extends React.Component {
if (!content || !content.channel || !content.protocol) { if (!content || !content.channel || !content.protocol) {
return null; return null;
} }
const { channel, network } = content;
const protocolName = content.protocol.displayname || content.protocol.id; const protocolName = content.protocol.displayname || content.protocol.id;
const channelName = content.channel.displayname || content.channel.id; const channelName = channel.displayname || channel.id;
const networkName = content.network ? " on " + (content.network.displayname || content.network.id) : ""; const networkName = network ? network.displayname || network.id : "";
let status = null; let status = null;
if (content.status === "active") { if (content.status === "active") {
status = (<p> Status: <b>Active</b> </p>); status = (<p> Status: <b>Active</b> </p>);
@ -78,13 +81,41 @@ export default class BridgeSettingsTab extends React.Component {
/> bot user.</p> /> bot user.</p>
); );
const channelLink = channel.external_url ? (<a target="_blank" href={channel.external_url}>{channelName}</a>) : channelName;
const networkLink = network && network.external_url ? (<a target="_blank" href={network.external_url}>{networkName}</a>)
: networkName;
const chanAndNetworkInfo = ( const chanAndNetworkInfo = (
<p> Bridged into {channelName}{networkName}, on {protocolName}</p> <p> Bridged into {channelLink} {networkLink}, on {protocolName}</p>
); );
let networkIcon = null;
if (networkName && network.avatar) {
const avatarUrl = ContentRepo.getHttpUriForMxc(
MatrixClientPeg.get().getHomeserverUrl(),
network.avatar, 32, 32, "crop",
);
networkIcon = <BaseAvatar width={32} height={32} resizeMethod='crop'
name={ networkName } idName={ networkName }
url={ avatarUrl } />;
}
let channelIcon = null;
if (channel.avatar) {
const avatarUrl = ContentRepo.getHttpUriForMxc(
MatrixClientPeg.get().getHomeserverUrl(),
channel.avatar, 32, 32, "crop",
);
console.log(channel.avatar);
channelIcon = <BaseAvatar width={32} height={32} resizeMethod='crop'
name={ networkName } idName={ networkName }
url={ avatarUrl } />;
}
return (<li key={event.stateKey}> return (<li key={event.stateKey}>
<div> <div>
<h3>{channelName}{networkName} ({protocolName})</h3> <h3>{channelIcon} {channelName} {networkName ? ` on ${networkName}` : ""} {networkIcon}</h3>
<p> Connected via {protocolName} </p>
<details> <details>
{status} {status}
{creator} {creator}