From d36a6f60225839f9daddc92a364145e74d1f7faf Mon Sep 17 00:00:00 2001
From: ayes-web <ayes2022@protonmail.com>
Date: Thu, 17 Nov 2022 16:47:35 +0200
Subject: [PATCH] Organized settings, made Embed compontent more logical

---
 src/app/molecules/media/Media.jsx             | 41 ++++++++-----------
 .../molecules/room-selector/RoomSelector.jsx  | 33 ++++++++-------
 src/app/organisms/settings/Settings.jsx       |  6 ++-
 3 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index 977d184b..5bbff64e 100644
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@@ -440,28 +440,27 @@ function Embed({ link }) {
   });
 
   if (urlPreviewInfo != null) {
+    const imageURL = urlPreviewInfo['og:image'] || urlPreviewInfo['og:image:secure_url'];
+    const image = (imageURL != null) ? (
+      <Image
+        link={mx.mxcUrlToHttp(imageURL)}
+        height={urlPreviewInfo['og:image:height'] != null ? parseInt(urlPreviewInfo['og:image:height'], 10) : null}
+        width={urlPreviewInfo['og:image:width'] != null ? parseInt(urlPreviewInfo['og:image:width'], 10) : null}
+        name={urlPreviewInfo['og:image:alt'] || urlPreviewInfo['og:site_name'] || ''}
+        type={urlPreviewInfo['og:image:type'] != null ? urlPreviewInfo['og:image:type'] : null}
+      />
+    ) : null;
+
     // Image only embed
-    if (urlPreviewInfo['og:image'] != null && urlPreviewInfo['og:image:width'] != null && urlPreviewInfo['og:image:height'] != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) {
+    if (image != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) {
       return (
         <div className="file-container">
-          <Image
-            link={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}
-            height={parseInt(urlPreviewInfo['og:image:height'], 10)}
-            width={parseInt(urlPreviewInfo['og:image:width'], 10)}
-            name={urlPreviewInfo['og:image:alt'] || urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'] || ''}
-            type={urlPreviewInfo['og:image:type']}
-          />
+          {image}
         </div>
       );
     }
 
-    let embedTitle;
-
-    if (urlPreviewInfo['og:site_name'] != null && urlPreviewInfo['og:title'] != null) {
-      embedTitle = `${urlPreviewInfo['og:site_name']} - ${urlPreviewInfo['og:title']}`;
-    } else {
-      embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'];
-    }
+    const embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'];
 
     return (
       <div className="file-container">
@@ -480,15 +479,9 @@ function Embed({ link }) {
             )}
           </div>
 
-          {urlPreviewInfo['og:image'] != null && urlPreviewInfo['og:image:width'] != null && urlPreviewInfo['og:image:height'] != null && (
-            <Image
-              link={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}
-              height={parseInt(urlPreviewInfo['og:image:height'], 10)}
-              width={parseInt(urlPreviewInfo['og:image:width'], 10)}
-              name={urlPreviewInfo['og:image:alt'] || urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'] || ''}
-              type={urlPreviewInfo['og:image:type']}
-            />
-          )}
+          <div className="embed-media">
+            {image}
+          </div>
         </div>
       </div>
     );
diff --git a/src/app/molecules/room-selector/RoomSelector.jsx b/src/app/molecules/room-selector/RoomSelector.jsx
index bf99819d..785e19eb 100644
--- a/src/app/molecules/room-selector/RoomSelector.jsx
+++ b/src/app/molecules/room-selector/RoomSelector.jsx
@@ -70,23 +70,22 @@ function RoomSelector({
       isUnread={isUnread}
       content={(
         <>
-          {!settings.showRoomListAvatar && (
-          <Avatar
-            text={name}
-            bgColor={colorMXID(roomId)}
-            imageSrc={imageSrc}
-            iconColor="var(--ic-surface-low)"
-            iconSrc={iconSrc}
-            size="extra-small"
-          />
-          )}
-          {settings.showRoomListAvatar && (
-          <Avatar
-            text={name}
-            bgColor={colorMXID(roomId)}
-            imageSrc={avatarSrc}
-            size="extra-small"
-          />
+          {settings.showRoomListAvatar ? (
+            <Avatar
+              text={name}
+              bgColor={colorMXID(roomId)}
+              imageSrc={avatarSrc}
+              size="extra-small"
+            />
+          ) : (
+            <Avatar
+              text={name}
+              bgColor={colorMXID(roomId)}
+              imageSrc={imageSrc}
+              iconColor="var(--ic-surface-low)"
+              iconSrc={iconSrc}
+              size="extra-small"
+            />
           )}
           <Text variant="b1" weight={isUnread ? 'medium' : 'normal'}>
             {twemojify(name)}
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index ee0e3cf5..b75a499e 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -91,6 +91,9 @@ function AppearanceSection() {
           )}
           content={<Text variant="b3">Will show room avatars in the room list.</Text>}
         />
+      </div>
+      <div className="settings-appearance__card">
+        <MenuHeader>URL Previews</MenuHeader>
         <SettingTile
           title="Show URL previews"
           options={(
@@ -107,9 +110,10 @@ function AppearanceSection() {
             <Toggle
               isActive={settings.showYoutubeEmbedPlayer}
               onToggle={() => { toggleShowYoutubeEmbedPlayer(); updateState({}); }}
+              disabled={!settings.showUrlPreview}
             />
               )}
-          content={<Text variant="b3">Will show a youtube embed player for youtube links. (You need to enable url previews for this)</Text>}
+          content={<Text variant="b3">Will show a youtube embed player for youtube links.</Text>}
         />
       </div>
       <div className="settings-appearance__card">