cassette icon indicating copy to clipboard operation
cassette copied to clipboard

Implement RemoteController component

Open benwiley4000 opened this issue 7 years ago • 1 comments
trafficstars

We should have a RemoteController component which can be used to sync our audio player context with others on other machines.

This will address #143.

Draft API example:

<AudioPlayerContext.Consumer>
  {context =>
    <RemoteController
      context={context}
      remoteEventEmitter={{
        on: listener => {
	      remoteConnectionWrapper.on('update', listener);
        },
        off: listener => {
	      remoteConnectionWrapper.off('update', listener);
        },
      }}
      onUpdateForRemote={data => {
        remoteConnectionWrapper.update(data);
      }}
    />}
</AudioPlayerContext.Consumer>

Draft implementation:

class RemoteController extends React.PureComponent {
  constructor (props) {
    super(props);
    this.useDataToPerformCallbackUpdates = this.useDataToPerformCallbackUpdates.bind(this);
  }

  componentDidMount () {
    this.props.eventEmitter.on(this.useDataToPerformCallbackUpdates);
  }

  componentWillUnmount () {
    this.props.eventEmitter.off(this.useDataToPerformCallbackUpdates);
  }

  useDataToPerformCallbackUpdates (data) {
    // do something
  }

  componentDidUpdate () {
    this.props.onUpdateForRemote(getPayloadFromContext(this.props.context));
  }

  render () {
    return null;
  }
}

benwiley4000 avatar Sep 04 '18 23:09 benwiley4000

Not needed for 2.0. Let's move it out.

benwiley4000 avatar Sep 16 '18 23:09 benwiley4000