Local user-facing video track is not mirrored when in fullscreen

[Philzen]

Select which package(s) are affected

@livekit/components-react

Describe the bug

Expectation

When you enter full-screen mode, your local video track (of a front-facing cam) should appear the same (mirrored around the Y-Axis).

What happens

It is not mirrored in fullscreen mode.

Reproduction

To enter full-screen mode, you can for instance right-click on the `

Logs

No response

System Info

System:
    OS: Linux 6.12 Manjaro Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-2410M CPU @ 2.30GHz
    Memory: 1.62 GB / 7.64 GB
    Container: Yes
    Shell: 5.2.37 - /bin/bash
  Binaries:
    Node: 20.7.0 - /run/user/1000/fnm_multishells/346301_1733725351537/bin/node
    npm: 10.1.0 - /run/user/1000/fnm_multishells/346301_1733725351537/bin/npm
    pnpm: 9.12.1 - /run/user/1000/fnm_multishells/346301_1733725351537/bin/pnpm
    bun: 1.1.38 - /usr/bin/bun
  Browsers:
    Chromium: 131.0.6778.108
  npmPackages:
    livekit-client: ^2.5.7 => 2.6.0

Severity

annoyance

Additional Information

I already tried applying the transform using a video:fullscreen selector, to no avail.
Then i fiddled around with https://css-tricks.com/almanac/pseudo-selectors/f/fullscreen/ and DevTools as well. In this example it's an ` that is being styled in fullscreen.

It appears that the transform simply does work in fullscreen mode (using the :fullscreen selector), while other CSS properties are applied fine in FullScreen mode. 🤔

[Philzen]

There is a workaround when programmatically entering fullscreen – by wrapping the element that the transform needs to be applied to and making that wrapper go into fullscreen:

https://stackoverflow.com/a/67858042/1246547

However, that won't work if the user right-clicks on the video-element makes that enter fullscreen mode.

[Philzen]

This also relates to #548 as the transform for the local user-facing video track gets lost when entering PIP-mode in Chrome (in Firefox the transform is kept).