diff --git a/src/bloom-player-core.tsx b/src/bloom-player-core.tsx index 2c7b7e48..1e6e9490 100644 --- a/src/bloom-player-core.tsx +++ b/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 { 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