Fix more media control website conflicts in in-window mode

https://bugs.webkit.org/show_bug.cgi?id=274274
rdar://126942381

Reviewed by Jer Noble.

Currently on youtube.com, when you drag the media controls in in-window mode, the video
plays/pauses. To fix this, if the video is in in-window mode, we now stop the propagation
of the click or mousedown events past the media controls <div> element.

Additionally, on tv.apple.com, the media controls in in-window mode are unclickable. This
is because the website sets the pointer-events css property of the <video> to none. We now
set this property to auto !important.

Also, the <video> on tv.apple.com does not have the controls attribute, which was causing us
to not toggle playback when the video is clicked due to a current requirement that the controls
attribute is present. This is fixed now by amending this conditional to check if
host.shouldForceControlsDisplay is true.

Although this fix makes the in-window controls on tv.apple.com clickable, the behavior
is still buggy. This is the new behavior with this fix:

If the video is paused when entering in-window mode and playing when exiting to inline,
the controls are no longer functional in inline. You must re-enter in-window, pause,
then exit to inline, to regain functionality.

If the video is playing when entering in-window mode, the in-window controls are not
functional.

I believe this behavior is due to tv.apple.com keeping their own variable tracking
the play/pause state of the video. If this patch lands, I will file a radar tracking
this.

* Source/WebCore/Modules/modern-media-controls/controls/background-click-delegate-notifier.js:
(BackgroundClickDelegateNotifier.prototype.handleEvent):
(BackgroundClickDelegateNotifier):
* Source/WebCore/Modules/modern-media-controls/media/media-controller.js:
(MediaController.prototype.macOSControlsBackgroundWasClicked):
* Source/WebCore/css/fullscreen.css:
(*|*:not(:root):-internal-in-window-fullscreen):

Canonical link: https://commits.webkit.org/279024@main

Source/WebCore/Modules/modern-media-controls/media/media-controller.js

@@ -184,7 +184,7 @@ class MediaController
     macOSControlsBackgroundWasClicked()
     {
         // Toggle playback when clicking on the video but not on any controls on macOS.
-        if (this.media.controls)
+        if (this.media.controls || (this.host && this.host.shouldForceControlsDisplay))
             this.togglePlayback();
     }
 
@@ -334,6 +334,9 @@ class MediaController
         this.controls = new ControlsClass;
         this.controls.delegate = this;
 
+        if (this.media.webkitPresentationMode === "in-window")
+            this._stopPropagationOnClickEvents();
+
         if (this.controls.autoHideController && this.shadowRoot.host && this.shadowRoot.host.dataset.autoHideDelay)
             this.controls.autoHideController.autoHideDelay = this.shadowRoot.host.dataset.autoHideDelay;
 
@@ -357,6 +360,16 @@ class MediaController
         this._updateControlsAvailability();
     }
 
+    _stopPropagationOnClickEvents()
+    {
+        let clickEvents = ["click", "mousedown", "mouseup", "pointerdown", "pointerup"];
+        for (let clickEvent of clickEvents) {
+            this.controls.element.addEventListener(clickEvent, (event) => {
+                event.stopPropagation();
+            });
+        }
+    }
+
     _updateControlsSize()
     {
         // To compute the bounds of the controls, we need to account for the computed transform applied

Source/WebCore/css/fullscreen.css

@@ -76,6 +76,7 @@ iframe:fullscreen {
     max-width: 100vw !important;
     max-height: 100vh !important;
     border-radius: 20px !important;
+    pointer-events: auto !important;
 }
 
 *|*:not(:root):-internal-in-window-fullscreen::backdrop {