Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Brightcove Video interactions not working #1290

Open
L3vi opened this issue Nov 17, 2023 · 1 comment
Open

Brightcove Video interactions not working #1290

L3vi opened this issue Nov 17, 2023 · 1 comment

Comments

@L3vi
Copy link

L3vi commented Nov 17, 2023

I don't know if this happens with other video players or if this is an existing bug, but I've found that certain features of this particular video player do not function within a flickity slider.
Specifically play/pause functions correctly but if you try to scrub through the video or adjust the volume or anything like that, it's being prevented due to the preventDefault logic that allows the click/drag motion to occur.

I found the issue of the problem is that the code checks if the clicked element is in the list of focusNodes which are specifically INPUT, TEXTAREA, or SELECT. But this doesn't account for unique cases like this where it's simply a DIV that is used for other purposes.
https://codepen.io/L3vi-the-selector/pen/dyaJYEv

@L3vi
Copy link
Author

L3vi commented Nov 17, 2023

By the way this is my temporary band-aid fix I figured out:

var focusNodes = {
    INPUT: true,
    TEXTAREA: true,
    SELECT: true
  };

  proto.pointerDownFocus = function (event) {
    var isFocusNode =
      focusNodes[event.target.nodeName] ||
      event.target.closest("[role='slider']"); // This is what was added
    if (!isFocusNode) {
      this.focus();
    }
  };

  proto._pointerDownPreventDefault = function (event) {
    var isTouchStart = event.type == "touchstart";
    var isTouchPointer = event.pointerType == "touch";
    var isFocusNode =
      focusNodes[event.target.nodeName] ||
      event.target.closest("[role='slider']"); // This is what was added
    if (!isTouchStart && !isTouchPointer && !isFocusNode) {
      event.preventDefault();
    }
  };

Don't know if there is a way to make the code more dynamic or maybe providing the users with an option to pass in some sort of query that can avoid the click prevention and the code could check if it's a focusNode OR if it's one of the user's queries? I dunno, just a thought, in the mean time I will use my band-aid fix above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant