feat: move require (local files) to source.uri (#3535)

* feat!: move require source to `uri`

* pass other source properties

* chore: update basic example

* chore: restore backward compatibility

* docs: update source via require

* fix types

* make docs build workflow pretty

* improve docs

.github/workflows/test-build-docs.yml

@@ -1,5 +1,5 @@
 
-name: test build docs
+name: Test Docs build
 on:
   workflow_dispatch:
   pull_request:
@@ -8,7 +8,7 @@ on:
       - 'docs/**'
 
 jobs:
-  deploy-docs:
+  build-docs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

docs/pages/component/props.mdx

@@ -622,12 +622,21 @@ The docs for this prop are incomplete and will be updated as each option is inve
 
 Example:
 
+Pass directly the asset to play (deprecated)
+
 ```javascript
 const sintel = require('./sintel.mp4');
-
 source={ sintel };
 ```
 
+Or by using an uri (starting from 6.0.0-beta.6)
+
+```javascript
+const sintel = require('./sintel.mp4');
+source={{ uri: sintel }}
+```
+
+
 #### URI string
 
 A number of URI schemes are supported by passing an object with a `uri` attribute.

examples/basic/src/VideoPlayer.tsx

@@ -97,7 +97,10 @@ class VideoPlayer extends Component {
   seekerWidth = 0;
 
   srcAllPlatformList = [
-    require('./broadchurch.mp4'),
+    {
+      description: 'local file',
+      uri: require('./broadchurch.mp4'),
+    },
     {
       description: '(hls|live) red bull tv',
       uri: 'https://rbmn-live.akamaized.net/hls/live/590964/BoRB-AT/master_928.m3u8',

examples/basic/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "@react-native/typescript-config/tsconfig.json",
   "compilerOptions": {
     "paths": {
-      "react-native-video": ["../../src/index"]
+      "react-native-video": ["../../src/index"],
+      "react": ["./node_modules/@types/react"]
     }
   },
   "include": ["src", "**/*.js"],

src/types/video.ts

@@ -29,7 +29,9 @@ export type ReactVideoSourceProperties = {
 };
 
 export type ReactVideoSource = Readonly<
-  ReactVideoSourceProperties | NodeRequire
+  Omit<ReactVideoSourceProperties, 'uri'> & {
+    uri?: string | NodeRequire;
+  }
 >;
 
 export type DebugConfig = Readonly<{

src/utils.ts

@@ -1,10 +1,7 @@
 import type {Component, RefObject, ComponentClass} from 'react';
-import {Image, findNodeHandle} from 'react-native';
-import type {ImageSourcePropType} from 'react-native';
+import {Image, findNodeHandle, type ImageSourcePropType} from 'react-native';
 import type {ReactVideoSource, ReactVideoSourceProperties} from './types/video';
 
-type Source = ImageSourcePropType | ReactVideoSource;
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function generateHeaderForNative(obj?: Record<string, any>) {
   if (!obj) {
@@ -13,14 +10,25 @@ export function generateHeaderForNative(obj?: Record<string, any>) {
   return Object.entries(obj).map(([key, value]) => ({key, value}));
 }
 
+type Source = ImageSourcePropType | ReactVideoSource;
+
 export function resolveAssetSourceForVideo(
   source: Source,
 ): ReactVideoSourceProperties {
+  // This is deprecated, but we need to support it for backward compatibility
   if (typeof source === 'number') {
     return {
       uri: Image.resolveAssetSource(source).uri,
     };
   }
+
+  if ('uri' in source && typeof source.uri === 'number') {
+    return {
+      ...source,
+      uri: Image.resolveAssetSource(source.uri).uri,
+    };
+  }
+
   return source as ReactVideoSourceProperties;
 }