Feat - Separate embed settings and add multiple embeds

.changeset/add_multiple_previews.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Reorganize Embed settings and reintroduce multiple embeds

.gitignore

@@ -23,3 +23,6 @@ build.sh
 
 # the following line was added with the "git ignore" tool by itsrye.dev, version 0.1.0
 .lh
+
+# the following line was added with nvim by Shea because its annoying to clear every so often
+.vscode/bookmarks.json

src/app/components/RenderMessageContent.tsx

@@ -84,6 +84,7 @@ function RenderMessageContentInternal({
 
   const [autoplayGifs] = useSetting(settingsAtom, 'autoplayGifs');
   const [captionPosition] = useSetting(settingsAtom, 'captionPosition');
+  const [multiplePreviews] = useSetting(settingsAtom, 'multiplePreviews');
   const settingsLinkBaseUrl = useSettingsLinkBaseUrl();
   const captionPositionMap = {
     [CaptionPosition.Above]: 'column-reverse',
@@ -117,8 +118,7 @@ function RenderMessageContentInternal({
         type: getMediaType(url),
       }));
 
-      const mediaLinks = analyzed.filter((item) => item.type !== null);
-      const toRender = mediaLinks.length > 0 ? mediaLinks : [analyzed[0]];
+      const toRender = multiplePreviews ? analyzed : [analyzed[0]];
       return (
         <UrlPreviewHolder>
           {toRender.map(({ url, type }) => {
@@ -136,7 +136,7 @@ function RenderMessageContentInternal({
         </UrlPreviewHolder>
       );
     },
-    [ts, clientUrlPreview, settingsLinkBaseUrl, urlPreview]
+    [multiplePreviews, settingsLinkBaseUrl, clientUrlPreview, urlPreview, ts]
   );
   const renderBundledPreviews = useCallback(
     (bundles: IPreviewUrlResponse[]) => (

src/app/components/message/content/ImageContent.tsx

@@ -197,6 +197,7 @@ export const ImageContent = as<'div', ImageContentProps>(
               hasDimensions ? css.AbsoluteContainer : undefined,
               blurred && css.Blur
             )}
+            style={{ width: '100%' }}
           >
             {renderImage({
               alt: body,

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -33,7 +33,7 @@
 
 const openMediaInNewTab = async (url: string | undefined) => {
   if (!url) {
     console.warn('Attempted to open an empty url');
     return;
   }
   const blob = await downloadMedia(url);
@@ -94,20 +94,29 @@
     );
     const handleAuxClick = (ev: React.MouseEvent) => {
       if (!prev['og:image']) {
         console.warn('No image');
         return;
       }
       if (ev.button === 1) {
         ev.preventDefault();
         const mxcUrl = mxcUrlToHttp(mx, prev['og:image'], /* useAuthentication */ true);
         if (!mxcUrl) {
           console.error('Error converting mxc:// url.');
           return;
         }
         openMediaInNewTab(mxcUrl);
       }
     };
 
+    const ogW = ((prev['og:video'] && prev['og:video:width']) ||
+      (prev['og:image'] && prev['og:image:width']) ||
+      1) as number;
+    const ogH = ((prev['og:video'] && prev['og:video:height']) ||
+      (prev['og:image'] && prev['og:image:height']) ||
+      1) as number;
+
+    const aspectRatio = ogW && ogH ? `${ogW} / ${ogH}` : undefined;
+
     return (
       <Box
         grow="Yes"
@@ -153,9 +162,7 @@
           <VideoContent
             style={{
               width: '100%',
-              aspectRatio:
-                ((prev['og:video:width'] as number) ?? 1) /
-                ((prev['og:video:height'] as number) ?? 1),
+              aspectRatio: aspectRatio ?? '10 / 9',
             }}
             body={prev['og:title']}
             info={{}}
@@ -167,43 +174,44 @@
         )}
         {!prev['og:video'] &&
           prev['og:image'] &&
-          (() => {
-            const ogW = prev['og:image:width'];
-            const ogH = prev['og:image:height'];
-            const aspectRatio = ogW && ogH ? `${ogW} / ${ogH}` : undefined;
-            return (
-              <Box
+          (() => (
+            <Box
+              style={{
+                width: '100%',
+                maxHeight: '320px',
+                aspectRatio: aspectRatio ?? '16 / 9',
+                flexShrink: 1,
+                overflow: 'hidden',
+                position: 'relative',
+              }}
+            >
+              <ImageContent
                 style={{
                   width: '100%',
-                  maxHeight: '400px',
-                  aspectRatio: aspectRatio ?? '16 / 9',
-                  flexShrink: 0,
-                  overflow: 'hidden',
-                  position: 'relative',
+                  height: '100%',
+                  position: 'absolute',
+                  inset: 0,
+                  minHeight: 0,
                 }}
-              >
-                <ImageContent
-                  style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}
-                  autoPlay
-                  onAuxClick={handleAuxClick}
-                  body={prev['og:title']}
-                  url={prev['og:image']}
-                  renderViewer={(p) => <ImageViewer {...p} />}
-                  renderImage={(p) => (
-                    <Image
-                      {...p}
-                      style={{
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'contain',
-                        objectPosition: 'center',
-                      }}
-                    />
-                  )}
-                />
-              </Box>
-            );
-          })()}
+                autoPlay
+                onAuxClick={handleAuxClick}
+                body={prev['og:title']}
+                url={prev['og:image']}
+                renderViewer={(p) => <ImageViewer {...p} />}
+                renderImage={(p) => (
+                  <Image
+                    {...p}
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      objectFit: 'contain',
+                      objectPosition: 'center',
+                    }}
+                  />
+                )}
+              />
+            </Box>
+          ))()}
         {!prev['og:video'] && !prev['og:image'] && prev['og:audio'] && (
           <Box className={css.UrlPreviewAudio} style={{ flexShrink: 0 }}>
             <AudioContent
@@ -262,8 +270,11 @@
               minWidth: 0,
               maxWidth: '100%',
               margin: 0,
+              alignSelf: 'start',
+            }
+          : {
+              alignSelf: 'start',
             }
-          : undefined
       }
     >
       {previewContent}
@@ -345,24 +356,31 @@
               </IconButton>
             </>
           )}
-          <Box ref={innerBoxRef} alignItems="Inherit" gap="200">
+          <Box
+            ref={innerBoxRef}
+            alignItems="Inherit"
+            gap="200"
+            style={{
+              alignItems: 'baseline',
+            }}
+          >
             {children}
-            {canScrollRight && (
-              <>
-                <div className={css.UrlPreviewHolderGradient({ position: 'Right' })} />
-                <IconButton
-                  className={css.UrlPreviewHolderBtn({ position: 'Right' })}
-                  variant="Primary"
-                  radii="Pill"
-                  size="300"
-                  outlined
-                  onClick={handleScrollFront}
-                >
-                  <Icon size="300" src={Icons.ArrowRight} />
-                </IconButton>
-              </>
-            )}
           </Box>
+          {canScrollRight && (
+            <>
+              <div className={css.UrlPreviewHolderGradient({ position: 'Right' })} />
+              <IconButton
+                className={css.UrlPreviewHolderBtn({ position: 'Right' })}
+                variant="Primary"
+                radii="Pill"
+                size="300"
+                outlined
+                onClick={handleScrollFront}
+              >
+                <Icon size="300" src={Icons.ArrowRight} />
+              </IconButton>
+            </>
+          )}
         </Box>
       </Scroll>
     </Box>