nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'develop' into johannes/latest-room-in-space

Browse Source
This commit is contained in:
Johannes Marbach
2023-02-02 20:21:17 +01:00
parent 568042b9e7 509459f1d7
commit f3fd027db4
40 changed files with 948 additions and 868 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/Avatar.ts
View File

@@ -1,5 +1,5 @@
/*
Copyright 2015, 2016, 2023 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -24,19 +24,16 @@ import DMRoomMap from "./utils/DMRoomMap";
import { mediaFromMxc } from "./customisations/Media";
import { isLocalRoom } from "./utils/localRoom/isLocalRoom";
const DEFAULT_COLORS: Readonly<string[]> = ["#0DBD8B", "#368bd6", "#ac3ba8"];
// Not to be used for BaseAvatar urls as that has similar default avatar fallback already
export function avatarUrlForMember(
member: RoomMember | null | undefined,
member: RoomMember,
width: number,
height: number,
resizeMethod: ResizeMethod,
): string {
let url: string | undefined;
const mxcUrl = member?.getMxcAvatarUrl();
if (mxcUrl) {
url = mediaFromMxc(mxcUrl).getThumbnailOfSourceHttp(width, height, resizeMethod);
let url: string;
if (member?.getMxcAvatarUrl()) {
url = mediaFromMxc(member.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod);
}
if (!url) {
// member can be null here currently since on invites, the JS SDK
@@ -47,17 +44,6 @@ export function avatarUrlForMember(
return url;
}
export function getMemberAvatar(
member: RoomMember | null | undefined,
width: number,
height: number,
resizeMethod: ResizeMethod,
): string | undefined {
const mxcUrl = member?.getMxcAvatarUrl();
if (!mxcUrl) return undefined;
return mediaFromMxc(mxcUrl).getThumbnailOfSourceHttp(width, height, resizeMethod);
}
export function avatarUrlForUser(
user: Pick<User, "avatarUrl">,
width: number,
@@ -100,10 +86,18 @@ function urlForColor(color: string): string {
// hard to install a listener here, even if there were a clear event to listen to
const colorToDataURLCache = new Map<string, string>();
export function defaultAvatarUrlForString(s: string | undefined): string {
export function defaultAvatarUrlForString(s: string): string {
if (!s) return ""; // XXX: should never happen but empirically does by evidence of a rageshake
const color = getColorForString(s);
const defaultColors = ["#0DBD8B", "#368bd6", "#ac3ba8"];
let total = 0;
for (let i = 0; i < s.length; ++i) {
total += s.charCodeAt(i);
}
const colorIndex = total % defaultColors.length;
// overwritten color value in custom themes
const cssVariable = `--avatar-background-colors_${colorIndex}`;
const cssValue = document.body.style.getPropertyValue(cssVariable);
const color = cssValue || defaultColors[colorIndex];
let dataUrl = colorToDataURLCache.get(color);
if (!dataUrl) {
// validate color as this can come from account_data
@@ -118,23 +112,13 @@ export function defaultAvatarUrlForString(s: string | undefined): string {
return dataUrl;
}
export function getColorForString(input: string): string {
const charSum = [...input].reduce((s, c) => s + c.charCodeAt(0), 0);
const index = charSum % DEFAULT_COLORS.length;
// overwritten color value in custom themes
const cssVariable = `--avatar-background-colors_${index}`;
const cssValue = document.body.style.getPropertyValue(cssVariable);
return cssValue || DEFAULT_COLORS[index]!;
}
/**
* returns the first (non-sigil) character of 'name',
* converted to uppercase
* @param {string} name
* @return {string} the first letter
*/
export function getInitialLetter(name: string): string | undefined {
export function getInitialLetter(name: string): string {
if (!name) {
// XXX: We should find out what causes the name to sometimes be falsy.
console.trace("`name` argument to `getInitialLetter` not supplied");
@@ -150,20 +134,19 @@ export function getInitialLetter(name: string): string | undefined {
}
// rely on the grapheme cluster splitter in lodash so that we don't break apart compound emojis
return split(name, "", 1)[0]!.toUpperCase();
return split(name, "", 1)[0].toUpperCase();
}
export function avatarUrlForRoom(
room: Room | undefined,
room: Room,
width: number,
height: number,
resizeMethod?: ResizeMethod,
): string | null {
if (!room) return null; // null-guard
const mxcUrl = room.getMxcAvatarUrl();
if (mxcUrl) {
return mediaFromMxc(mxcUrl).getThumbnailOfSourceHttp(width, height, resizeMethod);
if (room.getMxcAvatarUrl()) {
return mediaFromMxc(room.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod);
}
// space rooms cannot be DMs so skip the rest
@@ -176,9 +159,8 @@ export function avatarUrlForRoom(
// If there are only two members in the DM use the avatar of the other member
const otherMember = room.getAvatarFallbackMember();
const otherMemberMxc = otherMember?.getMxcAvatarUrl();
if (otherMemberMxc) {
return mediaFromMxc(otherMemberMxc).getThumbnailOfSourceHttp(width, height, resizeMethod);
if (otherMember?.getMxcAvatarUrl()) {
return mediaFromMxc(otherMember.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod);
}
return null;
}

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

@@ -1,6 +1,8 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Copyright 2015, 2016, 2018, 2019, 2020, 2023 The Matrix.org Foundation C.I.C.
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,46 +17,38 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { CSSProperties, useCallback, useContext, useEffect, useState } from "react";
import React, { useCallback, useContext, useEffect, useState } from "react";
import classNames from "classnames";
import { ResizeMethod } from "matrix-js-sdk/src/@types/partials";
import { ClientEvent } from "matrix-js-sdk/src/client";
import { SyncState } from "matrix-js-sdk/src/sync";
import * as AvatarLogic from "../../../Avatar";
import SettingsStore from "../../../settings/SettingsStore";
import AccessibleButton from "../elements/AccessibleButton";
import RoomContext from "../../../contexts/RoomContext";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
import { toPx } from "../../../utils/units";
import { _t } from "../../../languageHandler";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
interface IProps {
/** The name (first initial used as default) */
name: string;
/** ID for generating hash colours */
idName?: string;
/** onHover title text */
title?: string;
/** highest priority of them all, shortcut to set in urls[0] */
url?: string;
/** [highest_priority, ... , lowest_priority] */
urls?: string[];
name: string; // The name (first initial used as default)
idName?: string; // ID for generating hash colours
title?: string; // onHover title text
url?: string; // highest priority of them all, shortcut to set in urls[0]
urls?: string[]; // [highest_priority, ... , lowest_priority]
width?: number;
height?: number;
/** @deprecated not actually used */
// XXX: resizeMethod not actually used.
resizeMethod?: ResizeMethod;
/** true to add default url */
defaultToInitialLetter?: boolean;
onClick?: React.ComponentPropsWithoutRef<typeof AccessibleTooltipButton>["onClick"];
defaultToInitialLetter?: boolean; // true to add default url
onClick?: React.MouseEventHandler;
inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
className?: string;
tabIndex?: number;
style?: CSSProperties;
}
const calculateUrls = (url: string | undefined, urls: string[] | undefined, lowBandwidth: boolean): string[] => {
const calculateUrls = (url: string, urls: string[], lowBandwidth: boolean): string[] => {
// work out the full set of urls to try to load. This is formed like so:
// imageUrls: [ props.url, ...props.urls ]
@@ -72,26 +66,11 @@ const calculateUrls = (url: string | undefined, urls: string[] | undefined, lowB
return Array.from(new Set(_urls));
};
/**
* Hook for cycling through a changing set of images.
*
* The set of images is updated whenever `url` or `urls` change, the user's
* `lowBandwidth` preference changes, or the client reconnects.
*
* Returns `[imageUrl, onError]`. When `onError` is called, the next image in
* the set will be displayed.
*/
const useImageUrl = ({
url,
urls,
}: {
url: string | undefined;
urls: string[] | undefined;
}): [string | undefined, () => void] => {
const useImageUrl = ({ url, urls }): [string, () => void] => {
// Since this is a hot code path and the settings store can be slow, we
// use the cached lowBandwidth value from the room context if it exists
const roomContext = useContext(RoomContext);
const lowBandwidth = roomContext.lowBandwidth;
const lowBandwidth = roomContext ? roomContext.lowBandwidth : SettingsStore.getValue("lowBandwidth");
const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls, lowBandwidth));
const [urlsIndex, setIndex] = useState<number>(0);
@@ -106,10 +85,10 @@ const useImageUrl = ({
}, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
const cli = useContext(MatrixClientContext);
const onClientSync = useCallback((syncState: SyncState, prevState: SyncState | null) => {
const onClientSync = useCallback((syncState, prevState) => {
// Consider the client reconnected if there is no error with syncing.
// This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
const reconnected = syncState !== SyncState.Error && prevState !== syncState;
const reconnected = syncState !== "ERROR" && prevState !== syncState;
if (reconnected) {
setIndex(0);
}
@@ -129,25 +108,46 @@ const BaseAvatar: React.FC<IProps> = (props) => {
urls,
width = 40,
height = 40,
resizeMethod = "crop", // eslint-disable-line @typescript-eslint/no-unused-vars
defaultToInitialLetter = true,
onClick,
inputRef,
className,
style: parentStyle,
resizeMethod: _unused, // to keep it from being in `otherProps`
...otherProps
} = props;
const style = {
...parentStyle,
width: toPx(width),
height: toPx(height),
};
const [imageUrl, onError] = useImageUrl({ url, urls });
if (!imageUrl && defaultToInitialLetter && name) {
const avatar = <TextAvatar name={name} idName={idName} width={width} height={height} title={title} />;
const initialLetter = AvatarLogic.getInitialLetter(name);
const textNode = (
<span
className="mx_BaseAvatar_initial"
aria-hidden="true"
style={{
fontSize: toPx(width * 0.65),
width: toPx(width),
lineHeight: toPx(height),
}}
>
{initialLetter}
</span>
);
const imgNode = (
<img
className="mx_BaseAvatar_image"
src={AvatarLogic.defaultAvatarUrlForString(idName || name)}
alt=""
title={title}
onError={onError}
style={{
width: toPx(width),
height: toPx(height),
}}
aria-hidden="true"
data-testid="avatar-img"
/>
);
if (onClick) {
return (
@@ -159,9 +159,9 @@ const BaseAvatar: React.FC<IProps> = (props) => {
className={classNames("mx_BaseAvatar", className)}
onClick={onClick}
inputRef={inputRef}
style={style}
>
{avatar}
{textNode}
{imgNode}
</AccessibleButton>
);
} else {
@@ -170,10 +170,10 @@ const BaseAvatar: React.FC<IProps> = (props) => {
className={classNames("mx_BaseAvatar", className)}
ref={inputRef}
{...otherProps}
style={style}
role="presentation"
>
{avatar}
{textNode}
{imgNode}
</span>
);
}
@@ -187,7 +187,10 @@ const BaseAvatar: React.FC<IProps> = (props) => {
src={imageUrl}
onClick={onClick}
onError={onError}
style={style}
style={{
width: toPx(width),
height: toPx(height),
}}
title={title}
alt={_t("Avatar")}
inputRef={inputRef}
@@ -201,7 +204,10 @@ const BaseAvatar: React.FC<IProps> = (props) => {
className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
src={imageUrl}
onError={onError}
style={style}
style={{
width: toPx(width),
height: toPx(height),
}}
title={title}
alt=""
ref={inputRef}
@@ -214,31 +220,3 @@ const BaseAvatar: React.FC<IProps> = (props) => {
export default BaseAvatar;
export type BaseAvatarType = React.FC<IProps>;
const TextAvatar: React.FC<{
name: string;
idName?: string;
width: number;
height: number;
title?: string;
}> = ({ name, idName, width, height, title }) => {
const initialLetter = AvatarLogic.getInitialLetter(name);
return (
<span
className="mx_BaseAvatar_image mx_BaseAvatar_initial"
aria-hidden="true"
style={{
backgroundColor: AvatarLogic.getColorForString(idName || name),
width: toPx(width),
height: toPx(height),
fontSize: toPx(width * 0.65),
lineHeight: toPx(height),
}}
title={title}
data-testid="avatar-img"
>
{initialLetter}
</span>
);
};

22
src/components/views/avatars/MemberAvatar.tsx
View File

@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016, 2019 - 2023 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 - 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -25,7 +26,6 @@ import { mediaFromMxc } from "../../../customisations/Media";
import { CardContext } from "../right_panel/context";
import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
import { useRoomMemberProfile } from "../../../hooks/room/useRoomMemberProfile";
import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload";
interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
member: RoomMember | null;
@@ -33,13 +33,14 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
width: number;
height: number;
resizeMethod?: ResizeMethod;
/** Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser` */
// The onClick to give the avatar
onClick?: React.MouseEventHandler;
// Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
viewUserOnClick?: boolean;
pushUserOnClick?: boolean;
title?: string;
style?: React.CSSProperties;
/** true to deny `useOnlyCurrentProfiles` usage. Default false. */
forceHistorical?: boolean;
style?: any;
forceHistorical?: boolean; // true to deny `useOnlyCurrentProfiles` usage. Default false.
hideTitle?: boolean;
}
@@ -76,8 +77,8 @@ export default function MemberAvatar({
if (!title) {
title =
UserIdentifierCustomisations.getDisplayUserIdentifier!(member.userId, {
roomId: member.roomId,
UserIdentifierCustomisations.getDisplayUserIdentifier(member?.userId ?? "", {
roomId: member?.roomId ?? "",
}) ?? fallbackUserId;
}
}
@@ -87,6 +88,7 @@ export default function MemberAvatar({
{...props}
width={width}
height={height}
resizeMethod={resizeMethod}
name={name ?? ""}
title={hideTitle ? undefined : title}
idName={member?.userId ?? fallbackUserId}
@@ -94,9 +96,9 @@ export default function MemberAvatar({
onClick={
viewUserOnClick
? () => {
dis.dispatch<ViewUserPayload>({
dis.dispatch({
action: Action.ViewUser,
member: propsMember || undefined,
member: propsMember,
push: card.isCard,
});
}

3
src/components/views/avatars/RoomAvatar.tsx
View File

@@ -109,8 +109,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
}
private onRoomAvatarClick = (): void => {
const avatarMxc = this.props.room?.getMxcAvatarUrl();
const avatarUrl = avatarMxc ? mediaFromMxc(avatarMxc).srcHttp : null;
const avatarUrl = Avatar.avatarUrlForRoom(this.props.room, null, null, null);
const params = {
src: avatarUrl,
name: this.props.room.name,

33
src/components/views/dialogs/polls/PollHistoryDialog.tsx Normal file
View File

@@ -0,0 +1,33 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { _t } from "../../../../languageHandler";
import BaseDialog from "../BaseDialog";
import { IDialogProps } from "../IDialogProps";
type PollHistoryDialogProps = Pick<IDialogProps, "onFinished"> & {
roomId: string;
};
export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({ onFinished }) => {
return (
<BaseDialog title={_t("Polls history")} onFinished={onFinished}>
{/* @TODO(kerrya) to be implemented in PSG-906 */}
</BaseDialog>
);
};

8
src/components/views/messages/RoomCreate.tsx
View File

@@ -28,6 +28,7 @@ import EventTileBubble from "./EventTileBubble";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import RoomContext from "../../../contexts/RoomContext";
import { useRoomState } from "../../../hooks/useRoomState";
import SettingsStore from "../../../settings/SettingsStore";
interface IProps {
/** The m.room.create MatrixEvent that this tile represents */
@@ -40,6 +41,8 @@ interface IProps {
* room.
*/
export const RoomCreate: React.FC<IProps> = ({ mxEvent, timestamp }) => {
const msc3946ProcessDynamicPredecessor = SettingsStore.getValue("feature_dynamic_room_predecessors");
// Note: we ask the room for its predecessor here, instead of directly using
// the information inside mxEvent. This allows us the flexibility later to
// use a different predecessor (e.g. through MSC3946) and still display it
@@ -47,7 +50,10 @@ export const RoomCreate: React.FC<IProps> = ({ mxEvent, timestamp }) => {
const roomContext = useContext(RoomContext);
const predecessor = useRoomState(
roomContext.room,
useCallback((state) => state.findPredecessor(), []),
useCallback(
(state) => state.findPredecessor(msc3946ProcessDynamicPredecessor),
[msc3946ProcessDynamicPredecessor],
),
);
const onLinkClicked = useCallback(

21
src/components/views/right_panel/RoomSummaryCard.tsx
View File

@@ -23,7 +23,7 @@ import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
import BaseCard, { Group } from "./BaseCard";
import { _t } from "../../../languageHandler";
import RoomAvatar from "../avatars/RoomAvatar";
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import AccessibleButton, { ButtonEvent, IAccessibleButtonProps } from "../elements/AccessibleButton";
import defaultDispatcher from "../../../dispatcher/dispatcher";
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
import Modal from "../../../Modal";
@@ -51,6 +51,7 @@ import ExportDialog from "../dialogs/ExportDialog";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import PosthogTrackers from "../../../PosthogTrackers";
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
import { PollHistoryDialog } from "../dialogs/polls/PollHistoryDialog";
interface IProps {
room: Room;
@@ -61,14 +62,15 @@ interface IAppsSectionProps {
room: Room;
}
interface IButtonProps {
interface IButtonProps extends IAccessibleButtonProps {
className: string;
onClick(ev: ButtonEvent): void;
}
const Button: React.FC<IButtonProps> = ({ children, className, onClick }) => {
const Button: React.FC<IButtonProps> = ({ children, className, onClick, ...props }) => {
return (
<AccessibleButton
{...props}
className={classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", className)}
onClick={onClick}
>
@@ -281,6 +283,12 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
});
};
const onRoomPollHistoryClick = (): void => {
Modal.createDialog(PollHistoryDialog, {
roomId: room.roomId,
});
};
const isRoomEncrypted = useIsEncrypted(cli, room);
const roomContext = useContext(RoomContext);
const e2eStatus = roomContext.e2eStatus;
@@ -315,6 +323,8 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
const pinningEnabled = useFeatureEnabled("feature_pinning");
const pinCount = usePinnedEvents(pinningEnabled && room)?.length;
const isPollHistoryEnabled = useFeatureEnabled("feature_poll_history");
return (
<BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
<Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup">
@@ -327,6 +337,11 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
{_t("Files")}
</Button>
)}
{!isVideoRoom && isPollHistoryEnabled && (
<Button className="mx_RoomSummaryCard_icon_poll" onClick={onRoomPollHistoryClick}>
{_t("Polls history")}
</Button>
)}
{pinningEnabled && !isVideoRoom && (
<Button className="mx_RoomSummaryCard_icon_pins" onClick={onRoomPinsClick}>
{_t("Pinned")}

7
src/dispatcher/payloads/ViewUserPayload.ts
View File

@@ -28,11 +28,4 @@ export interface ViewUserPayload extends ActionPayload {
* should be shown (hide whichever relevant components).
*/
member?: RoomMember | User;
/**
* Should this event be pushed as a card into the right panel?
*
* @see RightPanelStore#pushCard
*/
push?: boolean;
}

40
src/editor/parts.ts
View File

@@ -1,5 +1,6 @@
/*
Copyright 2019, 2023 The Matrix.org Foundation C.I.C.
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -300,9 +301,9 @@ export abstract class PillPart extends BasePart implements IPillPart {
}
// helper method for subclasses
protected setAvatarVars(node: HTMLElement, avatarBackground: string, initialLetter: string | undefined): void {
// const avatarBackground = `url('${avatarUrl}')`;
const avatarLetter = `'${initialLetter || ""}'`;
protected setAvatarVars(node: HTMLElement, avatarUrl: string, initialLetter: string): void {
const avatarBackground = `url('${avatarUrl}')`;
const avatarLetter = `'${initialLetter}'`;
// check if the value is changing,
// otherwise the avatars flicker on every keystroke while updating.
if (node.style.getPropertyValue("--avatar-background") !== avatarBackground) {
@@ -418,15 +419,13 @@ class RoomPillPart extends PillPart {
}
protected setAvatar(node: HTMLElement): void {
const avatarUrl = Avatar.avatarUrlForRoom(this.room, 16, 16, "crop");
if (avatarUrl) {
this.setAvatarVars(node, `url('${avatarUrl}')`, "");
return;
let initialLetter = "";
let avatarUrl = Avatar.avatarUrlForRoom(this.room, 16, 16, "crop");
if (!avatarUrl) {
initialLetter = Avatar.getInitialLetter(this.room?.name || this.resourceId);
avatarUrl = Avatar.defaultAvatarUrlForString(this.room?.roomId ?? this.resourceId);
}
const initialLetter = Avatar.getInitialLetter(this.room?.name || this.resourceId);
const color = Avatar.getColorForString(this.room?.roomId ?? this.resourceId);
this.setAvatarVars(node, color, initialLetter);
this.setAvatarVars(node, avatarUrl, initialLetter);
}
public get type(): IPillPart["type"] {
@@ -472,17 +471,14 @@ class UserPillPart extends PillPart {
if (!this.member) {
return;
}
const avatar = Avatar.getMemberAvatar(this.member, 16, 16, "crop");
if (avatar) {
this.setAvatarVars(node, `url('${avatar}')`, "");
return;
}
const name = this.member.name || this.member.userId;
const initialLetter = Avatar.getInitialLetter(name);
const color = Avatar.getColorForString(this.member.userId);
this.setAvatarVars(node, color, initialLetter);
const defaultAvatarUrl = Avatar.defaultAvatarUrlForString(this.member.userId);
const avatarUrl = Avatar.avatarUrlForMember(this.member, 16, 16, "crop");
let initialLetter = "";
if (avatarUrl === defaultAvatarUrl) {
initialLetter = Avatar.getInitialLetter(name);
}
this.setAvatarVars(node, avatarUrl, initialLetter);
}
protected onClick = (): void => {

4
src/i18n/strings/en_EN.json
View File

@@ -934,7 +934,7 @@
"Keep discussions organised with threads.": "Keep discussions organised with threads.",
"Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.": "Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.",
"Rich text editor": "Rich text editor",
"Use rich text instead of Markdown in the message composer. Plain text mode coming soon.": "Use rich text instead of Markdown in the message composer. Plain text mode coming soon.",
"Use rich text instead of Markdown in the message composer.": "Use rich text instead of Markdown in the message composer.",
"Render simple counters in room header": "Render simple counters in room header",
"New ways to ignore people": "New ways to ignore people",
"Currently experimental.": "Currently experimental.",
@@ -948,6 +948,8 @@
"Use new room breadcrumbs": "Use new room breadcrumbs",
"Right panel stays open": "Right panel stays open",
"Defaults to room member list.": "Defaults to room member list.",
"Polls history": "Polls history",
"View a list of polls in a room. (Under active development)": "View a list of polls in a room. (Under active development)",
"Jump to date (adds /jumptodate and jump to date headers)": "Jump to date (adds /jumptodate and jump to date headers)",
"Send read receipts": "Send read receipts",
"Sliding Sync mode": "Sliding Sync mode",

10
src/settings/Settings.tsx
View File

@@ -291,7 +291,7 @@ export const SETTINGS: { [setting: string]: ISetting } = {
isFeature: true,
labsGroup: LabGroup.Messaging,
displayName: _td("Rich text editor"),
description: _td("Use rich text instead of Markdown in the message composer. Plain text mode coming soon."),
description: _td("Use rich text instead of Markdown in the message composer."),
supportedLevels: LEVELS_FEATURE,
default: false,
},
@@ -382,6 +382,14 @@ export const SETTINGS: { [setting: string]: ISetting } = {
description: _td("Defaults to room member list."),
default: false,
},
"feature_poll_history": {
isFeature: true,
labsGroup: LabGroup.Rooms,
supportedLevels: LEVELS_FEATURE,
displayName: _td("Polls history"),
description: _td("View a list of polls in a room. (Under active development)"),
default: false,
},
"feature_jump_to_date": {
// We purposely leave out `isFeature: true` so it doesn't show in Labs
// by default. We will conditionally show it depending on whether we can

76
src/stores/room-list/RoomListStore.ts
View File

@@ -18,6 +18,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
import { Room } from "matrix-js-sdk/src/models/room";
import { logger } from "matrix-js-sdk/src/logger";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { RoomState } from "matrix-js-sdk/src/matrix";
import SettingsStore from "../../settings/SettingsStore";
import { DefaultTagID, OrderedDefaultTagIDs, RoomUpdateCause, TagID } from "./models";
@@ -267,44 +268,55 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> implements
}
this.updateFn.trigger();
} else if (payload.action === "MatrixActions.Room.myMembership") {
const membershipPayload = <any>payload; // TODO: Type out the dispatcher types
const oldMembership = getEffectiveMembership(membershipPayload.oldMembership);
const newMembership = getEffectiveMembership(membershipPayload.membership);
if (oldMembership !== EffectiveMembership.Join && newMembership === EffectiveMembership.Join) {
// If we're joining an upgraded room, we'll want to make sure we don't proliferate
// the dead room in the list.
const createEvent = membershipPayload.room.currentState.getStateEvents(EventType.RoomCreate, "");
if (createEvent && createEvent.getContent()["predecessor"]) {
const prevRoom = this.matrixClient.getRoom(createEvent.getContent()["predecessor"]["room_id"]);
if (prevRoom) {
const isSticky = this.algorithm.stickyRoom === prevRoom;
if (isSticky) {
this.algorithm.setStickyRoom(null);
}
this.onDispatchMyMembership(<any>payload);
return;
}
}
// Note: we hit the algorithm instead of our handleRoomUpdate() function to
// avoid redundant updates.
this.algorithm.handleRoomUpdate(prevRoom, RoomUpdateCause.RoomRemoved);
/**
* Handle a MatrixActions.Room.myMembership event from the dispatcher.
*
* Public for test.
*/
public async onDispatchMyMembership(membershipPayload: any): Promise<void> {
// TODO: Type out the dispatcher types so membershipPayload is not any
const oldMembership = getEffectiveMembership(membershipPayload.oldMembership);
const newMembership = getEffectiveMembership(membershipPayload.membership);
if (oldMembership !== EffectiveMembership.Join && newMembership === EffectiveMembership.Join) {
// If we're joining an upgraded room, we'll want to make sure we don't proliferate
// the dead room in the list.
const roomState: RoomState = membershipPayload.room.currentState;
const createEvent = roomState.getStateEvents(EventType.RoomCreate, "");
if (createEvent && createEvent.getContent()["predecessor"]) {
const prevRoom = this.matrixClient.getRoom(createEvent.getContent()["predecessor"]["room_id"]);
if (prevRoom) {
const isSticky = this.algorithm.stickyRoom === prevRoom;
if (isSticky) {
this.algorithm.setStickyRoom(null);
}
// Note: we hit the algorithm instead of our handleRoomUpdate() function to
// avoid redundant updates.
this.algorithm.handleRoomUpdate(prevRoom, RoomUpdateCause.RoomRemoved);
}
await this.handleRoomUpdate(membershipPayload.room, RoomUpdateCause.NewRoom);
this.updateFn.trigger();
return;
}
if (oldMembership !== EffectiveMembership.Invite && newMembership === EffectiveMembership.Invite) {
await this.handleRoomUpdate(membershipPayload.room, RoomUpdateCause.NewRoom);
this.updateFn.trigger();
return;
}
await this.handleRoomUpdate(membershipPayload.room, RoomUpdateCause.NewRoom);
this.updateFn.trigger();
return;
}
// If it's not a join, it's transitioning into a different list (possibly historical)
if (oldMembership !== newMembership) {
await this.handleRoomUpdate(membershipPayload.room, RoomUpdateCause.PossibleTagChange);
this.updateFn.trigger();
return;
}
if (oldMembership !== EffectiveMembership.Invite && newMembership === EffectiveMembership.Invite) {
await this.handleRoomUpdate(membershipPayload.room, RoomUpdateCause.NewRoom);
this.updateFn.trigger();
return;
}
// If it's not a join, it's transitioning into a different list (possibly historical)
if (oldMembership !== newMembership) {
await this.handleRoomUpdate(membershipPayload.room, RoomUpdateCause.PossibleTagChange);
this.updateFn.trigger();
return;
}
}