[Frontend] Fix faketouch capturing touches on UI.

[timbotimbo]

Relevant components:

• Signalling server
• Frontend library
• Frontend UI library
• Matchmaker
• Platform scripts
• SFU

Problem statement:

When you enable the setting FakeMouseWithTouches, touches on the UI buttons will no longer work.

config.setFlagEnabled(Flags.FakeMouseWithTouches, true);

• On mobile devices the stats/settings/fullscreen buttons in the example won't trigger at all.
  (Tested on iOS 17 Safari & Chrome and Android 13 Chrome & Firefox.)
• On desktop in the Chrome of Android devtools with touch emulation, the buttons require multiple click to trigger.

This is applicable from version 5.2 up to 5.4 and the master branch.

Screen captures

On Android 13 on the latest Chrome browser:

Before	After
before.mp4	after.mp4

Solution

The issue is caused by touch.preventDefault() in the FakeTouchController script.

• In OnTouchStart I check whether the touch is actually on the video element.

• In OnTouchMove and OnTouchEnd I added a null check because the existing code can run into an undefined this.fakeTouchFinger.id.
  This also avoids the preventDefault call when it is not needed.

The only drawback of this 'fix' is that the focus state of the buttons will not blur when clicking the video, as you can see at the end of the 'after' video.
This could be resolved by entirely removing touch.prevenDefault() from the OnTouchEnd function, but I'm not sure if this might have any unintended side effects.

Documentation

N / A

Test Plan and Compatibility

This could theoretically break someone's existing project if they place HTML elements on top of the video element, maybe for some kind of gradient or vignette effect.
However disabling pointer events on those elements should solve any issues.