Fix duration updates when media duration changes

src/Player.tsx

@@ -15,6 +15,7 @@ const Player: Player = React.forwardRef((props, ref) => {
   const Player = props.activePlayer;
   const playerRef = useRef<HTMLVideoElement | null>(null);
   const startOnPlayRef = useRef(true);
+  const lastDurationRef = useRef<number>();
 
   useEffect(() => {
     if (!playerRef.current) return;
@@ -51,6 +52,7 @@ const Player: Player = React.forwardRef((props, ref) => {
 
   const handleLoadStart = (event: SyntheticEvent<HTMLVideoElement>) => {
     startOnPlayRef.current = true;
+    lastDurationRef.current = undefined;
     props.onReady?.();
     props.onLoadStart?.(event);
   };
@@ -63,6 +65,29 @@ const Player: Player = React.forwardRef((props, ref) => {
     props.onPlay?.(event);
   };
 
+  const handleDurationChange = (event: SyntheticEvent<HTMLVideoElement>) => {
+    lastDurationRef.current = event.currentTarget.duration;
+    props.onDurationChange?.(event);
+  };
+
+  const checkDurationChange = (event: SyntheticEvent<HTMLVideoElement>) => {
+    const duration = event.currentTarget.duration;
+    if (Number.isNaN(duration) || duration === lastDurationRef.current) return;
+
+    lastDurationRef.current = duration;
+    event.currentTarget.dispatchEvent(new Event('durationchange'));
+  };
+
+  const handleProgress = (event: SyntheticEvent<HTMLVideoElement>) => {
+    checkDurationChange(event);
+    props.onProgress?.(event);
+  };
+
+  const handleTimeUpdate = (event: SyntheticEvent<HTMLVideoElement>) => {
+    checkDurationChange(event);
+    props.onTimeUpdate?.(event);
+  };
+
   if (!Player) {
     return null;
   }
@@ -109,6 +134,9 @@ const Player: Player = React.forwardRef((props, ref) => {
       config={props.config}
       onLoadStart={handleLoadStart}
       onPlay={handlePlay}
+      onDurationChange={handleDurationChange}
+      onProgress={handleProgress}
+      onTimeUpdate={handleTimeUpdate}
     >
       {props.children}
     </Player>

test/Player.tsx

@@ -112,3 +112,24 @@ await test('video.duration', async (t) => {
 
   t.equal(videoRef.current?.duration, 10);
 });
+
+test('video.durationchange is dispatched when duration changes during timeupdate', (t) => {
+  const videoRef: React.Ref<HTMLVideoElement> = React.createRef();
+  const wrapper = render(<Player ref={videoRef} src="file.mp4" activePlayer={HtmlPlayer} />);
+  const video = videoRef.current;
+  const durationchange = sinon.fake();
+
+  video?.addEventListener('durationchange', durationchange);
+
+  if (video) {
+    video.duration = 20;
+    act(() => {
+      wrapper.root.findByType('video').props.onTimeUpdate({ currentTarget: video });
+    });
+    act(() => {
+      wrapper.root.findByType('video').props.onTimeUpdate({ currentTarget: video });
+    });
+  }
+
+  t.ok(durationchange.calledOnce);
+});

test/helpers/server-safe-globals.js

@@ -107,4 +107,10 @@ const globalThisShim = {
 
 globalThis.document = document;
 globalThis.window = globalThisShim;
-Object.assign(globalThis, globalThisShim);
+for (const [key, value] of Object.entries(globalThisShim)) {
+  Object.defineProperty(globalThis, key, {
+    value,
+    configurable: true,
+    writable: true,
+  });
+}