feat(web): allow style prop overrides (#4528)

Co-authored-by: Jonathan Jacobs <jonathan@yoco.co.za>

package.json

@@ -19,6 +19,7 @@
         "@release-it/conventional-changelog": "^7.0.2",
         "@types/jest": "^28.1.2",
         "@types/react": "~19.0.0",
+        "@types/react-native-web": "^0.19.1",
         "@typescript-eslint/eslint-plugin": "^6.7.4",
         "eslint": "^8.19.0",
         "eslint-plugin-jest": "^27.4.2",
@@ -27,6 +28,7 @@
         "prettier": "^2.4.1",
         "react": "18.2.0",
         "react-native": "0.78.2",
+        "react-native-web": "0.20.0",
         "react-native-windows": "^0.61.0-0",
         "release-it": "^16.2.1",
         "typescript": "5.1.6"

src/Video.web.tsx

@@ -6,9 +6,27 @@ import React, {
   useRef,
   useState,
   type RefObject,
+  type CSSProperties,
 } from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
+import {unstable_createElement} from 'react-native-web';
 import type {ReactVideoProps, VideoMetadata, VideoRef} from './types';
 
+// Define a style prop that is accepted and transformed by React Native Web
+// for the native `video` element.
+interface WebVideoElementProps
+  extends Omit<React.ComponentProps<'video'>, 'style'> {
+  style?: StyleProp<ViewStyle | CSSProperties>;
+}
+
+// Wrap the native `video` element to accept both React Native styles and CSS
+// styles.
+//
+// See <https://necolas.github.io/react-native-web/docs/unstable-apis/#use-with-existing-react-dom-components>
+function WebVideo(props: WebVideoElementProps) {
+  return unstable_createElement('video', props);
+}
+
 // stolen from https://stackoverflow.com/a/77278013/21726244
 const isDeepEqual = <T,>(a: T, b: T): boolean => {
   if (a === b) {
@@ -28,6 +46,7 @@ const isDeepEqual = <T,>(a: T, b: T): boolean => {
 const Video = forwardRef<VideoRef, ReactVideoProps>(
   (
     {
+      style,
       source,
       paused,
       muted,
@@ -306,7 +325,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
     useMediaSession(src?.metadata, nativeRef, showNotificationControls);
 
     return (
-      <video
+      <WebVideo
         ref={nativeRef}
         src={src?.uri as string | undefined}
         muted={muted}
@@ -410,7 +429,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           onVolumeChange?.({volume: nativeRef.current.volume});
         }}
         onEnded={onEnd}
-        style={videoStyle}
+        style={[videoStyle, style]}
       />
     );
   },