From c6827cc3f4e06fea0c8cfa803843fe16d671c6e5 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 14:50:54 +0530
Subject: [PATCH] Tweak caption for videos

---
 web/apps/photos/src/styles/photoswipe.css     | 27 +++++++++++++++++--
 .../gallery/components/viewer/photoswipe.ts   |  9 +++----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/web/apps/photos/src/styles/photoswipe.css b/web/apps/photos/src/styles/photoswipe.css
index 2590d32711..952df18f36 100644
--- a/web/apps/photos/src/styles/photoswipe.css
+++ b/web/apps/photos/src/styles/photoswipe.css
@@ -175,8 +175,31 @@
     }
 }
 
-/* Change the cursor on the thumbnail to the default arrow to indicate that it is
-   not interactable (PhotoSwipe by default shows the zoom out icon). */
+.pswp-ente .pswp__caption.ente-video {
+    /* Add extra offset for video captions so that they do not overlap with the
+       video controls. The constant was picked such that it lay above the media
+       controls. */
+    bottom: 48px;
+    /* Adding a caption with a blur backdrop filter above the video element
+       contained in a media-controller causes a subtle tint to be overlaid on
+       the entire video. This is visible on both Chrome and Firefox as of
+       writing.
+
+       We'll hide the caption anyways when hovering on the controls or when the
+       video is playing, so remove the backdrop filter and rely on the
+       translucent background. Note that usually the video might not even extent
+       to this part of the screen on desktop sized screens. */
+    backdrop-filter: none;
+    /* Since there is too much going on in this part of the screen now, also
+      reduce the maximum number of lines for the caption. */
+    p {
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+    }
+}
+
+/* Change the cursor on the thumbnail to the default arrow to indicate that it
+   is not interactable (PhotoSwipe by default shows the zoom out icon). */
 .pswp-ente .pswp__img {
     cursor: auto;
 }
diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index 9c8cefb0e8..c45c7e5fa7 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -1062,11 +1062,10 @@ export class FileViewerPhotoSwipe {
                         const { fileType, alt } = currSlideData();
                         element.querySelector("p")!.innerText = alt ?? "";
                         element.style.visibility = alt ? "visible" : "hidden";
-                        // Add extra offset for video captions so that they do
-                        // not overlap with the video controls. The constant is
-                        // such that it lies above the media controls.
-                        element.style.bottom =
-                            fileType === FileType.video ? "44px" : "0";
+                        element.classList.toggle(
+                            "ente-video",
+                            fileType == FileType.video,
+                        );
                     });
                 },
             });