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.

Sign up for GitHub

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

Jump to bottom

vjs-record-indicator div overlays the screen in Chromium based browsers and takes over the clicks #688

Closed
restless opened this issue Jun 28, 2023 · 1 comment · Fixed by #709
Closed

vjs-record-indicator div overlays the screen in Chromium based browsers and takes over the clicks #688

restless opened this issue Jun 28, 2023 · 1 comment · Fixed by #709
Labels
bug

Comments

@restless
Copy link

restless commented Jun 28, 2023 •
edited
Loading

Description

vjs-record-indicator div overlays the screen in Chromium-based browsers and takes over the clicks. It means that when the videojs-record is used then user experience is heavily degraded as users sometimes need to click several times on an element to trigger its action.

Steps to reproduce

  1. Open https://collab-project.github.io/videojs-record/demo/audio-video.html in a Chromium based browser like Chrome or Vivaldi
  2. Add <button type="button" onclick="javascript:console.log('clicked')">Test button</button> to the page
    a) Open devtools
    b) When on the "Elements" tab select the body tag, right click it and select "Edit as HTML"
    c) Paste <button type="button" onclick="javascript:console.log('clicked')">Test button</button> just after the <body> tag.
  3. Start clicking on the button and observe the console (either switch to Console in the devtools or open Console Drawer there). You should see increasing number of the "clicked" being logged there.

Results

Not every click on the button is registered so our "clicked" text is not displayed (counted) for every click.

Expected

Every click on the button is registered so "clicked" text is displayed (counted) for every click.

Actual

What happens here is that <div class="vjs-record-indicator vjs-control vjs-hidden" dir="ltr" data-label="REC"></div> element somehow intercepts click events.

You can add simple listener to find out that it's this element:

document.onclick = function(event) {
    console.log(event.target);
};

then just start clicking on the page and observe output in the console.

The fix seems to be as simple as removing display: block!important; from the vjs-hidden class in the record-indicator.scss. I'm not sure about possible side effects of such removal though.

.vjs-record.video-js .vjs-control.vjs-record-indicator.vjs-hidden {
    display: block!important;
    opacity: 0;
    transform: translateX(1em) rotateX(-90deg) scale(0.9);
    transition: all .5s, transform .5s .25s;
}

Additional Information

Please include any additional information necessary here. Including the following:

versions

  • videojs: 8.3.0
  • videojs-record: 4.6.0

browsers

what browser(s) are affected? Make sure to test with all third-party browser extensions disabled.

  • Chromium based browsers

OSes

what platforms (operating systems and devices) are affected?

  • I believe this happens on all platforms
@restless restless changed the title vjs-record-indicator div overlays the screen in Web Kit-based browsers and takes over the clicks vjs-record-indicator div overlays the screen in Chromium based browsers and takes over the clicks Jun 29, 2023
@thijstriemstra
Copy link
Member

thijstriemstra commented Feb 14, 2024 •
edited
Loading

Thanks for the report @restless. Looks like using CSS's pointer-events to disable any clicks on the record indicator element works as well, see #709

@thijstriemstra thijstriemstra mentioned this issue Feb 14, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

ignore click events for record indicator collab-project/videojs-record
2 participants
@restless @thijstriemstra