From 5fa77c45628c0bbea8ec3015d8b52826ae62a5f6 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Wed, 13 Nov 2024 21:19:57 +0100 Subject: [PATCH] Add react-native-web support (#3958) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Kamil Moskała <91079590+moskalakamil@users.noreply.github.com> --- docs/bun.lockb | Bin 155873 -> 155873 bytes docs/pages/component/events.mdx | 11 +- docs/pages/component/methods.mdx | 23 +- docs/pages/component/props.mdx | 12 +- docs/pages/index.md | 1 + docs/pages/installation.md | 9 + examples/README.md | 6 +- examples/bare/src/constants/general.ts | 8 + examples/bare/src/styles.tsx | 5 +- examples/expo/package.json | 4 +- examples/expo/src/constants/general.ts | 8 + examples/expo/src/styles.tsx | 5 +- package.json | 2 +- shell.nix | 13 + src/Video.tsx | 3 +- src/Video.web.tsx | 461 ++++++++++++++++++++++ src/VideoDecoderProperties.web.ts | 34 ++ src/index.ts | 1 - src/specs/NativeVideoDecoderInfoModule.ts | 2 +- src/specs/NativeVideoManager.ts | 5 +- src/specs/VideoNativeComponent.ts | 4 +- src/types/events.ts | 2 + src/types/index.ts | 2 +- src/types/video-ref.ts | 23 ++ 24 files changed, 608 insertions(+), 36 deletions(-) create mode 100644 shell.nix create mode 100644 src/Video.web.tsx create mode 100644 src/VideoDecoderProperties.web.ts create mode 100644 src/types/video-ref.ts 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*xz3tBRxyl+F zbazx@Y|*GH6nhMgsbo0d{2`SbM+_fU zDR9EYBPtuT9@V|X679!SBCK%sxXKD^bSjlKHt0T~5@Uz=*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&)#KNw7ozQTN`w{8{!>|DEe|_ea*d7Lb+?$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?`|JCdSL6MgXMvXPiS8zBdlu??#mrd-QKo$#B5nuu6_2hBvDeIN{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`q14 + Callback function that is called when the player buffers. @@ -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 | @@ -292,7 +295,7 @@ Example: ### `onPlaybackStateChanged` - + Callback function that is called when the playback state changes. @@ -463,7 +466,7 @@ Payload: none ### `onSeek` - + Callback function that is called when a seek completes. @@ -604,7 +607,7 @@ Example: ### `onVolumeChange` - + 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 b3b0ebc0..b3d89a04 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` - + `dismissFullscreenPlayer(): Promise` @@ -17,7 +17,7 @@ Take the player out of fullscreen mode. ### `pause` - + `pause(): Promise` @@ -25,7 +25,7 @@ Pause the video. ### `presentFullscreenPlayer` - + `presentFullscreenPlayer(): Promise` @@ -40,7 +40,7 @@ On Android, this puts the navigation controls in fullscreen mode. It is not a co ### `resume` - + `resume(): Promise` @@ -100,7 +100,7 @@ tolerance is the max distance in milliseconds from the seconds position that's a ### `setVolume` - + `setVolume(value): Promise` @@ -108,7 +108,7 @@ This function will change the volume exactly like [volume](./props#volume) prope ### `getCurrentPosition` - + `getCurrentPosition(): Promise` @@ -127,7 +127,7 @@ Changing source with this function will overide source provided as props. ### `setFullScreen` - + `setFullScreen(fullscreen): Promise` @@ -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` + + + +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 @@ -188,7 +195,7 @@ Possible values are: ### `isCodecSupported` - + 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 c5465df7..e205e6ba 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` - + Determines whether to show player controls. @@ -300,7 +300,7 @@ Whether this video view should be focusable with a non-touch input device, eg. r ### `fullscreen` - + 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` - + - **all (default)** - - **landscape** @@ -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 + + Example: Pass directly the asset to play (deprecated) @@ -820,7 +822,7 @@ Example: #### Start playback at a specific point in time - + 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) @@ -1048,7 +1050,7 @@ textTracks={[ ### `showNotificationControls` - + 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 dd4d5281..33f20810 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 26e1207c..a1c078ba 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 + +
+web + +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. + +
diff --git a/examples/README.md b/examples/README.md index f5eb7dbf..3463397a 100644 --- a/examples/README.md +++ b/examples/README.md @@ -6,7 +6,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 @@ -151,7 +151,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: diff --git a/examples/bare/src/constants/general.ts b/examples/bare/src/constants/general.ts index 02a3329d..3db84749 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', diff --git a/examples/bare/src/styles.tsx b/examples/bare/src/styles.tsx index 61453b77..ddee2d7d 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, diff --git a/examples/expo/package.json b/examples/expo/package.json index 165b7936..19d6896d 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/examples/expo/src/constants/general.ts b/examples/expo/src/constants/general.ts index 02a3329d..3db84749 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', diff --git a/examples/expo/src/styles.tsx b/examples/expo/src/styles.tsx index 61453b77..ddee2d7d 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, diff --git a/package.json b/package.json index 0d81af18..260555bf 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "6.7.0", "description": "A