From 30d23d855526ecbdd6a2ae2e206f4f63ddc42a94 Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Wed, 18 May 2022 23:40:47 -0500
Subject: [PATCH] Tweaks to Preview Max Height (#2012)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../Objects/Preview/PreviewFileContent.tsx    | 117 ++++++++++--------
 1 file changed, 66 insertions(+), 51 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx
index d853b135e..4ca813411 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx
@@ -96,59 +96,74 @@ const PreviewFile = ({
           <LinearProgress />
         </Grid>
       )}
-      {objectType === "video" && (
-        <video
-          style={{ width: "100%", height: "auto" }}
-          autoPlay={true}
-          controls={true}
-          muted={false}
-          playsInline={true}
-          onPlay={iframeLoaded}
-        >
-          <source src={path} type="video/mp4" />
-        </video>
-      )}
-      {objectType === "audio" && (
-        <audio
-          style={{ width: "100%", height: "auto" }}
-          autoPlay={true}
-          controls={true}
-          muted={false}
-          playsInline={true}
-          onPlay={iframeLoaded}
-        >
-          <source src={path} type="audio/mpeg" />
-        </audio>
-      )}
-      {objectType === "image" && (
-        <img
-          style={{ width: "100%", height: "auto" }}
-          src={path}
-          alt={"preview"}
-          onLoad={iframeLoaded}
-        />
-      )}
-      {objectType !== "video" &&
-        objectType !== "audio" &&
-        objectType !== "image" && (
-          <div
-            className={clsx(classes.iframeBase, {
-              [classes.iframeHidden]: loading,
-            })}
+      <div style={{ textAlign: "center" }}>
+        {objectType === "video" && (
+          <video
+            style={{
+              width: "auto",
+              height: "auto",
+              maxWidth: "calc(100vw - 100px)",
+              maxHeight: "calc(100vh - 200px)",
+            }}
+            autoPlay={true}
+            controls={true}
+            muted={false}
+            playsInline={true}
+            onPlay={iframeLoaded}
           >
-            <iframe
-              src={path}
-              title="File Preview"
-              allowTransparency
-              className={`${classes.iframeContainer} ${
-                isFullscreen ? "fullHeight" : objectType
-              }`}
-              onLoad={iframeLoaded}
-            >
-              File couldn't be loaded. Please try Download instead
-            </iframe>
-          </div>
+            <source src={path} type="video/mp4" />
+          </video>
         )}
+        {objectType === "audio" && (
+          <audio
+            style={{
+              width: "100%",
+              height: "auto",
+            }}
+            autoPlay={true}
+            controls={true}
+            muted={false}
+            playsInline={true}
+            onPlay={iframeLoaded}
+          >
+            <source src={path} type="audio/mpeg" />
+          </audio>
+        )}
+        {objectType === "image" && (
+          <img
+            style={{
+              width: "auto",
+              height: "auto",
+              maxWidth: "100vw",
+              maxHeight: "100vh",
+            }}
+            src={path}
+            alt={"preview"}
+            onLoad={iframeLoaded}
+          />
+        )}
+        {objectType !== "video" &&
+          objectType !== "audio" &&
+          objectType !== "image" && (
+            <div
+              className={clsx(classes.iframeBase, {
+                [classes.iframeHidden]: loading,
+              })}
+            >
+              <iframe
+                src={path}
+                title="File Preview"
+                allowTransparency
+                className={`${classes.iframeContainer} ${
+                  isFullscreen ? "fullHeight" : objectType
+                }`}
+                onLoad={iframeLoaded}
+              >
+                File couldn't be loaded. Please try Download instead
+              </iframe>
+            </div>
+          )}
+      </div>
     </Fragment>
   );
 };