Property undefined across window in inbound call

Question

I have a use case using Twilio where it have to be able receive incoming call wherever as long as the extension is installed so I figured that instantiating it in the background would work. I used webext-redux library to accomodate for the message passing so I can pass call status to the UI components while still keeping the Twilio in the background.

I used async thunk to call an api to my backend so I have to dispatch it from a React FC but since I need the instance to exist in the background I used the alias middleware from the webext-redux to run that action in the background (at least that's what I understood from reading the docs in github). Although I'm not entirely sure if the Twilio instance exist in the background or not.

I know for sure the library works because the redux-logger logs in the background console which is nice. However, the action payload, when logged, is in the UI window (I generate a floating window after login) console. Okay I guess?

When I make a call from my phone to my Twilio number, an incoming event was fired, cool. That event returns a Call object which I reassign it to the Twilio object property. This event apparently fires in the UI component. It also creates a new window where I'm suppose to handle the call. Unfortunately, I can't answer it because the Call object that I thought I reassigned is undefined.

Inbound.ts

    const OnDeviceIncoming = (call: Call) => {
      this.twilio.status = setEventState(OnDeviceIncoming.name, true);
      logInfo(this.twilio._status);
      // reassign the instance prop with the newly returned Call object
      // logs a legit Call object in the first UI window
      this.twilio.twilioCall = call;

      const from = call.parameters.From;
    }

acceptCall(acceptOptions?: acceptOptionsInterface) {
    console.log(this.twilio.twilioCall); 
    //this logs undefined in the newly created window

    acceptOptions
      ? this.twilio.twilioCall?.accept(acceptOptions)
      : this.twilio.twilioCall?.accept();
  }

I know that I'm confusing myself with something but I dont know what exactly that confusion is. Is the Twilio really in the background? I think not. How do I know for sure? If not so how do I pass that Call object so I can accept the incoming call in the newly created window?

Answer 1

It looks like you're calling this.twilio.twilioCall in the popup? But in a different window that won't be the same this, so it won't have the same objects.

You can communicate between the two windows. In your popup, you can access window.opener, which is the page which opened the popup. If you set the twilioCall object on the window object in the original window, then you could access it with window.opener.twilioCall in the popup.

However, even if you did that, the original window is still the owner of the twilioCall object. My guess is that you wish to open the popup so that you can navigate away or refresh the original window, but remain on the call in the popup. This won't work, because the original window owns the call object and it can't, to my knowledge, be transferred.

If you want to use the popup to answer the call and own the call object, you will need to create a new instance of the Twilio Device in the popup and accept the call from that instance.