From cd5ac544bbb468e655337fe58afa1ae50902039d Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Tue, 7 Mar 2023 09:32:00 -0800
Subject: [PATCH] Minor UI fixes for updated Lightbox

---
 stylesheets/components/Lightbox.scss |  26 +++++--
 ts/components/Lightbox.tsx           | 108 +++++++++++++--------------
 2 files changed, 74 insertions(+), 60 deletions(-)

diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss
index e79e6abcdb..3a7b18edaa 100644
--- a/stylesheets/components/Lightbox.scss
+++ b/stylesheets/components/Lightbox.scss
@@ -3,7 +3,7 @@
 
 .Lightbox {
   &__container {
-    background-color: $color-gray-90;
+    background-color: $color-black;
     bottom: 0;
     left: 0;
     position: absolute;
@@ -52,6 +52,10 @@
     }
   }
 
+  &__thumbnails_placeholder {
+    height: 44px;
+  }
+
   &__thumbnail {
     @include button-reset;
     position: relative;
@@ -210,10 +214,11 @@
   &__header {
     align-items: center;
     display: flex;
-    height: 56px;
+    height: 52px;
     justify-content: space-between;
-    margin-top: calc(12px + var(--title-bar-drag-area-height));
-    min-height: 56px;
+    margin-top: var(--title-bar-drag-area-height);
+    margin-bottom: 16px;
+    min-height: 52px;
     opacity: 1;
     padding: 0 16px;
     transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
@@ -239,7 +244,7 @@
 
   &__footer {
     opacity: 1;
-    padding: 20px 16px;
+    padding: 16px 16px 24px 16px;
     transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
   }
 
@@ -250,6 +255,17 @@
     }
   }
 
+  &__container--has-controls {
+    .Lightbox__nav-next,
+    .Lightbox__nav-prev {
+      // Give some room for <video/>'s controls.
+      $controls-height: 64px;
+
+      padding-top: $controls-height;
+      height: calc(100% - $controls-height);
+    }
+  }
+
   &__controls {
     display: flex;
     gap: 32px;
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index 4045fcce2f..05d8f6199b 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -430,7 +430,7 @@ export function Lightbox({
   const caption = attachment?.caption;
 
   let content: JSX.Element;
-  let hasFooter = true;
+  let hasControls = false;
   if (!contentType) {
     content = <>{children}</>;
   } else {
@@ -498,7 +498,7 @@ export function Lightbox({
         </video>
       );
 
-      hasFooter = false;
+      hasControls = true;
     } else if (isUnsupportedImageType || isUnsupportedVideoType) {
       content = (
         <button
@@ -536,6 +536,7 @@ export function Lightbox({
         <div
           className={classNames('Lightbox Lightbox__container', {
             'Lightbox__container--zoom': isZoomed,
+            'Lightbox__container--has-controls': hasControls,
           })}
           onClick={(event: React.MouseEvent<HTMLDivElement>) => {
             event.stopPropagation();
@@ -633,61 +634,58 @@ export function Lightbox({
                 )}
               </animated.div>
             </div>
-            {hasFooter ? (
-              <div className="Lightbox__footer">
-                {isViewOnce && videoTime ? (
-                  <div className="Lightbox__timestamp">
-                    {formatDuration(videoTime)}
-                  </div>
-                ) : null}
-                {caption ? (
-                  <div className="Lightbox__caption">{caption}</div>
-                ) : null}
-                {media.length > 1 && (
-                  <div className="Lightbox__thumbnails--container">
-                    <div
-                      className="Lightbox__thumbnails"
-                      style={{
-                        marginLeft:
-                          0 - (selectedIndex * 44 + selectedIndex * 8 + 22),
-                      }}
-                    >
-                      {media.map((item, index) => (
-                        <button
-                          className={classNames({
-                            Lightbox__thumbnail: true,
-                            'Lightbox__thumbnail--selected':
-                              index === selectedIndex,
-                          })}
-                          key={item.thumbnailObjectUrl}
-                          type="button"
-                          onClick={(
-                            event: React.MouseEvent<
-                              HTMLButtonElement,
-                              MouseEvent
-                            >
-                          ) => {
-                            event.stopPropagation();
-                            event.preventDefault();
+            <div className="Lightbox__footer">
+              {isViewOnce && videoTime ? (
+                <div className="Lightbox__timestamp">
+                  {formatDuration(videoTime)}
+                </div>
+              ) : null}
+              {caption ? (
+                <div className="Lightbox__caption">{caption}</div>
+              ) : null}
+              {media.length > 1 ? (
+                <div className="Lightbox__thumbnails--container">
+                  <div
+                    className="Lightbox__thumbnails"
+                    style={{
+                      marginLeft:
+                        0 - (selectedIndex * 44 + selectedIndex * 8 + 22),
+                    }}
+                  >
+                    {media.map((item, index) => (
+                      <button
+                        className={classNames({
+                          Lightbox__thumbnail: true,
+                          'Lightbox__thumbnail--selected':
+                            index === selectedIndex,
+                        })}
+                        key={item.thumbnailObjectUrl}
+                        type="button"
+                        onClick={(
+                          event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+                        ) => {
+                          event.stopPropagation();
+                          event.preventDefault();
 
-                            onSelectAttachment(index);
-                          }}
-                        >
-                          {item.thumbnailObjectUrl ? (
-                            <img
-                              alt={i18n('lightboxImageAlt')}
-                              src={item.thumbnailObjectUrl}
-                            />
-                          ) : (
-                            <div className="Lightbox__thumbnail--unavailable" />
-                          )}
-                        </button>
-                      ))}
-                    </div>
+                          onSelectAttachment(index);
+                        }}
+                      >
+                        {item.thumbnailObjectUrl ? (
+                          <img
+                            alt={i18n('lightboxImageAlt')}
+                            src={item.thumbnailObjectUrl}
+                          />
+                        ) : (
+                          <div className="Lightbox__thumbnail--unavailable" />
+                        )}
+                      </button>
+                    ))}
                   </div>
-                )}
-              </div>
-            ) : null}
+                </div>
+              ) : (
+                <div className="Lightbox__thumbnails_placeholder" />
+              )}
+            </div>
           </div>
         </div>,
         root