Added setting to turn off url previews

src/app/molecules/message/Message.jsx

@@ -43,6 +43,7 @@ import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
 import { getBlobSafeMimeType } from '../../../util/mimetypes';
 import { html, plain } from '../../../util/markdown';
 import { Embed } from '../media/Media';
+import settings from '../../../client/state/settings';
 
 function PlaceholderMessage() {
   return (
@@ -808,7 +809,7 @@ function Message({
             isEdited={isEdited}
           />
         )}
-        {msgType === 'm.text' && findLinks(body).map((link) => (
+        {settings.showUrlPreview && msgType === 'm.text' && findLinks(body).map((link) => (
           <Embed key={link.href} link={link.href} />
         ))}
         {isEdit && (

src/app/organisms/settings/Settings.jsx

@@ -7,7 +7,8 @@ import settings from '../../../client/state/settings';
 import navigation from '../../../client/state/navigation';
 import {
   toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents,
-  toggleNotifications, toggleNotificationSounds, toggleShowRoomListAvatar, toggleShowYoutubeEmbedPlayer,
+  toggleNotifications, toggleNotificationSounds, toggleShowRoomListAvatar,
+  toggleShowYoutubeEmbedPlayer, toggleShowUrlPreview,
 } from '../../../client/action/settings';
 import { usePermission } from '../../hooks/usePermission';
 
@@ -90,6 +91,16 @@ function AppearanceSection() {
           )}
           content={<Text variant="b3">Will show room avatars in the room list.</Text>}
         />
+        <SettingTile
+          title="Show URL previews"
+          options={(
+            <Toggle
+              isActive={settings.showUrlPreview}
+              onToggle={() => { toggleShowUrlPreview(); updateState({}); }}
+            />
+              )}
+          content={<Text variant="b3">Show additional info about urls.</Text>}
+        />
         <SettingTile
           title="Show Youtube embed player"
           options={(
@@ -98,7 +109,7 @@ function AppearanceSection() {
               onToggle={() => { toggleShowYoutubeEmbedPlayer(); updateState({}); }}
             />
               )}
-          content={<Text variant="b3">Will show a youtube embed player for youtube links.</Text>}
+          content={<Text variant="b3">Will show a youtube embed player for youtube links. (You need to enable url previews for this)</Text>}
         />
       </div>
       <div className="settings-appearance__card">

src/client/action/settings.js

@@ -54,3 +54,9 @@ export function toggleShowYoutubeEmbedPlayer() {
     type: cons.actions.settings.TOGGLE_SHOW_YOUTUBE_EMBED_PLAYER,
   });
 }
+
+export function toggleShowUrlPreview() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_SHOW_URL_PREVIEW,
+  });
+}

src/client/state/cons.js

@@ -74,6 +74,7 @@ const cons = {
       TOGGLE_NOTIFICATION_SOUNDS: 'TOGGLE_NOTIFICATION_SOUNDS',
       TOGGLE_SHOW_ROOM_LIST_AVATAR: 'TOGGLE_SHOW_ROOM_LIST_AVATAR',
       TOGGLE_SHOW_YOUTUBE_EMBED_PLAYER: 'TOGGLE_SHOW_YOUTUBE_EMBED_PLAYER',
+      TOGGLE_SHOW_URL_PREVIEW: 'TOGGLE_SHOW_URL_PREVIEW',
     },
   },
   events: {
@@ -148,6 +149,7 @@ const cons = {
       NOTIFICATION_SOUNDS_TOGGLED: 'NOTIFICATION_SOUNDS_TOGGLED',
       SHOW_ROOM_LIST_AVATAR_TOGGLED: 'SHOW_ROOM_LIST_AVATAR_TOGGLED',
       SHOW_YOUTUBE_EMBED_PLAYER_TOGGLED: 'SHOW_YOUTUBE_EMBED_PLAYER_TOGGLED',
+      TOGGLE_SHOW_URL_PREVIEW: 'TOGGLE_SHOW_URL_PREVIEW',
     },
   },
 };

src/client/state/settings.js

@@ -32,6 +32,7 @@ class Settings extends EventEmitter {
     this.isNotificationSounds = this.getIsNotificationSounds();
     this.showRoomListAvatar = this.getShowRoomListAvatar();
     this.showYoutubeEmbedPlayer = this.getShowYoutubeEmbedPlayer();
+    this.showUrlPreview = this.getShowUrlPreview();
 
     this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
   }
@@ -181,6 +182,22 @@ class Settings extends EventEmitter {
     return settings.showYoutubeEmbedPlayer;
   }
 
+  toggleShowUrlPreview() {
+    this.showUrlPreview = !this.showUrlPreview;
+    setSettings('showUrlPreview', this.showUrlPreview);
+
+    this.emit(cons.events.settings.SHOW_URL_PREVIEW_TOGGLED, this.showUrlPreview);
+  }
+
+  getShowUrlPreview() {
+    if (typeof this.showUrlPreview === 'boolean') return this.showUrlPreview;
+
+    const settings = getSettings();
+    if (settings === null) return false;
+    if (typeof settings.showUrlPreview === 'undefined') return false;
+    return settings.showUrlPreview;
+  }
+
   setter(action) {
     const actions = {
       [cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {
@@ -226,6 +243,9 @@ class Settings extends EventEmitter {
       [cons.actions.settings.TOGGLE_SHOW_YOUTUBE_EMBED_PLAYER]: () => {
         this.toggleShowYoutubeEmbedPlayer();
       },
+      [cons.actions.settings.TOGGLE_SHOW_URL_PREVIEW]: () => {
+        this.toggleShowUrlPreview();
+      },
     };
 
     actions[action.type]?.();