debug blank-screen error

[JamesPHoughton]

In the so good experiment, moving to the page with the video discussion, saw a blank screen with this error:

The error string resolves to: https://legacy.reactjs.org/docs/error-decoder.html/?invariant=310 "Rendered more hooks than during the previous render"

But on refreshing the page, there were no problems. Also had no problems in safari.

[JamesPHoughton]

Looks like it's in the VideoCall component. We have an if statement with a return before several hooks:

 if (!player || !game || !stageTimer || !roomUrl)
    return (
      <H3> Loading meeting room. This should take ~30 seconds or less. </H3>
    );

  const stageElapsed = (stageTimer?.elapsed || 0) / 1000;
  const stageStartedAt = Date.now() / 1000 - stageElapsed;

  const dailyElement = useRef(null);
  const [callFrame, setCallFrame] = useState(null);

so if the if statement triggers then it could cause this error.

[JamesPHoughton]

Rewrote VideoCall component so that it doesn't have a premature return, and properly uses useEffect dependencies.