Meteor + React

[nathanandersen]

Hey Pete,

This is a truly awesome project. Wow!

I would like to integrate this into my Meteor/React web application, and I think that it needs to be able to work with Browserify. Any suggestions on how I can make this work?

Best,
Nathan

[cookpete]

Hey @nathanandersen,

This sounds similar to #35. Check out the library branch and run npm run build:browser. That should create a file in dist that you should be able to use in Meteor? Let me know how it goes and I can get something merged and published if it's working ok.

[nathanandersen]

I sent you an email about this -- I think we're getting somewhere. I see the "var ReactPlayer = function()...." but I'm not sure how to implement/render that as a React component.

[cookpete]

It really depends how you are managing Meteor and React and external dependencies. It looks like the proper way of using ReactPlayer in meteor would involve publishing a Meteor package. However, a hacky short term solution would be to add the compiled ReactPlayer.js to your client files, then ReactPlayer should be available to use in a parent component.

In the react-meteor example there is an example of an external component being used, although in that particular case the Player component is just defined later in the same file. I think as long as ReactPlayer.js is included by Meteor, it will be available in the global scope for rendering.

[nathanandersen]

Right, I saw that and it looks like the way to go. When I try that, I get this error:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of SongPlayer.

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of SongPlayer.

Note: I'm using the minified JS from the library commit.

Is there a different way to more properly insert the React Class? In the example you referenced, it was directly defined as Player = React.createClass .... I would copy and paste directly from your repo but I'm not allowed to use require or import or export so the multi-file approach to the players is problematic.

[cookpete]

Ah ok so if you're importing using the old school require you'll need to do something like this for the time being:

ReactPlayer = ReactPlayer.default
return (
  <ReactPlayer url={...} />
)

But you shouldn't need to do this really. I'll play around with the build script and see if I can improve it.

[nathanandersen]

That last comment was very helpful and fixed that, thank you so much, now it is embedding.

I am now struggling with the callback events -- they all seem to fire several times before the video starts playing, then do not fire correctly (say onEnded when the video ends or onPause when the video is paused).

[nathanandersen]

I suspect it has something to do with the ChromeCast error messages in the console inhibiting event calling, but then I would suspect that this is something you've seen before...

[cookpete]

Yeah the Chromecast errors are just a dumb side effect of the YouTube player running in a browser without the Chromecast extension installed, and shouldn't affect the callbacks. I'll have to try loading ReactPlayer in Meteor to try and reproduce this. Do you have some example code you can show me of how you are loading/rendering the player?

[nathanandersen]

ReactPlayer = ReactPlayer.default
SongPlayer = React.createClass({
onPlay() { console.log('play'); },
render() { var youtubeConfig = { preload: true };
return( <ReactPlayer url='https://www.youtube.com/watch?v=yMaURUZsNdU' onPlay={this.onPlay()} youtubeConfig={youtubeConfig} playing={true}/> ) } });

Here is the code for my component with the player.

It loads, renders properly, and starts playing, but it calls all the events (I loaded it with each event having a function that outputs that event name to the console) before play starts, then none of them at any point afterwards.

[nathanandersen]

Rendered with ...
in index.html:
`

` in `startup.jsx`: `Meteor.startup(function() {` `const root = document.getElementById("render-target");` `ReactDOM.render(,root);` `});`

[cookpete]

Ok so you're almost there.

Notice how you are passing this.onPlay(), with brackets, into the onPlay prop. This is actually executing the this.onPlay function and sending the result of the function into the onPlay prop. What you want to do is send the function itself as the prop, so you just need to remove the ():

ReactPlayer = ReactPlayer.default
SongPlayer = React.createClass({
  onPlay() { 
    console.log('play');
  },
  render() {
    var youtubeConfig = { preload: true };
    return (
      <ReactPlayer 
        url='https://www.youtube.com/watch?v=yMaURUZsNdU' 
        onPlay={this.onPlay} 
        youtubeConfig={youtubeConfig} 
        playing={true}
      />
    )
  }
});

[nathanandersen]

Thanks so much for all of this, it's really awesome.

Is there a way to load another video after one ends?

[cookpete]

Is there a way to load another video after one ends?

Sure, just keep your currently playing URL in state and setState when the player emits onEnded. Something like:

ReactPlayer = ReactPlayer.default
SongPlayer = React.createClass({
  getInitialState() {
    return {
      url: 'https://www.youtube.com/watch?v=yMaURUZsNdU' 
    }
  },
  onPlay() { 
    console.log('play');
  },
  onEnded() {
    this.setState({ url: 'another url' })
  },
  render() {
    var youtubeConfig = { preload: true };
    return (
      <ReactPlayer 
        url={this.state.url}
        onPlay={this.onPlay} 
        onEnded={this.onEnded}
        youtubeConfig={youtubeConfig} 
        playing={true}
      />
    )
  }
});

If you are using Meteor there is probably a better way to manage app state, but this just shows basic usage of onEnded.

[cookpete]

@nathanandersen Note that as of version 0.5.5, you shouldn't need to do the horrible ReactPlayer = ReactPlayer.default

[ioRekz]

Hello,
Sorry to bother again with this but I understood correctly, I should be able to call ReactPlayer from the browser. So far, tried with bower but I didn't have any src or libs in bower_component/react-player.

I also tried to use the dist/ReactPlayer.js after cloning and installing the repo (master) but it says ReactPlayer is undefined.
I then tried to use build:browser and also did it from the library branch but I never had ReactPlayer available from the browser (in the window object).
The file is loaded correctly but searching for "ReactPlayer" in the generated file resolve nothing.
What am I missing ?

[cookpete]

Ok so what I missed with bower is that I'd have to commit the compiled ReactPlayer.js into the repo. I'll have to either do that or remove bower support until I can figure a better solution.

Meanwhile, the library branch is now old, and the browser build script committed to master was broken. I've just committed a fix, so pull down the latest master branch, run npm run build:browser and that should be it. Apologies!

[cookpete]

@ioRekz This is now fixed in 0.5.6

bower install react-player should now work.

[ioRekz]

great thanks !

On Tue, Mar 8, 2016 at 11:05 AM, Pete Cook notifications@github.com wrote:

@ioRekz https://github.com/ioRekz This is now fixed in 0.5.6

bower install react-player should now work.

—
Reply to this email directly or view it on GitHub
#38 (comment)
.