0

I'm working on building a React media player component that wraps an HTML5 <video> tag, and I'm wondering how that tag and its DOM events with with the Flux architecture.

In Flux, the Store the component listens to is its source of truth, but with some elements like the <video> tag, the DOM itself maintains some state, such as paused or currentTime. How do I reconcile that state with that of my Store?

So far, I've got a Player component and PlayerStore. When <video> DOM events happen, I've been dispatching Flux actions such as handlePlay, handlePause, and handleTimeUpdate to provide updates to the PlayerStore so that the store can keep that state. As well, my own custom player controls dispatch the same actions, but I'm unsure of how to "set" the state of the <video> element only when the original event was from the controls, not <video> events; i.e. I don't want to get stuck in a loop where, for example:

  1. The <video> sends a "my timecode changed" DOM event
  2. The component hears the DOM event and dispatches an action
  3. The Store receives the action and updates itself with the new timecode
  4. The component listening to the Store hears the change and sets (somehow) the new timecode on the <video> element. However, there's no reason to, since the <video> element already knew about the change — it's the one that triggered it in the first place a few milliseconds ago!

How would you approach such a component?

Collin Allen
  • 4,449
  • 3
  • 37
  • 52
  • 1
    Why not keep track of playing/paused state in the component itself (as in `this.setState`)? And why dispatch actions for things like `handlePlay`? Does anything outside your component need to know about these events? – ray Jul 09 '15 at 23:03
  • 1
    Here's how I would do it: http://codepen.io/FullR/pen/YXLQyO?editors=001 (not a functioning example; just basic structure) But I'm assuming you don't need to mutate the state of the video element (such as programmatically changing the paused state or the time via a passed prop). If you need to change those things, I would suggest taking advantage of the `componentDidUpdate` hook to make the needed changes to the ` – SimpleJ Jul 09 '15 at 23:21
  • I plan on persisting the current playhead time to a database which is why I'm involving the Store (and a container component). – Collin Allen Jul 10 '15 at 01:14

1 Answers1

0

I would recommend checking your video tags current state in shouldComponentUpdate and skipping a rerender if it's already in the target state.

iSchluff
  • 465
  • 2
  • 7