From b06cfc8640a165ffafdfc31fc90875c25d48b9b9 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sun, 30 Jun 2024 09:35:05 +0000
Subject: [PATCH 01/30] Add shell.nix for nix users

---
 shell.nix | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 shell.nix

diff --git a/shell.nix b/shell.nix
new file mode 100644
index 0000000000..0e5b883036
--- /dev/null
+++ b/shell.nix
@@ -0,0 +1,12 @@
+{pkgs ? import <nixpkgs> {}}:
+  pkgs.mkShell {
+    packages = with pkgs; [
+      nodejs-18_x
+      nodePackages.yarn
+      eslint_d
+      prettierd
+      jdk11
+      (jdt-language-server.override { jdk = jdk11; })
+    ];
+  }
+

From b5260cae8f41a00c81d8da08c4747acf7eea222f Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sun, 30 Jun 2024 09:35:34 +0000
Subject: [PATCH 02/30] Add VideoDecoderProperties for the web

---
 src/VideoDecoderProperties.web.ts | 45 +++++++++++++++++++++++++++++++
 src/index.ts                      |  2 +-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/VideoDecoderProperties.web.ts

diff --git a/src/VideoDecoderProperties.web.ts b/src/VideoDecoderProperties.web.ts
new file mode 100644
index 0000000000..13001c0267
--- /dev/null
+++ b/src/VideoDecoderProperties.web.ts
@@ -0,0 +1,45 @@
+/// <reference lib="dom" />
+import type {VideoDecoderPropertiesType} from './specs/VideoNativeComponent';
+
+class VideoDecoderProperties implements VideoDecoderPropertiesType {
+  async getWidevineLevel() {
+    return 0;
+  }
+
+  static canPlay(codec: string): boolean {
+    // most chrome based browser (and safari I think) supports matroska but reports they do not.
+    // for those browsers, only check the codecs and not the container.
+    if (navigator.userAgent.search('Firefox') === -1) {
+      codec = codec.replace('video/x-matroska', 'video/mp4');
+    }
+
+    // Find any video element that we could use to check, or create one that will
+    // instantly be garbage collected
+    const videos = document.getElementsByTagName('video');
+    const video = videos.item(0) ?? document.createElement('video');
+
+    return !!video.canPlayType(codec);
+  }
+
+  async isCodecSupported(
+    mimeType: string,
+    _width: number,
+    _height: number,
+  ): Promise<'unsupported' | 'hardware' | 'software'> {
+    // TODO: Figure out if we can get hardware support information
+    return VideoDecoderProperties.canPlay(mimeType)
+      ? 'software'
+      : 'unsupported';
+  }
+
+  async isHEVCSupported(): Promise<'unsupported' | 'hardware' | 'software'> {
+    // Just a dummy vidoe mime type codec with HEVC to check.
+    return VideoDecoderProperties.canPlay(
+      'video/x-matroska; codecs="hvc1.1.4.L96.BO"',
+    )
+      ? 'software'
+      : 'unsupported';
+  }
+}
+
+export default VideoDecoderProperties;
diff --git a/src/index.ts b/src/index.ts
index fc88496dbd..1057753e9c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
 import Video from './Video';
 export {VideoDecoderProperties} from './VideoDecoderProperties';
-export * from './types';
+export type * from './types';
 export type {VideoRef} from './Video';
 export {Video};
 export default Video;

From 8c723068bdfacce2dd948f4d343f9bd1d5eb03a7 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sun, 30 Jun 2024 09:38:10 +0000
Subject: [PATCH 03/30] Move video ref type to its own file

---
 src/Video.tsx                   |  3 +--
 src/index.ts                    |  2 --
 src/specs/NativeVideoManager.ts |  5 +----
 src/types/index.ts              |  1 +
 src/types/video-ref.ts          | 18 ++++++++++++++++++
 5 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 src/types/video-ref.ts

diff --git a/src/Video.tsx b/src/Video.tsx
index 9571493f97..7d9b68269e 100644
--- a/src/Video.tsx
+++ b/src/Video.tsx
@@ -45,8 +45,7 @@ import {
   resolveAssetSourceForVideo,
 } from './utils';
 import NativeVideoManager from './specs/NativeVideoManager';
-import type {VideoSaveData} from './specs/NativeVideoManager';
-import {CmcdMode, ViewType} from './types';
+import {ViewType, type VideoSaveData, CmcdMode} from './types';
 import type {
   OnLoadData,
   OnTextTracksData,
diff --git a/src/index.ts b/src/index.ts
index 1057753e9c..73a4756cfb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,4 @@
 import Video from './Video';
 export {VideoDecoderProperties} from './VideoDecoderProperties';
 export type * from './types';
-export type {VideoRef} from './Video';
 export {Video};
-export default Video;
diff --git a/src/specs/NativeVideoManager.ts b/src/specs/NativeVideoManager.ts
index 3b1b261ef6..a7dde175ec 100644
--- a/src/specs/NativeVideoManager.ts
+++ b/src/specs/NativeVideoManager.ts
@@ -4,10 +4,7 @@ import type {
   Float,
   UnsafeObject,
 } from 'react-native/Libraries/Types/CodegenTypes';
-
-export type VideoSaveData = {
-  uri: string;
-};
+import type {VideoSaveData} from '../types/video-ref';
 
 // @TODO rename to "Spec" when applying new arch
 export interface VideoManagerType {
diff --git a/src/types/index.ts b/src/types/index.ts
index ab7cf42db9..24725b6ce3 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -7,4 +7,5 @@ export {default as ResizeMode} from './ResizeMode';
 export {default as TextTrackType} from './TextTrackType';
 export {default as ViewType} from './ViewType';
 export * from './video';
+export * from './video-ref';
 export * from '../specs/VideoNativeComponent';
diff --git a/src/types/video-ref.ts b/src/types/video-ref.ts
new file mode 100644
index 0000000000..aeadc7d69b
--- /dev/null
+++ b/src/types/video-ref.ts
@@ -0,0 +1,18 @@
+export type VideoSaveData = {
+  uri: string;
+};
+
+export interface VideoRef {
+  seek: (time: number, tolerance?: number) => void;
+  resume: () => void;
+  pause: () => void;
+  presentFullscreenPlayer: () => void;
+  dismissFullscreenPlayer: () => void;
+  restoreUserInterfaceForPictureInPictureStopCompleted: (
+    restore: boolean,
+  ) => void;
+  save: (options: object) => Promise<VideoSaveData>;
+  setVolume: (volume: number) => void;
+  getCurrentPosition: () => Promise<number>;
+  setFullScreen: (fullScreen: boolean) => void;
+}

From afa8c03f6372403901db7f25707bb11212084880 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sun, 30 Jun 2024 10:21:34 +0000
Subject: [PATCH 04/30] Create ref handling and basics stollen from Kyoo

---
 src/Video.web.tsx | 159 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 src/Video.web.tsx

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
new file mode 100644
index 0000000000..ca93256999
--- /dev/null
+++ b/src/Video.web.tsx
@@ -0,0 +1,159 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import type {VideoRef, ReactVideoProps} from './types';
+
+const Video = forwardRef<VideoRef, ReactVideoProps>(
+  (
+    {
+      source,
+      paused,
+      muted,
+      volume,
+      onBuffer,
+      onLoad,
+      onProgress,
+      onError,
+      onEnd,
+      onPlaybackStateChanged,
+    },
+    ref,
+  ) => {
+    const nativeRef = useRef<HTMLVideoElement>(null);
+    const errorHandler = useRef<typeof onError>(onError);
+    errorHandler.current = onError;
+
+    const seek = useCallback(async (time: number, _tolerance?: number) => {
+      if (isNaN(time)) {
+        throw new Error('Specified time is not a number');
+      }
+      if (!nativeRef.current) {
+        console.warn('Video Component is not mounted');
+        return;
+      }
+      nativeRef.current.currentTime = time;
+    }, []);
+
+    const pause = useCallback(() => {
+      if (!nativeRef.current) {
+        return;
+      }
+      nativeRef.current.pause();
+    }, []);
+
+    const resume = useCallback(() => {
+      if (!nativeRef.current) {
+        return;
+      }
+      nativeRef.current.play();
+    }, []);
+
+    const unsupported = useCallback(() => {
+      throw new Error('This is unsupported on the web');
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        seek,
+        pause,
+        resume,
+        // making the video fullscreen does not work with some subtitles polyfils
+        // so I decided to not include it.
+        presentFullscreenPlayer: unsupported,
+        dismissFullscreenPlayer: unsupported,
+        save: unsupported,
+        restoreUserInterfaceForPictureInPictureStopCompleted: unsupported,
+      }),
+      [seek, pause, resume, unsupported],
+    );
+
+    useEffect(() => {
+      if (paused) {
+        pause();
+      } else {
+        resume();
+      }
+    }, [paused, pause, resume]);
+    useEffect(() => {
+      if (!nativeRef.current || !volume) {
+        return;
+      }
+      nativeRef.current.volume = Math.max(0, Math.min(volume, 100)) / 100;
+    }, [volume]);
+
+    const setPlay = useSetAtom(playAtom);
+    useEffect(() => {
+      if (!nativeRef.current) return;
+      // Set play state to the player's value (if autoplay is denied)
+      setPlay(!nativeRef.current.paused);
+    }, [setPlay]);
+
+    const setProgress = useSetAtom(progressAtom);
+
+    return (
+      <>
+        <MediaSessionManager {...source.metadata} />
+        <video
+          ref={nativeRef}
+          src={source.uri as string | undefined}
+          muted={muted}
+          autoPlay={!paused}
+          controls={false}
+          playsInline
+          onCanPlay={() => onBuffer?.({isBuffering: false})}
+          onWaiting={() => onBuffer?.({isBuffering: true})}
+          onDurationChange={() => {
+            if (!nativeRef.current) {
+              return;
+            }
+            onLoad?.({duration: nativeRef.current.duration} as any);
+          }}
+          onTimeUpdate={() => {
+            if (!nativeRef.current) {
+              return;
+            }
+            onProgress?.({
+              currentTime: nativeRef.current.currentTime,
+              playableDuration: nativeRef.current.buffered.length
+                ? nativeRef.current.buffered.end(
+                    nativeRef.current.buffered.length - 1,
+                  )
+                : 0,
+              seekableDuration: 0,
+            });
+          }}
+          onError={() => {
+            if (
+              nativeRef?.current?.error?.code ===
+              MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+            )
+              onMediaUnsupported?.call(undefined);
+            else {
+              onError?.call(null, {
+                error: {
+                  errorString:
+                    nativeRef.current?.error?.message ?? 'Unknown error',
+                },
+              });
+            }
+          }}
+          onLoadedMetadata={() => {
+            if (source.startPosition) setProgress(source.startPosition / 1000);
+          }}
+          onPlay={() => onPlaybackStateChanged?.({isPlaying: true})}
+          onPause={() => onPlaybackStateChanged?.({isPlaying: false})}
+          onEnded={onEnd}
+          style={{position: 'absolute', inset: 0, objectFit: 'contain'}}
+        />
+      </>
+    );
+  },
+);
+
+Video.displayName = 'Video';
+export default Video;

From 9b39beeda072c9c6ceae4d56b7edd8b2a577a769 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sun, 30 Jun 2024 11:25:43 +0000
Subject: [PATCH 05/30] Add most events

---
 src/Video.web.tsx | 103 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 81 insertions(+), 22 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index ca93256999..da8e2d9e96 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -14,10 +14,15 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       paused,
       muted,
       volume,
+      showNotificationControls,
       onBuffer,
       onLoad,
       onProgress,
+      onPlaybackRateChange,
       onError,
+      onReadyForDisplay,
+      onSeek,
+      onVolumeChange,
       onEnd,
       onPlaybackStateChanged,
     },
@@ -27,16 +32,20 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
     const errorHandler = useRef<typeof onError>(onError);
     errorHandler.current = onError;
 
-    const seek = useCallback(async (time: number, _tolerance?: number) => {
-      if (isNaN(time)) {
-        throw new Error('Specified time is not a number');
-      }
-      if (!nativeRef.current) {
-        console.warn('Video Component is not mounted');
-        return;
-      }
-      nativeRef.current.currentTime = time;
-    }, []);
+    const seek = useCallback(
+      async (time: number, _tolerance?: number) => {
+        if (isNaN(time)) {
+          throw new Error('Specified time is not a number');
+        }
+        if (!nativeRef.current) {
+          console.warn('Video Component is not mounted');
+          return;
+        }
+        nativeRef.current.currentTime = time;
+        onSeek?.({seekTime: time, currentTime: nativeRef.current.currentTime});
+      },
+      [onSeek],
+    );
 
     const pause = useCallback(() => {
       if (!nativeRef.current) {
@@ -52,6 +61,20 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       nativeRef.current.play();
     }, []);
 
+    const setVolume = useCallback((vol: number) => {
+      if (!nativeRef.current) {
+        return;
+      }
+      nativeRef.current.volume = Math.max(0, Math.min(vol, 100)) / 100;
+    }, []);
+
+    const getCurrentPosition = useCallback(async () => {
+      if (!nativeRef.current) {
+        throw new Error('Video Component is not mounted');
+      }
+      return nativeRef.current.currentTime;
+    }, []);
+
     const unsupported = useCallback(() => {
       throw new Error('This is unsupported on the web');
     }, []);
@@ -62,14 +85,17 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         seek,
         pause,
         resume,
+        setVolume,
+        getCurrentPosition,
         // making the video fullscreen does not work with some subtitles polyfils
         // so I decided to not include it.
         presentFullscreenPlayer: unsupported,
         dismissFullscreenPlayer: unsupported,
+        setFullScreen: unsupported,
         save: unsupported,
         restoreUserInterfaceForPictureInPictureStopCompleted: unsupported,
       }),
-      [seek, pause, resume, unsupported],
+      [seek, pause, resume, unsupported, setVolume, getCurrentPosition],
     );
 
     useEffect(() => {
@@ -80,24 +106,31 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       }
     }, [paused, pause, resume]);
     useEffect(() => {
-      if (!nativeRef.current || !volume) {
+      if (volume === undefined) {
         return;
       }
-      nativeRef.current.volume = Math.max(0, Math.min(volume, 100)) / 100;
-    }, [volume]);
+      setVolume(volume);
+    }, [volume, setVolume]);
 
-    const setPlay = useSetAtom(playAtom);
     useEffect(() => {
-      if (!nativeRef.current) return;
-      // Set play state to the player's value (if autoplay is denied)
-      setPlay(!nativeRef.current.paused);
-    }, [setPlay]);
+      // Not sure about how to do this but we want to wait for nativeRef to be initialized
+      setTimeout(() => {
+        if (!nativeRef.current) {
+          return;
+        }
 
-    const setProgress = useSetAtom(progressAtom);
+        // Set play state to the player's value (if autoplay is denied)
+        // This is useful if our UI is in a play state but autoplay got denied so
+        // the video is actaully in a paused state.
+        onPlaybackStateChanged?.({isPlaying: !nativeRef.current.paused});
+      }, 500);
+    }, [onPlaybackStateChanged]);
 
     return (
       <>
-        <MediaSessionManager {...source.metadata} />
+        {showNotificationControls && (
+          <MediaSessionManager {...source.metadata} />
+        )}
         <video
           ref={nativeRef}
           src={source.uri as string | undefined}
@@ -107,11 +140,30 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           playsInline
           onCanPlay={() => onBuffer?.({isBuffering: false})}
           onWaiting={() => onBuffer?.({isBuffering: true})}
+          onRateChange={() => {
+            if (!nativeRef.current) {
+              return;
+            }
+            onPlaybackRateChange?.({
+              playbackRate: nativeRef.current?.playbackRate,
+            });
+          }}
           onDurationChange={() => {
             if (!nativeRef.current) {
               return;
             }
-            onLoad?.({duration: nativeRef.current.duration} as any);
+            onLoad?.({
+              currentTime: nativeRef.current.currentTime,
+              duration: nativeRef.current.duration,
+              videoTracks: [],
+              textTracks: [],
+              audioTracks: [],
+              naturalSize: {
+                width: nativeRef.current.videoWidth,
+                height: nativeRef.current.videoHeight,
+                orientation: 'landscape',
+              },
+            });
           }}
           onTimeUpdate={() => {
             if (!nativeRef.current) {
@@ -127,6 +179,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
               seekableDuration: 0,
             });
           }}
+          onLoadedData={() => onReadyForDisplay?.()}
           onError={() => {
             if (
               nativeRef?.current?.error?.code ===
@@ -147,6 +200,12 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           }}
           onPlay={() => onPlaybackStateChanged?.({isPlaying: true})}
           onPause={() => onPlaybackStateChanged?.({isPlaying: false})}
+          onVolumeChange={() => {
+            if (!nativeRef.current) {
+              return;
+            }
+            onVolumeChange?.({volume: nativeRef.current.volume});
+          }}
           onEnded={onEnd}
           style={{position: 'absolute', inset: 0, objectFit: 'contain'}}
         />

From b8407558354420fac721df22f8c2482724462b90 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sun, 30 Jun 2024 11:38:52 +0000
Subject: [PATCH 06/30] Add most properties

---
 src/Video.web.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index da8e2d9e96..e2defb4b5c 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -14,7 +14,11 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       paused,
       muted,
       volume,
+      rate,
+      repeat,
+      controls,
       showNotificationControls,
+      poster,
       onBuffer,
       onLoad,
       onProgress,
@@ -126,6 +130,13 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       }, 500);
     }, [onPlaybackStateChanged]);
 
+    useEffect(() => {
+      if (!nativeRef.current || rate === undefined) {
+        return;
+      }
+      nativeRef.current.playbackRate = rate;
+    }, [rate]);
+
     return (
       <>
         {showNotificationControls && (
@@ -136,8 +147,10 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           src={source.uri as string | undefined}
           muted={muted}
           autoPlay={!paused}
-          controls={false}
+          controls={controls}
+          loop={repeat}
           playsInline
+          poster={poster}
           onCanPlay={() => onBuffer?.({isBuffering: false})}
           onWaiting={() => onBuffer?.({isBuffering: true})}
           onRateChange={() => {
@@ -196,7 +209,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
             }
           }}
           onLoadedMetadata={() => {
-            if (source.startPosition) setProgress(source.startPosition / 1000);
+            if (source.startPosition) seek(source.startPosition / 1000);
           }}
           onPlay={() => onPlaybackStateChanged?.({isPlaying: true})}
           onPause={() => onPlaybackStateChanged?.({isPlaying: false})}

From 733a95dba0271ddb996e16f8e52dc5f641b706ac Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sun, 30 Jun 2024 13:25:49 +0000
Subject: [PATCH 07/30] Add media session support

---
 src/Video.web.tsx                 | 281 ++++++++++++++++++++----------
 src/specs/VideoNativeComponent.ts |   4 +-
 src/types/video-ref.ts            |   3 +
 3 files changed, 198 insertions(+), 90 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index e2defb4b5c..8c150ae8e9 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -4,8 +4,10 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  type RefObject,
+  useMemo,
 } from 'react';
-import type {VideoRef, ReactVideoProps} from './types';
+import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
 
 const Video = forwardRef<VideoRef, ReactVideoProps>(
   (
@@ -17,7 +19,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       rate,
       repeat,
       controls,
-      showNotificationControls,
+      showNotificationControls = false,
       poster,
       onBuffer,
       onLoad,
@@ -45,6 +47,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           console.warn('Video Component is not mounted');
           return;
         }
+        time = Math.max(0, Math.min(time, nativeRef.current.duration));
         nativeRef.current.currentTime = time;
         onSeek?.({seekTime: time, currentTime: nativeRef.current.currentTime});
       },
@@ -98,8 +101,17 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         setFullScreen: unsupported,
         save: unsupported,
         restoreUserInterfaceForPictureInPictureStopCompleted: unsupported,
+        nativeHtmlRef: nativeRef,
       }),
-      [seek, pause, resume, unsupported, setVolume, getCurrentPosition],
+      [
+        seek,
+        pause,
+        resume,
+        unsupported,
+        setVolume,
+        getCurrentPosition,
+        nativeRef,
+      ],
     );
 
     useEffect(() => {
@@ -137,95 +149,188 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       nativeRef.current.playbackRate = rate;
     }, [rate]);
 
+    useMediaSession(
+      source?.metadata,
+      nativeRef,
+      useMemo(
+        () => ({
+          seek,
+          resume,
+          pause,
+        }),
+        [seek, resume, pause],
+      ),
+      showNotificationControls,
+    );
+
     return (
-      <>
-        {showNotificationControls && (
-          <MediaSessionManager {...source.metadata} />
-        )}
-        <video
-          ref={nativeRef}
-          src={source.uri as string | undefined}
-          muted={muted}
-          autoPlay={!paused}
-          controls={controls}
-          loop={repeat}
-          playsInline
-          poster={poster}
-          onCanPlay={() => onBuffer?.({isBuffering: false})}
-          onWaiting={() => onBuffer?.({isBuffering: true})}
-          onRateChange={() => {
-            if (!nativeRef.current) {
-              return;
-            }
-            onPlaybackRateChange?.({
-              playbackRate: nativeRef.current?.playbackRate,
-            });
-          }}
-          onDurationChange={() => {
-            if (!nativeRef.current) {
-              return;
-            }
-            onLoad?.({
-              currentTime: nativeRef.current.currentTime,
-              duration: nativeRef.current.duration,
-              videoTracks: [],
-              textTracks: [],
-              audioTracks: [],
-              naturalSize: {
-                width: nativeRef.current.videoWidth,
-                height: nativeRef.current.videoHeight,
-                orientation: 'landscape',
-              },
-            });
-          }}
-          onTimeUpdate={() => {
-            if (!nativeRef.current) {
-              return;
-            }
-            onProgress?.({
-              currentTime: nativeRef.current.currentTime,
-              playableDuration: nativeRef.current.buffered.length
-                ? nativeRef.current.buffered.end(
-                    nativeRef.current.buffered.length - 1,
-                  )
-                : 0,
-              seekableDuration: 0,
-            });
-          }}
-          onLoadedData={() => onReadyForDisplay?.()}
-          onError={() => {
-            if (
-              nativeRef?.current?.error?.code ===
-              MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
-            )
-              onMediaUnsupported?.call(undefined);
-            else {
-              onError?.call(null, {
-                error: {
-                  errorString:
-                    nativeRef.current?.error?.message ?? 'Unknown error',
-                },
-              });
-            }
-          }}
-          onLoadedMetadata={() => {
-            if (source.startPosition) seek(source.startPosition / 1000);
-          }}
-          onPlay={() => onPlaybackStateChanged?.({isPlaying: true})}
-          onPause={() => onPlaybackStateChanged?.({isPlaying: false})}
-          onVolumeChange={() => {
-            if (!nativeRef.current) {
-              return;
-            }
-            onVolumeChange?.({volume: nativeRef.current.volume});
-          }}
-          onEnded={onEnd}
-          style={{position: 'absolute', inset: 0, objectFit: 'contain'}}
-        />
-      </>
+      <video
+        ref={nativeRef}
+        src={source?.uri as string | undefined}
+        muted={muted}
+        autoPlay={!paused}
+        controls={controls}
+        loop={repeat}
+        playsInline
+        poster={poster}
+        onCanPlay={() => onBuffer?.({isBuffering: false})}
+        onWaiting={() => onBuffer?.({isBuffering: true})}
+        onRateChange={() => {
+          if (!nativeRef.current) {
+            return;
+          }
+          onPlaybackRateChange?.({
+            playbackRate: nativeRef.current?.playbackRate,
+          });
+        }}
+        onDurationChange={() => {
+          if (!nativeRef.current) {
+            return;
+          }
+          onLoad?.({
+            currentTime: nativeRef.current.currentTime,
+            duration: nativeRef.current.duration,
+            videoTracks: [],
+            textTracks: [],
+            audioTracks: [],
+            naturalSize: {
+              width: nativeRef.current.videoWidth,
+              height: nativeRef.current.videoHeight,
+              orientation: 'landscape',
+            },
+          });
+        }}
+        onTimeUpdate={() => {
+          if (!nativeRef.current) {
+            return;
+          }
+          onProgress?.({
+            currentTime: nativeRef.current.currentTime,
+            playableDuration: nativeRef.current.buffered.length
+              ? nativeRef.current.buffered.end(
+                  nativeRef.current.buffered.length - 1,
+                )
+              : 0,
+            seekableDuration: 0,
+          });
+        }}
+        onLoadedData={() => onReadyForDisplay?.()}
+        onError={() => {
+          if (!nativeRef.current?.error) {
+            return;
+          }
+          onError?.({
+            error: {
+              errorString: nativeRef.current.error.message ?? 'Unknown error',
+              code: nativeRef.current.error.code,
+            },
+          });
+        }}
+        onLoadedMetadata={() => {
+          if (source?.startPosition) {
+            seek(source.startPosition / 1000);
+          }
+        }}
+        onPlay={() => onPlaybackStateChanged?.({isPlaying: true})}
+        onPause={() => onPlaybackStateChanged?.({isPlaying: false})}
+        onVolumeChange={() => {
+          if (!nativeRef.current) {
+            return;
+          }
+          onVolumeChange?.({volume: nativeRef.current.volume});
+        }}
+        onEnded={onEnd}
+        style={{position: 'absolute', inset: 0, objectFit: 'contain'}}
+      />
     );
   },
 );
 
+const useMediaSession = (
+  metadata: VideoMetadata | undefined,
+  nativeRef: RefObject<HTMLVideoElement>,
+  actions: {
+    seek: (time: number) => void;
+    pause: () => void;
+    resume: () => void;
+  },
+  showNotification: boolean,
+) => {
+  const isPlaying = !nativeRef.current?.paused ?? false;
+  const progress = nativeRef.current?.currentTime ?? 0;
+  const duration = nativeRef.current?.duration ?? 100;
+  const playbackRate = nativeRef.current?.playbackRate ?? 1;
+
+  const enabled = 'mediaSession' in navigator && showNotification;
+
+  useEffect(() => {
+    if (enabled) {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: metadata?.title,
+        artist: metadata?.artist,
+        artwork: metadata?.imageUri ? [{src: metadata.imageUri}] : undefined,
+      });
+    }
+  }, [enabled, metadata]);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const seekRelative = (offset: number) => {
+      if (!nativeRef.current) {
+        return;
+      }
+      actions.seek(nativeRef.current.currentTime + offset);
+    };
+
+    const mediaActions: [
+      MediaSessionAction,
+      MediaSessionActionHandler | null,
+    ][] = [
+      ['play', () => actions.resume()],
+      ['pause', () => actions.pause()],
+      [
+        'seekbackward',
+        (evt: MediaSessionActionDetails) =>
+          seekRelative(evt.seekOffset ? -evt.seekOffset : -10),
+      ],
+      [
+        'seekforward',
+        (evt: MediaSessionActionDetails) =>
+          seekRelative(evt.seekOffset ? evt.seekOffset : 10),
+      ],
+      [
+        'seekto',
+        (evt: MediaSessionActionDetails) => actions.seek(evt.seekTime!),
+      ],
+    ];
+
+    for (const [action, handler] of mediaActions) {
+      try {
+        navigator.mediaSession.setActionHandler(action, handler);
+      } catch {
+        // ignored
+      }
+    }
+  }, [enabled, nativeRef, actions]);
+
+  useEffect(() => {
+    if (enabled) {
+      navigator.mediaSession.playbackState = isPlaying ? 'playing' : 'paused';
+    }
+  }, [isPlaying, enabled]);
+  useEffect(() => {
+    if (enabled && duration !== undefined) {
+      navigator.mediaSession.setPositionState({
+        position: Math.min(progress, duration),
+        duration,
+        playbackRate: playbackRate,
+      });
+    }
+  }, [progress, duration, playbackRate, enabled]);
+};
+
 Video.displayName = 'Video';
 export default Video;
diff --git a/src/specs/VideoNativeComponent.ts b/src/specs/VideoNativeComponent.ts
index 33a840f015..907bfcb76c 100644
--- a/src/specs/VideoNativeComponent.ts
+++ b/src/specs/VideoNativeComponent.ts
@@ -285,12 +285,12 @@ type OnReceiveAdEventData = Readonly<{
 
 export type OnVideoErrorData = Readonly<{
   error: Readonly<{
-    errorString?: string; // android
+    errorString?: string; // android | web
     errorException?: string; // android
     errorStackTrace?: string; // android
     errorCode?: string; // android
     error?: string; // ios
-    code?: Int32; // ios
+    code?: Int32; // ios | web
     localizedDescription?: string; // ios
     localizedFailureReason?: string; // ios
     localizedRecoverySuggestion?: string; // ios
diff --git a/src/types/video-ref.ts b/src/types/video-ref.ts
index aeadc7d69b..b41072a866 100644
--- a/src/types/video-ref.ts
+++ b/src/types/video-ref.ts
@@ -1,3 +1,5 @@
+import type {RefObject} from 'react';
+
 export type VideoSaveData = {
   uri: string;
 };
@@ -15,4 +17,5 @@ export interface VideoRef {
   setVolume: (volume: number) => void;
   getCurrentPosition: () => Promise<number>;
   setFullScreen: (fullScreen: boolean) => void;
+  nativeHtmlRef?: RefObject<HTMLVideoElement>; // web only
 }

From c4a920deca53e82b8d6b0b432424ab9b3ecbc949 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 1 Jul 2024 03:32:28 +0000
Subject: [PATCH 08/30] Make the basic example app work on web

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c1cdfb88e9..00839de3ed 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
     "version": "6.7.0",
     "description": "A <Video /> element for react-native",
     "main": "lib/index",
-    "source": "src/index",
+    "source": "src/index.ts",
     "react-native": "src/index",
     "license": "MIT",
     "author": "Community Contributors",

From d281a869f5e8d0a01da7b6a8d0b71256ec9f3aef Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 1 Jul 2024 03:32:39 +0000
Subject: [PATCH 09/30] Fix web bugs

---
 src/Video.web.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 8c150ae8e9..92146795b5 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -240,7 +240,13 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           onVolumeChange?.({volume: nativeRef.current.volume});
         }}
         onEnded={onEnd}
-        style={{position: 'absolute', inset: 0, objectFit: 'contain'}}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          objectFit: 'contain',
+          width: '100%',
+          height: '100%',
+        }}
       />
     );
   },
@@ -258,7 +264,9 @@ const useMediaSession = (
 ) => {
   const isPlaying = !nativeRef.current?.paused ?? false;
   const progress = nativeRef.current?.currentTime ?? 0;
-  const duration = nativeRef.current?.duration ?? 100;
+  const duration = Number.isFinite(nativeRef.current?.duration)
+    ? nativeRef.current?.duration
+    : undefined;
   const playbackRate = nativeRef.current?.playbackRate ?? 1;
 
   const enabled = 'mediaSession' in navigator && showNotification;

From 6e585662c8aecd92756472d5a153c919a2651a4d Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 1 Jul 2024 03:40:42 +0000
Subject: [PATCH 10/30] Test notifications on web

---
 examples/expo/src/constants/general.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/examples/expo/src/constants/general.ts b/examples/expo/src/constants/general.ts
index 02a3329d6b..3db84749dc 100644
--- a/examples/expo/src/constants/general.ts
+++ b/examples/expo/src/constants/general.ts
@@ -78,6 +78,14 @@ export const srcAllPlatformList = [
     description: 'another bunny (can be saved)',
     uri: 'https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4',
     headers: {referer: 'www.github.com', 'User-Agent': 'react.native.video'},
+    metadata: {
+      title: 'Custom Title',
+      subtitle: 'Custom Subtitle',
+      artist: 'Custom Artist',
+      description: 'Custom Description',
+      imageUri:
+        'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png',
+    },
   },
   {
     description: 'sintel with subtitles',

From 45f23e0862d4b7b822196285ead3e917854bced6 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 1 Jul 2024 03:45:36 +0000
Subject: [PATCH 11/30] Cleanup media session handling on the web

---
 src/Video.web.tsx | 41 +++++++++++++----------------------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 92146795b5..6f84683ae6 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -149,19 +149,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       nativeRef.current.playbackRate = rate;
     }, [rate]);
 
-    useMediaSession(
-      source?.metadata,
-      nativeRef,
-      useMemo(
-        () => ({
-          seek,
-          resume,
-          pause,
-        }),
-        [seek, resume, pause],
-      ),
-      showNotificationControls,
-    );
+    useMediaSession(source?.metadata, nativeRef, showNotificationControls);
 
     return (
       <video
@@ -255,11 +243,6 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
 const useMediaSession = (
   metadata: VideoMetadata | undefined,
   nativeRef: RefObject<HTMLVideoElement>,
-  actions: {
-    seek: (time: number) => void;
-    pause: () => void;
-    resume: () => void;
-  },
   showNotification: boolean,
 ) => {
   const isPlaying = !nativeRef.current?.paused ?? false;
@@ -286,19 +269,24 @@ const useMediaSession = (
       return;
     }
 
+    const seekTo = (time: number) => {
+      if (nativeRef.current) {
+        nativeRef.current.currentTime = time;
+      }
+    };
+
     const seekRelative = (offset: number) => {
-      if (!nativeRef.current) {
-        return;
+      if (nativeRef.current) {
+        nativeRef.current.currentTime = nativeRef.current.currentTime + offset;
       }
-      actions.seek(nativeRef.current.currentTime + offset);
     };
 
     const mediaActions: [
       MediaSessionAction,
       MediaSessionActionHandler | null,
     ][] = [
-      ['play', () => actions.resume()],
-      ['pause', () => actions.pause()],
+      ['play', () => nativeRef.current?.play()],
+      ['pause', () => nativeRef.current?.pause()],
       [
         'seekbackward',
         (evt: MediaSessionActionDetails) =>
@@ -309,10 +297,7 @@ const useMediaSession = (
         (evt: MediaSessionActionDetails) =>
           seekRelative(evt.seekOffset ? evt.seekOffset : 10),
       ],
-      [
-        'seekto',
-        (evt: MediaSessionActionDetails) => actions.seek(evt.seekTime!),
-      ],
+      ['seekto', (evt: MediaSessionActionDetails) => seekTo(evt.seekTime!)],
     ];
 
     for (const [action, handler] of mediaActions) {
@@ -322,7 +307,7 @@ const useMediaSession = (
         // ignored
       }
     }
-  }, [enabled, nativeRef, actions]);
+  }, [enabled, nativeRef]);
 
   useEffect(() => {
     if (enabled) {

From a1798e057e87582e744f97c2d04ab3ce6e0f9a80 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 1 Jul 2024 04:16:39 +0000
Subject: [PATCH 12/30] Update the doc for web things

---
 docs/pages/component/events.mdx  | 8 ++++----
 docs/pages/component/methods.mdx | 8 ++++----
 docs/pages/component/props.mdx   | 4 ++--
 docs/pages/index.md              | 1 +
 docs/pages/installation.md       | 9 +++++++++
 src/Video.web.tsx                | 1 -
 6 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/docs/pages/component/events.mdx b/docs/pages/component/events.mdx
index 2c2f0a1d79..1468a694f2 100644
--- a/docs/pages/component/events.mdx
+++ b/docs/pages/component/events.mdx
@@ -103,7 +103,7 @@ Note: On Android, you must set the [reportBandwidth](#reportbandwidth) prop to e
 
 ### `onBuffer`
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['Android', 'iOS', 'web']} />
 
 Callback function that is called when the player buffers.
 
@@ -292,7 +292,7 @@ Example:
 
 ### `onPlaybackStateChanged`
 
-<PlatformsList types={['Android', 'iOS', 'visionOS']} />
+<PlatformsList types={['Android', 'iOS', 'visionOS', 'web']} />
 
 Callback function that is called when the playback state changes.
 
@@ -463,7 +463,7 @@ Payload: none
 
 ### `onSeek`
 
-<PlatformsList types={['Android', 'iOS', 'Windows UWP']} />
+<PlatformsList types={['Android', 'iOS', 'Windows UWP', 'web']} />
 
 Callback function that is called when a seek completes.
 
@@ -604,7 +604,7 @@ Example:
 
 ### `onVolumeChange`
 
-<PlatformsList types={['Android', 'iOS', 'visionOS']} />
+<PlatformsList types={['Android', 'iOS', 'visionOS', 'web']} />
 
 Callback function that is called when the volume of player changes.
 
diff --git a/docs/pages/component/methods.mdx b/docs/pages/component/methods.mdx
index b3b0ebc091..ba51e77c80 100644
--- a/docs/pages/component/methods.mdx
+++ b/docs/pages/component/methods.mdx
@@ -17,7 +17,7 @@ Take the player out of fullscreen mode.
 
 ### `pause`
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['Android', 'iOS', 'web']} />
 
 `pause(): Promise<void>`
 
@@ -40,7 +40,7 @@ On Android, this puts the navigation controls in fullscreen mode. It is not a co
 
 ### `resume`
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['Android', 'iOS', 'web']} />
 
 `resume(): Promise<void>`
 
@@ -100,7 +100,7 @@ tolerance is the max distance in milliseconds from the seconds position that's a
 
 ### `setVolume`
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['Android', 'iOS', 'web']} />
 
 `setVolume(value): Promise<void>`
 
@@ -108,7 +108,7 @@ This function will change the volume exactly like [volume](./props#volume) prope
 
 ### `getCurrentPosition`
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['Android', 'iOS', 'web']} />
 
 `getCurrentPosition(): Promise<number>`
 
diff --git a/docs/pages/component/props.mdx b/docs/pages/component/props.mdx
index c5465df745..ea1fb988a5 100644
--- a/docs/pages/component/props.mdx
+++ b/docs/pages/component/props.mdx
@@ -131,7 +131,7 @@ When playing an HLS live stream with a `EXT-X-PROGRAM-DATE-TIME` tag configured,
 
 ### `controls`
 
-<PlatformsList types={['Android', 'iOS', 'visionOS']} />
+<PlatformsList types={['Android', 'iOS', 'visionOS', 'web']} />
 
 Determines whether to show player controls.
 
@@ -1048,7 +1048,7 @@ textTracks={[
 
 ### `showNotificationControls`
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['Android', 'iOS', 'web']} />
 
 Controls whether to show media controls in the notification area.
 For Android each Video component will have its own notification controls and for iOS only one notification control will be shown for the last Active Video component.
diff --git a/docs/pages/index.md b/docs/pages/index.md
index dd4d5281fd..33f20810e3 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -8,6 +8,7 @@ It allows to stream video files (m3u, mpd, mp4, ...) inside your react native ap
 - Exoplayer for android
 - AVplayer for iOS, tvOS and visionOS
 - Windows UWP for windows
+- HTML5 for web
 - Trick mode support
 - Subtitles (embeded or side loaded)
 - DRM support
diff --git a/docs/pages/installation.md b/docs/pages/installation.md
index 26e1207c47..a1c078ba09 100644
--- a/docs/pages/installation.md
+++ b/docs/pages/installation.md
@@ -181,3 +181,12 @@ Select RCTVideo-tvOS
 Run `pod install` in the `visionos` directory of your project
 
 </details>
+
+<details>
+<summary>web</summary>
+
+Nothing to do, everything should work out of the box.
+
+Note that only basic video support is present, no hls/dash or ads/drm for now.
+
+</details>
diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 6f84683ae6..e0f5b3a05f 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -5,7 +5,6 @@ import React, {
   useImperativeHandle,
   useRef,
   type RefObject,
-  useMemo,
 } from 'react';
 import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
 

From c71f3cea3dd6f523390d0f464e3024e1fb82f8e9 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 1 Jul 2024 04:19:12 +0000
Subject: [PATCH 13/30] Prevent playback state change loop on web

---
 src/Video.web.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index e0f5b3a05f..e7b8c361be 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -127,6 +127,9 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       setVolume(volume);
     }, [volume, setVolume]);
 
+    // we use a ref to prevent triggerring the useEffect when the component rerender with a non-stable `onPlaybackStateChanged`.
+    const playbackStateRef = useRef(onPlaybackStateChanged);
+    playbackStateRef.current = onPlaybackStateChanged;
     useEffect(() => {
       // Not sure about how to do this but we want to wait for nativeRef to be initialized
       setTimeout(() => {
@@ -137,9 +140,9 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         // Set play state to the player's value (if autoplay is denied)
         // This is useful if our UI is in a play state but autoplay got denied so
         // the video is actaully in a paused state.
-        onPlaybackStateChanged?.({isPlaying: !nativeRef.current.paused});
+        playbackStateRef.current?.({isPlaying: !nativeRef.current.paused});
       }, 500);
-    }, [onPlaybackStateChanged]);
+    }, []);
 
     useEffect(() => {
       if (!nativeRef.current || rate === undefined) {

From f90118e65b0ecb12cec066bf3ad041dd1a6902b2 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 9 Jul 2024 12:38:47 +0700
Subject: [PATCH 14/30] Fix and improve VideoNativeComponent
 (canPlay/isWidewine supportd) for web

---
 src/VideoDecoderProperties.web.ts | 43 ++++++++++++-------------------
 1 file changed, 16 insertions(+), 27 deletions(-)

diff --git a/src/VideoDecoderProperties.web.ts b/src/VideoDecoderProperties.web.ts
index 13001c0267..3f98669494 100644
--- a/src/VideoDecoderProperties.web.ts
+++ b/src/VideoDecoderProperties.web.ts
@@ -1,25 +1,20 @@
 /// <reference lib="dom" />
 import type {VideoDecoderPropertiesType} from './specs/VideoNativeComponent';
 
-class VideoDecoderProperties implements VideoDecoderPropertiesType {
-  async getWidevineLevel() {
-    return 0;
+const canPlay = (codec: string): boolean => {
+  // most chrome based browser (and safari I think) supports matroska but reports they do not.
+  // for those browsers, only check the codecs and not the container.
+  if (navigator.userAgent.search('Firefox') === -1) {
+    codec = codec.replace('video/x-matroska', 'video/mp4');
   }
 
-  static canPlay(codec: string): boolean {
-    // most chrome based browser (and safari I think) supports matroska but reports they do not.
-    // for those browsers, only check the codecs and not the container.
-    if (navigator.userAgent.search('Firefox') === -1) {
-      codec = codec.replace('video/x-matroska', 'video/mp4');
-    }
-
-    // Find any video element that we could use to check, or create one that will
-    // instantly be garbage collected
-    const videos = document.getElementsByTagName('video');
-    const video = videos.item(0) ?? document.createElement('video');
+  return !!MediaSource.isTypeSupported(codec);
+};
 
-    return !!video.canPlayType(codec);
-  }
+export const VideoDecoderProperties = {
+  async getWidevineLevel() {
+    return 0;
+  },
 
   async isCodecSupported(
     mimeType: string,
@@ -27,19 +22,13 @@ class VideoDecoderProperties implements VideoDecoderPropertiesType {
     _height: number,
   ): Promise<'unsupported' | 'hardware' | 'software'> {
     // TODO: Figure out if we can get hardware support information
-    return VideoDecoderProperties.canPlay(mimeType)
-      ? 'software'
-      : 'unsupported';
-  }
+    return canPlay(mimeType) ? 'software' : 'unsupported';
+  },
 
   async isHEVCSupported(): Promise<'unsupported' | 'hardware' | 'software'> {
     // Just a dummy vidoe mime type codec with HEVC to check.
-    return VideoDecoderProperties.canPlay(
-      'video/x-matroska; codecs="hvc1.1.4.L96.BO"',
-    )
+    return canPlay('video/x-matroska; codecs="hvc1.1.4.L96.BO"')
       ? 'software'
       : 'unsupported';
-  }
-}
-
-export default VideoDecoderProperties;
+  },
+} satisfies VideoDecoderPropertiesType;

From 76b233faf5f0b83ba956fa4b33da0b7cfe451c36 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 9 Jul 2024 12:43:10 +0700
Subject: [PATCH 15/30] Move video style to const var

---
 src/Video.web.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index e7b8c361be..86aea96b3a 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -230,18 +230,20 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           onVolumeChange?.({volume: nativeRef.current.volume});
         }}
         onEnded={onEnd}
-        style={{
-          position: 'absolute',
-          inset: 0,
-          objectFit: 'contain',
-          width: '100%',
-          height: '100%',
-        }}
+        style={videoStyle}
       />
     );
   },
 );
 
+const videoStyle = {
+  position: 'absolute',
+  inset: 0,
+  objectFit: 'contain',
+  width: '100%',
+  height: '100%',
+} satisfies React.CSSProperties;
+
 const useMediaSession = (
   metadata: VideoMetadata | undefined,
   nativeRef: RefObject<HTMLVideoElement>,

From c861cee34778b99407e6077a319d2ec4379c8495 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 9 Jul 2024 12:44:01 +0700
Subject: [PATCH 16/30] Renamve nativeHtmlRef to nativeHtmlVideoRef

---
 src/Video.web.tsx      | 2 +-
 src/types/video-ref.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 86aea96b3a..7ade7936f2 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -100,7 +100,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         setFullScreen: unsupported,
         save: unsupported,
         restoreUserInterfaceForPictureInPictureStopCompleted: unsupported,
-        nativeHtmlRef: nativeRef,
+        nativeHtmlVideoRef: nativeRef,
       }),
       [
         seek,
diff --git a/src/types/video-ref.ts b/src/types/video-ref.ts
index b41072a866..613ec10b67 100644
--- a/src/types/video-ref.ts
+++ b/src/types/video-ref.ts
@@ -17,5 +17,5 @@ export interface VideoRef {
   setVolume: (volume: number) => void;
   getCurrentPosition: () => Promise<number>;
   setFullScreen: (fullScreen: boolean) => void;
-  nativeHtmlRef?: RefObject<HTMLVideoElement>; // web only
+  nativeHtmlVideoRef?: RefObject<HTMLVideoElement>; // web only
 }

From a2923eca36151cce9b43293b904762f82a76c614 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 9 Jul 2024 14:04:57 +0700
Subject: [PATCH 17/30] Update doc for web

---
 docs/bun.lockb                  | Bin 155873 -> 155873 bytes
 docs/pages/component/events.mdx |   3 +++
 docs/pages/component/props.mdx  |   4 +++-
 shell.nix                       |   1 +
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/bun.lockb b/docs/bun.lockb
index fac7725a5d4f55ecac5620ebe566294f000e500e..92719d68b406b857fdc5ec42e2f6af28d7514621 100755
GIT binary patch
delta 2358
zcmXBIH?*X57>4n4*A=}6)GbCUN*d4MSW!|=$*~%{DJkcy&6JebvFdfXM$DMUH7sjH
zuK_b=%;*|0W5$f``}~{V`+d*xz3t<B+eeNb+S=MF4_$OZ`%)QUg|o|4R#>BRxyl+F
zbazx@Y|*<yCBY8;!zwBE7-T9L4mjUc$#KN+N|gd9TwJBHLF;PWODxg8MkT@uXV<E%
zutw)Pl{Gf#<|;9^=v}XpV2Az<Dk=6D+^CY_fb*MFavU+dS*5@U7q_Tv(7ILk5=*oT
zl?W@G-KMg_8lBr!*4UtXhf0hsdUvWM*r9)yN{T%OcdKML;QSty97hZ{Dg{osxL0L^
z))C!HEYZGCCBh14_p7Y1M&|*QH8$uzs1jp~-cgkVJM>GH6nhMgsbo0d{2`SbM+_fU
zDR9EYBPtuT9@V|X679!SBCK%sxXKD^bSjlKHt0T~5@U<rlPU>z=<lhd*kkaNN`?c@
zpH|6n#PAuF0w-KNtFl3>*1g0M?dMb?tZ??c$_i_AUQk(MgYJteF}CQvq>^BV{>v&U
z_87dPlHq{!MkU7)!&g-boN)1)$_B01buY0*`wf){E1bQlvcejjw^Y{Hp!>E;j4gVt
zN`f8w@2I5MWALs@h6B#uQ^|3}@O_m6CtQ4>vO()Z-AgRd{zxUl3TK_l3Tt#eR#{_%
z?k6fSw&)#KNw7ozQ<W5Z3_erIaKQQJDmjiAexXv}go|EfgVvY2msq0xl}dya&c0Sz
zVU5l=Dr;=e{Z=K$7QOFO6710bUM0mIgFz+30p~xc<TzsZqe_7jE`Czkp!KuvC6;La
zq7q?+vtLzKSflfs${HJVN0k^`^nO=KutWb3l@xmn{#40u!1-S)IgS|qty18Gi+@x$
zX#J~ui6z>TN`w{8{!>|DEe|_ea*d7Lb+?$<Ol!v5M@-CgX8e<gshQqPu%DQj8O+R2
zCgx^FGoeK+%uHq$rw})0tW)`xW=b>mHZd|&nVFqNT$!oOIHwcWW*Rf@8N}F3YsNd1
zn3(Cz_%<;$)0+v-B4%a=GxM{FxtY;Scn+~JGo6^73(q@u_k#1c_Fr=Fz}B&Y2libY
F{ttw9E3yCp

delta 2358
zcmXBIIkcQ~7>03gjOcYiO)*+g(s<4sD@saA&aoN0DJeOznQ}_(h#JFnMU9I47?%)N
z^t#}VJML&)aK{~YH1G3oe((1^$9K1n?`|JCdSL6MgXMvXPiS8zBdl<Cxk`*RI#;Ny
zutE2r${JgoU#XH{hu$HT6npeDl?(?Ac2sg4F}zBpzzG*ut8CD^M)wj+w69f(u)^7O
zDlyjRT(7di2Hjj`jV;b^P)V>u??#mrd-QKo$#B5nuu6_2hBvDeIN{<Jl?__A>Rw`r
zcA*ksg|pjKVyw}*U1fz0x_79ovBmkFDhYPz-KCOZkN({%84eiSqmtu@;YOvv2^aUO
zY|uKQdx<65_o+l!;p~2u7;AJMP+4Jv?t?08Y;k^6CBY88QYFP6{bMQ_4j4S7lH-Ws
z!zu+%xOhZmgVv+Emsq0xm`a2d&K_5Zu|}s-Sz&|j6Dn(LasH%Af*pFhDk=8pKc$l4
zfWgx$IgS`Uqf+36i)U3fXw|xxSfc%$N`w{8o>z&nM&|{U6*lO;sItZu=P#)w*rE5b
zN{T)Duc%}=V9==KIAZv!N`VtDUQ^ki^}6mQmT14B5@Ch2H&tS+(RoW{g$=rItE{ob
zd8?9Ohu%9XDfZ~UtCHb>!Fwt>ju^hLQs9J(4^%d2eW-hhCE6dUL|EahQ;D%g=VO%>
zHt2q$vc?wY$5j&S(EC&+#UB07R5Bbe_*^B&5yLN33Y>7!t8CEvQuh)|w7*h`u)^8b
zDlyjRe510$2HkH}*4X0wJCy`G^uAX~u}6PU$#B5n2bCO041ZK9aKgn;DjT$Z*1g0M
z?O#+PtZ??LN{lr+zp1RSL3dPHV~g|ORTAvb`$Hwg9{oR6G8{1YOC`q<!@pGuoN)1v
z$_A}}buY0*ds2z8!r6Z+G1l^svn5y9$Q^f!S(|Ci%=ZuzGo2alWMXQjH{<UmW@ZL6
z!70St%xEUGh=rNS%;Hqy#*B3u-_lHJ#@;4IW-2qY(}}T}+Kh7sab>14<DN-en`zC=
z&mtyfIy0V4OwIIW{IiLfnZZnO4ly?~nhDP(7G|asbMT_`&)d21f~~!m?%%g{Z2!JJ
HmxTWVgH$Rv

diff --git a/docs/pages/component/events.mdx b/docs/pages/component/events.mdx
index 1468a694f2..6e0c149855 100644
--- a/docs/pages/component/events.mdx
+++ b/docs/pages/component/events.mdx
@@ -219,6 +219,9 @@ Payload: none
 
 Callback function that is called when the media is loaded and ready to play.
 
+
+NOTE: tracks (`audioTracks`, `textTracks` & `videoTracks`) are not available on the web.
+
 Payload:
 
 | Property    | Type   | Description                                                                                                                                                                                                                                                                                                                                                        |
diff --git a/docs/pages/component/props.mdx b/docs/pages/component/props.mdx
index ea1fb988a5..ba7175e019 100644
--- a/docs/pages/component/props.mdx
+++ b/docs/pages/component/props.mdx
@@ -709,6 +709,8 @@ The docs for this prop are incomplete and will be updated as each option is inve
 
 > ⚠️ on iOS, you file name must not contain spaces eg. `my video.mp4` will not work, use `my-video.mp4` instead
 
+<PlatformsList types={['Android', 'iOS', 'visionOS', 'Windows UWP']} />
+
 Example:
 
 Pass directly the asset to play (deprecated)
@@ -820,7 +822,7 @@ Example:
 
 #### Start playback at a specific point in time
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['Android', 'iOS', 'web']} />
 
 Provide an optional `startPosition` for video. Value is in milliseconds. If the `cropStart` prop is applied, it will be applied from that point forward.
 (If it is negative or undefined or null, it is ignored)
diff --git a/shell.nix b/shell.nix
index 0e5b883036..bb15d05908 100644
--- a/shell.nix
+++ b/shell.nix
@@ -3,6 +3,7 @@
     packages = with pkgs; [
       nodejs-18_x
       nodePackages.yarn
+      bun
       eslint_d
       prettierd
       jdk11

From 6fe3c0eb8b3947c7f64ed333ffd89ead80eccb11 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 10 Jul 2024 16:30:57 +0700
Subject: [PATCH 18/30] Remove unused errorHandler ref

---
 src/Video.web.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 7ade7936f2..2220623f8a 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -34,8 +34,6 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
     ref,
   ) => {
     const nativeRef = useRef<HTMLVideoElement>(null);
-    const errorHandler = useRef<typeof onError>(onError);
-    errorHandler.current = onError;
 
     const seek = useCallback(
       async (time: number, _tolerance?: number) => {

From 7485da1f70b9b882064ec97a7b4a054cce8c750f Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 10 Jul 2024 17:18:21 +0700
Subject: [PATCH 19/30] Add web support for fullscreen

---
 docs/pages/component/methods.mdx |  8 ++--
 docs/pages/component/props.mdx   |  4 +-
 src/Video.web.tsx                | 82 ++++++++++++++++++++++++++++++--
 3 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/docs/pages/component/methods.mdx b/docs/pages/component/methods.mdx
index ba51e77c80..ebb9d6234e 100644
--- a/docs/pages/component/methods.mdx
+++ b/docs/pages/component/methods.mdx
@@ -6,7 +6,7 @@ This page shows the list of available methods
 
 ### `dismissFullscreenPlayer`
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['Android', 'iOS', 'web']} />
 
 `dismissFullscreenPlayer(): Promise<void>`
 
@@ -25,7 +25,7 @@ Pause the video.
 
 ### `presentFullscreenPlayer`
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['Android', 'iOS', 'web']} />
 
 `presentFullscreenPlayer(): Promise<void>`
 
@@ -127,7 +127,7 @@ Changing source with this function will overide source provided as props.
 
 ### `setFullScreen`
 
-<PlatformsList types={['Android', 'iOS']} />
+<PlatformsList types={['Android', 'iOS', 'web']} />
 
 `setFullScreen(fullscreen): Promise<void>`
 
@@ -188,7 +188,7 @@ Possible values are:
 
 ### `isCodecSupported`
 
-<PlatformsList types={['Android']} />
+<PlatformsList types={['Android', 'web']} />
 
 Indicates whether the provided codec is supported level supported by device.
 
diff --git a/docs/pages/component/props.mdx b/docs/pages/component/props.mdx
index ba7175e019..e205e6bad0 100644
--- a/docs/pages/component/props.mdx
+++ b/docs/pages/component/props.mdx
@@ -300,7 +300,7 @@ Whether this video view should be focusable with a non-touch input device, eg. r
 
 ### `fullscreen`
 
-<PlatformsList types={['Android', 'iOS', 'visionOS']} />
+<PlatformsList types={['Android', 'iOS', 'visionOS', 'web']} />
 
 Controls whether the player enters fullscreen on play.
 See [presentFullscreenPlayer](#presentfullscreenplayer) for details.
@@ -316,7 +316,7 @@ If a preferred [fullscreenOrientation](#fullscreenorientation) is set, causes th
 
 ### `fullscreenOrientation`
 
-<PlatformsList types={['iOS', 'visionOS']} />
+<PlatformsList types={['iOS', 'visionOS', 'web']} />
 
 - **all (default)** -
 - **landscape**
diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 2220623f8a..61631252ca 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -20,6 +20,9 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       controls,
       showNotificationControls = false,
       poster,
+      fullscreen,
+      fullscreenAutorotate,
+      fullscreenOrientation,
       onBuffer,
       onLoad,
       onProgress,
@@ -83,6 +86,74 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       throw new Error('This is unsupported on the web');
     }, []);
 
+    // Stock this in a ref to not invalidate memoization when those changes.
+    const fsPrefs = useRef({
+      fullscreenAutorotate,
+      fullscreenOrientation,
+    });
+    fsPrefs.current = {
+      fullscreenOrientation,
+      fullscreenAutorotate,
+    };
+    const setFullScreen = useCallback(
+      (
+        newVal: boolean,
+        orientation?: ReactVideoProps['fullscreenOrientation'],
+        autorotate?: boolean,
+      ) => {
+        orientation ??= fsPrefs.current.fullscreenOrientation;
+        autorotate ??= fsPrefs.current.fullscreenAutorotate;
+
+        const run = async () => {
+          try {
+            if (newVal) {
+              await nativeRef.current?.requestFullscreen({
+                navigationUI: 'hide',
+              });
+              if (orientation === 'all' || !orientation || autorotate) {
+                screen.orientation.unlock();
+              } else {
+                await screen.orientation.lock(orientation);
+              }
+            } else {
+              if (document.fullscreenElement) {
+                await document.exitFullscreen();
+              }
+              screen.orientation.unlock();
+            }
+          } catch (e) {
+            // Changing fullscreen status without a button click is not allowed so it throws.
+            // Some browsers also used to throw when locking screen orientation was not supported.
+            console.error('Could not toggle fullscreen/screen lock status', e);
+          }
+        };
+        run();
+      },
+      [],
+    );
+
+    useEffect(() => {
+      setFullScreen(
+        fullscreen || false,
+        fullscreenOrientation,
+        fullscreenAutorotate,
+      );
+    }, [
+      setFullScreen,
+      fullscreen,
+      fullscreenAutorotate,
+      fullscreenOrientation,
+    ]);
+
+    const presentFullscreenPlayer = useCallback(
+      () => setFullScreen(true),
+      [setFullScreen],
+    );
+    const dismissFullscreenPlayer = useCallback(
+      () => setFullScreen(false),
+      [setFullScreen],
+    );
+
     useImperativeHandle(
       ref,
       () => ({
@@ -91,11 +162,9 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         resume,
         setVolume,
         getCurrentPosition,
-        // making the video fullscreen does not work with some subtitles polyfils
-        // so I decided to not include it.
-        presentFullscreenPlayer: unsupported,
-        dismissFullscreenPlayer: unsupported,
-        setFullScreen: unsupported,
+        presentFullscreenPlayer,
+        dismissFullscreenPlayer,
+        setFullScreen,
         save: unsupported,
         restoreUserInterfaceForPictureInPictureStopCompleted: unsupported,
         nativeHtmlVideoRef: nativeRef,
@@ -108,6 +177,9 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         setVolume,
         getCurrentPosition,
         nativeRef,
+        presentFullscreenPlayer,
+        dismissFullscreenPlayer,
+        setFullScreen,
       ],
     );
 

From 644043973c29932afd0bd5dd60bd14e3fdca0725 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 16 Jul 2024 11:44:05 +0700
Subject: [PATCH 20/30] Add isSeeking on web

---
 src/Video.web.tsx                         | 22 +++++++++++++++++++---
 src/VideoDecoderProperties.web.ts         |  4 ++--
 src/specs/NativeVideoDecoderInfoModule.ts |  2 +-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 61631252ca..85f71a92dd 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -38,6 +38,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
   ) => {
     const nativeRef = useRef<HTMLVideoElement>(null);
 
+    const isSeeking = useRef(false);
     const seek = useCallback(
       async (time: number, _tolerance?: number) => {
         if (isNaN(time)) {
@@ -210,7 +211,10 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         // Set play state to the player's value (if autoplay is denied)
         // This is useful if our UI is in a play state but autoplay got denied so
         // the video is actaully in a paused state.
-        playbackStateRef.current?.({isPlaying: !nativeRef.current.paused});
+        playbackStateRef.current?.({
+          isPlaying: !nativeRef.current.paused,
+          isSeeking: isSeeking.current,
+        });
       }, 500);
     }, []);
 
@@ -291,8 +295,20 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
             seek(source.startPosition / 1000);
           }
         }}
-        onPlay={() => onPlaybackStateChanged?.({isPlaying: true})}
-        onPause={() => onPlaybackStateChanged?.({isPlaying: false})}
+        onPlay={() =>
+          onPlaybackStateChanged?.({
+            isPlaying: true,
+            isSeeking: isSeeking.current,
+          })
+        }
+        onPause={() =>
+          onPlaybackStateChanged?.({
+            isPlaying: false,
+            isSeeking: isSeeking.current,
+          })
+        }
+        onSeeking={() => (isSeeking.current = true)}
+        onSeeked={() => (isSeeking.current = false)}
         onVolumeChange={() => {
           if (!nativeRef.current) {
             return;
diff --git a/src/VideoDecoderProperties.web.ts b/src/VideoDecoderProperties.web.ts
index 3f98669494..ce49b49847 100644
--- a/src/VideoDecoderProperties.web.ts
+++ b/src/VideoDecoderProperties.web.ts
@@ -1,5 +1,5 @@
 /// <reference lib="dom" />
-import type {VideoDecoderPropertiesType} from './specs/VideoNativeComponent';
+import type {VideoDecoderInfoModuleType} from './specs/NativeVideoDecoderInfoModule';
 
 const canPlay = (codec: string): boolean => {
   // most chrome based browser (and safari I think) supports matroska but reports they do not.
@@ -31,4 +31,4 @@ export const VideoDecoderProperties = {
       ? 'software'
       : 'unsupported';
   },
-} satisfies VideoDecoderPropertiesType;
+} satisfies VideoDecoderInfoModuleType;
diff --git a/src/specs/NativeVideoDecoderInfoModule.ts b/src/specs/NativeVideoDecoderInfoModule.ts
index 25cf9cc2af..060fb0fd08 100644
--- a/src/specs/NativeVideoDecoderInfoModule.ts
+++ b/src/specs/NativeVideoDecoderInfoModule.ts
@@ -2,7 +2,7 @@ import {NativeModules} from 'react-native';
 import type {Int32} from 'react-native/Libraries/Types/CodegenTypes';
 
 // @TODO rename to "Spec" when applying new arch
-interface VideoDecoderInfoModuleType {
+export interface VideoDecoderInfoModuleType {
   getWidevineLevel: () => Promise<Int32>;
   isCodecSupported: (
     mimeType: string,

From f76af4ac54b3a04cbf95902d74c5c79696ec40e7 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 16 Jul 2024 12:27:11 +0700
Subject: [PATCH 21/30] Fix native import on web

---
 src/types/events.ts | 2 ++
 src/types/index.ts  | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/types/events.ts b/src/types/events.ts
index 6d3e0d9e41..f8f405e8ec 100644
--- a/src/types/events.ts
+++ b/src/types/events.ts
@@ -20,6 +20,8 @@ import type {
   OnVolumeChangeData,
 } from '../specs/VideoNativeComponent';
 
+export type * from '../specs/VideoNativeComponent';
+
 export type AudioTrack = OnAudioTracksData['audioTracks'][number];
 export type TextTrack = OnTextTracksData['textTracks'][number];
 export type VideoTrack = OnVideoTracksData['videoTracks'][number];
diff --git a/src/types/index.ts b/src/types/index.ts
index 24725b6ce3..ab62b6c14a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -8,4 +8,3 @@ export {default as TextTrackType} from './TextTrackType';
 export {default as ViewType} from './ViewType';
 export * from './video';
 export * from './video-ref';
-export * from '../specs/VideoNativeComponent';

From 562465d00ccfbfe859602848ed092b2a8205c146 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Tue, 16 Jul 2024 12:30:09 +0700
Subject: [PATCH 22/30] Add nativeHtmlVideoRef doc

---
 docs/pages/component/methods.mdx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/pages/component/methods.mdx b/docs/pages/component/methods.mdx
index ebb9d6234e..b3d89a0467 100644
--- a/docs/pages/component/methods.mdx
+++ b/docs/pages/component/methods.mdx
@@ -137,6 +137,13 @@ On iOS, this displays the video in a fullscreen view controller with controls.
 
 On Android, this puts the navigation controls in fullscreen mode. It is not a complete fullscreen implementation, so you will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video.
 
+### `nativeHtmlVideoRef`
+
+<PlatformsList types={['web']} />
+
+A ref to the underlying html video element. This can be used if you need to integrate a 3d party, web only video library (like hls.js, shaka, video.js...).
+
+
 ### Example Usage
 
 ```tsx

From 16913a83551345af03f1ab07e6b4adee0bd05e2b Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 6 Nov 2024 12:44:27 +0100
Subject: [PATCH 23/30] Call onSeek after seek events

---
 src/Video.web.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 85f71a92dd..34ba79f01f 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -308,7 +308,17 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           })
         }
         onSeeking={() => (isSeeking.current = true)}
-        onSeeked={() => (isSeeking.current = false)}
+        onSeeked={() => {
+          // only trigger this if it's from UI seek.
+          // if it was triggered via ref.seek(), onSeek has already been called
+          if (isSeeking.current) {
+            isSeeking.current = false;
+            onSeek?.({
+              seekTime: nativeRef.current!.currentTime,
+              currentTime: nativeRef.current!.currentTime,
+            });
+          }
+        }}
         onVolumeChange={() => {
           if (!nativeRef.current) {
             return;

From eb5cecfbd9cc84ba0b846dfc73fe57fc9601be1c Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 6 Nov 2024 19:23:06 +0100
Subject: [PATCH 24/30] Setup web demo

---
 examples/README.md         |  6 ++++--
 examples/expo/package.json |  4 +++-
 src/Video.web.tsx          | 24 ++++++++++++++++++++++--
 src/index.ts               |  3 ++-
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/examples/README.md b/examples/README.md
index 1d1485cd8a..0a98a4cba5 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -5,7 +5,7 @@ This directory contains examples for `react-native-video` - this is a guide that
 
 - **[`bare`](#bare)** - Main example ([react-native-test-app](https://github.com/microsoft/react-native-test-app) - bare react-native app) that you can run on: iOS, Android, Windows, visionOS
 
-- **[`expo`](#expo)** - Expo example that you can run on: iOS, Android, tvOS, web (support coming soon)
+- **[`expo`](#expo)** - Expo example that you can run on: iOS, Android, tvOS, web
 
 ### Updating Examples Content
 
@@ -135,7 +135,9 @@ cd examples/expo && yarn install
 > Setup for android is not complete yet. Please use bare app for android testing.
 
     - For Web:
-      Support for web is coming soon.
+      ```bash
+      yarn web
+      ```
 
 If Metro Bundler is not running (or it did not start), you can start it by running:
 ```bash
diff --git a/examples/expo/package.json b/examples/expo/package.json
index 165b7936af..19d6896dbe 100644
--- a/examples/expo/package.json
+++ b/examples/expo/package.json
@@ -15,13 +15,15 @@
     "update-src": "echo 'Updating src from ../bare/src' && rm -r ./src && cp -r ../bare/src ./src && echo 'Updated src from ../bare/src'"
   },
   "dependencies": {
+    "@expo/metro-runtime": "^3.2.3",
     "@react-native-picker/picker": "2.8.1",
     "expo": "~51.0.31",
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "npm:react-native-tvos@~0.74.5-0"
+    "react-native": "npm:react-native-tvos@~0.74.5-0",
+    "react-native-web": "^0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 34ba79f01f..664ab0eef6 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -6,7 +6,12 @@ import React, {
   useRef,
   type RefObject,
 } from 'react';
-import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
+import type {
+  VideoRef,
+  ReactVideoProps,
+  VideoMetadata,
+  ReactVideoSource,
+} from './types';
 
 const Video = forwardRef<VideoRef, ReactVideoProps>(
   (
@@ -55,6 +60,13 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       [onSeek],
     );
 
+    const setSource = useCallback((src: ReactVideoSource) => {
+      if (!nativeRef.current) {
+        return;
+      }
+      nativeRef.current.src = src?.uri as string;
+    }, []);
+
     const pause = useCallback(() => {
       if (!nativeRef.current) {
         return;
@@ -159,6 +171,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       ref,
       () => ({
         seek,
+        setSource,
         pause,
         resume,
         setVolume,
@@ -172,6 +185,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       }),
       [
         seek,
+        setSource,
         pause,
         resume,
         unsupported,
@@ -236,7 +250,13 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         controls={controls}
         loop={repeat}
         playsInline
-        poster={poster}
+        poster={
+          typeof poster === 'object'
+            ? typeof poster.source === 'object'
+              ? poster.source.uri
+              : undefined
+            : poster
+        }
         onCanPlay={() => onBuffer?.({isBuffering: false})}
         onWaiting={() => onBuffer?.({isBuffering: true})}
         onRateChange={() => {
diff --git a/src/index.ts b/src/index.ts
index 73a4756cfb..0a70f0f5ed 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 import Video from './Video';
 export {VideoDecoderProperties} from './VideoDecoderProperties';
-export type * from './types';
+export * from './types';
 export {Video};
+export default Video;

From 31dc24d32cc244a99a05242da8565a37c30293fe Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 6 Nov 2024 21:25:03 +0100
Subject: [PATCH 25/30] Review comments

---
 src/Video.web.tsx | 45 +++++++++++++++++++++------------------------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 664ab0eef6..6ea1ebe5a5 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -109,7 +109,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       fullscreenAutorotate,
     };
     const setFullScreen = useCallback(
-      (
+      async (
         newVal: boolean,
         orientation?: ReactVideoProps['fullscreenOrientation'],
         autorotate?: boolean,
@@ -117,30 +117,27 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         orientation ??= fsPrefs.current.fullscreenOrientation;
         autorotate ??= fsPrefs.current.fullscreenAutorotate;
 
-        const run = async () => {
-          try {
-            if (newVal) {
-              await nativeRef.current?.requestFullscreen({
-                navigationUI: 'hide',
-              });
-              if (orientation === 'all' || !orientation || autorotate) {
-                screen.orientation.unlock();
-              } else {
-                await screen.orientation.lock(orientation);
-              }
-            } else {
-              if (document.fullscreenElement) {
-                await document.exitFullscreen();
-              }
+        try {
+          if (newVal) {
+            await nativeRef.current?.requestFullscreen({
+              navigationUI: 'hide',
+            });
+            if (orientation === 'all' || !orientation || autorotate) {
               screen.orientation.unlock();
+            } else {
+              await screen.orientation.lock(orientation);
             }
-          } catch (e) {
-            // Changing fullscreen status without a button click is not allowed so it throws.
-            // Some browsers also used to throw when locking screen orientation was not supported.
-            console.error('Could not toggle fullscreen/screen lock status', e);
+          } else {
+            if (document.fullscreenElement) {
+              await document.exitFullscreen();
+            }
+            screen.orientation.unlock();
           }
-        };
-        run();
+        } catch (e) {
+          // Changing fullscreen status without a button click is not allowed so it throws.
+          // Some browsers also used to throw when locking screen orientation was not supported.
+          console.error('Could not toggle fullscreen/screen lock status', e);
+        }
       },
       [],
     );
@@ -206,7 +203,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       }
     }, [paused, pause, resume]);
     useEffect(() => {
-      if (volume === undefined) {
+      if (volume === undefined || isNaN(volume)) {
         return;
       }
       setVolume(volume);
@@ -224,7 +221,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
 
         // Set play state to the player's value (if autoplay is denied)
         // This is useful if our UI is in a play state but autoplay got denied so
-        // the video is actaully in a paused state.
+        // the video is actually in a paused state.
         playbackStateRef.current?.({
           isPlaying: !nativeRef.current.paused,
           isSeeking: isSeeking.current,

From c0d405069c4f108ba526c00f4068995839c4e43f Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 13 Nov 2024 12:03:47 +0100
Subject: [PATCH 26/30] Use weird deepEqual hack for source prop/setSource
 interaction

---
 src/Video.web.tsx | 43 +++++++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index 6ea1ebe5a5..ee06a516dd 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -5,13 +5,25 @@ import React, {
   useImperativeHandle,
   useRef,
   type RefObject,
+  useState,
 } from 'react';
-import type {
-  VideoRef,
-  ReactVideoProps,
-  VideoMetadata,
-  ReactVideoSource,
-} from './types';
+import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
+
+// stolen from https://stackoverflow.com/a/77278013/21726244
+const isDeepEqual = <T,>(a: T, b: T): boolean => {
+  if (a === b) {
+    return true;
+  }
+
+  const bothAreObjects =
+    a && b && typeof a === 'object' && typeof b === 'object';
+
+  return Boolean(
+    bothAreObjects &&
+      Object.keys(a).length === Object.keys(b).length &&
+      Object.entries(a).every(([k, v]) => isDeepEqual(v, b[k as keyof T])),
+  );
+};
 
 const Video = forwardRef<VideoRef, ReactVideoProps>(
   (
@@ -60,12 +72,15 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       [onSeek],
     );
 
-    const setSource = useCallback((src: ReactVideoSource) => {
-      if (!nativeRef.current) {
+    const [src, setSource] = useState(source);
+    const currentSourceProp = useRef(source);
+    useEffect(() => {
+      if (isDeepEqual(source, currentSourceProp.current)) {
         return;
       }
-      nativeRef.current.src = src?.uri as string;
-    }, []);
+      currentSourceProp.current = source;
+      setSource(source);
+    }, [source]);
 
     const pause = useCallback(() => {
       if (!nativeRef.current) {
@@ -236,12 +251,12 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       nativeRef.current.playbackRate = rate;
     }, [rate]);
 
-    useMediaSession(source?.metadata, nativeRef, showNotificationControls);
+    useMediaSession(src?.metadata, nativeRef, showNotificationControls);
 
     return (
       <video
         ref={nativeRef}
-        src={source?.uri as string | undefined}
+        src={src?.uri as string | undefined}
         muted={muted}
         autoPlay={!paused}
         controls={controls}
@@ -308,8 +323,8 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           });
         }}
         onLoadedMetadata={() => {
-          if (source?.startPosition) {
-            seek(source.startPosition / 1000);
+          if (src?.startPosition) {
+            seek(src.startPosition / 1000);
           }
         }}
         onPlay={() =>

From 06c9243b5da65a153afeb6a50dec695cf3b17b45 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 13 Nov 2024 16:39:33 +0100
Subject: [PATCH 27/30] Add constants in bare example

---
 examples/bare/src/constants/general.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/examples/bare/src/constants/general.ts b/examples/bare/src/constants/general.ts
index 02a3329d6b..3db84749dc 100644
--- a/examples/bare/src/constants/general.ts
+++ b/examples/bare/src/constants/general.ts
@@ -78,6 +78,14 @@ export const srcAllPlatformList = [
     description: 'another bunny (can be saved)',
     uri: 'https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4',
     headers: {referer: 'www.github.com', 'User-Agent': 'react.native.video'},
+    metadata: {
+      title: 'Custom Title',
+      subtitle: 'Custom Subtitle',
+      artist: 'Custom Artist',
+      description: 'Custom Description',
+      imageUri:
+        'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png',
+    },
   },
   {
     description: 'sintel with subtitles',

From d0ceef7786473dc3b5b30170248b5ef6cf1e5ea8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kamil=20Moska=C5=82a?=
 <91079590+moskalakamil@users.noreply.github.com>
Date: Wed, 13 Nov 2024 20:52:01 +0100
Subject: [PATCH 28/30] Update styles

---
 examples/bare/src/styles.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/bare/src/styles.tsx b/examples/bare/src/styles.tsx
index 61453b7706..ddee2d7dca 100644
--- a/examples/bare/src/styles.tsx
+++ b/examples/bare/src/styles.tsx
@@ -1,4 +1,4 @@
-import {StyleSheet} from 'react-native';
+import {Platform, StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
   container: {
@@ -63,6 +63,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     overflow: 'hidden',
     paddingBottom: 10,
+    paddingTop: Platform.OS === 'web' ? 25 : 0,
   },
   rateControl: {
     flex: 1,
@@ -146,7 +147,7 @@ const styles = StyleSheet.create({
   },
   picker: {
     flex: 1,
-    color: 'white',
+    color: Platform.OS === 'web' ? 'black' : 'white',
     flexDirection: 'row',
     justifyContent: 'center',
     width: 100,

From 92a1d5e8b6968946cbfc982bfcf4bc062ce5722c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kamil=20Moska=C5=82a?=
 <91079590+moskalakamil@users.noreply.github.com>
Date: Wed, 13 Nov 2024 20:53:14 +0100
Subject: [PATCH 29/30] Update expo example styles

---
 examples/expo/src/styles.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/expo/src/styles.tsx b/examples/expo/src/styles.tsx
index 61453b7706..ddee2d7dca 100644
--- a/examples/expo/src/styles.tsx
+++ b/examples/expo/src/styles.tsx
@@ -1,4 +1,4 @@
-import {StyleSheet} from 'react-native';
+import {Platform, StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
   container: {
@@ -63,6 +63,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     overflow: 'hidden',
     paddingBottom: 10,
+    paddingTop: Platform.OS === 'web' ? 25 : 0,
   },
   rateControl: {
     flex: 1,
@@ -146,7 +147,7 @@ const styles = StyleSheet.create({
   },
   picker: {
     flex: 1,
-    color: 'white',
+    color: Platform.OS === 'web' ? 'black' : 'white',
     flexDirection: 'row',
     justifyContent: 'center',
     width: 100,

From d74d7dfe745df92328e2c49e077c90d324fe2cdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kamil=20Moska=C5=82a?=
 <91079590+moskalakamil@users.noreply.github.com>
Date: Wed, 13 Nov 2024 21:15:59 +0100
Subject: [PATCH 30/30] add missing setSource type

---
 src/types/video-ref.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/types/video-ref.ts b/src/types/video-ref.ts
index 613ec10b67..04b1fc0a56 100644
--- a/src/types/video-ref.ts
+++ b/src/types/video-ref.ts
@@ -1,4 +1,5 @@
 import type {RefObject} from 'react';
+import {ReactVideoSource} from './video';
 
 export type VideoSaveData = {
   uri: string;
@@ -17,5 +18,6 @@ export interface VideoRef {
   setVolume: (volume: number) => void;
   getCurrentPosition: () => Promise<number>;
   setFullScreen: (fullScreen: boolean) => void;
+  setSource: (source?: ReactVideoSource) => void;
   nativeHtmlVideoRef?: RefObject<HTMLVideoElement>; // web only
 }