Fix effect of URL preview toggle not updating live (#8561)

* Remove unused state and fix canPeek

* Fix effect of URL preview toggle not updating live

* Remove stale context fields

Author: t3chguy

src/components/structures/RoomView.tsx

@@ -36,6 +36,7 @@ import { MatrixError } from 'matrix-js-sdk/src/http-api';
 import { ClientEvent } from "matrix-js-sdk/src/client";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
+import { HistoryVisibility } from 'matrix-js-sdk/src/@types/partials';
 
 import shouldHideEvent from '../../shouldHideEvent';
 import { _t } from '../../languageHandler';
@@ -166,7 +167,6 @@ export interface IRoomState {
     searchHighlights?: string[];
     searchInProgress?: boolean;
     callState?: CallState;
-    guestsCanJoin: boolean;
     canPeek: boolean;
     showApps: boolean;
     isPeeking: boolean;
@@ -250,7 +250,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             numUnreadMessages: 0,
             searchResults: null,
             callState: null,
-            guestsCanJoin: false,
             canPeek: false,
             showApps: false,
             isPeeking: false,
@@ -284,11 +283,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         context.on(ClientEvent.Room, this.onRoom);
         context.on(RoomEvent.Timeline, this.onRoomTimeline);
         context.on(RoomEvent.Name, this.onRoomName);
-        context.on(RoomEvent.AccountData, this.onRoomAccountData);
         context.on(RoomStateEvent.Events, this.onRoomStateEvents);
         context.on(RoomStateEvent.Update, this.onRoomStateUpdate);
         context.on(RoomEvent.MyMembership, this.onMyMembership);
-        context.on(ClientEvent.AccountData, this.onAccountData);
         context.on(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatus);
         context.on(CryptoEvent.DeviceVerificationChanged, this.onDeviceVerificationChanged);
         context.on(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
@@ -326,6 +323,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             SettingsStore.watchSetting("showHiddenEventsInTimeline", null, (...[,,, value]) =>
                 this.setState({ showHiddenEvents: value as boolean }),
             ),
+            SettingsStore.watchSetting("urlPreviewsEnabled", null, this.onUrlPreviewsEnabledChange),
+            SettingsStore.watchSetting("urlPreviewsEnabled_e2ee", null, this.onUrlPreviewsEnabledChange),
         ];
     }
 
@@ -722,11 +721,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             this.context.removeListener(ClientEvent.Room, this.onRoom);
             this.context.removeListener(RoomEvent.Timeline, this.onRoomTimeline);
             this.context.removeListener(RoomEvent.Name, this.onRoomName);
-            this.context.removeListener(RoomEvent.AccountData, this.onRoomAccountData);
             this.context.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
             this.context.removeListener(RoomEvent.MyMembership, this.onMyMembership);
             this.context.removeListener(RoomStateEvent.Update, this.onRoomStateUpdate);
-            this.context.removeListener(ClientEvent.AccountData, this.onAccountData);
             this.context.removeListener(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatus);
             this.context.removeListener(CryptoEvent.DeviceVerificationChanged, this.onDeviceVerificationChanged);
             this.context.removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
@@ -1054,19 +1051,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     }
 
     private calculatePeekRules(room: Room) {
-        const guestAccessEvent = room.currentState.getStateEvents("m.room.guest_access", "");
-        if (guestAccessEvent && guestAccessEvent.getContent().guest_access === "can_join") {
-            this.setState({
-                guestsCanJoin: true,
-            });
-        }
-
-        const historyVisibility = room.currentState.getStateEvents("m.room.history_visibility", "");
-        if (historyVisibility && historyVisibility.getContent().history_visibility === "world_readable") {
-            this.setState({
-                canPeek: true,
-            });
-        }
+        const historyVisibility = room.currentState.getStateEvents(EventType.RoomHistoryVisibility, "");
+        this.setState({
+            canPeek: historyVisibility?.getContent().history_visibility === HistoryVisibility.WorldReadable,
+        });
     }
 
     private updatePreviewUrlVisibility({ roomId }: Room) {
@@ -1136,24 +1124,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         this.setState({ e2eStatus });
     }
 
-    private onAccountData = (event: MatrixEvent) => {
-        const type = event.getType();
-        if ((type === "org.matrix.preview_urls" || type === "im.vector.web.settings") && this.state.room) {
-            // non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
+    private onUrlPreviewsEnabledChange = () => {
+        if (this.state.room) {
             this.updatePreviewUrlVisibility(this.state.room);
         }
     };
 
-    private onRoomAccountData = (event: MatrixEvent, room: Room) => {
-        if (room.roomId == this.state.roomId) {
-            const type = event.getType();
-            if (type === "org.matrix.room.preview_urls" || type === "im.vector.web.settings") {
-                // non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
-                this.updatePreviewUrlVisibility(room);
-            }
-        }
-    };
-
     private onRoomStateEvents = (ev: MatrixEvent, state: RoomState) => {
         // ignore if we don't have a room yet
         if (!this.state.room || this.state.room.roomId !== state.roomId) return;

src/components/structures/TimelinePanel.tsx

@@ -213,6 +213,7 @@ interface IEventIndexOpts {
  */
 class TimelinePanel extends React.Component<IProps, IState> {
     static contextType = RoomContext;
+    public context!: React.ContextType<typeof RoomContext>;
 
     // a map from room id to read marker event timestamp
     static roomReadMarkerTsMap: Record<string, number> = {};
@@ -242,6 +243,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
     constructor(props, context) {
         super(props, context);
+        this.context = context;
 
         debuglog("mounting");
 

src/contexts/RoomContext.ts

@@ -35,7 +35,6 @@ const RoomContext = createContext<IRoomState>({
     shouldPeek: true,
     membersLoaded: false,
     numUnreadMessages: 0,
-    guestsCanJoin: false,
     canPeek: false,
     showApps: false,
     isPeeking: false,

test/components/views/rooms/MessageComposerButtons-test.tsx

@@ -209,7 +209,6 @@ function createRoomState(room: Room, narrow: boolean): IRoomState {
         shouldPeek: true,
         membersLoaded: false,
         numUnreadMessages: 0,
-        guestsCanJoin: false,
         canPeek: false,
         showApps: false,
         isPeeking: false,