feat(video-player): migrate from react player to media-chrome

.cspell/project-words.txt

@@ -13,6 +13,7 @@ asteasolutions
 Atleast
 attrelid
 blks
+breakpointmd
 btrim
 BTRIM
 catagories
@@ -56,6 +57,7 @@ infile
 jobid
 kieran
 Loggedin
+mediaisfullscreen
 micnncim
 msclkid
 msvideo
@@ -71,6 +73,7 @@ Navin
 noimageindex
 normalised
 Normalised
+notooltip
 nuqs
 Nuqs
 ogimage

package.json

@@ -118,6 +118,7 @@
 		"jwt-decode": "4.0.0",
 		"lodash": "4.17.23",
 		"match-sorter": "8.2.0",
+		"media-chrome": "4.18.0",
 		"motion": "12.29.2",
 		"next": "16.1.6",
 		"next-themes": "0.4.6",
@@ -134,14 +135,14 @@
 		"react-infinite-scroll-component": "6.1.1",
 		"react-mentions": "4.4.10",
 		"react-modern-drawer": "1.4.0",
-		"react-player": "3.4.0",
 		"react-stately": "3.43.0",
 		"react-toastify": "11.0.5",
 		"resend": "6.9.1",
 		"slugify": "1.6.6",
 		"tailwind-merge": "3.4.0",
 		"uniqid": "5.4.0",
 		"yet-another-react-lightbox": "3.28.0",
+		"youtube-video-element": "1.9.0",
 		"zod": "4.3.6",
 		"zustand": "5.0.10"
 	},

src/components/VideoPlayer.tsx

@@ -1,25 +1,155 @@
-import React, { useRef } from "react";
-import ReactPlayer from "react-player";
-
-export const VideoPlayer = ({
-	src,
-	isActive,
-	onError,
-}: {
-	isActive: boolean;
-	src: string;
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+	MediaControlBar,
+	MediaController,
+	MediaFullscreenButton,
+	MediaMuteButton,
+	MediaPipButton,
+	MediaPlayButton,
+	MediaPreviewChapterDisplay,
+	MediaPreviewThumbnail,
+	MediaPreviewTimeDisplay,
+	MediaTimeDisplay,
+	MediaTimeRange,
+	MediaVolumeRange,
+} from "media-chrome/react";
+import { MediaProvider, useMediaRef } from "media-chrome/react/media-store";
+import {
+	MediaPlaybackRateMenu,
+	MediaPlaybackRateMenuButton,
+} from "media-chrome/react/menu";
+
+import {
+	FullscreenIcon,
+	MuteIcon,
+	PipIcon,
+	PlayPauseIcon,
+	SettingsIcon,
+} from "./video-player-icons";
+import {
+	CONTROL_BAR_STYLE,
+	CONTROLLER_STYLE,
+	YOUTUBE_CONTROLLER_STYLE,
+} from "./video-player-theme";
+
+import "./video-player-theme.css";
+
+export interface VideoPlayerProps {
+	isYouTube?: boolean;
 	onError?: () => void;
-}) => {
-	const playerRef = useRef<HTMLVideoElement | null>(null);
+	src: string;
+}
+
+/* ---- Main player ---- */
+
+function VideoPlayerInner({ isYouTube, onError, src }: VideoPlayerProps) {
+	const mediaRef = useMediaRef();
+	const onErrorRef = useRef(onError);
+	onErrorRef.current = onError;
+
+	const [youTubeReady, setYouTubeReady] = useState(false);
+
+	useEffect(() => {
+		if (!isYouTube) {
+			return;
+		}
+
+		void (async () => {
+			await import("youtube-video-element");
+			setYouTubeReady(true);
+		})();
+	}, [isYouTube]);
+
+	const ref = useCallback(
+		(el: HTMLVideoElement | null) => {
+			mediaRef(el);
+
+			if (!el) {
+				return undefined;
+			}
+
+			const handleError = () => onErrorRef.current?.();
+			el.addEventListener("error", handleError);
+			return () => el.removeEventListener("error", handleError);
+		},
+		[mediaRef],
+	);
+
+	return (
+		<MediaController
+			onPointerDownCapture={(event) => event.stopPropagation()}
+			style={isYouTube ? YOUTUBE_CONTROLLER_STYLE : CONTROLLER_STYLE}
+		>
+			{isYouTube ? (
+				youTubeReady && (
+					<youtube-video crossOrigin="" ref={ref} slot="media" src={src} />
+				)
+			) : (
+				<video ref={ref} slot="media" src={src}>
+					<track default kind="captions" label="No captions" srcLang="en" />
+				</video>
+			)}
+
+			<MediaControlBar style={CONTROL_BAR_STYLE}>
+				<MediaPlayButton>
+					<PlayPauseIcon />
+				</MediaPlayButton>
+
+				<div className="mute-group">
+					<div className="mute-group-inner">
+						<MediaMuteButton ref={(el) => el?.setAttribute("notooltip", "")}>
+							<MuteIcon />
+						</MediaMuteButton>
+						<div className="vol-wrap">
+							<MediaVolumeRange />
+						</div>
+					</div>
+				</div>
+
+				<MediaTimeDisplay />
+				<MediaTimeDisplay showDuration />
+
+				<MediaTimeRange>
+					<MediaPreviewThumbnail slot="preview" />
+					<MediaPreviewChapterDisplay slot="preview" />
+					<MediaPreviewTimeDisplay slot="preview" />
+				</MediaTimeRange>
+
+				<div className="settings-group">
+					<div className="settings-group-inner">
+						<MediaPlaybackRateMenuButton>
+							<span
+								className="flex size-full items-center justify-center"
+								slot="icon"
+							>
+								<SettingsIcon slotIcon={false} />
+							</span>
+						</MediaPlaybackRateMenuButton>
+						<div className="settings-menu-wrap">
+							<MediaPlaybackRateMenu hidden />
+						</div>
+					</div>
+				</div>
+				{!isYouTube && (
+					<MediaPipButton>
+						<PipIcon />
+					</MediaPipButton>
+				)}
+
+				<MediaFullscreenButton>
+					<FullscreenIcon />
+				</MediaFullscreenButton>
+			</MediaControlBar>
+		</MediaController>
+	);
+}
 
+export function VideoPlayer(props: VideoPlayerProps) {
 	return (
-		<ReactPlayer
-			height="100%"
-			playing={isActive}
-			ref={playerRef}
-			src={src}
-			style={{ maxHeight: "80vh", margin: "auto", width: "100%" }}
-			onError={onError}
-		/>
+		<MediaProvider>
+			<VideoPlayerInner {...props} />
+		</MediaProvider>
 	);
-};
+}

src/components/lightbox/LightBox.tsx

@@ -161,11 +161,7 @@ export const CustomLightBox = ({
 					);
 				} else {
 					content = (
-						<VideoSlide
-							bookmark={bookmark}
-							isActive={isActive}
-							onVideoError={handleVideoError}
-						/>
+						<VideoSlide bookmark={bookmark} onVideoError={handleVideoError} />
 					);
 				}
 			}
@@ -182,7 +178,7 @@ export const CustomLightBox = ({
 			) {
 				content = <PDFSlide bookmark={bookmark} />;
 			} else if (isYouTubeVideo(bookmark?.url)) {
-				content = <YouTubeSlide bookmark={bookmark} isActive={isActive} />;
+				content = <YouTubeSlide bookmark={bookmark} />;
 			} else if (bookmark?.url) {
 				content = (
 					<WebEmbedSlide

src/components/lightbox/LightboxRenderers.tsx

@@ -74,11 +74,7 @@ export const ImageSlide = ({ bookmark, zoomRef }: SlideProps) => {
  * Renders a video slide using the custom VideoPlayer component
  * Notifies parent via onVideoError when video fails to load
  */
-export const VideoSlide = ({
-	bookmark,
-	isActive,
-	onVideoError,
-}: VideoSlideProps) => {
+export const VideoSlide = ({ bookmark, onVideoError }: VideoSlideProps) => {
 	const handleVideoError = useCallback(() => {
 		if (bookmark?.id && typeof bookmark.id === "number") {
 			onVideoError?.(bookmark.id);
@@ -95,11 +91,7 @@ export const VideoSlide = ({
 	return (
 		<div className="flex h-full w-full items-center justify-center">
 			<div className="w-full max-w-[min(1200px,90vw)]">
-				<VideoPlayer
-					isActive={isActive ?? false}
-					onError={handleVideoError}
-					src={videoSrc}
-				/>
+				<VideoPlayer onError={handleVideoError} src={videoSrc} />
 			</div>
 		</div>
 	);
@@ -165,9 +157,9 @@ export const PDFSlide = ({ bookmark }: SlideProps) => (
 /**
  * Renders a YouTube video slide
  */
-export const YouTubeSlide = ({ bookmark, isActive }: SlideProps) => (
-	<div className="relative flex h-full max-h-[80vh] w-full max-w-[min(1200px,90vw)] items-end justify-center">
-		<VideoPlayer isActive={isActive ?? false} src={bookmark?.url ?? ""} />
+export const YouTubeSlide = ({ bookmark }: SlideProps) => (
+	<div className="relative flex h-full max-h-[80vh] w-full max-w-[min(1200px,90vw)] items-center justify-center">
+		<VideoPlayer isYouTube src={bookmark?.url ?? ""} />
 	</div>
 );