React-native-youtube: v1

[davidohayon669]

I've been refining this project a lot for my own use and would like to share it with you, but I suggest it should be an upgraded major version, since I let myself break some API to have better organization and understanding of this library. Plus because a lot is rewritten, It will be probably better to handle it on a different branch and an alpha version on npm (1.0.0-alpha.1).

Stuff added:

• videoIds: option to load an array of playable video IDs
• playlistId: option to load a YouTube playlist's ID
• previousVideo() / nextVideo(): methods for multiple videos
• playVideoAt(index): play the video of index place in videoIds or playlistId
• videoIndex(): a promise method to get the index of the currently played video out of multiple videos
• Smooth linking with react-native link and rnpm link for both platforms. No other installation steps.
• Updated README with less ambiguity about props (Differences between iOS and Android) and also explanations of known issues I have discovered while working.
• Native code refactored and build warnings omitted
• Started tracking and pinning peerDependency of RN

iOS Improvements

• Instead of reloading for every prop change, the inner WebView holding the YouTube iFrame now loads once and is updated via methods
• Native code refactored to use newer events passing, former is being deprecated
• Updated files from youtube-ios-player-helper to 0.1.6

Android improvements

• Refactored layouting of the YouTubePlayerFragment instances to prevent fatal error when multiple instances override each other if succeed each other in RN #64

Upgraded example project
I've totally rewritten the example project to showcase all the added functionality, plus it was upgraded to RN 0.37. Also the example project is now linked to the working directory of the library so it can be used as a developing project, with a simple npm install command to update the underlying code.

The repository can be found here.

Lets open a v1 branch and start publishing this to npm

Thanks

[antonsivogrivov]

@davidohayon669, thanks. What is the best way to use it now?

[davidohayon669]

@tonygriv You can clone my fork to somewhere on your computer and then point to it in your own project's package.json like this:
"react-native-youtube": "file:../path/to/repo/react-native-youtube",

After that, npm install should treat it like an online repository.
To manually install again if you did any change to the repository code, use:
npm install react-native-youtube@file:../path/to/repo/react-native-youtube

[davidohayon669]

@tonygriv I forgot to mention, make sure to switch to v1 branch

[mikelambert]

Alternately, to use it one can point your package to github:davidohayon669/react-native-youtube#v1, a la:
npm install github:davidohayon669/react-native-youtube#v1 --save

[nhcuong95]

@mikelambert @davidohayon669 I got this error while building the android app:Gradle sync failed: Configuration with name 'default' not found.

Do you know what's wrong here? I got the error after I run: npm install github:davidohayon669/react-native-youtube#v1 --save

[davidohayon669]

@nhcuong95 did you react-native link? what version of RN?

[heiseish]

@davidohayon669 Hey man, do you have any idea why my onChangeState function (and other onChangeX functions as well) doesn't work? I tried to print out the state and was unable to do so

[davidohayon669]

@heiseish version of this repo? version of device? version of RN?

[heiseish]

@davidohayon669 your most updated repo from github:davidohayon669/react-native-youtube#v1
Version of the device is ios 6 simulator.
RN 0.39.0
Thanks

[nhcuong95]

@davidohayon669 yeah, I did it. RN 0.40.0. Do I have to remove the old gradle configuration from the initial react-native-youtube before install from your repo?

[davidohayon669]

@nhcuong95 Probably. sounds like you need to unlink the older version of this repo. Paste your settings.gradle file

[davidohayon669]

@heiseish Are you sure you're doing it correctly?

Try adding onChangeState={e => console.log(e.state)} to the component and wait for any logs while a video is playing.

[heiseish]

@davidohayon669 yup tried that. seems like the onChangeState function never gets called for a reason

[davidohayon669]

@heiseish I've never checked my code on a higher version than RN 0.37, Maybe it got something to do with that

Try running the example in the repo and see if this event works for you there
The installation is pretty straightforward

[vesper8]

@georgiana-gligor @joncursi @davidohayon669 so many forks and branches floating around.. this one seems to have great improvements.. but then there are more recent forks that offer 0.40 RN support.. and in the meantime this package is hardly getting any attention... I hope you guys can work together to merge the 0.40 compatibility with the improvements you made in your v1 branch

[davidohayon669]

@vesper8 I would gladly take a maintainer role in this repository. I think it can be maintained much better than just be patched with pull-request everytime. All depends on the owners @julien-inprogress

[vesper8]

@davidohayon669 I would love to see this package continue to improve so I hope you can be made a maintainer, otherwise I will continue to use your branch and I'm sure you'll be able to provide support for the latest RN version soon :)

I have a question for you if you don't mind. I am trying to get your example (of your v1 branch) to work in Exponent (https://getexponent.com). Not sure if you're familiar with it. It's great but it doesn't work with Native Components. I am getting this error "Warning: Native component for "RCTYouTube" does not exist" but I am not entirely sure if this is because of another problem or simply because this is indeed a Native Component and thus it won't work with Exponent.. in which case I am left with two options.. youtube player inside a webview or not using Exponent

Would really love to use Exponent though. Sorry btw don't mean to go off-topic but don't know how to message you privately :) Cheers

[davidohayon669]

@vesper8 I'm not familiar with Exponent at all so I guess I can't really help you with that. I can only say that this repo is of course of a real Native Component and if that is a limitation than you probably need to find another solution.

I would probably keep upgrading my fork to support RN40 and more, as I need it for my own project. I just can't really tell when it will happen since I work on this project in chunks.

[vesper8]

@davidohayon669 well it seems like @joncursi has identified everything that needed to be changed to make it work with rn40 (and probably 41) in his single commit here:

https://github.com/joncursi/react-native-youtube/commit/dc9dba529cee0ee404c2e0c8c81d28b322c6d3ea

Any chance of implementing this? Because I am using your fork as the official fork from now on because of your awesome improvements!

[davidohayon669]

@vesper8 Thanks, I will patch it in the next few days

[davidohayon669]

@vesper8 support for RN >= 0.40 added

[vesper8]

@davidohayon669 awesome!! thank you!

[davidohayon669]

@jujumoz any plan on incorporating this as a next version branch?

Other than tons of refactoring, I think the work I did here on playlists, updated example / development app, and simplified installation is extremely valuable to the freshness of this project.

[mikelambert]

FWIW, I think the "simplified installation" and "rnpm link" parts are currently solved by my changes that got merged last week (the pull request actually predated yours :P )

[davidohayon669]

@mikelambert well, I was just trying the last version of the master branch and it still isn't automatically linking the YTPlayerView-iframe-player.html file... Not that it's so hard to accomplish, it's just that I already took care of all of these stuff and other crucial things because I use this project for a commercial app and I already tested a lot of usability scenarios.

Also the handling of events in the iOS version (with all the lifecycle hooks in YouTube.ios.js) can be done with much less code like I do it with RCTDirectEventBlock on the native side.

I think its a loss that this project is never being deeply refactored and is only casually patched with arbitrary pull requests.

[mikelambert]

Ahh sorry, I had fixed Android linkage with my series of changes, not iOS.

And yeah, no argument from me on anything else you mention...didn't mean to argue against everything else that your branch does.

[vesper8]

@davidohayon669 hey there! I see you just closed this. Am I to understand that all of your awesome changes have been merged into https://github.com/inProgress-team/react-native-youtube/tree/v1 now? I see you've been making a lot of commits to that branch.

So no longer need to use your fork to benefit from your changes?

[davidohayon669]

@vesper8 correctomundo