TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix positioning

Browse Source
This commit is contained in:
Manav Rathi
2025-04-08 10:17:49 +05:30
parent d3e4771055
commit 8593ae8fbc
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/apps/photos/src/styles/photoswipe.css
View File

@@ -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.

10
web/packages/gallery/components/viewer/photoswipe.ts
View File

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