Merge pull request #333 from BloomBooks/noSwipeOnVideoButtons

Prevent swiping pages when clicking on video buttons (BL-14021)

src/bloom-player-core.tsx

@@ -221,6 +221,24 @@ interface IPlayerPageOptions {
     hideNavigation?: boolean;
 }
 
+// capturing mouse event handler added to body to prevent clicks on certain
+// elements from being seen by Swiper. This is an independent function so that
+// it doesn't end up being added more than once, even if the code that adds it
+// runs more often.
+function handleInputMouseEvent(event: Event) {
+    if ((event.target as HTMLElement).closest(".videoControlContainer")) {
+        // Stop Swier from seeing events on these elements.
+        // Note: Swiper version 11 has a class "swiper-no-swiping" that I think can be used to
+        // achieve this, or configured with noSwipingClass or noSwipingSelector.
+        // But we're at too low a version to use that, and bringing in the latest
+        // version is non-trivial.
+        event.stopPropagation();
+        // We don't need to preventDefault to keep Swiper from moving the page,
+        // and we don't want to because I think it would stop the mousedown
+        // from eventually resulting in a click.
+    }
+}
+
 const kSelectorForPotentialNiceScrollElements =
     ".bloom-translationGroup:not(.bloom-imageDescription) .bloom-editable.bloom-visibility-code-on, " +
     ".scrollable"; // we added .scrollable for branding cases where the boilerplate text also needs to scroll
@@ -323,6 +341,27 @@ export class BloomPlayerCore extends React.Component<IProps, IState> {
             this.handleDocumentLevelClick(e)
         );
 
+        // We only need to add these body-level listeners once.
+        // I can't find any clear documentation on whether we need all of these or just the pointer ones.
+        for (const eventName of [
+            "mousedown",
+            "mousemove",
+            "pointerdown",
+            "pointermove",
+            "touchstart",
+            "touchmove"
+        ]) {
+            // The purpose of this is to prevent Swiper allowing the page to be moved or
+            // flicked when the user is trying to click on a video control.
+            // Unfortunately it does not work to put a handler on these events for the control itself.
+            // Apparently the Swiper is capturing them before they get to the choice.
+            // So we capture them at a higher level still, but only stop propagation if
+            // in one of the choices.
+            document.body.addEventListener(eventName, handleInputMouseEvent, {
+                capture: true
+            });
+        }
+
         // March 2020 - Andrew/JohnH got confused about this line because 1) we don't actually *know* the
         // previous props & state, so it's a bit bogus (but it does work), and 2) when we remove it
         // everything still works (but there could well be some state that we didn't test). So we're leaving