{/*
* Chrome autoplay compatibility notes:
- * - No `autoPlay` attribute: the useMediaPlayer hook handles
- * programmatic play() with a muted-start strategy.
+ * - `autoPlay` stays enabled so remounted videos can resume
+ * quickly after swipe navigation, while the hook still calls
+ * `play()` programmatically to recover from source-change races.
* - `preload="auto"` when autoPlay is requested: ensures Chrome
* buffers enough data for immediate playback instead of just
* fetching metadata headers.
@@ -141,6 +145,7 @@ export const MediaPlayer = React.memo(function MediaPlayer({
ref={videoRef}
src={url}
poster={poster}
+ autoPlay={autoPlay}
controls={controls}
loop={loop}
muted={autoPlay ? true : muted}
@@ -152,7 +157,10 @@ export const MediaPlayer = React.memo(function MediaPlayer({
isLoading && "opacity-0"
)}
onClick={handleVideoClick}
+ onLoadedMetadata={handleVideoLoadedMetadata}
onLoadedData={handleVideoLoadedData}
+ onCanPlay={handleVideoCanPlay}
+ onPlaying={handleVideoPlaying}
onError={handleError}
draggable={draggable}
data-testid="media-video"
diff --git a/hooks/use-media-player.test.ts b/hooks/use-media-player.test.ts
index 7492db5..5f0d6cc 100644
--- a/hooks/use-media-player.test.ts
+++ b/hooks/use-media-player.test.ts
@@ -143,6 +143,29 @@ describe("useMediaPlayer", () => {
expect(result.current.hasError).toBe(false)
expect(onError).not.toHaveBeenCalled()
})
+
+ it("treats refreshed signed URLs as distinct media sources", () => {
+ const onError = vi.fn()
+ const { result, rerender } = renderHook(
+ ({ url }) => useMediaPlayer({ url, isVideo: true, onError }),
+ { initialProps: { url: "https://example.com/video.mp4?token=old" } }
+ )
+
+ const mockVideo = {
+ src: "https://example.com/video.mp4?token=old",
+ currentSrc: "https://example.com/video.mp4?token=old",
+ } as unknown as HTMLVideoElement
+ ;(result.current.videoRef as React.MutableRefObject
).current = mockVideo
+
+ rerender({ url: "https://example.com/video.mp4?token=new" })
+
+ act(() => {
+ result.current.handleError()
+ })
+
+ expect(result.current.hasError).toBe(false)
+ expect(onError).not.toHaveBeenCalled()
+ })
})
describe("handleVideoLoadedData", () => {
@@ -164,6 +187,51 @@ describe("useMediaPlayer", () => {
expect(result.current.isLoading).toBe(false)
expect(onLoad).toHaveBeenCalledWith(mockEvent)
})
+
+ it("clears loading when metadata becomes available", () => {
+ const onLoad = vi.fn()
+ const { result } = renderHook(() =>
+ useMediaPlayer({
+ url: "https://example.com/video.mp4",
+ isVideo: true,
+ onLoad,
+ })
+ )
+
+ const mockEvent = {
+ currentTarget: {
+ currentSrc: "https://example.com/video.mp4",
+ src: "https://example.com/video.mp4",
+ },
+ } as unknown as React.SyntheticEvent
+
+ act(() => {
+ result.current.handleVideoLoadedMetadata(mockEvent)
+ })
+
+ expect(result.current.isLoading).toBe(false)
+ expect(onLoad).toHaveBeenCalledWith(mockEvent)
+ })
+
+ it("clears loading when canplay fires", () => {
+ const { result } = renderHook(() =>
+ useMediaPlayer({
+ url: "https://example.com/video.mp4",
+ isVideo: true,
+ })
+ )
+
+ act(() => {
+ result.current.handleVideoCanPlay({
+ currentTarget: {
+ currentSrc: "https://example.com/video.mp4",
+ src: "https://example.com/video.mp4",
+ },
+ } as unknown as React.SyntheticEvent)
+ })
+
+ expect(result.current.isLoading).toBe(false)
+ })
})
describe("handleVideoClick", () => {
@@ -394,7 +462,7 @@ describe("useMediaPlayer", () => {
// Start playing (async)
let playClickPromise: Promise
- act(() => {
+ await act(async () => {
playClickPromise = result.current.handleVideoClick!(mockEvent)
})
@@ -402,9 +470,7 @@ describe("useMediaPlayer", () => {
Object.defineProperty(mockVideo, "paused", { value: false, writable: true })
// Click again to pause while play() is still pending
- const pauseClickPromise = act(async () => {
- await result.current.handleVideoClick!(mockEvent)
- })
+ const pauseClickPromise = result.current.handleVideoClick!(mockEvent)
// Resolve the play promise
await act(async () => {
@@ -428,6 +494,7 @@ describe("useMediaPlayer", () => {
muted: false,
play: vi.fn().mockResolvedValue(undefined),
pause: vi.fn(),
+ load: vi.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
} as unknown as HTMLVideoElement
@@ -459,6 +526,7 @@ describe("useMediaPlayer", () => {
return Promise.resolve(undefined)
}),
pause: vi.fn(),
+ load: vi.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
} as unknown as HTMLVideoElement
@@ -497,6 +565,7 @@ describe("useMediaPlayer", () => {
muted: true,
play: vi.fn().mockResolvedValue(undefined),
pause: vi.fn(),
+ load: vi.fn(),
addEventListener: addEventListenerSpy,
removeEventListener: removeEventListenerSpy,
} as unknown as HTMLVideoElement
@@ -519,6 +588,7 @@ describe("useMediaPlayer", () => {
muted: false,
play: vi.fn().mockResolvedValue(undefined),
pause: vi.fn(),
+ load: vi.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
} as unknown as HTMLVideoElement
@@ -575,7 +645,10 @@ describe("useMediaPlayer", () => {
const firstRender = {
handleLoad: result.current.handleLoad,
handleError: result.current.handleError,
+ handleVideoLoadedMetadata: result.current.handleVideoLoadedMetadata,
handleVideoLoadedData: result.current.handleVideoLoadedData,
+ handleVideoCanPlay: result.current.handleVideoCanPlay,
+ handleVideoPlaying: result.current.handleVideoPlaying,
handleVideoClick: result.current.handleVideoClick,
}
@@ -584,7 +657,10 @@ describe("useMediaPlayer", () => {
// Callbacks should be referentially stable (memoized with useCallback)
expect(result.current.handleLoad).toBe(firstRender.handleLoad)
expect(result.current.handleError).toBe(firstRender.handleError)
+ expect(result.current.handleVideoLoadedMetadata).toBe(firstRender.handleVideoLoadedMetadata)
expect(result.current.handleVideoLoadedData).toBe(firstRender.handleVideoLoadedData)
+ expect(result.current.handleVideoCanPlay).toBe(firstRender.handleVideoCanPlay)
+ expect(result.current.handleVideoPlaying).toBe(firstRender.handleVideoPlaying)
expect(result.current.handleVideoClick).toBe(firstRender.handleVideoClick)
})
diff --git a/hooks/use-media-player.ts b/hooks/use-media-player.ts
index 5b08901..272fd05 100644
--- a/hooks/use-media-player.ts
+++ b/hooks/use-media-player.ts
@@ -36,54 +36,43 @@ export interface UseMediaPlayerReturn {
handleLoad: (e: React.SyntheticEvent) => void
/** Handler for media error events */
handleError: () => void
+ /** Handler for video metadata availability */
+ handleVideoLoadedMetadata: (e: React.SyntheticEvent) => void
/** Handler for video-specific loadeddata event */
handleVideoLoadedData: (e: React.SyntheticEvent) => void
+ /** Handler for video canplay event */
+ handleVideoCanPlay: (e: React.SyntheticEvent) => void
+ /** Handler for video playing event */
+ handleVideoPlaying: (e: React.SyntheticEvent) => void
/**
* Handler for video click events - safely toggles play/pause.
* Returns undefined when native controls handle play/pause.
- *
- * Properly handles the async nature of video.play() to prevent
- * "The play() request was interrupted by a call to pause()" errors.
*/
handleVideoClick: ((e: React.MouseEvent) => Promise) | undefined
}
+const AUTOPLAY_RETRY_DELAYS_MS = [180, 520]
+
+function getMediaSource(element: HTMLImageElement | HTMLVideoElement | null) {
+ if (!element) return ""
+
+ if (element instanceof HTMLVideoElement) {
+ return element.currentSrc || element.src
+ }
+
+ return element.src
+}
+
+function normalizeMediaUrl(src: string) {
+ try {
+ return new URL(src, window.location.origin).href
+ } catch {
+ return src
+ }
+}
+
/**
* Custom hook for managing media player state and video playback.
- *
- * Handles:
- * - Loading and error states with synchronous URL tracking to prevent flicker
- * - Video element ref management
- * - Safe play/pause toggling that prevents race conditions
- * - Chrome-compatible autoplay (stays muted; user unmutes via controls)
- *
- * The video play/pause logic properly handles the asynchronous nature of
- * video.play() to prevent "The play() request was interrupted by a call
- * to pause()" errors.
- *
- * Chrome autoplay policy: When autoplay is requested, the video is
- * force-muted before the initial play() call (always allowed by Chrome).
- * The user can unmute via native controls. The `muted` attribute on the
- * `