Component hangs at loadingComponent after Jitsi update (meet.jit.si, alpha.jitsi.net and further recent deployments)

[OrestTa]

It seems like an update rolled out to e.g. meet.jit.si in the last 12 hours broke the react-jitsi component. It never loads, keeping displaying the loadingComponent. No error or warning messages are logged to the console. It's fully functional again if I set the domain property to a less recent Jitsi deployment, e. g. 8x8.vc.

[OrestTa]

Update: This is due to the "Join Meeting" preparation page that's now displayed on meet.jit.si – it prevents the loaded flag to be set to true, so the API iframe is css-hidden and the loadingComponent is not removed from the DOM.

[e18r]

@otrsk were you able to find a workaround? Is it possible to manually set the loaded flag to true?

[OrestTa]

@otrsk were you able to find a workaround? Is it possible to manually set the loaded flag to true?

@e18r You could edit the node_module directly to not show the loadingComponent at all and not hide the iframe during loading; however, note that this will result in a different behaviour: Jitsi will show a previously unseen "call preparation" page and only notify your app that it's ready once the user clicks through it. You could use another domain such as meet.8x8.vc as long as it hasn't deployed the new version / config as workaround.

[e18r]

@otrsk thank you so much. I just temporarily fixed the bug in my app by switching to the domain meet.8x8.vc. It'll probably be good for a few days while I find a more definitive solution.

I'm gonna edit the node_module as you suggest in order not to depend on 8x8 upgrading to the latest version, which they could do very soon. However, I'd also like to understand this issue better and, why not, maybe even contribute a PR to this useful repo.

Do you have any idea where's the upstream code that is causing this? Looking at the commit history of Jitsi Meet doesn't seem to give any answers.

[OrestTa]

@e18r I've only had time for a quick glance at the code, unfortunately. However, I've seen the "call preparation" (not sure what the real name is) feature deployed at e.g. https://alpha.jitsi.net/ at least a few weeks ago already. So this might be a config change. I didn't find a flag to disable the "call preparation" feature in the iframe API, but the documentation seemed to be outdated, so you might have more luck looking at the code!

[dacopan]

@otrsk @e18r
seeing source code of jitsi you can set tis config prop prejoinPageEnabled to false

https://codesandbox.io/s/youthful-cache-z5g76?file=/src/App.js

[dacopan]

https://github.com/jitsi/jitsi-meet/blob/master/config.js#L311

[OrestTa]

@dacopan amazing, thanks! For Typescript, combined with adding prejoinPageEnabled?: boolean; to react-jitsi/dist/types.d.ts>ConfigOptions, everything seems to work like a charm! :)

[OrestTa]

@gatteo This option would need to always be set to false for the current loading logic to work as expected, so you might want NOT to expose it to the user.

[OrestTa]

PS: For Typescript, you can enforce the untyped flag this way without having to touch the node_module:
// @ts-ignore
prejoinPageEnabled: false,

[e18r]

@dacopan mil gracias hermano!

[sumanyu-soniwal]

Thanks a lot @dacopan @otrsk

[N3zTho]

@dacopan @otrsk Great! 👏

[Kannndev]

@gatteo Please include this in the readme file. It would help someone because at first even I thought the library is broken.