From bfa2251d6dcffc943162b9b23e106e2f67b47302 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 08:43:26 +0530
Subject: [PATCH 01/13] Use mc

---
 .../gallery/components/viewer/photoswipe.ts   | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index 2a42caa492..bd67893146 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -327,7 +327,7 @@ export class FileViewerPhotoSwipe {
             );
 
             if (itemData.fileType === FileType.video) {
-                const { videoURL, videoPlaylistURL } = itemData;
+                const { videoPlaylistURL, videoURL } = itemData;
                 if (videoPlaylistURL) {
                     const mcID = `ente-mc-${file.id}`;
                     return {
@@ -335,10 +335,24 @@ export class FileViewerPhotoSwipe {
                         html: hlsVideoHTML(videoPlaylistURL, mcID),
                         mediaControllerID: mcID,
                     };
+                } else if (
+                    videoURL &&
+                    // TODO(HLS):
+                    process.env.NEXT_PUBLIC_ENTE_WIP_VIDEO_STREAMING
+                ) {
+                    const mcID = `ente-mc-${file.id}`;
+                    return {
+                        ...itemData,
+                        html: videoHTML(videoURL, mcID),
+                        mediaControllerID: mcID,
+                    };
                 } else if (videoURL) {
                     return {
                         ...itemData,
-                        html: videoHTML(videoURL, !!disableDownload),
+                        html: videoHTMLBrowserControls(
+                            videoURL,
+                            !!disableDownload,
+                        ),
                     };
                 }
             }
@@ -1341,7 +1355,7 @@ export class FileViewerPhotoSwipe {
     refreshCurrentSlideFavoriteButtonIfNeeded: () => void;
 }
 
-const videoHTML = (url: string, disableDownload: boolean) => `
+const videoHTMLBrowserControls = (url: string, disableDownload: boolean) => `
 <video controls ${disableDownload && "controlsList=nodownload"} oncontextmenu="return false;">
   <source src="${url}" />
   Your browser does not support video playback.
@@ -1360,14 +1374,20 @@ const hlsVideoHTML = (url: string, mediaControllerID: string) => `
 </media-controller>
 `;
 
+const videoHTML = (url: string, mediaControllerID: string) => `
+<media-controller id="${mediaControllerID}" nohotkeys>
+  <video playsinline slot="media" src="${url}"></video>
+</media-controller>
+`;
+
 /**
- * HTML for controls associated with {@link hlsVideoHTML}.
+ * HTML for controls associated with {@link hlsVideoHTML} or {@link videoHTML}.
  *
  * To make these functional, the `media-control-bar` requires the
  * `mediacontroller="${mediaControllerID}"` attribute.
  *
- * TODO(HLS): Add translations for all the pts
- * TODO(HLS): Add "Toggle play", "Seek forward, backward" to list of shortcuts
+ * - TODO(HLS): Add translations for all the pts
+ * - TODO(HLS): Add "Toggle play", "Seek forward, backward" to list of shortcuts
  *
  * Notes:
  *

From 41e2a93b208371ec58669f159332aafa9fb56bfd Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 09:33:52 +0530
Subject: [PATCH 02/13] Handle it for the video quality switch too

---
 .../gallery/components/viewer/photoswipe.ts   | 78 ++++++++++++++-----
 1 file changed, 59 insertions(+), 19 deletions(-)

diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index bd67893146..9e2dbcb619 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -648,16 +648,6 @@ export class FileViewerPhotoSwipe {
             forgetExifForItemData(asItemData(e.content.data)),
         );
 
-        /**
-         * The media-chrome-button elements (e.g the play button) retain focus
-         * after clicking on them. e.g., if I click the "media-mute-button" to
-         * activate it, then later press Space or Enter, then the mute button
-         * activates again instead of toggling video playback.
-         *
-         * I'm not sure who is at fault here, but this behaviour ends up being
-         * irritating. To prevent this from happening, drop the focus from any
-         * media chrome button when playback starts.
-         */
         const resetFocus = () => {
             const activeElement = document.activeElement;
             if (activeElement instanceof HTMLElement) activeElement.blur();
@@ -726,7 +716,6 @@ export class FileViewerPhotoSwipe {
 
                 if (videoVideoEl) {
                     onVideoPlayback = () => {
-                        resetFocus();
                         showIf(captionElement!, !!videoVideoEl?.paused);
                     };
 
@@ -773,14 +762,6 @@ export class FileViewerPhotoSwipe {
             if (muteButton instanceof MediaMuteButton) muteButton.handleClick();
         };
 
-        // The PhotoSwipe dialog has being closed and the animations have
-        // completed.
-        pswp.on("destroy", () => {
-            fileViewerDidClose();
-            // Let our parent know that we have been closed.
-            onClose();
-        });
-
         const handleViewInfo = () => onViewInfo(currentAnnotatedFile());
 
         let favoriteButtonElement: HTMLButtonElement | undefined;
@@ -1303,6 +1284,62 @@ export class FileViewerPhotoSwipe {
             cb?.();
         });
 
+        /**
+         * [Note: Media chrome focus workaround]
+         *
+         * The media-chrome-button elements (e.g, the play button, but also
+         * others, including the menu) retain focus after clicking on them.
+         * e.g., if I click the "media-mute-button" to activate it, then the
+         * mute button grabs focus (but not :focus-visible). So it doesn't
+         * appear focused visually, but then later if I press Space or Enter,
+         * then the mute button activates again instead of toggling video
+         * playback (as our keyboard shortcut is meant to do).
+         *
+         * I'm not sure who is at fault here, but this behaviour ends up being
+         * irritating. e.g. say I change the quality in the menu, and press
+         * space to play - well, the space no longer works because the media
+         * chrome has grabbed focus and instead activates itself, reopening the
+         * settings menu.
+         *
+         * As a workaround, we ask media chrome to drop focus on mouse clicks.
+         * This should not impact keyboard activations.
+         *
+         * This workaround is likely to cause problems in the future, but I
+         * can't find a better way short of upstream media chrome changes.
+         */
+        const blurMediaChromeFocus = (e: MouseEvent) => {
+            const target = e.target;
+            if (
+                target instanceof HTMLElement &&
+                // A clickable media chrome element
+                target.tagName.startsWith("MEDIA-") &&
+                // Except the menu, which needs to retain focus to show itself
+                // (presumably).
+                target.tagName != "MEDIA-SETTINGS-MENU-ITEM"
+            ) {
+                // TODO: This doesn't quite work. figure.
+                console.log(target.tagName)
+                // setTimeout(() => target.blur(), 0);
+                // setTimeout(resetFocus, 0);
+            }
+        };
+
+        pswp.on("initialLayout", () => {
+            pswp.element!.addEventListener("mousedown", blurMediaChromeFocus);
+        });
+
+        // The PhotoSwipe dialog has being closed and the animations have
+        // completed.
+        pswp.on("destroy", () => {
+            pswp.element?.removeEventListener(
+                "mousedown",
+                blurMediaChromeFocus,
+            );
+            fileViewerDidClose();
+            // Let our parent know that we have been closed.
+            onClose();
+        });
+
         // Let our data source know that we're about to open.
         fileViewerWillOpen();
 
@@ -1409,6 +1446,9 @@ const videoHTML = (url: string, mediaControllerID: string) => `
  *   this screen which use "title" (which get clipped when they are multi-word).
  *
  * - See: [Note: Spurious media chrome resize observer errors]
+ *
+ * - If something is not working as expected, a possible reason might be the
+ *   focus workaround. See: [Note: Media chrome focus workaround].
  */
 const hlsVideoControlsHTML = () => `
 <div>

From d3e4771055d321f5c2343fa40856580d3e7b3885 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 10:22:28 +0530
Subject: [PATCH 03/13] Fix hiding

---
 web/apps/photos/src/styles/photoswipe.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/apps/photos/src/styles/photoswipe.css b/web/apps/photos/src/styles/photoswipe.css
index af8fe69137..c63e91d24e 100644
--- a/web/apps/photos/src/styles/photoswipe.css
+++ b/web/apps/photos/src/styles/photoswipe.css
@@ -312,6 +312,8 @@ media-settings-menu {
 body:has(
         media-control-bar:hover,
         media-settings-menu:hover,
+        media-settings-menu:focus,
+        media-settings-menu:focus-visible,
         media-settings-menu:focus-within
     ) {
     & .pswp-ente .pswp__caption {

From 8593ae8fbcddd87ff0342f88b99e35969cc81a1c Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 10:17:49 +0530
Subject: [PATCH 04/13] Fix positioning

---
 web/apps/photos/src/styles/photoswipe.css           | 13 +++++++++++++
 .../gallery/components/viewer/photoswipe.ts         | 10 +++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/web/apps/photos/src/styles/photoswipe.css b/web/apps/photos/src/styles/photoswipe.css
index c63e91d24e..7d8d5b00b8 100644
--- a/web/apps/photos/src/styles/photoswipe.css
+++ b/web/apps/photos/src/styles/photoswipe.css
@@ -190,6 +190,19 @@
     height: 100%;
 }
 
+/*
+  To get media chrome to apply the same styling to the native video element as
+  hls-video applies to the video element it embeds, we need to set the
+  media-controller's display to inline. It would be nice to do this "properly",
+  or at least understand why this works.
+
+  Ref (not directly relevant, but a general direction):
+  https://github.com/muxinc/media-elements/blob/main/packages/custom-media-element/custom-media-element.ts
+ */
+.pswp-ente media-controller.et-vanilla-video {
+    display: inline;
+}
+
 /*
   Style the custom video controls we provide.
 
diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index 9e2dbcb619..07fec3f203 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -329,7 +329,7 @@ export class FileViewerPhotoSwipe {
             if (itemData.fileType === FileType.video) {
                 const { videoPlaylistURL, videoURL } = itemData;
                 if (videoPlaylistURL) {
-                    const mcID = `ente-mc-${file.id}`;
+                    const mcID = `ente-mc-hls-${file.id}`;
                     return {
                         ...itemData,
                         html: hlsVideoHTML(videoPlaylistURL, mcID),
@@ -340,7 +340,7 @@ export class FileViewerPhotoSwipe {
                     // TODO(HLS):
                     process.env.NEXT_PUBLIC_ENTE_WIP_VIDEO_STREAMING
                 ) {
-                    const mcID = `ente-mc-${file.id}`;
+                    const mcID = `ente-mc-orig-${file.id}`;
                     return {
                         ...itemData,
                         html: videoHTML(videoURL, mcID),
@@ -846,7 +846,7 @@ export class FileViewerPhotoSwipe {
 
             // Refresh the slide so that the video is fetched afresh, but using
             // the updated `originalVideoFileIDs` value for it.
-            this.refreshCurrentSlideContent();
+            pswp.refreshSlideContent(pswp.currIndex);
         };
 
         const showIf = (element: HTMLElement, condition: boolean) =>
@@ -1318,7 +1318,7 @@ export class FileViewerPhotoSwipe {
                 target.tagName != "MEDIA-SETTINGS-MENU-ITEM"
             ) {
                 // TODO: This doesn't quite work. figure.
-                console.log(target.tagName)
+                console.log(target.tagName);
                 // setTimeout(() => target.blur(), 0);
                 // setTimeout(resetFocus, 0);
             }
@@ -1412,7 +1412,7 @@ const hlsVideoHTML = (url: string, mediaControllerID: string) => `
 `;
 
 const videoHTML = (url: string, mediaControllerID: string) => `
-<media-controller id="${mediaControllerID}" nohotkeys>
+<media-controller class="et-vanilla-video" id="${mediaControllerID}" nohotkeys>
   <video playsinline slot="media" src="${url}"></video>
 </media-controller>
 `;

From b164fde81bbf695d56f2f00b6c2891ff574e3ec9 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 11:46:57 +0530
Subject: [PATCH 05/13] Attempt to fix slide reset

---
 .../gallery/components/viewer/photoswipe.ts   | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index 07fec3f203..ce63db6dad 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -1,4 +1,5 @@
 import { pt } from "ente-base/i18n";
+import log from "ente-base/log";
 import type { EnteFile } from "ente-media/file";
 import { FileType } from "ente-media/file-type";
 import "hls-video-element";
@@ -494,6 +495,20 @@ export class FileViewerPhotoSwipe {
          * hide the media controls.
          */
         const updateMediaControls = (mediaControllerID: string | undefined) => {
+            // For reasons possibily related to the 1 tick wait in the hls-video
+            // implementation (`await Promise.resolve()`), the association
+            // between media-controller and media-control-bar doesn't get
+            // established on the first slide if we reopen the file viewer.
+            //
+            // See also: https://github.com/muxinc/media-chrome/issues/940
+            //
+            // As a workaround, defer the association to the next tick.
+            setTimeout(() => _updateMediaControls(mediaControllerID), 0);
+        };
+
+        const _updateMediaControls = (
+            mediaControllerID: string | undefined,
+        ) => {
             const container = mediaControlsContainerElement;
             const controls =
                 container?.querySelectorAll(
@@ -522,6 +537,20 @@ export class FileViewerPhotoSwipe {
         };
 
         pswp.on("contentAppend", (e) => {
+            // PhotoSwipe emits stale contentAppend events. e.g. when changing
+            // the video quality, we'll first get "contentAppend" (and "change")
+            // with the latest item data, but then later PhotoSwipe will call
+            // "contentAppend" again with stale data.
+            //
+            // To ignore these, we check the `hasSlide` attribute. I'm not sure
+            // if this is a foolproof workaround.
+            //
+            // See also https://github.com/dimsemenov/PhotoSwipe/issues/2045.
+            if (!e.content.hasSlide) {
+                log.debug(() => ["Ignoring stale contentAppend", e]);
+                return;
+            }
+
             const { fileID, fileType, videoURL, mediaControllerID } =
                 asItemData(e.content.data);
 
@@ -529,16 +558,7 @@ export class FileViewerPhotoSwipe {
             // "change" event, so we need to wire up the controls, or hide them,
             // for the initial slide here also (in addition to in "change").
             if (currSlideData().fileID == fileID) {
-                // For reasons possibily related to the 1 tick waits in the
-                // hls-video implementation (`await Promise.resolve()`), the
-                // association between media-controller and media-control-bar
-                // doesn't get established on the first slide if we reopen the
-                // file viewer.
-                //
-                // See also: https://github.com/muxinc/media-chrome/issues/940
-                //
-                // As a workaround, defer the association to the next tick.
-                setTimeout(() => updateMediaControls(mediaControllerID), 0);
+                updateMediaControls(mediaControllerID);
             }
 
             // Rest of this function deals with live photos.

From 658b8e529702496c7e29bc18aeaa0af66827fc8a Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 12:13:23 +0530
Subject: [PATCH 06/13] Reflect current status

---
 .../gallery/components/viewer/photoswipe.ts   | 43 +++++++++----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index ce63db6dad..9c8cefb0e8 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -489,12 +489,12 @@ export class FileViewerPhotoSwipe {
         let shouldIgnoreNextVideoQualityChange = false;
 
         /**
-         * If a {@link mediaControllerID} is provided, then make the media
-         * controls visible and link the media-control-bars (and other
-         * containers that house controls) to the given controller. Otherwise
-         * hide the media controls.
+         * If a {@link mediaControllerID} is present in the given
+         * {@link itemData}, then make the media controls visible and link the
+         * media-control-bars (and other containers that house controls) to the
+         * given controller. Otherwise hide the media controls.
          */
-        const updateMediaControls = (mediaControllerID: string | undefined) => {
+        const updateMediaControls = (itemData: ItemData) => {
             // For reasons possibily related to the 1 tick wait in the hls-video
             // implementation (`await Promise.resolve()`), the association
             // between media-controller and media-control-bar doesn't get
@@ -503,18 +503,17 @@ export class FileViewerPhotoSwipe {
             // See also: https://github.com/muxinc/media-chrome/issues/940
             //
             // As a workaround, defer the association to the next tick.
-            setTimeout(() => _updateMediaControls(mediaControllerID), 0);
+            setTimeout(() => _updateMediaControls(itemData), 0);
         };
 
-        const _updateMediaControls = (
-            mediaControllerID: string | undefined,
-        ) => {
+        const _updateMediaControls = (itemData: ItemData) => {
             const container = mediaControlsContainerElement;
             const controls =
                 container?.querySelectorAll(
                     "media-control-bar, media-playback-rate-menu",
                 ) ?? [];
             for (const control of controls) {
+                const { mediaControllerID } = itemData;
                 if (mediaControllerID) {
                     control.setAttribute("mediacontroller", mediaControllerID);
                 } else {
@@ -522,12 +521,13 @@ export class FileViewerPhotoSwipe {
                 }
             }
 
+            // TODO(HLS): Temporary gate
+            if (!process.env.NEXT_PUBLIC_ENTE_WIP_VIDEO_STREAMING) return;
+
             const qualityMenu = container?.querySelector("#et-quality-menu");
             if (qualityMenu instanceof MediaChromeMenu) {
-                const value =
-                    videoQualityForFile(currentFile()) == "auto"
-                        ? pt("Auto")
-                        : pt("Original");
+                const { videoPlaylistURL } = itemData;
+                const value = videoPlaylistURL ? pt("Auto") : pt("Original");
                 // Check first, and set a flag, to avoid infinite update loop.
                 if (qualityMenu.value != value) {
                     shouldIgnoreNextVideoQualityChange = true;
@@ -551,14 +551,13 @@ export class FileViewerPhotoSwipe {
                 return;
             }
 
-            const { fileID, fileType, videoURL, mediaControllerID } =
-                asItemData(e.content.data);
+            const { fileID, fileType, videoURL } = asItemData(e.content.data);
 
             // For the initial slide, "contentAppend" will get called after the
             // "change" event, so we need to wire up the controls, or hide them,
             // for the initial slide here also (in addition to in "change").
             if (currSlideData().fileID == fileID) {
-                updateMediaControls(mediaControllerID);
+                updateMediaControls(currSlideData());
             }
 
             // Rest of this function deals with live photos.
@@ -655,8 +654,9 @@ export class FileViewerPhotoSwipe {
             video?.pause();
         });
 
-        pswp.on("loadComplete", (e) =>
-            updateFileInfoExifIfNeeded(asItemData(e.content.data)),
+        pswp.on(
+            "loadComplete",
+            (e) => void updateFileInfoExifIfNeeded(asItemData(e.content.data)),
         );
 
         pswp.on(
@@ -1036,10 +1036,9 @@ export class FileViewerPhotoSwipe {
                     if (menu instanceof MediaChromeMenu) {
                         menu.addEventListener("change", onVideoQualityChange);
                     }
-                    pswp.on("change", () => {
-                        const { mediaControllerID } = currSlideData();
-                        updateMediaControls(mediaControllerID);
-                    });
+                    pswp.on("change", () =>
+                        updateMediaControls(currSlideData()),
+                    );
                 },
             });
 

From c062cc8aaeec90a7ec0ea39fb0c7e41c2944790e Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 14:10:09 +0530
Subject: [PATCH 07/13] Workaround

---
 web/apps/photos/src/styles/photoswipe.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/web/apps/photos/src/styles/photoswipe.css b/web/apps/photos/src/styles/photoswipe.css
index 7d8d5b00b8..2590d32711 100644
--- a/web/apps/photos/src/styles/photoswipe.css
+++ b/web/apps/photos/src/styles/photoswipe.css
@@ -201,6 +201,21 @@
  */
 .pswp-ente media-controller.et-vanilla-video {
     display: inline;
+    /*
+     On Chrome (I didn't check elsewhere), when putting a regular video element
+     within a media-controller, we get a flickering at the edges. This isn't
+     related to the display: inline hack above, because it can be reproduced
+     without it too - At certain window sizes, when playing back the video,
+     there will be flickering / shifting at the horizontal edges.
+
+     This doesn't happen with the media-controller and hls-video combination. My
+     best guess is that it happens if the (eventually resolved) size of the
+     video happens to be a fractional value. Based on that theory, adding a 1px
+     leeway to the video width resolves the flickering.
+     */
+    video {
+        width: calc(100% - 1px) !important;
+    }
 }
 
 /*

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 08/13] 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,
+                        );
                     });
                 },
             });

From 5a6c3851325fe6831fd2972a62ffffb83a92e971 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 14:55:30 +0530
Subject: [PATCH 09/13] Keep using ente- for the class/ids (et- makes more
 sense for temporary vars)

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

diff --git a/web/apps/photos/src/styles/photoswipe.css b/web/apps/photos/src/styles/photoswipe.css
index 952df18f36..dab66b79e6 100644
--- a/web/apps/photos/src/styles/photoswipe.css
+++ b/web/apps/photos/src/styles/photoswipe.css
@@ -222,7 +222,7 @@
   Ref (not directly relevant, but a general direction):
   https://github.com/muxinc/media-elements/blob/main/packages/custom-media-element/custom-media-element.ts
  */
-.pswp-ente media-controller.et-vanilla-video {
+.pswp-ente media-controller.ente-vanilla-video {
     display: inline;
     /*
      On Chrome (I didn't check elsewhere), when putting a regular video element
diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index c45c7e5fa7..a8a1a109c2 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -524,7 +524,7 @@ export class FileViewerPhotoSwipe {
             // TODO(HLS): Temporary gate
             if (!process.env.NEXT_PUBLIC_ENTE_WIP_VIDEO_STREAMING) return;
 
-            const qualityMenu = container?.querySelector("#et-quality-menu");
+            const qualityMenu = container?.querySelector("#ente-quality-menu");
             if (qualityMenu instanceof MediaChromeMenu) {
                 const { videoPlaylistURL } = itemData;
                 const value = videoPlaylistURL ? pt("Auto") : pt("Original");
@@ -1032,7 +1032,7 @@ export class FileViewerPhotoSwipe {
                 html: hlsVideoControlsHTML(),
                 onInit: (element, pswp) => {
                     mediaControlsContainerElement = element;
-                    const menu = element.querySelector("#et-quality-menu");
+                    const menu = element.querySelector("#ente-quality-menu");
                     if (menu instanceof MediaChromeMenu) {
                         menu.addEventListener("change", onVideoQualityChange);
                     }
@@ -1430,7 +1430,7 @@ const hlsVideoHTML = (url: string, mediaControllerID: string) => `
 `;
 
 const videoHTML = (url: string, mediaControllerID: string) => `
-<media-controller class="et-vanilla-video" id="${mediaControllerID}" nohotkeys>
+<media-controller class="ente-vanilla-video" id="${mediaControllerID}" nohotkeys>
   <video playsinline slot="media" src="${url}"></video>
 </media-controller>
 `;
@@ -1470,10 +1470,10 @@ const videoHTML = (url: string, mediaControllerID: string) => `
  */
 const hlsVideoControlsHTML = () => `
 <div>
-  <media-settings-menu id="et-settings-menu" hidden anchor="et-settings-menu-btn">
+  <media-settings-menu id="ente-settings-menu" hidden anchor="ente-settings-menu-btn">
     <media-settings-menu-item>
       ${pt("Quality")}
-      <media-chrome-menu id="et-quality-menu" slot="submenu" hidden>
+      <media-chrome-menu id="ente-quality-menu" slot="submenu" hidden>
         <div slot="title">${pt("Quality")}</div>
         <media-chrome-menu-item type="radio" aria-checked="true">${pt("Auto")}</media-chrome-menu-item>
         <media-chrome-menu-item type="radio">${pt("Original")}</media-chrome-menu-item>
@@ -1497,7 +1497,7 @@ const hlsVideoControlsHTML = () => `
     <media-mute-button notooltip></media-mute-button>
     <media-time-display showduration notoggle></media-time-display>
     <media-text-display></media-text-display>
-    <media-settings-menu-button id="et-settings-menu-btn" invoketarget="et-settings-menu" notooltip>
+    <media-settings-menu-button id="ente-settings-menu-btn" invoketarget="ente-settings-menu" notooltip>
       <svg slot="icon" viewBox="0 0 24 24">${settingsSVGPath}</svg>
     </media-settings-menu-button>
     <media-pip-button notooltip></media-pip-button>

From dfba8478b7209c631c961887d747ae2dd2710fc0 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 16:05:09 +0530
Subject: [PATCH 10/13] Fix workaround

---
 .../gallery/components/viewer/photoswipe.ts   | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index a8a1a109c2..0e0362b9e6 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -1327,18 +1327,16 @@ export class FileViewerPhotoSwipe {
          */
         const blurMediaChromeFocus = (e: MouseEvent) => {
             const target = e.target;
-            if (
-                target instanceof HTMLElement &&
-                // A clickable media chrome element
-                target.tagName.startsWith("MEDIA-") &&
-                // Except the menu, which needs to retain focus to show itself
-                // (presumably).
-                target.tagName != "MEDIA-SETTINGS-MENU-ITEM"
-            ) {
-                // TODO: This doesn't quite work. figure.
-                console.log(target.tagName);
-                // setTimeout(() => target.blur(), 0);
-                // setTimeout(resetFocus, 0);
+            if (target instanceof HTMLElement) {
+                switch (target.tagName) {
+                    case "MEDIA-TIME-RANGE":
+                    case "MEDIA-PLAY-BUTTON":
+                    case "MEDIA-MUTE-BUTTON":
+                    case "MEDIA-PIP-BUTTON":
+                    case "MEDIA-FULLSCREEN-BUTTON":
+                        setTimeout(() => target.blur(), 0);
+                        break;
+                }
             }
         };
 

From 31ab4962f9453f1b82d84f3bb5ed91bf1c9c57c9 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 16:30:00 +0530
Subject: [PATCH 11/13] Handle the video quality change case

---
 .../gallery/components/viewer/photoswipe.ts   | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index 0e0362b9e6..c56f3c1275 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -668,11 +668,6 @@ export class FileViewerPhotoSwipe {
             forgetExifForItemData(asItemData(e.content.data)),
         );
 
-        const resetFocus = () => {
-            const activeElement = document.activeElement;
-            if (activeElement instanceof HTMLElement) activeElement.blur();
-        };
-
         /**
          * If the current slide is showing a video, then the DOM video element
          * showing that video.
@@ -861,9 +856,23 @@ export class FileViewerPhotoSwipe {
             const menuButton = document.querySelector(
                 "media-settings-menu-button",
             );
-            if (menuButton instanceof MediaChromeMenuButton)
+            if (menuButton instanceof MediaChromeMenuButton) {
                 menuButton.handleClick();
 
+                // See: [Note: Media chrome focus workaround]
+                //
+                // Whatever media chrome is doing internally, it requires us to
+                // drop the focus multiple times (Removing either of these calls
+                // is not enough).
+                const blurAllFocused = () =>
+                    document
+                        .querySelectorAll(":focus")
+                        .forEach((e) => e instanceof HTMLElement && e.blur());
+
+                blurAllFocused();
+                setTimeout(blurAllFocused, 0);
+            }
+
             // Refresh the slide so that the video is fetched afresh, but using
             // the updated `originalVideoFileIDs` value for it.
             pswp.refreshSlideContent(pswp.currIndex);
@@ -1202,7 +1211,8 @@ export class FileViewerPhotoSwipe {
             // indicator, we want the Escape key to blur its focus instead of
             // closing the PhotoSwipe dialog.
             if (isFocusVisibledOnUIControl() && key == "Escape") {
-                resetFocus();
+                const activeElement = document.activeElement;
+                if (activeElement instanceof HTMLElement) activeElement.blur();
                 pswpEvent.preventDefault();
                 return;
             }

From 7556287716265a629b16e02b38c92544b945f14d Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 16:44:08 +0530
Subject: [PATCH 12/13] now it was flickering vertically!

---
 web/apps/photos/src/styles/photoswipe.css | 31 +++++++++--------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/web/apps/photos/src/styles/photoswipe.css b/web/apps/photos/src/styles/photoswipe.css
index dab66b79e6..a0bc711704 100644
--- a/web/apps/photos/src/styles/photoswipe.css
+++ b/web/apps/photos/src/styles/photoswipe.css
@@ -214,30 +214,23 @@
 }
 
 /*
-  To get media chrome to apply the same styling to the native video element as
-  hls-video applies to the video element it embeds, we need to set the
-  media-controller's display to inline. It would be nice to do this "properly",
-  or at least understand why this works.
+  I tried various ways to get media-controller to embed a normal video, but in
+  all methods I kept getting a flickering at the edges on Chrome. My best guess
+  is that it happens when the resolved size of the video is a fractional value.
 
-  Ref (not directly relevant, but a general direction):
-  https://github.com/muxinc/media-elements/blob/main/packages/custom-media-element/custom-media-element.ts
+  This is the current magic incantation that seems to get them to play without
+  the video's frame jittering. Note that the streaming hls-video elements work
+  fine without any workarounds, it is only the vanilla video elements that have
+  this issue and necessiate this workaround. The downside is that clicking
+  "outside" the video works for hls-video, but not for vanilla videos.
  */
 .pswp-ente media-controller.ente-vanilla-video {
-    display: inline;
-    /*
-     On Chrome (I didn't check elsewhere), when putting a regular video element
-     within a media-controller, we get a flickering at the edges. This isn't
-     related to the display: inline hack above, because it can be reproduced
-     without it too - At certain window sizes, when playing back the video,
-     there will be flickering / shifting at the horizontal edges.
+    width: 100%;
+    height: 100%;
 
-     This doesn't happen with the media-controller and hls-video combination. My
-     best guess is that it happens if the (eventually resolved) size of the
-     video happens to be a fractional value. Based on that theory, adding a 1px
-     leeway to the video width resolves the flickering.
-     */
     video {
-        width: calc(100% - 1px) !important;
+        width: calc(100% - 1px);
+        height: calc(100% - 1px);
     }
 }
 

From aabaa89add7485f200b29a6d60976db43ca2e28b Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Tue, 8 Apr 2025 16:52:30 +0530
Subject: [PATCH 13/13] More robust check

---
 web/apps/photos/src/styles/photoswipe.css | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/web/apps/photos/src/styles/photoswipe.css b/web/apps/photos/src/styles/photoswipe.css
index a0bc711704..3a5016d21c 100644
--- a/web/apps/photos/src/styles/photoswipe.css
+++ b/web/apps/photos/src/styles/photoswipe.css
@@ -351,15 +351,9 @@ media-settings-menu {
     z-index: 1;
 }
 
-/* Hide the caption when hovering over the video controls since they occupy
-   similar real estate */
-body:has(
-        media-control-bar:hover,
-        media-settings-menu:hover,
-        media-settings-menu:focus,
-        media-settings-menu:focus-visible,
-        media-settings-menu:focus-within
-    ) {
+/* Hide the caption when hovering over the video controls (and when the settings
+   menu is open) since they occupy similar real estate as the caption. */
+body:has(media-control-bar:hover, media-settings-menu:not([hidden])) {
     & .pswp-ente .pswp__caption {
         display: none;
     }