Nit: can we avoid inline logic in JSX? I know this is a common pattern outside of the Comm codebase, but I personally don't like it... I think it hurts readability by potentially hiding control flow and increasing indentation levels. I prefer for JSX to be a "leaf" in the AST

For instance, this condition could be moved to line 606, eg.:

let controls;
if (videoSource) {
  controls = (
    ...
  );
}

This makes it really clear to the person reading the controls block that it is not rendered if there is no videoSource

Sure! When I think about it, your concern makes much sense! I think I might even add this rule to my "personal patterns" ;)

Agreed, will do

I was thinking about the same thing. Tried to do that initially, but this hook would require custom dependency array (for image component) and that conflicted with eslint: https://stackoverflow.com/questions/56262515/how-to-handle-dependencies-array-for-custom-hooks-in-react

Finally, I postponed doing this, but will create a task for follow-ups before landing