Merge branch 'develop' into weeman1337/pillify-permalinks

Author: weeman1337

CHANGELOG.md

@@ -1,3 +1,44 @@
+Changes in [3.68.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.68.0) (2023-03-15)
+=====================================================================================================
+
+## ✨ Features
+ * Only allow to start a DM with one email if encryption by default is enabled ([\#10253](https://github.com/matrix-org/matrix-react-sdk/pull/10253)). Fixes vector-im/element-web#23133.
+ * DM rooms are now encrypted if encryption by default is enabled and only inviting a single email address. Any action in the result DM room will be blocked until the other has joined. ([\#10229](https://github.com/matrix-org/matrix-react-sdk/pull/10229)).
+ * Reduce bottom margin of ReplyChain on compact modern layout ([\#8972](https://github.com/matrix-org/matrix-react-sdk/pull/8972)). Fixes vector-im/element-web#22748. Contributed by @luixxiul.
+ * Support for v2 of MSC3903 ([\#10165](https://github.com/matrix-org/matrix-react-sdk/pull/10165)). Contributed by @hughns.
+ * When starting a DM, existing rooms with pending third-party invites will be reused. ([\#10256](https://github.com/matrix-org/matrix-react-sdk/pull/10256)). Fixes vector-im/element-web#23139.
+ * Polls push rules: synchronise poll rules with message rules ([\#10263](https://github.com/matrix-org/matrix-react-sdk/pull/10263)). Contributed by @kerryarchibald.
+ * New verification request toast button labels ([\#10259](https://github.com/matrix-org/matrix-react-sdk/pull/10259)).
+ * Remove padding around integration manager iframe ([\#10148](https://github.com/matrix-org/matrix-react-sdk/pull/10148)).
+ * Fix block code styling in rich text editor ([\#10246](https://github.com/matrix-org/matrix-react-sdk/pull/10246)). Contributed by @alunturner.
+ * Poll history: fetch more poll history ([\#10235](https://github.com/matrix-org/matrix-react-sdk/pull/10235)). Contributed by @kerryarchibald.
+ * Sort short/exact emoji matches before longer incomplete matches ([\#10212](https://github.com/matrix-org/matrix-react-sdk/pull/10212)). Fixes vector-im/element-web#23210. Contributed by @grimhilt.
+ * Poll history: detail screen ([\#10172](https://github.com/matrix-org/matrix-react-sdk/pull/10172)). Contributed by @kerryarchibald.
+ * Provide a more detailed error message than "No known servers" ([\#6048](https://github.com/matrix-org/matrix-react-sdk/pull/6048)). Fixes vector-im/element-web#13247. Contributed by @aaronraimist.
+ * Say when a call was answered from a different device ([\#10224](https://github.com/matrix-org/matrix-react-sdk/pull/10224)).
+ * Widget permissions customizations using module api ([\#10121](https://github.com/matrix-org/matrix-react-sdk/pull/10121)). Contributed by @maheichyk.
+ * Fix copy button icon overlapping with copyable text ([\#10227](https://github.com/matrix-org/matrix-react-sdk/pull/10227)). Contributed by @Adesh-Pandey.
+ * Support joining non-peekable rooms via the module API ([\#10154](https://github.com/matrix-org/matrix-react-sdk/pull/10154)). Contributed by @maheichyk.
+ * The "new login" toast does now display the same device information as in the settings. "No" does now open the device settings. "Yes, it was me" dismisses the toast. ([\#10200](https://github.com/matrix-org/matrix-react-sdk/pull/10200)).
+ * Do not prompt for a password when doing a „reset all“ after login ([\#10208](https://github.com/matrix-org/matrix-react-sdk/pull/10208)).
+
+## 🐛 Bug Fixes
+ * Fix incorrect copy in space creation flow ([\#10296](https://github.com/matrix-org/matrix-react-sdk/pull/10296)). Fixes vector-im/element-web#24741.
+ * Fix space settings dialog having rogue title tooltip ([\#10293](https://github.com/matrix-org/matrix-react-sdk/pull/10293)). Fixes vector-im/element-web#24740.
+ * Show spinner when starting a DM from the user profile (right panel) ([\#10290](https://github.com/matrix-org/matrix-react-sdk/pull/10290)).
+ * Reduce height of toggle on expanded view source event ([\#10283](https://github.com/matrix-org/matrix-react-sdk/pull/10283)). Fixes vector-im/element-web#22873. Contributed by @luixxiul.
+ * Pillify http and non-prefixed matrix.to links ([\#10277](https://github.com/matrix-org/matrix-react-sdk/pull/10277)). Fixes vector-im/element-web#20844.
+ * Fix some features not being configurable via `features` ([\#10276](https://github.com/matrix-org/matrix-react-sdk/pull/10276)).
+ * Fix starting a DM from the right panel in some cases ([\#10278](https://github.com/matrix-org/matrix-react-sdk/pull/10278)). Fixes vector-im/element-web#24722.
+ * Align info EventTile and normal EventTile on IRC layout ([\#10197](https://github.com/matrix-org/matrix-react-sdk/pull/10197)). Fixes vector-im/element-web#22782. Contributed by @luixxiul.
+ * Fix blowout of waveform of the voice message player on narrow UI ([\#8861](https://github.com/matrix-org/matrix-react-sdk/pull/8861)). Fixes vector-im/element-web#22604. Contributed by @luixxiul.
+ * Fix the hidden view source toggle on IRC layout ([\#10266](https://github.com/matrix-org/matrix-react-sdk/pull/10266)). Fixes vector-im/element-web#22872. Contributed by @luixxiul.
+ * Fix buttons on the room header being compressed due to long room name ([\#10155](https://github.com/matrix-org/matrix-react-sdk/pull/10155)). Contributed by @luixxiul.
+ * Use the room avatar as a placeholder in calls ([\#10231](https://github.com/matrix-org/matrix-react-sdk/pull/10231)).
+ * Fix calls showing as 'connecting' after hangup ([\#10223](https://github.com/matrix-org/matrix-react-sdk/pull/10223)).
+ * Prevent multiple Jitsi calls started at the same time ([\#10183](https://github.com/matrix-org/matrix-react-sdk/pull/10183)). Fixes vector-im/element-web#23009.
+ * Make localization keys compatible with agglutinative and/or SOV type languages ([\#10159](https://github.com/matrix-org/matrix-react-sdk/pull/10159)). Contributed by @luixxiul.
+
 Changes in [3.67.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.67.0) (2023-02-28)
 =====================================================================================================
 

docs/jitsi.md

@@ -19,6 +19,10 @@ _Hash/fragment (formatted as a query string)_:
 -   `conferenceId`: The room or conference ID to connect Jitsi Meet to.
 -   `isAudioOnly`: Boolean for whether this is a voice-only conference. May not
     be present, should default to `false`.
+-   `startWithAudioMuted`: Boolean for whether the calls start with audio
+    muted. May not be present.
+-   `startWithVideoMuted`: Boolean for whether the calls start with video
+    muted. May not be present.
 -   `displayName`: The display name of the user viewing the widget. May not
     be present or could be null.
 -   `avatarUrl`: The HTTP(S) URL for the avatar of the user viewing the widget. May

package.json

@@ -1,6 +1,6 @@
 {
     "name": "matrix-react-sdk",
-    "version": "3.67.0",
+    "version": "3.68.0",
     "description": "SDK for matrix.org using React",
     "author": "matrix.org",
     "repository": {

src/BasePlatform.ts

@@ -442,4 +442,12 @@ export default abstract class BasePlatform {
             logger.error("idbDelete failed in destroyPickleKey", e);
         }
     }
+
+    /**
+     * Clear app storage, called when logging out to perform data clean up.
+     */
+    public async clearStorage(): Promise<void> {
+        window.sessionStorage.clear();
+        window.localStorage.clear();
+    }
 }

src/Lifecycle.ts

@@ -862,6 +862,7 @@ export async function onLoggedOut(): Promise<void> {
     stopMatrixClient();
     await clearStorage({ deleteEverything: true });
     LifecycleCustomisations.onLoggedOutAndStorageCleared?.();
+    await PlatformPeg.get()?.clearStorage();
 
     // Do this last, so we can make sure all storage has been cleared and all
     // customisations got the memo.

src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx

@@ -84,8 +84,7 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
     };
 
     private onPassphraseChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
-        this.setState({ passphrase: ev.target.value });
-        this.onFormChange(); // update general form state too
+        this.setState({ passphrase: ev.target.value }, this.onFormChange); // update general form state too
     };
 
     private onFormSubmit = (ev: React.FormEvent): boolean => {

src/components/views/context_menus/MessageContextMenu.tsx

@@ -284,7 +284,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         this.closeMenu();
     };
 
-    private onShareClick = (e: React.MouseEvent): void => {
+    private onShareClick = (e: ButtonEvent): void => {
         e.preventDefault();
         Modal.createDialog(ShareDialog, {
             target: this.props.mxEvent,

src/components/views/elements/EditableItemList.tsx

@@ -21,7 +21,7 @@ import Field from "./Field";
 import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
 
 interface IItemProps {
-    index?: number;
+    index: number;
     value?: string;
     onRemove?(index: number): void;
 }
@@ -99,7 +99,7 @@ interface IProps {
     canEdit?: boolean;
     canRemove?: boolean;
     suggestionsListId?: string;
-    onItemAdded?(item: string): void;
+    onItemAdded?(item?: string): void;
     onItemRemoved?(index: number): void;
     onNewItemChanged?(item: string): void;
 }

src/components/views/elements/SettingsFlag.tsx

@@ -22,6 +22,7 @@ import { _t } from "../../../languageHandler";
 import ToggleSwitch from "./ToggleSwitch";
 import StyledCheckbox from "./StyledCheckbox";
 import { SettingLevel } from "../../../settings/SettingLevel";
+import { defaultWatchManager } from "../../../settings/Settings";
 
 interface IProps {
     // The setting must be a boolean
@@ -32,34 +33,58 @@ interface IProps {
     isExplicit?: boolean;
     // XXX: once design replaces all toggles make this the default
     useCheckbox?: boolean;
-    disabled?: boolean;
-    disabledDescription?: string;
     hideIfCannotSet?: boolean;
     onChange?(checked: boolean): void;
 }
 
 interface IState {
     value: boolean;
+    /** true if `SettingsStore.isEnabled` returned false. */
+    disabled: boolean;
 }
 
 export default class SettingsFlag extends React.Component<IProps, IState> {
     public constructor(props: IProps) {
         super(props);
 
         this.state = {
-            value: SettingsStore.getValueAt(
-                this.props.level,
-                this.props.name,
-                this.props.roomId,
-                this.props.isExplicit,
-            ),
+            value: this.getSettingValue(),
+            disabled: this.isSettingDisabled(),
         };
     }
 
+    public componentDidMount(): void {
+        defaultWatchManager.watchSetting(this.props.name, this.props.roomId ?? null, this.onSettingChange);
+    }
+
+    public componentWillUnmount(): void {
+        defaultWatchManager.unwatchSetting(this.onSettingChange);
+    }
+
+    private getSettingValue(): boolean {
+        return SettingsStore.getValueAt(
+            this.props.level,
+            this.props.name,
+            this.props.roomId ?? null,
+            this.props.isExplicit,
+        );
+    }
+
+    private isSettingDisabled(): boolean {
+        return !SettingsStore.isEnabled(this.props.name);
+    }
+
+    private onSettingChange = (): void => {
+        this.setState({
+            value: this.getSettingValue(),
+            disabled: this.isSettingDisabled(),
+        });
+    };
+
     private onChange = async (checked: boolean): Promise<void> => {
         await this.save(checked);
         this.setState({ value: checked });
-        if (this.props.onChange) this.props.onChange(checked);
+        this.props.onChange?.(checked);
     };
 
     private checkBoxOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
@@ -86,19 +111,11 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                 : SettingsStore.getDisplayName(this.props.name, this.props.level)) ?? undefined;
         const description = SettingsStore.getDescription(this.props.name);
         const shouldWarn = SettingsStore.shouldHaveWarning(this.props.name);
-
-        let disabledDescription: JSX.Element | null = null;
-        if (this.props.disabled && this.props.disabledDescription) {
-            disabledDescription = <div className="mx_SettingsFlag_microcopy">{this.props.disabledDescription}</div>;
-        }
+        const disabled = this.state.disabled || !canChange;
 
         if (this.props.useCheckbox) {
             return (
-                <StyledCheckbox
-                    checked={this.state.value}
-                    onChange={this.checkBoxOnChange}
-                    disabled={this.props.disabled || !canChange}
-                >
+                <StyledCheckbox checked={this.state.value} onChange={this.checkBoxOnChange} disabled={disabled}>
                     {label}
                 </StyledCheckbox>
             );
@@ -117,18 +134,18 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                                               w: (sub) => (
                                                   <span className="mx_SettingsTab_microcopy_warning">{sub}</span>
                                               ),
-                                              description: description,
+                                              description,
                                           },
                                       )
                                     : description}
                             </div>
                         )}
-                        {disabledDescription}
                     </label>
                     <ToggleSwitch
                         checked={this.state.value}
                         onChange={this.onChange}
-                        disabled={this.props.disabled || !canChange}
+                        disabled={disabled}
+                        tooltip={disabled ? SettingsStore.disabledMessage(this.props.name) : undefined}
                         title={label}
                     />
                 </div>

src/components/views/right_panel/PinnedMessagesCard.tsx

@@ -45,50 +45,53 @@ interface IProps {
     onClose(): void;
 }
 
+function getPinnedEventIds(room?: Room): string[] {
+    return room?.currentState.getStateEvents(EventType.RoomPinnedEvents, "")?.getContent()?.pinned ?? [];
+}
+
 export const usePinnedEvents = (room?: Room): string[] => {
-    const [pinnedEvents, setPinnedEvents] = useState<string[]>([]);
+    const [pinnedEvents, setPinnedEvents] = useState<string[]>(getPinnedEventIds(room));
 
     const update = useCallback(
         (ev?: MatrixEvent) => {
-            if (!room) return;
             if (ev && ev.getType() !== EventType.RoomPinnedEvents) return;
-            setPinnedEvents(
-                room.currentState.getStateEvents(EventType.RoomPinnedEvents, "")?.getContent()?.pinned || [],
-            );
+            setPinnedEvents(getPinnedEventIds(room));
         },
         [room],
     );
 
     useTypedEventEmitter(room?.currentState, RoomStateEvent.Events, update);
     useEffect(() => {
-        update();
+        setPinnedEvents(getPinnedEventIds(room));
         return () => {
             setPinnedEvents([]);
         };
-    }, [update]);
+    }, [room]);
     return pinnedEvents;
 };
 
-export const useReadPinnedEvents = (room: Room): Set<string> => {
+function getReadPinnedEventIds(room?: Room): Set<string> {
+    return new Set(room.getAccountData(ReadPinsEventId)?.getContent()?.event_ids ?? []);
+}
+
+export const useReadPinnedEvents = (room?: Room): Set<string> => {
     const [readPinnedEvents, setReadPinnedEvents] = useState<Set<string>>(new Set());
 
     const update = useCallback(
         (ev?: MatrixEvent) => {
-            if (!room) return;
             if (ev && ev.getType() !== ReadPinsEventId) return;
-            const readPins = room.getAccountData(ReadPinsEventId)?.getContent()?.event_ids;
-            setReadPinnedEvents(new Set(readPins || []));
+            setReadPinnedEvents(getReadPinnedEventIds(room));
         },
         [room],
     );
 
     useTypedEventEmitter(room, RoomEvent.AccountData, update);
     useEffect(() => {
-        update();
+        setReadPinnedEvents(getReadPinnedEventIds(room));
         return () => {
             setReadPinnedEvents(new Set());
         };
-    }, [update]);
+    }, [room]);
     return readPinnedEvents;
 };
 
@@ -157,34 +160,8 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
         null,
     );
 
-    let content;
-    if (!pinnedEvents) {
-        content = <Spinner />;
-    } else if (pinnedEvents.length > 0) {
-        const onUnpinClicked = async (event: MatrixEvent): Promise<void> => {
-            const pinnedEvents = room.currentState.getStateEvents(EventType.RoomPinnedEvents, "");
-            if (pinnedEvents?.getContent()?.pinned) {
-                const pinned = pinnedEvents.getContent().pinned;
-                const index = pinned.indexOf(event.getId());
-                if (index !== -1) {
-                    pinned.splice(index, 1);
-                    await cli.sendStateEvent(room.roomId, EventType.RoomPinnedEvents, { pinned }, "");
-                }
-            }
-        };
-
-        // show them in reverse, with latest pinned at the top
-        content = filterBoolean(pinnedEvents)
-            .reverse()
-            .map((ev) => (
-                <PinnedEventTile
-                    key={ev.getId()}
-                    event={ev}
-                    onUnpinClicked={canUnpin ? () => onUnpinClicked(ev) : undefined}
-                    permalinkCreator={permalinkCreator}
-                />
-            ));
-    } else {
+    let content: JSX.Element[] | JSX.Element | undefined;
+    if (!pinnedEventIds.length) {
         content = (
             <div className="mx_PinnedMessagesCard_empty_wrapper">
                 <div className="mx_PinnedMessagesCard_empty">
@@ -215,6 +192,32 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
                 </div>
             </div>
         );
+    } else if (pinnedEvents?.length) {
+        const onUnpinClicked = async (event: MatrixEvent): Promise<void> => {
+            const pinnedEvents = room.currentState.getStateEvents(EventType.RoomPinnedEvents, "");
+            if (pinnedEvents?.getContent()?.pinned) {
+                const pinned = pinnedEvents.getContent().pinned;
+                const index = pinned.indexOf(event.getId());
+                if (index !== -1) {
+                    pinned.splice(index, 1);
+                    await cli.sendStateEvent(room.roomId, EventType.RoomPinnedEvents, { pinned }, "");
+                }
+            }
+        };
+
+        // show them in reverse, with latest pinned at the top
+        content = filterBoolean(pinnedEvents)
+            .reverse()
+            .map((ev) => (
+                <PinnedEventTile
+                    key={ev.getId()}
+                    event={ev}
+                    onUnpinClicked={canUnpin ? () => onUnpinClicked(ev) : undefined}
+                    permalinkCreator={permalinkCreator}
+                />
+            ));
+    } else {
+        content = <Spinner />;
     }
 
     return (