+media-chrome

web/docs/dependencies.md

@@ -226,16 +226,20 @@ via [@fontsource-variable/inter](https://fontsource.org/fonts/inter/install).
 - [PhotoSwipe](https://photoswipe.com) provides the base image viewer on top of
   which we've built our file viewer.
 
-- [hls-video-element](https://github.com/muxinc/media-elements/tree/main/packages/hls-video-element)
+- For streaming video (HLS), we use three libraries:
-  provides a custom web component element for HLS playback with custom video
+
-  controls.
+  1. [media-chrome](https://github.com/muxinc/media-chrome) provides custom
+     video controls which we use when playing HLS playlists (we use custom
+     controls to provide a standardized UX across browsers, but really the main
+     reason is that Safari's default video controls are on the verge of
+     unusable, especially for streaming playback),
+  2. [hls-video-element](https://github.com/muxinc/media-elements/tree/main/packages/hls-video-element)
+     provides a custom web component element that glues media-chrome and hls.js
+     together, and
+  3. [hls.js](https://github.com/video-dev/hls.js/) (indirect dependency via
+     hls-video-element) is needed on HLS playback on Chrome and Firefox (which
+     do not have native support for HLS playlists).
 
-  > Internally, it uses [media-chrome](https://github.com/muxinc/media-chrome)
-  > to provide video controls (we use custom controls to provide a standardized
-  > UX across browsers, but really the main reason is that Safari's default
-  > video control are on the verge of unusable), and
-  > [hls.js](https://github.com/video-dev/hls.js/) for HLS playback (Chrome and
-  > Firefox do not have native support for HLS playlists).
 
 - [react-dropzone](https://github.com/react-dropzone/react-dropzone/) is a React
   hook to create a drag-and-drop input zone. Note that we pin to the last

web/packages/gallery/components/viewer/photoswipe.ts

@@ -2,6 +2,7 @@ import type { EnteFile } from "@/media/file";
 import { FileType } from "@/media/file-type";
 import "hls-video-element";
 import { t } from "i18next";
+import "media-chrome";
 import PhotoSwipe, { type SlideData } from "photoswipe";
 import {
     fileViewerDidClose,
@@ -1079,9 +1080,16 @@ const videoHTML = (url: string, disableDownload: boolean) => `
 </video>
 `;
 
-// Requires `import "hls-video-element"`
+// Requires the following imports to register the Web components we use:
+//
+//     import "hls-video-element";
+//     import "media-chrome";
+//
+// TODO: Update code above that searches for the video element
 const hlsVideoHTML = (url: string) => `
-<hls-video controls src="${url}"></hls-video>
+<media-controller>
+<hls-video slot="media" src="${url}"></hls-video>
+</media-controller>
 `;
 
 const livePhotoVideoHTML = (videoURL: string) => `

web/packages/gallery/package.json

@@ -11,6 +11,7 @@
         "hls-video-element": "^1.5.0",
         "leaflet": "^1.9.4",
         "leaflet-defaulticon-compatibility": "^0.1.2",
+        "media-chrome": "^4.8.0",
         "photoswipe": "^5.4.4",
         "react-dropzone": "14.2.10"
     },

web/yarn.lock

@@ -1487,6 +1487,11 @@ caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001688:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz#f2d15e3aaf8e18f76b2b8c1481abde063b8104c8"
   integrity sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==
 
+ce-la-react@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/ce-la-react/-/ce-la-react-0.1.3.tgz#ccb34ec24091bd8be3da40ddcedb4a99ae1db72f"
+  integrity sha512-zZwEEJv9XukeEGbswQXObaDJjYAufOIilSnDg4BWCpKNEYN84H9fpaB+wl+rYKWOIH4wBBPbLnOxKvDIwsL/JQ==
+
 chalk@^4.0.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -2879,6 +2884,13 @@ math-intrinsics@^1.1.0:
   resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
   integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
 
+media-chrome@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-4.8.0.tgz#ff881a5466fe02ad07344a370a8a1106988ca245"
+  integrity sha512-oioEGlluW+1RqknqsszrKHDs3NZ9AaatEaE2kYYOSWxnwvVmhRTfDWT4JeMgtUr5r3i2dAI3e/qbeb1j+a0MhA==
+  dependencies:
+    ce-la-react "^0.1.3"
+
 media-tracks@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/media-tracks/-/media-tracks-0.3.3.tgz#cca72bd791dcb76cd6427dfa6b2baa25601ea192"