chore: update docs link (#4242)
This commit is contained in:
parent
f78a407434
commit
0288d61e46
@ -2,7 +2,7 @@
|
|||||||
🎬 `<Video>` component for React Native
|
🎬 `<Video>` component for React Native
|
||||||
|
|
||||||
## Documentation
|
## Documentation
|
||||||
documentation is available at [thewidlarzgroup.github.io/react-native-video/](https://thewidlarzgroup.github.io/react-native-video/)
|
documentation is available at [docs.thewidlarzgroup.com/react-native-video/](https://docs.thewidlarzgroup.com/react-native-video/)
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
You can find several examples demonstrating the usage of react-native-video [here](https://github.com/TheWidlarzGroup/react-native-video/tree/master/examples). <br />
|
You can find several examples demonstrating the usage of react-native-video [here](https://github.com/TheWidlarzGroup/react-native-video/tree/master/examples). <br />
|
||||||
|
@ -34,7 +34,7 @@ You can remove following lines from your podfile as they are not necessary anymo
|
|||||||
- `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`
|
- `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`
|
||||||
```
|
```
|
||||||
|
|
||||||
If you were previously using VideoCaching, you should $RNVideoUseVideoCaching flag in your podspec, see: [installation section](https://thewidlarzgroup.github.io/react-native-video/installation#video-caching)
|
If you were previously using VideoCaching, you should $RNVideoUseVideoCaching flag in your podspec, see: [installation section](https://docs.thewidlarzgroup.com/react-native-video/installation#video-caching)
|
||||||
|
|
||||||
#### Android
|
#### Android
|
||||||
|
|
||||||
|
BIN
docs/public/favicon.png
Normal file
BIN
docs/public/favicon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.4 KiB |
@ -13,7 +13,7 @@ export default {
|
|||||||
/>
|
/>
|
||||||
<meta
|
<meta
|
||||||
name="og:image"
|
name="og:image"
|
||||||
content="https://thewidlarzgroup.github.io/react-native-video/thumbnail.jpg"
|
content="https://docs.thewidlarzgroup.com/react-native-video/thumbnail.jpg"
|
||||||
/>
|
/>
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:title" content="React Native Video" />
|
<meta name="twitter:title" content="React Native Video" />
|
||||||
@ -23,7 +23,7 @@ export default {
|
|||||||
/>
|
/>
|
||||||
<meta
|
<meta
|
||||||
name="twitter:image"
|
name="twitter:image"
|
||||||
content="https://thewidlarzgroup.github.io/react-native-video/thumbnail.jpg"
|
content="https://docs.thewidlarzgroup.com/react-native-video/thumbnail.jpg"
|
||||||
/>
|
/>
|
||||||
<meta name="twitter:image:alt" content="React Native Video" />
|
<meta name="twitter:image:alt" content="React Native Video" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
@ -32,6 +32,21 @@ export default {
|
|||||||
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
href="https://docs.thewidlarzgroup.com/react-native-video/favicon.png"
|
||||||
|
/>
|
||||||
|
<script
|
||||||
|
async
|
||||||
|
src="https://www.googletagmanager.com/gtag/js?id=G-PM2TQQQMDN"
|
||||||
|
/>
|
||||||
|
<script>
|
||||||
|
{`window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
gtag('config', 'G-PM2TQQQMDN');`}
|
||||||
|
</script>
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
logo: (
|
logo: (
|
||||||
@ -39,7 +54,6 @@ export default {
|
|||||||
🎬 <strong>Video component</strong> for React Native
|
🎬 <strong>Video component</strong> for React Native
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
faviconGlyph: '🎬',
|
|
||||||
project: {
|
project: {
|
||||||
link: 'https://github.com/TheWidlarzGroup/react-native-video',
|
link: 'https://github.com/TheWidlarzGroup/react-native-video',
|
||||||
},
|
},
|
||||||
@ -57,7 +71,7 @@ export default {
|
|||||||
<>
|
<>
|
||||||
<style>{`
|
<style>{`
|
||||||
:is(html[class~=dark]) .extra-container {
|
:is(html[class~=dark]) .extra-container {
|
||||||
background-color: #87ccef;
|
background-color: #87ccef;
|
||||||
}
|
}
|
||||||
:is(html[class~=dark]) .extra-text {
|
:is(html[class~=dark]) .extra-text {
|
||||||
color: #171717;
|
color: #171717;
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
# Examples
|
# Examples
|
||||||
|
|
||||||
This directory contains examples for `react-native-video` - this is a guide that will show you what can you find here and how to use them.
|
This directory contains examples for `react-native-video` - this is a guide that will show you what can you find here and how to use them.
|
||||||
|
|
||||||
## Examples Structure
|
## Examples Structure
|
||||||
@ -9,8 +10,8 @@ This directory contains examples for `react-native-video` - this is a guide that
|
|||||||
|
|
||||||
### Updating Examples Content
|
### Updating Examples Content
|
||||||
|
|
||||||
Both of applications have mostly the same code (Windows and tvOS have platform-specific code). Other platform are using codebase from `bare` example.
|
Both of applications have mostly the same code (Windows and tvOS have platform-specific code). Other platform are using codebase from `bare` example.
|
||||||
If you want to update examples content, you should do it in `bare` example. `expo` example is copping (and overwriting!) `src` folder from `bare` on dependency install.
|
If you want to update examples content, you should do it in `bare` example. `expo` example is copping (and overwriting!) `src` folder from `bare` on dependency install.
|
||||||
If you want to sync `expo` example, you can use `yarn update-src` command in `expo` example directory.
|
If you want to sync `expo` example, you can use `yarn update-src` command in `expo` example directory.
|
||||||
|
|
||||||
## How To Run Examples
|
## How To Run Examples
|
||||||
@ -22,54 +23,63 @@ If you want to sync `expo` example, you can use `yarn update-src` command in `ex
|
|||||||
You can configure the example by changing the settings of expo-plugin `app.json` file in the `bare` directory.
|
You can configure the example by changing the settings of expo-plugin `app.json` file in the `bare` directory.
|
||||||
|
|
||||||
> [!TIP]
|
> [!TIP]
|
||||||
> You can find more information about the expo-plugin configuration [here](https://thewidlarzgroup.github.io/react-native-video/other/expo).
|
> You can find more information about the expo-plugin configuration [here](https://docs.thewidlarzgroup.com/react-native-video/other/expo).
|
||||||
|
|
||||||
> [!CAUTION]
|
> [!CAUTION]
|
||||||
> You will need to regenerate the native project after changing the `app.json` file. eg. on Apple platforms you will need to install pods twice. (one for applying expo-plugin changes and second for applying react-native-video changes)
|
> You will need to regenerate the native project after changing the `app.json` file. eg. on Apple platforms you will need to install pods twice. (one for applying expo-plugin changes and second for applying react-native-video changes)
|
||||||
|
|
||||||
### Building
|
### Building
|
||||||
|
|
||||||
1. Install dependency in repository root directory
|
1. Install dependency in repository root directory
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn install
|
yarn install
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Install dependency in `bare` example directory
|
2. Install dependency in `bare` example directory
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cd examples/bare && yarn install
|
cd examples/bare && yarn install
|
||||||
```
|
```
|
||||||
|
|
||||||
3. Now you will need to generate native project for platform you want to run the example on.
|
3. Now you will need to generate native project for platform you want to run the example on.
|
||||||
- For iOS / visionOS:
|
|
||||||
Install pods in `ios` / `visionOS` directory
|
|
||||||
```bash
|
|
||||||
# for ios
|
|
||||||
pod install --project-directory=ios
|
|
||||||
# for visionOS
|
|
||||||
pod install --project-directory=visionos
|
|
||||||
```
|
|
||||||
⚠️ You will need to hit it twice, because expo-plugin changes are not applied in the first run.
|
|
||||||
|
|
||||||
Now you are ready to run the App. (Flag `--interactive` is optional, but it is recommended as it allows you to choose the device you want to run the app on. Select `BareExample` scheme)
|
- For iOS / visionOS:
|
||||||
```bash
|
Install pods in `ios` / `visionOS` directory
|
||||||
# for ios
|
|
||||||
yarn ios --interactive
|
|
||||||
# for visionOS
|
|
||||||
yarn visionos --interactive
|
|
||||||
```
|
|
||||||
|
|
||||||
- For Android:
|
|
||||||
There is no need to run any additional command. you can just run the App. (Flag `--interactive` is optional, but it is recommended as it allows you to choose the device you want to run the app on)
|
|
||||||
```bash
|
|
||||||
yarn android --interactive
|
|
||||||
```
|
|
||||||
|
|
||||||
- For Windows:
|
```bash
|
||||||
There is no need to run any additional command. you can just run the App.
|
# for ios
|
||||||
```bash
|
pod install --project-directory=ios
|
||||||
yarn windows
|
# for visionOS
|
||||||
```
|
pod install --project-directory=visionos
|
||||||
|
```
|
||||||
|
|
||||||
|
⚠️ You will need to hit it twice, because expo-plugin changes are not applied in the first run.
|
||||||
|
|
||||||
|
Now you are ready to run the App. (Flag `--interactive` is optional, but it is recommended as it allows you to choose the device you want to run the app on. Select `BareExample` scheme)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# for ios
|
||||||
|
yarn ios --interactive
|
||||||
|
# for visionOS
|
||||||
|
yarn visionos --interactive
|
||||||
|
```
|
||||||
|
|
||||||
|
- For Android:
|
||||||
|
There is no need to run any additional command. you can just run the App. (Flag `--interactive` is optional, but it is recommended as it allows you to choose the device you want to run the app on)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn android --interactive
|
||||||
|
```
|
||||||
|
|
||||||
|
- For Windows:
|
||||||
|
There is no need to run any additional command. you can just run the App.
|
||||||
|
```bash
|
||||||
|
yarn windows
|
||||||
|
```
|
||||||
|
|
||||||
If Metro Bundler is not running (or it did not start), you can start it by running:
|
If Metro Bundler is not running (or it did not start), you can start it by running:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn start
|
yarn start
|
||||||
```
|
```
|
||||||
@ -82,54 +92,60 @@ yarn start
|
|||||||
### Configuration
|
### Configuration
|
||||||
|
|
||||||
#### Expo Plugin
|
#### Expo Plugin
|
||||||
|
|
||||||
You can configure the example by changing the settings of expo-plugin `app.json` file in the `expo` directory.
|
You can configure the example by changing the settings of expo-plugin `app.json` file in the `expo` directory.
|
||||||
|
|
||||||
> [!TIP]
|
> [!TIP]
|
||||||
> You can find more information about the expo-plugin configuration [here](https://thewidlarzgroup.github.io/react-native-video/other/expo).
|
> You can find more information about the expo-plugin configuration [here](https://docs.thewidlarzgroup.com/react-native-video/other/expo).
|
||||||
|
|
||||||
> [!CAUTION]
|
> [!CAUTION]
|
||||||
> You will need to regenerate the native project after changing the `app.json` file - you can do it by running `yarn prebuild` command in `expo` example directory.
|
> You will need to regenerate the native project after changing the `app.json` file - you can do it by running `yarn prebuild` command in `expo` example directory.
|
||||||
|
|
||||||
#### Switching between Mobile and TV
|
#### Switching between Mobile and TV
|
||||||
|
|
||||||
If you want to switch between mobile and TV version of the app you will need to regenerate the native project. You can do it by running `yarn prebuild:tv` command in `expo` example directory.
|
If you want to switch between mobile and TV version of the app you will need to regenerate the native project. You can do it by running `yarn prebuild:tv` command in `expo` example directory.
|
||||||
|
|
||||||
|
|
||||||
### Building
|
### Building
|
||||||
|
|
||||||
1. Install dependency in repository root directory
|
1. Install dependency in repository root directory
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn install
|
yarn install
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Install dependency in `expo` example directory
|
2. Install dependency in `expo` example directory
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cd examples/expo && yarn install
|
cd examples/expo && yarn install
|
||||||
```
|
```
|
||||||
|
|
||||||
3. Now you will need to generate native project for platform you want to run the example on.
|
3. Now you will need to generate native project for platform you want to run the example on.
|
||||||
If you want to use example on tv you should read [Switching between Mobile and TV](#switching-between-mobile-and-tv) section.
|
If you want to use example on tv you should read [Switching between Mobile and TV](#switching-between-mobile-and-tv) section.
|
||||||
|
|
||||||
- For iOS / tvOS:
|
- For iOS / tvOS:
|
||||||
Install pods in `ios` directory
|
Install pods in `ios` directory
|
||||||
```bash
|
|
||||||
pod install --project-directory=ios
|
|
||||||
```
|
|
||||||
|
|
||||||
Now you are ready to run the App. (Flag `--device` is optional, but it is recommended as it allows you to choose the device you want to run the app on)
|
```bash
|
||||||
```bash
|
pod install --project-directory=ios
|
||||||
# for ios
|
```
|
||||||
yarn ios --device
|
|
||||||
# for tvOS
|
Now you are ready to run the App. (Flag `--device` is optional, but it is recommended as it allows you to choose the device you want to run the app on)
|
||||||
yarn ios:tv --device
|
|
||||||
```
|
```bash
|
||||||
|
# for ios
|
||||||
- For Android / Android TV:
|
yarn ios --device
|
||||||
There is no need to run any additional command. you can just run the App. (Flag `--device` is optional, but it is recommended as it allows you to choose the device you want to run the app on)
|
# for tvOS
|
||||||
```bash
|
yarn ios:tv --device
|
||||||
# for android
|
```
|
||||||
yarn android --device
|
|
||||||
# for android tv
|
- For Android / Android TV:
|
||||||
yarn android:tv --device
|
There is no need to run any additional command. you can just run the App. (Flag `--device` is optional, but it is recommended as it allows you to choose the device you want to run the app on)
|
||||||
```
|
```bash
|
||||||
|
# for android
|
||||||
|
yarn android --device
|
||||||
|
# for android tv
|
||||||
|
yarn android:tv --device
|
||||||
|
```
|
||||||
|
|
||||||
> [!WARNING]
|
> [!WARNING]
|
||||||
> Setup for android is not complete yet. Please use bare app for android testing.
|
> Setup for android is not complete yet. Please use bare app for android testing.
|
||||||
@ -138,6 +154,7 @@ cd examples/expo && yarn install
|
|||||||
Support for web is coming soon.
|
Support for web is coming soon.
|
||||||
|
|
||||||
If Metro Bundler is not running (or it did not start), you can start it by running:
|
If Metro Bundler is not running (or it did not start), you can start it by running:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn start
|
yarn start
|
||||||
```
|
```
|
||||||
@ -145,8 +162,10 @@ yarn start
|
|||||||
## For Maintainers
|
## For Maintainers
|
||||||
|
|
||||||
### Opening React Native Video in Android Studio / Xcode
|
### Opening React Native Video in Android Studio / Xcode
|
||||||
|
|
||||||
To open `react-native-video` in Android Studio / Xcode you need to open `examples/bare/android` or `examples/bare/ios` directory.
|
To open `react-native-video` in Android Studio / Xcode you need to open `examples/bare/android` or `examples/bare/ios` directory.
|
||||||
First, you need to follow the [How To Run Examples](#how-to-run-examples) guide to generate the native project. Then you can open the project in Android Studio / Xcode by running below command in `examples/bare` directory.
|
First, you need to follow the [How To Run Examples](#how-to-run-examples) guide to generate the native project. Then you can open the project in Android Studio / Xcode by running below command in `examples/bare` directory.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# for android
|
# for android
|
||||||
studio ./android
|
studio ./android
|
||||||
@ -157,10 +176,12 @@ xed ./ios
|
|||||||
### Updating Examples
|
### Updating Examples
|
||||||
|
|
||||||
#### Bare
|
#### Bare
|
||||||
Because `bare` example is using react-native-test-app it is very easy to update it.
|
|
||||||
|
Because `bare` example is using react-native-test-app it is very easy to update it.
|
||||||
|
|
||||||
1. Change version of `react-native` in `package.json` file in `bare` directory.
|
1. Change version of `react-native` in `package.json` file in `bare` directory.
|
||||||
2. Hit below command and verify if everything is working correctly - RN_VERSION should be the version you want to update to.
|
2. Hit below command and verify if everything is working correctly - RN_VERSION should be the version you want to update to.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx @rnx-kit/align-deps@latest --requirements react-native@RN_VERSION --write
|
npx @rnx-kit/align-deps@latest --requirements react-native@RN_VERSION --write
|
||||||
```
|
```
|
||||||
@ -168,5 +189,6 @@ npx @rnx-kit/align-deps@latest --requirements react-native@RN_VERSION --write
|
|||||||
That's it! Now you can commit changes and create a PR.
|
That's it! Now you can commit changes and create a PR.
|
||||||
|
|
||||||
#### Expo
|
#### Expo
|
||||||
|
|
||||||
To update `expo` example you should follow this [guide](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough).
|
To update `expo` example you should follow this [guide](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough).
|
||||||
After updating `expo` example you will need to use prebuild (yarn expo prebuild) - if it fails you will need to add `--clean` flag to the command - this will remove manual link of `react-native-video` package so you will need to link it again.
|
After updating `expo` example you will need to use prebuild (yarn expo prebuild) - if it fails you will need to add `--clean` flag to the command - this will remove manual link of `react-native-video` package so you will need to link it again.
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
"react-native": "src/index",
|
"react-native": "src/index",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"author": "Community Contributors",
|
"author": "Community Contributors",
|
||||||
"homepage": "https://thewidlarzgroup.github.io/react-native-video/",
|
"homepage": "https://docs.thewidlarzgroup.com/react-native-video/",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git@github.com:TheWidlarzGroup/react-native-video.git"
|
"url": "git@github.com:TheWidlarzGroup/react-native-video.git"
|
||||||
|
@ -13,13 +13,13 @@ export type ConfigProps = {
|
|||||||
/**
|
/**
|
||||||
* Whether to include ADS extension in the app (IMA SDK)
|
* Whether to include ADS extension in the app (IMA SDK)
|
||||||
* @default false
|
* @default false
|
||||||
* @see https://thewidlarzgroup.github.io/react-native-video/component/ads
|
* @see https://docs.thewidlarzgroup.com/react-native-video/component/ads
|
||||||
*/
|
*/
|
||||||
enableADSExtension?: boolean;
|
enableADSExtension?: boolean;
|
||||||
/**
|
/**
|
||||||
* Whether to enable cache extension for ios in the app.
|
* Whether to enable cache extension for ios in the app.
|
||||||
* @default false
|
* @default false
|
||||||
* @see https://thewidlarzgroup.github.io/react-native-video/other/caching
|
* @see https://docs.thewidlarzgroup.com/react-native-video/other/caching
|
||||||
*/
|
*/
|
||||||
enableCacheExtension?: boolean;
|
enableCacheExtension?: boolean;
|
||||||
/**
|
/**
|
||||||
|
Loading…
Reference in New Issue
Block a user