Skip to content

API for adding additonal players to ReactPlayer in runtime - #364

Merged
cookpete merged 1 commit into
cookpete:masterfrom
BrooklynKing:master
Apr 5, 2018
Merged

API for adding additonal players to ReactPlayer in runtime#364
cookpete merged 1 commit into
cookpete:masterfrom
BrooklynKing:master

Conversation

@BrooklynKing

Copy link
Copy Markdown
Contributor

Comment thread src/ReactPlayer.js Outdated
return true
}
}
for (let Player of additionalPlayers) {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about we put this loop before the default players? This would let us override the default players via our component's canPlay if we want to.

Comment thread src/ReactPlayer.js Outdated
return Player
}
}
for (let Player of additionalPlayers) {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above (though I guess this is the one that actually matters)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andybarron yeah, we can, but i think we should as @cookpete about his opinion.

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that these new loops should go above the regular players.

You could also do:

for (let Player of [ ...additionalPlayers, ...players ]) {

for the single loop.

@cookpete

cookpete commented Apr 4, 2018

Copy link
Copy Markdown
Owner

My only thought on this is that passing additionalPlayers as a prop might be a bit cleaner and more React-friendly, although we would lose the ability to check the new players in the canPlay static.

Comment thread README.md Outdated
ReactPlayer.clearAdditionalPlayers();
```

All responsibilities for keeping your player's API compatible with ReactPlayer is on you.

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure this line is necessary? Seems a bit aggressive.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cookpete i just wanted to protect you from issues related to changes in interfaces of your "internal" players.

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok so how about:

It is your responsibility to ensure that custom players keep up with any internal changes to ReactPlayer in later versions.

Comment thread README.md Outdated

#### Adding your own players

If you have your own player, that compatible with ReactPlayer's internal architecture, you can use it like this:

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you have your own player, that is compatible...

@BrooklynKing

Copy link
Copy Markdown
Contributor Author

@cookpete about passing players as props, i'm not sure about it, since with this additional players we kinda make configuration for ReactPlayer as module. If we passing it with props, then we kinda mixing properties of different abstraction layers. And if you passing new props, you expecting changes. And what changes should be when you pass new set of players? Should we run whole process of getting and rendering proper player for passed url? Don't really know what is the best way, so i took simple way with static method and "configuration" approach

@cookpete

cookpete commented Apr 5, 2018

Copy link
Copy Markdown
Owner

about passing players as props, i'm not sure about it, since with this additional players we kinda make configuration for ReactPlayer as module. If we passing it with props, then we kinda mixing properties of different abstraction layers.

Yeah this is fair enough.

Comment thread README.md Outdated

```javascript
import YourOwnPlayer from './somewhere';
ReactPlayer.addAdditionalPlayer(YourOwnPlayer);

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like a longer method name than necessary. Could it just be ReactPlayer.addPlayer()?

Comment thread README.md Outdated
Or you can clear all additional players:

```javascript
ReactPlayer.clearAdditionalPlayers();

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slightly anal, but I think I prefer referring to the extra players as "custom players" rather than "additional players" throughout the codebase.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cookpete so then ReactPlayer.addCustomPlayer() and ReactPlayer.clearCustomPlayers()?

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

addCustomPlayer and removeCustomPlayers would be better I think 👍

@BrooklynKing

Copy link
Copy Markdown
Contributor Author

@cookpete i updated PR

@cookpete
cookpete merged commit b97b19f into cookpete:master Apr 5, 2018
@cookpete

cookpete commented Apr 5, 2018

Copy link
Copy Markdown
Owner

Nice one! Thanks @BrooklynKing and @andybarron.

@cookpete

Copy link
Copy Markdown
Owner

Published in 1.4.0. Sorry for the delay!

@shawninder

Copy link
Copy Markdown

@BrooklynKing @andybarron could either of you share an example of successfully using a custom player with this API?

@BrooklynKing

Copy link
Copy Markdown
Contributor Author

@shawninder not sure i can share example, since it's in private repo, but i can try to answer on your questions

@shawninder

shawninder commented Dec 10, 2018

Copy link
Copy Markdown

@BrooklynKing I'm getting weird errors I can't figure out with my custom player, yet it's basically copy-pasted from the FilePlayer... Here's a question. Did you also use createSinglePlayer as react-player uses for its players, or did you start from scratch?

If you're curious, here is my work-in-progress: https://github.com/shawninder/music/blob/master/components/IndexedDBPlayer.js It currently doesn't do anything (I was hoping to stop the Component from crashing the page before starting to add functionality) as it's just the FilePlayer copied, renamed, and with the File stuff removed. I just don't understand why this crashes the page whereas the FilePlayer included in react-player doesn't.

@cookpete

Copy link
Copy Markdown
Owner

@shawninder are you doing

import { IndexedDBPlayer } from '...'

or

import IndexedDBPlayer from '...'

as the latter would cause issues.

@shawninder

Copy link
Copy Markdown

Ah, damn it, I am using import IndexedDBPlayer from '...'. Thanks @cookpete, I'm sure this is my problem (will confirm tomorrow). It's times like these when I miss working with a team.

@shawninder

Copy link
Copy Markdown

@cookpete While you're in the area, here's a question for you: If I do get this IndexedDBPlayer working, would you be interested in a pull request adding the player to this repo? I'm guessing not, since playing media from IndexedDB feels like an infrequent use-case, but if you do want it, just tell me and I'll submit a pull request when I'm "done".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants