Implement new Pip Layout (with control buttons)

[toger5]

Fixes: https://github.com/element-hq/voip-internal/issues/488
Also fixes: #3620

copied upcoming PR Template

Content

Update the desktop pip call layout:

• dont hide footer
• dont use fullscreen video tiles
• adjust css to match margins and layout.

This allows us to achive the UX described here: https://github.com/element-hq/voip-internal/issues/488

Motivation and context

We want to update the UX for pip:

• allow mute unmute
• use webview hangup button
• show mute state while in pip
• simplify pip by removing custom overlay buttons and actions to hangup

Screenshots / GIFs

Before	After

(The bottom after image is on hover)
Be aware that this is WIHTOUT the associated EW changes!
-> This just proves that things are not completely broken in case we fail on shipping them simultaneously.

With EW patches:

Before	After

Proving that things are not broken in case we fail on shipping them simultaneously.

Tests

• Step 1
• Step 2
• Step ...

Checklist

• I have read through CONTRIBUTING.md.

• Pull request includes screenshots or videos if containing UI changes

• Tests written for new code (and old code if feasible).

• Linter and other CI checks pass.

• I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

• test on mobile (dont regress mobile pip)

[BillCarsonFr]

Ok, but need a playwright test.
Test for the visibility of the footer button. and test they are interactive. See this test for setting up the pip https://github.com/element-hq/element-call/blob/livekit/playwright/widget/pip-call.test.ts

[toger5]

Test for the visibility of the footer button

I am noticing that those tests are not super useful yet. Since we will still have the overlay, we are not able to click the buttons without bumping EW.

On top I created tests checking that we can press the buttons (that there is nothing blocking the clicks) in EW.
So everything beyond "are the buttons pressable" is not needed.
We can still create a playwright test, that checks if the footer is hidden.

[BillCarsonFr]

I am noticing that those tests are not super useful yet.

But as soon as the web PR will be merged it will be fine, right? Meanwhile the test can be ran on HOST=https://pr32654--matrix-react-sdk.netlify.app/

[toger5]

I now went with a test that only checks for the visibility of those buttons. Clicking is commented out for now see:
6485da8

 await expect(hangupButton).toBeVisible();
  await expect(videoMuteButton).toBeVisible();
  await expect(audioMuteButton).toBeVisible();

  // TODO once we have the EW version that supports the interactive pip element we can activate those checks
  // await videoMuteButton.click();
  // await audioMuteButton.click();

  // await expect(videoMuteButton).toHaveCSS("disabled", "true");
  // await expect(audioMuteButton).toHaveCSS("disabled", "true");

[toger5]

@BillCarsonFr Does this justify merging the PR as is? #3794

[BillCarsonFr]

🙏