Fix event handling conflicts between webkit fullscreen controls and f…

…ullscreen controls of youtube.com and vimeo.com

https://bugs.webkit.org/show_bug.cgi?id=273889
rdar://126728057

Reviewed by Jer Noble.

Currently, when on youtube.com and an element is in in-window or standard fullscreen and we are displaying the default
WebKit media controls, pressing the spacebar to toggle playback does not work because both our event handler and youtube's
Are being executed. When in fullscreen, the keyboard events are sent to the HTML body, on which YouTube has a Keyup event
Listener that toggles playback if the key is a space. Because our media controls script is loaded after youtube's, our event
Listeners have no chance of handling the event and stopping propagation.

To fix this, this change makes it so that when a keyboard event is fired while a page is in fullscreen, the event is
first sent to the fullscreen element to be handled, which now has an event listener attached to it for keydown and
Keyup events and stops propagation after handling the spacebar event.

There is also a problem on YouTube.com and Vimeo.com where the website toggles playback when the user clicks or drags the
fullscreen bottom controls bar. To fix this, I attached a click event listener to the controls bar. The event handler
Stops propagation. There is no need for the webpage's event handlers to be executed at all if the user
Is clicking on our controls bar.

* Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
* Source/WebCore/Modules/modern-media-controls/media/media-controller.js:
(MediaController):
(MediaController.prototype.handleEvent):
* Source/WebCore/dom/Document.cpp:
(WebCore::eventTargetElementForDocument):

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

Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js

@@ -76,6 +76,7 @@ class MacOSFullscreenMediaControls extends MediaControls
         this.bottomControlsBar.children = [this._leftContainer, this._centerContainer, this._rightContainer];
 
         this.bottomControlsBar.element.addEventListener("mousedown", this);
+        this.bottomControlsBar.element.addEventListener("click", this);
 
         this._backgroundClickDelegateNotifier = new BackgroundClickDelegateNotifier(this);
     }

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

@@ -57,6 +57,8 @@ class MediaController
 
         media.addEventListener("play", this);
         media.addEventListener(this.fullscreenChangeEventType, this);
+        media.addEventListener("keydown", this);
+        media.addEventListener("keyup", this);
 
         window.addEventListener("keydown", this);
 
@@ -206,14 +208,21 @@ class MediaController
             this._updateControlsIfNeeded();
             // We must immediately perform layouts so that we don't lag behind the media layout size.
             scheduler.flushScheduledLayoutCallbacks();
-        } else if (event.currentTarget === this.media) {
+        } else if (event.type === "keydown" && this.isFullscreen && event.key === " ") {
+            this.togglePlayback();
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else if (event.type === "keyup" && this.isFullscreen && event.key === " ") {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        if (event.currentTarget === this.media) {
             if (event.type === "play")
                 this.hasPlayed = true;
             this._updateControlsIfNeeded();
             this._updateControlsAvailability();
-        } else if (event.type === "keydown" && this.isFullscreen && event.key === " ") {
-            this.togglePlayback();
-            event.preventDefault();
         }
     }
 

Source/WebCore/dom/Document.cpp

@@ -8499,6 +8499,10 @@ Element* eventTargetElementForDocument(Document* document)
 {
     if (!document)
         return nullptr;
+#if ENABLE(FULLSCREEN_API)
+    if (CheckedPtr fullscreenManager = document->fullscreenManagerIfExists(); fullscreenManager && fullscreenManager->isFullscreen() && is<HTMLVideoElement>(fullscreenManager->currentFullscreenElement()))
+        return fullscreenManager->currentFullscreenElement();
+#endif
     Element* element = document->focusedElement();
     if (!element) {
         if (auto* pluginDocument = dynamicDowncast<PluginDocument>(*document))