From 1ac64b5a31fd6a657ec969efa58f76c8a5f3e340 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 25 Mar 2025 14:37:53 +0530 Subject: [PATCH] +media-chrome --- web/docs/dependencies.md | 22 +++++++++++-------- .../gallery/components/viewer/photoswipe.ts | 12 ++++++++-- web/packages/gallery/package.json | 1 + web/yarn.lock | 12 ++++++++++ 4 files changed, 36 insertions(+), 11 deletions(-) diff --git a/web/docs/dependencies.md b/web/docs/dependencies.md index 3218b63608..9c279f13a0 100644 --- a/web/docs/dependencies.md +++ b/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) - provides a custom web component element for HLS playback with custom video - controls. +- For streaming video (HLS), we use three libraries: + + 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 diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts index 4a3659334a..375bb80178 100644 --- a/web/packages/gallery/components/viewer/photoswipe.ts +++ b/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) => ` `; -// 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) => ` - + + + `; const livePhotoVideoHTML = (videoURL: string) => ` diff --git a/web/packages/gallery/package.json b/web/packages/gallery/package.json index 238bd65bc6..c9a87b6ba3 100644 --- a/web/packages/gallery/package.json +++ b/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" }, diff --git a/web/yarn.lock b/web/yarn.lock index 0886a7bc3a..997ce4d01f 100644 --- a/web/yarn.lock +++ b/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"