Allow previewing community banner image (#1404)

aeharding · Apr 13, 2024 · 8c6e7e4 · 8c6e7e4
1 parent a54bb29
commit 8c6e7e4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/features/post/inFeed/large/media/LargeFeedMedia.tsx b/src/features/post/inFeed/large/media/LargeFeedMedia.tsx
@@ -26,8 +26,9 @@ export default function LargeFeedMedia({
   blur,
   className,
   style: baseStyle,
+  defaultAspectRatio,
   ...props
-}: PostGalleryImgProps & { blur: boolean }) {
+}: PostGalleryImgProps & { blur?: boolean; defaultAspectRatio?: number }) {
   const dispatch = useAppDispatch();
   const [mediaRef, currentAspectRatio] = useMediaLoadObserver(src);
 
@@ -59,6 +60,7 @@ export default function LargeFeedMedia({
       className={className}
       style={baseStyle}
       state={placeholderState}
+      defaultAspectRatio={defaultAspectRatio}
     >
       <StyledPostMedia
         {...props}

diff --git a/src/features/post/inFeed/large/media/MediaPlaceholder.tsx b/src/features/post/inFeed/large/media/MediaPlaceholder.tsx
@@ -5,7 +5,7 @@ import { IonIcon } from "@ionic/react";
 import { HTMLAttributes } from "react";
 import { imageOutline } from "ionicons/icons";
 
-const PlaceholderContainer = styled.div`
+const PlaceholderContainer = styled.div<{ defaultAspectRatio: number }>`
   display: flex;
 
   background: var(--lightroom-bg);
@@ -14,7 +14,7 @@ const PlaceholderContainer = styled.div`
     align-items: center;
     justify-content: center;
 
-    aspect-ratio: 1.2;
+    aspect-ratio: ${({ defaultAspectRatio }) => defaultAspectRatio};
     position: relative;
 
     ${StyledPostMedia} {
@@ -38,13 +38,15 @@ type State = "loading" | "loaded" | "error" | "custom";
 
 interface MediaPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
   state: State;
+  defaultAspectRatio?: number;
   children?: React.ReactNode;
 }
 
 export default function MediaPlaceholder({
   state,
   className,
   children,
+  defaultAspectRatio = 1.2,
   ...rest
 }: MediaPlaceholderProps) {
   function renderIcon() {
@@ -62,6 +64,7 @@ export default function MediaPlaceholder({
   return (
     <PlaceholderContainer
       className={cx(className, state !== "loaded" && "not-loaded")}
+      defaultAspectRatio={defaultAspectRatio}
       {...rest}
     >
       {children}

diff --git a/src/features/sidebar/internal/GenericSidebar.tsx b/src/features/sidebar/internal/GenericSidebar.tsx
@@ -4,12 +4,13 @@ import React from "react";
 import Markdown from "../../shared/markdown/Markdown";
 import SidebarCounts from "./SidebarCounts";
 import SidebarOwners from "./SidebarOwners";
+import LargeFeedMedia from "../../post/inFeed/large/media/LargeFeedMedia";
 
 const Container = styled.div`
   line-height: 1.5;
 `;
 
-const BannerImg = styled.img`
+const BannerImg = styled(LargeFeedMedia)`
   margin-top: calc(var(--padding-top) * -1);
   margin-left: calc(var(--padding-start) * -1);
   margin-right: calc(var(--padding-end) * -1);
@@ -44,7 +45,13 @@ export default function GenericSidebar({
   return (
     <>
       <Container className="ion-padding-start ion-padding-end ion-padding-top">
-        {banner && <BannerImg src={banner} alt={`Banner for ${name}`} />}
+        {banner && (
+          <BannerImg
+            src={banner}
+            alt={`Banner for ${name}`}
+            defaultAspectRatio={2.5}
+          />
+        )}
         <Markdown id={id}>{sidebar}</Markdown>
         <SidebarCounts counts={counts} />
         {extraBadges}