Document getSubscriber about opentok-react

[aiham]

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.otPublisher = React.createRef();
  }
  getPublisherStats(){
    this.otPublisher.getPublisher().getStats((err, stats) => console.log(err, stats));
  }
  render() {
    return <OTPublisher ref={this.otPublisher} />;
  }
}

[enricop89]

I think you can also do something like this:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.otPublisher = React.createRef();
  }
  getPublisherStats(){
    this.otPublisher.getPublisher().getStats((err, stats) => console.log(err, stats));
  }
  render() {
    return <OTPublisher ref={(instance) => { this.otPublisher = instance }} />;
  }
}

Using the instance inside the ref function (ref={(instance) => { this.otPublisher = instance }}), you access the OTPublisherdirectly.

[aiham]

From https://github.com/opentok/opentok-react#otpublisher-component

To facilitate this the Publisher instance is exposed via the getPublisher() component method. You should always call this method to get the latest Publisher instance instead of keeping a reference to it as it's possible for the Publisher instance to change, leaving you with a stale reference.

and

There are plans to support more Publisher properties but for now you will have to call getPublisher() to retrieve the Publisher instance and make the necessary changes yourself.

It's not ideal but this was low priority when first implemented. Feel free to submit a PR if you'd like this improved.

[wyqydsyq]

Yes that tells you to use the getPublisher method of OTPublisher component instance in order to change the OT.Publisher instance, what I am saying is there is no documentation or examples on how getPublisher is actually supposed to be used.

How am I supposed to call getPublisher from the OTPublisher instance? Neither of the below works:

  render(){
    const p = <OTPublisher {....props} />;
    console.log(p.getPublisher());
  }

-> getPublisher is not a function

  render(){
    const p = new OTPublisher(...props);
    console.log(p.getPublisher());
  }

-> getPublisher is not a function

I am only able to find the method being used twice in the entire project, both times it is being used in the context of enzyme tests where enzyme makes the instance easily accessible with wrapper.instance(): https://github.com/opentok/opentok-react/search?q=getPublisher&unscoped_q=getPublisher

I'm happy to submit a PR to add documentation on how it is intended to be used, but first I need to understand that myself.

[aiham]

Good point. I use it in this SO answer: https://stackoverflow.com/a/49889581/545726

[wyqydsyq]

The above does not work. It results in this.otPublisher having a value of

 {current: OTPublisher}

Which does not have a .getPublisher() method.

[aiham]

So then use current: this.otPublisher.current.getPublisher()

You can figure this out on your own by looking up the documentation for React.createRef

[wyqydsyq]

this.otPublisher.current appears to be an actual instance of OTPublisher and also lacks a getPublisher method, I have no idea whether the current property will actually be dynamically returning a live reference of the current OTPublisher that is being managed under the hood or just the initial one I already have a reference of

[aiham]

@wyqydsyq getPublisher should be on the prototype. Did you try calling it? It comes from here: https://github.com/opentok/opentok-react/blob/master/src/OTPublisher.js#L61

[ashifa454]

@wyqydsyq did you found the solution, because i am having the same issue.

[marifehe]

I was facing a similar issue, but with the subscriber. In order to have access to the object that getSubscriber returns I had to wait for componentDidMount but also wait for the next animation frame.

So having this:

componentDidMount() {
    requestAnimationFrame(() => {
      console.log('>>>>> 2: ', this.otSubscriber.current.getSubscriber());
    });
    
    console.log('>>>>> 1: ', this.otSubscriber.current.getSubscriber())
  }

1 prints null, but 2 prints the subscriber object. This makes sense, according to React lifecycle and how componentDidMount works. So make sure you're not accessing your refs object too early.

[wyqydsyq]

@ashifa454 the suggestion made by @aiham ended up working for me, just had to use .current as mentioned above. I'll try to get around to submitting a PR to add this to the docs

[msach22]

We've gone ahead and documented this. Closing the issue!