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 & { + 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) { if (!obj) { @@ -13,14 +10,25 @@ export function generateHeaderForNative(obj?: Record) { 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; }