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] 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>
 `;