From 38a36b157c3e73ae12d1c3bc37888e4319c4fa3b Mon Sep 17 00:00:00 2001 From: David Cornejo <106721994+cornejobarraza@users.noreply.github.com> Date: Wed, 15 Jan 2025 21:41:39 -0600 Subject: [PATCH] Update README.md Add formatting and useful information --- README.md | 145 +++++++++++++++++++++++++++++------------------------- 1 file changed, 78 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index 3b401fb1..988dce2d 100755 --- a/README.md +++ b/README.md @@ -1,25 +1,25 @@ # react-native-vlc-media-player -## New feature requests and bug fixes +### New feature requests and bug fixes At the moment I am a bit tied up with other work. As a matter of fact, I don't get much time to develop at all nowadays. But I am more than open to help anyone who wants's to contribute to this repo. And I will be sure to merge any fixes as soon as PR's come up. But if you need someone to fix issues that affect you till I get back to this(ETA Q3 2022), One option is to add a bounty to the following site https://www.bountysource.com/ someone will attend to it. ## Supported RN Versions -0.59 > 0.62 and up -PODs are updated to works with 0.61 and up.(Tested in 0.61.5 and 0.62 and 0.63) - -## Sample repo - -[VLC Media Player test](https://github.com/razorRun/react-native-vlc-media-player-test) +- 0.59 > 0.62 and up +- PODs are updated to work with 0.61 and up (tested in 0.61.5, 0.62 and 0.63) ## Supported formats Support for network streams, RTSP, RTP, RTMP, HLS, MMS. -Play all files,[ in all formats, including exotic ones, like the classic VLC media player.](#-More-formats) +Play all files, [in all formats, including exotic ones, like the classic VLC media player.](#-More-formats) Play MKV, multiple audio tracks (including 5.1), and subtitles tracks (including SSA!) -### Add it to your project +## Sample repo + +[VLC Media Player test](https://github.com/razorRun/react-native-vlc-media-player-test) + +## Add it to your project Run @@ -29,17 +29,17 @@ or `yarn add react-native-vlc-media-player` -Run +If not using Expo also run `react-native link react-native-vlc-media-player` -## android +## Android -Should work without any specific settings +Should work without any specific settings. Gradle build might fail with `More than one file was found with OS independent path 'lib/x86/libc++_shared.so'` error. -gradle build might failed with `More than one file was found with OS independent path 'lib/x86/libc++_shared.so'` error. If that happens add the following block to your `android/app/build.gradle` +If that happens, add the following block to your `android/app/build.gradle`: -``` +```gradle tasks.whenTaskAdded((tas -> { // when task is 'mergeLocalDebugNativeLibs' or 'mergeLocalReleaseNativeLibs' if (tas.name.contains("merge") && tas.name.contains("NativeLibs")) { @@ -64,11 +64,13 @@ tasks.whenTaskAdded((tas -> { })) ``` -Explain: react-native and libvlc both import `libc++_shared.so`, but we cannot use `packagingOptions.pickFirst` to handle this case, because libvlc-all:3.6.0-eap5 will crash when using `libc++_shared.so`, so we have to use `libc++_shared.so` from libvlc, so I add a gradle script to delete `libc++_shared.so` from react-native to solve this. +### Explanation +`react-native` and `LibVLC` both import `libc++_shared.so`, but we cannot use `packagingOptions.pickFirst` to handle this case, because `libvlc-all:3.6.0-eap5` will crash when using `libc++_shared.so`, so we have to use `libc++_shared.so` from `LibVLC`. Reference: https://stackoverflow.com/questions/74258902/how-to-define-which-so-file-to-use-in-gradle-packaging-options -Explain why we have to use libvlc-all:3.6.0-eap5 instead of libvlc-all:3.2.6: libvlc-all:3.2.6 has a bug that subtitle won't display on Android 12 and 13, so we have to upgrade libvlc to support subtitle display on Android 12 and 13. +### Also to consider +`libvlc-all:3.2.6` has a bug where subtitles won't display on Android 12 and 13, so we have to upgrade `LibVLC` to support it. Reference: https://code.videolan.org/videolan/vlc-android/-/issues/2252 @@ -79,74 +81,68 @@ Reference: https://code.videolan.org/videolan/vlc-android/-/issues/2252 3. add `pod 'MobileVLCKit', '3.3.10'` to pod file **(No need if you are running RN 0.61 and up)** 4. run `pod install` (you have to delete the app on the simulator/device and run `react-native run-ios` again) -## Optional (only for ios) +### Optional -Enable Bitcode -in root project select Build Settings ---> find Bitcode and select Enable Bitcode +In root project select "Build Settings", find "Bitcode" and select "Enable Bitcode" ## Expo -This package works with expo when using [custom development builds](https://docs.expo.dev/develop/development-builds/introduction/) +This package works with Expo, Expo Go does not include custom native code so you must use a [development build](https://docs.expo.dev/develop/development-builds/introduction/). -Just insert the react-native-vlc-media-player plugin to the "plugins" array from `app.config.js` or `app.json`. Then rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide. +To enable just insert the `react-native-vlc-media-player` plugin to the "plugins" array from `app.config.js` or `app.json`: ```json { + "expo": { "plugins": [ - [ - "react-native-vlc-media-player", - { - "ios": { - "includeVLCKit": false // should be true if react-native version < 0.61 - }, - "android": { - "legacyJetifier": false // should be true if react-native version < 0.71 - } - } - ] - ] + [ + "expo-video", + { + "ios": { + "includeVLCKit": false + }, + "android": { + "legacyJetifier": false + } + } + ] + ], + } } ``` -## TODO +### Configuring the plugin is optional: -1. Android video Aspect ratio and other params do not work (Events are called but all events come through a single event onVideoStateChange but the JS side does not implement it.). +- Set `ios.includeVLCKit` to `true` if using RN < 0.61 +- Set `android.legacyJetifier` to `true` if using RN < 0.71 -## Got a few minutes to spare? Please help us to keep this repo up to date and simple to use. +Then rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide. -#### Our idea was to keep the repo simple, and people can use it with newer RN versions without any additional config. +## Usage -1. Get a fork of this repo and clone [VLC Media Player test](https://github.com/razorRun/react-native-vlc-media-player-test) -2. Run it for ios and android locally using your fork, and do the changes. (remove this package using `npm remove react-native-vlc-media-player` and install the forked version from git hub `npm i https://git-address-to-your-forked-repo`) -3. Verify your changes and make sure everything works on both platforms. (If you need a hand with testing I might be able to help as well) -4. Send PR. -5. Be happy, Cause you're a Rockstar 🌟 ❤️ - -## Use - -``` +```jsx import { VLCPlayer, VlCPlayerView } from 'react-native-vlc-media-player'; import Orientation from 'react-native-orientation'; - - -or you can use - - {}} - /> + + +// Or you can use + +{}} +/> ``` ### VLCPlayer Props @@ -168,6 +164,7 @@ or you can use | `autoAspectRatio` | Set to `true` or `false` to enable auto aspect ratio | false | | `resizeMode` | Set the behavior for the video size (`fill, contain, cover, none, scale-down`) | none | | `style` | React native stylesheet styles | `{}` | +| `autoplay` | Set to `true` or `false` to enable autoplay | `true` | #### Callback props @@ -213,13 +210,27 @@ Network streaming formats: Apple HLS, Flash RTMP, MPEG-DASH, MPEG Transport Stre Subtitles: Advanced SubStation Alpha, Closed Captions, DVB, DVD-Video, MPEG-4 Timed Text, MPL2, OGM, SubStation Alpha, SubRip, SVCD, Teletext, Text file, VobSub, WebVTT, TTML Video coding formats: Cinepak, Dirac, DV, H.263, H.264/MPEG-4 AVC, H.265/MPEG HEVC, AV1, HuffYUV, Indeo 3, MJPEG, MPEG-1, MPEG-2, MPEG-4 Part 2, RealVideo 3&4, Sorenson, Theora, VC-1,[h] VP5, VP6, VP8, VP9, DNxHD, ProRes and some WMV. -## credits +## Got a few minutes to spare? Please help us to keep this repo up to date and simple to use. + +#### Our idea was to keep the repo simple, and people can use it with newer RN versions without any additional config. + +1. Get a fork of this repo and clone [VLC Media Player test](https://github.com/razorRun/react-native-vlc-media-player-test) +2. Run it for ios and android locally using your fork, and do the changes. (remove this package using `npm remove react-native-vlc-media-player` and install the forked version from git hub `npm i https://git-address-to-your-forked-repo`) +3. Verify your changes and make sure everything works on both platforms. (If you need a hand with testing I might be able to help as well) +4. Send PR. +5. Be happy, Cause you're a Rockstar 🌟 ❤️ + +## TODO + +1. Android video aspect ratio and other params do not work (Events are called but all events come through a single event onVideoStateChange but the JS side does not implement it) + +## Credits [ammarahm-ed](https://github.com/ammarahm-ed) [Nghi-NV](https://github.com/Nghi-NV) [xuyuanzhou](https://github.com/xuyuanzhou) -## sponsors +## Sponsors Huge thanks to "[smartlife - one of the best custom home automation companies in new zealand](https://www.smartlife.nz/)" for helping me to keep this repo maintained