Using Redux to Manage a Video Player

Viewed 2191

What would be the ideal way to manage a video player using Redux, primarily in terms of dispatching actions to play/pause a video?

I'm working on building a video player in a React application, and I have event listeners on the video player dispatching relevant events to update the state. What would be the best way to have the parent component act on other components dispatching a PLAY or PAUSE action?

One use case that I would want to account for, for example, is one video being played and all other videos making sure to pause their playback.

Two ways that I've thought of would be:

1) Have the parent component check for changes in componentWillReceiveProps, and checking for something like

if (this.props.paused && !nextProps.paused) {
    this.refs.video.play()
}

2) Store a reference to the underlying video element in the state tree, and using middleware to act on certain actions (such as a PLAY action), such as

if (action.type === PLAY) {
    let state = getState();
    state.players[action.payload.playerId].play();
}

Would one strategy be more "correct" than the other, or is there another way that would make more sense?

2 Answers
Related