diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx index 22408459..93145af0 100644 --- a/src/app/molecules/message/Message.jsx +++ b/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) => ( ))} {isEdit && ( diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx index 1470725d..ee0e3cf5 100644 --- a/src/app/organisms/settings/Settings.jsx +++ b/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={Will show room avatars in the room list.} /> + { toggleShowUrlPreview(); updateState({}); }} + /> + )} + content={Show additional info about urls.} + /> { toggleShowYoutubeEmbedPlayer(); updateState({}); }} /> )} - content={Will show a youtube embed player for youtube links.} + content={Will show a youtube embed player for youtube links. (You need to enable url previews for this)} />
diff --git a/src/client/action/settings.js b/src/client/action/settings.js index 0b932405..5789b01b 100644 --- a/src/client/action/settings.js +++ b/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, + }); +} diff --git a/src/client/state/cons.js b/src/client/state/cons.js index f0afac8c..a88d556b 100644 --- a/src/client/state/cons.js +++ b/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', }, }, }; diff --git a/src/client/state/settings.js b/src/client/state/settings.js index 2f0a41f5..c6270530 100644 --- a/src/client/state/settings.js +++ b/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]?.();