From adfe660cc82e2330e563ccbedfd01e94184abea7 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 14 Apr 2023 21:14:08 +0800
Subject: [PATCH] Special styling for portrait media

---
 src/components/media.jsx  | 7 +++++++
 src/components/status.css | 5 +++++
 2 files changed, 12 insertions(+)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index 220da460..d3857921 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -24,6 +24,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
   const width = showOriginal ? original?.width : small?.width;
   const height = showOriginal ? original?.height : small?.height;
   const mediaURL = showOriginal ? url : previewUrl;
+  const orientation = width >= height ? 'landscape' : 'portrait';
 
   const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null;
 
@@ -97,6 +98,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
               alt={description}
               width={width}
               height={height}
+              data-orientation={orientation}
               loading="eager"
               decoding="async"
               onLoad={(e) => {
@@ -112,6 +114,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
             alt={description}
             width={width}
             height={height}
+            data-orientation={orientation}
             loading="lazy"
             style={{
               backgroundColor:
@@ -140,6 +143,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
       poster="${previewUrl}"
       width="${width}"
       height="${height}"
+      data-orientation="${orientation}"
       preload="auto"
       autoplay
       muted="${isGIF}"
@@ -209,6 +213,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
             poster={previewUrl}
             width={width}
             height={height}
+            data-orientation={orientation}
             preload="auto"
             // controls
             playsinline
@@ -222,6 +227,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
               alt={description}
               width={width}
               height={height}
+              data-orientation={orientation}
               loading="lazy"
             />
             <div class="media-play">
@@ -247,6 +253,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
             alt={description}
             width={width}
             height={height}
+            data-orientation={orientation}
             loading="lazy"
           />
         ) : null}
diff --git a/src/components/status.css b/src/components/status.css
index 3782894c..4e4ab7b8 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -477,6 +477,11 @@
   height: auto;
   max-height: 160px;
 }
+.status .media-container.media-eq1:has([data-orientation='portrait']) {
+  width: 85%;
+  min-width: 160px;
+  max-height: 200px;
+}
 .status .media-container.media-gt2 {
   height: 200px;
 }