Merge branch 'develop' into unread-title-indicator

src/components/structures/PipContainer.tsx

@@ -258,17 +258,16 @@ class PipContainerInner extends React.Component<IProps, IState> {
     }
 
     private createVoiceBroadcastPlaybackPipContent(voiceBroadcastPlayback: VoiceBroadcastPlayback): CreatePipChildren {
-        if (this.state.viewedRoomId === voiceBroadcastPlayback.infoEvent.getRoomId()) {
-            return ({ onStartMoving }) => (
-                <div onMouseDown={onStartMoving}>
-                    <VoiceBroadcastPlaybackBody playback={voiceBroadcastPlayback} pip={true} />
-                </div>
+        const content =
+            this.state.viewedRoomId === voiceBroadcastPlayback.infoEvent.getRoomId() ? (
+                <VoiceBroadcastPlaybackBody playback={voiceBroadcastPlayback} pip={true} />
+            ) : (
+                <VoiceBroadcastSmallPlaybackBody playback={voiceBroadcastPlayback} />
             );
-        }
 
         return ({ onStartMoving }) => (
-            <div onMouseDown={onStartMoving}>
-                <VoiceBroadcastSmallPlaybackBody playback={voiceBroadcastPlayback} />
+            <div key={voiceBroadcastPlayback.infoEvent.getId()} onMouseDown={onStartMoving}>
+                {content}
             </div>
         );
     }

src/components/views/dialogs/ServerOfflineDialog.tsx

@@ -48,7 +48,8 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
     private renderTimeline(): React.ReactElement[] {
         return EchoStore.instance.contexts.map((c, i) => {
             if (!c.firstFailedTime) return null; // not useful
-            if (!(c instanceof RoomEchoContext)) throw new Error("Cannot render unknown context: " + c);
+            if (!(c instanceof RoomEchoContext))
+                throw new Error("Cannot render unknown context: " + c.constructor.name);
             const header = (
                 <div className="mx_ServerOfflineDialog_content_context_timeline_header">
                     <RoomAvatar width={24} height={24} room={c.room} />

src/components/views/elements/EventListSummary.tsx

@@ -507,39 +507,36 @@ export default class EventListSummary extends React.Component<IProps> {
         eventsToRender.forEach((e, index) => {
             const type = e.getType();
 
-            let userId = e.getSender();
-            if (type === EventType.RoomMember) {
-                userId = e.getStateKey();
+            let userKey = e.getSender()!;
+            if (type === EventType.RoomThirdPartyInvite) {
+                userKey = e.getContent().display_name;
+            } else if (type === EventType.RoomMember) {
+                userKey = e.getStateKey();
             } else if (e.isRedacted()) {
-                userId = e.getUnsigned()?.redacted_because?.sender;
+                userKey = e.getUnsigned()?.redacted_because?.sender;
             }
 
             // Initialise a user's events
-            if (!userEvents[userId]) {
-                userEvents[userId] = [];
+            if (!userEvents[userKey]) {
+                userEvents[userKey] = [];
             }
 
-            let displayName = userId;
-            if (type === EventType.RoomThirdPartyInvite) {
-                displayName = e.getContent().display_name;
-                if (e.sender) {
-                    latestUserAvatarMember.set(userId, e.sender);
-                }
-            } else if (e.isRedacted()) {
-                const sender = this.context?.room.getMember(userId);
+            let displayName = userKey;
+            if (e.isRedacted()) {
+                const sender = this.context?.room?.getMember(userKey);
                 if (sender) {
                     displayName = sender.name;
-                    latestUserAvatarMember.set(userId, sender);
+                    latestUserAvatarMember.set(userKey, sender);
                 }
             } else if (e.target && TARGET_AS_DISPLAY_NAME_EVENTS.includes(type as EventType)) {
                 displayName = e.target.name;
-                latestUserAvatarMember.set(userId, e.target);
-            } else if (e.sender) {
+                latestUserAvatarMember.set(userKey, e.target);
+            } else if (e.sender && type !== EventType.RoomThirdPartyInvite) {
                 displayName = e.sender.name;
-                latestUserAvatarMember.set(userId, e.sender);
+                latestUserAvatarMember.set(userKey, e.sender);
             }
 
-            userEvents[userId].push({
+            userEvents[userKey].push({
                 mxEvent: e,
                 displayName,
                 index: index,

src/components/views/rooms/RoomPreviewCard.tsx

@@ -116,7 +116,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
         joinButtons = (
             <>
                 <AccessibleButton
-                    kind="secondary"
+                    kind="primary_outline"
                     onClick={() => {
                         setBusy(true);
                         onRejectButtonClicked();

src/components/views/settings/ProfileSettings.tsx

@@ -185,6 +185,10 @@ export default class ProfileSettings extends React.Component<{}, IState> {
             withDisplayName: true,
         });
 
+        // False negative result from no-base-to-string rule, doesn't seem to account for Symbol.toStringTag
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
+        const avatarUrl = this.state.avatarUrl?.toString();
+
         return (
             <form onSubmit={this.saveProfile} autoComplete="off" noValidate={true} className="mx_ProfileSettings">
                 <input
@@ -216,7 +220,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
                         </p>
                     </div>
                     <AvatarSetting
-                        avatarUrl={this.state.avatarUrl?.toString()}
+                        avatarUrl={avatarUrl}
                         avatarName={this.state.displayName || this.state.userId}
                         avatarAltText={_t("Profile picture")}
                         uploadAvatar={this.uploadAvatar}

src/i18n/strings/en_EN.json

@@ -662,7 +662,7 @@
     "Unable to decrypt voice broadcast": "Unable to decrypt voice broadcast",
     "Unable to play this voice broadcast": "Unable to play this voice broadcast",
     "Stop live broadcasting?": "Stop live broadcasting?",
-    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.",
+    "Are you sure you want to stop your live broadcast? This will end the broadcast and the full recording will be available in the room.": "Are you sure you want to stop your live broadcast? This will end the broadcast and the full recording will be available in the room.",
     "Yes, stop broadcast": "Yes, stop broadcast",
     "Listen to live broadcast?": "Listen to live broadcast?",
     "If you start listening to this live broadcast, your current live broadcast recording will be ended.": "If you start listening to this live broadcast, your current live broadcast recording will be ended.",

src/rageshake/submit-rageshake.ts

@@ -84,7 +84,8 @@ async function collectBugReport(opts: IOpts = {}, gzipLogs = true): Promise<Form
         body.append("user_id", client.credentials.userId);
         body.append("device_id", client.deviceId);
 
-        if (client.isCryptoEnabled()) {
+        // TODO: make this work with rust crypto
+        if (client.isCryptoEnabled() && client.crypto) {
             const keys = [`ed25519:${client.getDeviceEd25519Key()}`];
             if (client.getDeviceCurve25519Key) {
                 keys.push(`curve25519:${client.getDeviceCurve25519Key()}`);
@@ -259,7 +260,7 @@ export async function downloadBugReport(opts: IOpts = {}): Promise<void> {
                 reader.readAsArrayBuffer(value as Blob);
             });
         } else {
-            metadata += `${key} = ${value}\n`;
+            metadata += `${key} = ${value as string}\n`;
         }
     }
     tape.append("issue.txt", metadata);

src/sentry.ts

@@ -116,7 +116,8 @@ function getEnabledLabs(): string {
 }
 
 async function getCryptoContext(client: MatrixClient): Promise<CryptoContext> {
-    if (!client.isCryptoEnabled()) {
+    // TODO: make this work with rust crypto
+    if (!client.isCryptoEnabled() || !client.crypto) {
         return {};
     }
     const keys = [`ed25519:${client.getDeviceEd25519Key()}`];

src/stores/widgets/StopGapWidget.ts

@@ -389,7 +389,7 @@ export class StopGapWidget extends EventEmitter {
                     // Now open the integration manager
                     // TODO: Spec this interaction.
                     const data = ev.detail.data;
-                    const integType = data?.integType;
+                    const integType = data?.integType as string;
                     const integId = <string>data?.integId;
 
                     // noinspection JSIgnoredPromiseFromCall

src/utils/FileUtils.ts

@@ -69,7 +69,7 @@ export function presentableTextForFile(
         // it since it is "ugly", users generally aren't aware what it
         // means and the type of the attachment can usually be inferred
         // from the file extension.
-        text += " (" + filesize(content.info.size) + ")";
+        text += " (" + <string>filesize(content.info.size) + ")";
     }
     return text;
 }

src/utils/Whenable.ts

@@ -19,7 +19,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { IDestroyable } from "./IDestroyable";
 import { arrayFastClone } from "./arrays";
 
-export type WhenFn<T> = (w: Whenable<T>) => void;
+export type WhenFn<T extends string | number> = (w: Whenable<T>) => void;
 
 /**
  * Whenables are a cheap way to have Observable patterns mixed with typical
@@ -27,7 +27,7 @@ export type WhenFn<T> = (w: Whenable<T>) => void;
  * are intended to be used when a condition will be met multiple times and
  * the consumer needs to know *when* that happens.
  */
-export abstract class Whenable<T> implements IDestroyable {
+export abstract class Whenable<T extends string | number> implements IDestroyable {
     private listeners: { condition: T | null; fn: WhenFn<T> }[] = [];
 
     /**

src/utils/exportUtils/HtmlExport.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -65,7 +65,7 @@ export default class HTMLExporter extends Exporter {
         this.threadsEnabled = SettingsStore.getValue("feature_threadenabled");
     }
 
-    protected async getRoomAvatar(): Promise<ReactNode> {
+    protected async getRoomAvatar(): Promise<string> {
         let blob: Blob | undefined = undefined;
         const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
         const avatarPath = "room.png";

src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx

@@ -36,7 +36,7 @@ const showStopBroadcastingDialog = async (): Promise<boolean> => {
         description: (
             <p>
                 {_t(
-                    "Are you sure you want to stop your live broadcast?" +
+                    "Are you sure you want to stop your live broadcast? " +
                         "This will end the broadcast and the full recording will be available in the room.",
                 )}
             </p>

src/voice-broadcast/models/VoiceBroadcastPlayback.ts

@@ -396,7 +396,11 @@ export class VoiceBroadcastPlayback
         }
 
         if (!this.playbacks.has(eventId)) {
+            // set to buffering while loading the chunk data
+            const currentState = this.getState();
+            this.setState(VoiceBroadcastPlaybackState.Buffering);
             await this.loadPlayback(event);
+            this.setState(currentState);
         }
 
         const playback = this.playbacks.get(eventId);