From 41ac7814121fc70a123fa4585dc9b1bd96e9629f Mon Sep 17 00:00:00 2001
From: Krzysztof Moch <krzysmoch.programs@gmail.com>
Date: Wed, 13 Mar 2024 08:23:11 +0100
Subject: [PATCH] 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 |  4 ++--
 docs/pages/component/props.mdx        | 13 +++++++++++--
 examples/basic/src/VideoPlayer.tsx    |  5 ++++-
 examples/basic/tsconfig.json          |  3 ++-
 src/types/video.ts                    |  4 +++-
 src/utils.ts                          | 16 ++++++++++++----
 6 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/test-build-docs.yml b/.github/workflows/test-build-docs.yml
index 540421be..825df994 100644
--- a/.github/workflows/test-build-docs.yml
+++ b/.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
diff --git a/docs/pages/component/props.mdx b/docs/pages/component/props.mdx
index 5a085426..cb87d463 100644
--- a/docs/pages/component/props.mdx
+++ b/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};
+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.
diff --git a/examples/basic/src/VideoPlayer.tsx b/examples/basic/src/VideoPlayer.tsx
index fd87bf57..3fc1f150 100644
--- a/examples/basic/src/VideoPlayer.tsx
+++ b/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',
diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json
index a2371834..36999c7e 100644
--- a/examples/basic/tsconfig.json
+++ b/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"],
diff --git a/src/types/video.ts b/src/types/video.ts
index 03613a4f..6fa2841e 100644
--- a/src/types/video.ts
+++ b/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<{
diff --git a/src/utils.ts b/src/utils.ts
index fe64820e..0200ffc0 100644
--- a/src/utils.ts
+++ b/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;
 }