diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index e2b61775cb..dea58a606d 100644
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@@ -15,6 +15,8 @@ import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
import PlaySVG from '../../../../public/res/ic/outlined/play.svg';
import { getBlobSafeMimeType } from '../../../util/mimetypes';
+import initMatrix from '../../../client/initMatrix';
+import settings from '../../../client/state/settings';
async function getDecryptedBlob(response, type, decryptData) {
const arrayBuffer = await response.arrayBuffer();
@@ -361,6 +363,202 @@ Video.propTypes = {
blurhash: PropTypes.string,
};
+function IframePlayer({
+ children, link, sitename, title, thumbnail,
+}) {
+ const [videoStarted, setVideoStarted] = useState(false);
+
+ const handlePlayVideo = () => {
+ setVideoStarted(true);
+ };
+
+ return (
+
{ toggleShowRoomListAvatar(); updateState({}); }}
+ />
+ )}
+ content={Will show room avatars in the room list.}
+ />
+
+
+ URL Previews
+ { toggleShowUrlPreview(); updateState({}); }}
+ />
+ )}
+ content={Show additional info about urls.}
+ />
+ { toggleShowYoutubeEmbedPlayer(); updateState({}); }}
+ disabled={!settings.showUrlPreview}
+ />
+ )}
+ content={Will show a youtube embed player for youtube links.}
+ />
Room messages
diff --git a/src/client/action/settings.js b/src/client/action/settings.js
index 7b539c8d74..5789b01bb2 100644
--- a/src/client/action/settings.js
+++ b/src/client/action/settings.js
@@ -42,3 +42,21 @@ export function toggleNotificationSounds() {
type: cons.actions.settings.TOGGLE_NOTIFICATION_SOUNDS,
});
}
+
+export function toggleShowRoomListAvatar() {
+ appDispatcher.dispatch({
+ type: cons.actions.settings.TOGGLE_SHOW_ROOM_LIST_AVATAR,
+ });
+}
+
+export function toggleShowYoutubeEmbedPlayer() {
+ appDispatcher.dispatch({
+ 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 873c4e3335..c15dc6e146 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -82,6 +82,9 @@ const cons = {
TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
TOGGLE_NOTIFICATIONS: 'TOGGLE_NOTIFICATIONS',
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: {
@@ -154,6 +157,9 @@ const cons = {
NICKAVATAR_EVENTS_TOGGLED: 'NICKAVATAR_EVENTS_TOGGLED',
NOTIFICATIONS_TOGGLED: 'NOTIFICATIONS_TOGGLED',
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 af2e279ad3..e47bc0283f 100644
--- a/src/client/state/settings.js
+++ b/src/client/state/settings.js
@@ -33,6 +33,9 @@ class Settings extends EventEmitter {
this.hideNickAvatarEvents = this.getHideNickAvatarEvents();
this._showNotifications = this.getShowNotifications();
this.isNotificationSounds = this.getIsNotificationSounds();
+ this.showRoomListAvatar = this.getShowRoomListAvatar();
+ this.showYoutubeEmbedPlayer = this.getShowYoutubeEmbedPlayer();
+ this.showUrlPreview = this.getShowUrlPreview();
this.darkModeQueryList = window.matchMedia('(prefers-color-scheme: dark)');
@@ -153,6 +156,54 @@ class Settings extends EventEmitter {
return settings.isNotificationSounds;
}
+ toggleShowRoomListAvatar() {
+ this.showRoomListAvatar = !this.showRoomListAvatar;
+ setSettings('showRoomListAvatar', this.showRoomListAvatar);
+
+ this.emit(cons.events.settings.SHOW_ROOM_LIST_AVATAR_TOGGLED, this.showRoomListAvatar);
+ }
+
+ getShowRoomListAvatar() {
+ if (typeof this.showRoomListAvatar === 'boolean') return this.showRoomListAvatar;
+
+ const settings = getSettings();
+ if (settings === null) return false;
+ if (typeof settings.showRoomListAvatar === 'undefined') return false;
+ return settings.showRoomListAvatar;
+ }
+
+ toggleShowYoutubeEmbedPlayer() {
+ this.showYoutubeEmbedPlayer = !this.showYoutubeEmbedPlayer;
+ setSettings('showYoutubeEmbedPlayer', this.showYoutubeEmbedPlayer);
+
+ this.emit(cons.events.settings.SHOW_YOUTUBE_EMBED_PLAYER_TOGGLED, this.showYoutubeEmbedPlayer);
+ }
+
+ getShowYoutubeEmbedPlayer() {
+ if (typeof this.showYoutubeEmbedPlayer === 'boolean') return this.showYoutubeEmbedPlayer;
+
+ const settings = getSettings();
+ if (settings === null) return false;
+ if (typeof settings.showYoutubeEmbedPlayer === 'undefined') return false;
+ 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]: () => {
@@ -192,6 +243,15 @@ class Settings extends EventEmitter {
setSettings('isNotificationSounds', this.isNotificationSounds);
this.emit(cons.events.settings.NOTIFICATION_SOUNDS_TOGGLED, this.isNotificationSounds);
},
+ [cons.actions.settings.TOGGLE_SHOW_ROOM_LIST_AVATAR]: () => {
+ this.toggleShowRoomListAvatar();
+ },
+ [cons.actions.settings.TOGGLE_SHOW_YOUTUBE_EMBED_PLAYER]: () => {
+ this.toggleShowYoutubeEmbedPlayer();
+ },
+ [cons.actions.settings.TOGGLE_SHOW_URL_PREVIEW]: () => {
+ this.toggleShowUrlPreview();
+ },
};
actions[action.type]?.();