From 9e65024652dbdd3e4d8462329db57dbe8e941100 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Thu, 14 Dec 2023 12:05:26 +0000
Subject: [PATCH] feat: preferLargeMedia config

---
 packages/app/config/default.json                |  5 ++++-
 packages/app/config/iris.json                   |  5 ++++-
 packages/app/custom.d.ts                        |  5 ++++-
 packages/app/src/Element/Embed/MediaElement.tsx | 14 +++++++-------
 packages/app/src/Element/ProxyImg.tsx           |  2 +-
 5 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/app/config/default.json b/packages/app/config/default.json
index e1e0035a1..09a124a37 100644
--- a/packages/app/config/default.json
+++ b/packages/app/config/default.json
@@ -11,7 +11,6 @@
   "httpCache": "",
   "animalNamePlaceholders": false,
   "defaultZapPoolFee": 1,
-  "bypassImgProxyError": false,
   "features": {
     "analytics": true,
     "subscriptions": true,
@@ -24,6 +23,10 @@
   "defaultPreferences": {
     "checkSigs": true
   },
+  "media": {
+    "bypassImgProxyError": false,
+    "preferLargeMedia": true
+  },
   "noteCreatorToast": true,
   "hideFromNavbar": ["/graph"],
   "deckSubKind": 1,
diff --git a/packages/app/config/iris.json b/packages/app/config/iris.json
index c3e26fd16..c1edc0b2d 100644
--- a/packages/app/config/iris.json
+++ b/packages/app/config/iris.json
@@ -11,7 +11,6 @@
   "httpCache": "",
   "animalNamePlaceholders": true,
   "defaultZapPoolFee": 0.5,
-  "bypassImgProxyError": true,
   "features": {
     "analytics": true,
     "subscriptions": false,
@@ -24,6 +23,10 @@
   "defaultPreferences": {
     "checkSigs": true
   },
+  "media": {
+    "bypassImgProxyError": true,
+    "preferLargeMedia": true
+  },
   "hideFromNavbar": [],
   "eventLinkPrefix": "note",
   "profileLinkPrefix": "npub",
diff --git a/packages/app/custom.d.ts b/packages/app/custom.d.ts
index b8730ec49..2a4eacb70 100644
--- a/packages/app/custom.d.ts
+++ b/packages/app/custom.d.ts
@@ -52,7 +52,6 @@ declare const CONFIG: {
   httpCache: string;
   animalNamePlaceholders: boolean;
   defaultZapPoolFee: number;
-  bypassImgProxyError: boolean;
   features: {
     analytics: boolean;
     subscriptions: boolean;
@@ -65,6 +64,10 @@ declare const CONFIG: {
   signUp: {
     moderation: boolean;
   };
+  media: {
+    bypassImgProxyError: boolean;
+    preferLargeMedia: boolean;
+  };
   // Filter urls from nav sidebar
   hideFromNavbar: Array<string>;
   // Limit deck to certain subscriber tier
diff --git a/packages/app/src/Element/Embed/MediaElement.tsx b/packages/app/src/Element/Embed/MediaElement.tsx
index ab54cc40c..2535d6dc4 100644
--- a/packages/app/src/Element/Embed/MediaElement.tsx
+++ b/packages/app/src/Element/Embed/MediaElement.tsx
@@ -37,20 +37,20 @@ const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => {
     const style = {} as CSSProperties;
     if (meta?.height && meta.width && imageRef.current) {
       const scale = imageRef.current.offsetWidth / meta.width;
-      style.height = `${meta.height * scale}px`;
+      style.height = `${Math.min(document.body.clientHeight * 0.8, meta.height * scale)}px`;
     }
     return style;
-  }, [imageRef.current]);
+  }, [imageRef.current, meta]);
 
   return (
-    <div className={classNames("flex items-center -mx-4 md:mx-0 my-2", { "md:h-[510px]": !meta })}>
+    <div className={classNames("flex items-center -mx-4 md:mx-0 my-2", { "md:h-[510px]": !meta && !CONFIG.media.preferLargeMedia })}>
       <ProxyImg
         key={url}
         src={url}
         sha256={meta?.sha256}
         onClick={onMediaClick}
-        className={classNames("max-h-[80vh] w-full h-full object-contain object-center md:object-left", {
-          "md:max-h-[510px]": !meta,
+        className={classNames("max-h-[80vh] w-full h-full object-contain object-center", {
+          "md:max-h-[510px]": !meta && !CONFIG.media.preferLargeMedia,
         })}
         style={style}
         ref={imageRef}
@@ -77,7 +77,7 @@ const VideoElement = ({ url }: VideoElementProps) => {
   }, [inView]);
 
   return (
-    <div ref={videoContainerRef} className="flex justify-center items-center -mx-4 md:mx-0 md:h-[510px] my-2">
+    <div ref={videoContainerRef} className={classNames("flex justify-center items-center -mx-4 md:mx-0 my-2", { "md:h-[510px]": !CONFIG.media.preferLargeMedia })}>
       <video
         ref={videoRef}
         loop={true}
@@ -85,7 +85,7 @@ const VideoElement = ({ url }: VideoElementProps) => {
         src={url}
         controls
         poster={proxy(url)}
-        className="max-h-[80vh] md:max-h-[510px]"
+        className={classNames("max-h-[80vh]", { "md:max-h-[510px]": !CONFIG.media.preferLargeMedia })}
         onClick={e => e.stopPropagation()}
       />
     </div>
diff --git a/packages/app/src/Element/ProxyImg.tsx b/packages/app/src/Element/ProxyImg.tsx
index 39c0fc148..506b3f1d8 100644
--- a/packages/app/src/Element/ProxyImg.tsx
+++ b/packages/app/src/Element/ProxyImg.tsx
@@ -15,7 +15,7 @@ export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(
   ({ size, className, promptToLoadDirectly, missingImageElement, sha256, ...props }: ProxyImgProps, ref) => {
     const { proxy } = useImgProxy();
     const [loadFailed, setLoadFailed] = useState(false);
-    const [bypass, setBypass] = useState(CONFIG.bypassImgProxyError);
+    const [bypass, setBypass] = useState(CONFIG.media.bypassImgProxyError);
 
     if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) {
       return (