Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

88
Visualizações
Not able to capture click event on Netflix seek bar

I have a chrome extension that relies on detecting click event on seek bar of Netflix. The div ([data-uia=timeline-bar]) is added dynamically to dom once user hovers over the video player, so I tried to use event bubbling to listen to the event.

    //after injecting jquery on page 
    $('body').on('click','[data-uia=timeline-bar]',function(e){
        console.log('click detected');
    })

It didn't work out so I tried to add listener at capture phase. All click events are being detected but the seek bar click.

document.addEventListener('click',
(e) => {console.log('click detected during capture phase')}
,true);

Is there a way to listen to the click event on ([data-uia=timeline-bar])?

Netflix screenshot

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Add a MutationObserver to the parent of the [data-uia=timeline-bar] element that observes when its children changes e.g. timeline-bar is added? and in the callback you attach a listener once the timeline-bar element is added?

// The timeline-bar's parent's data-uia is "timeline" in the Netflix player DOM.

let parent = document.querySelector("[data-uia=timeline]"),
    options = {
      childList: true
    },
    observer = new MutationObserver(mCallback);

observer.observe(parent, options);

function mCallback (mutations) {
  for (let mutation of mutations) {
    if (mutation.type === 'childList') { 
      for(let node of mutation.addedNodes){
        if(node.getAttribute("data-uia") === "timeline-bar"){
           node.addEventListener('click', () => {
             alert("clicked");
            // Do click stuff...
           });
        }
      }
    }
  }
}

// To test the observer
btnAttr.addEventListener('click', function () {
  let el = document.createElement("div");
  el.setAttribute("data-uia", "timeline-bar");
  el.innerText = "A TIMELINE-BAR";
  parent.appendChild(el);
}, false);

codepen here: https://codepen.io/freedruk/pen/powaKBy

about 4 years ago · Juan Pablo Isaza Relatório

0

Indeed, your goal needs hard work, as dom elements are created and deleted permanently. The only approach I can propose can certainly be considered as dirty, but you can try it at least ;)

$("[data-uia='player']").on("DOMSubtreeModified", function(){
    const ref = "div[data-uia='timeline-knob']";

    if($(ref)){
        $(ref).off("mouseover").on("mouseover", function(event){
            const that = $(this);
            const previousSibling = event.target.previousSibling;

            if(previousSibling.style.left){
                console.log("Click presumed");
            }
            else {
                console.log("released");
            }
        });
    };
});

The trick is to observe the timeline-knob object, and analyse the situation upon the previous sibling div, because some repaints occur when the mouse is over the timeline.

It's just a workaround, I hope this can help you :) Have a nice day !

[EDIT 1]

A more elegant way :

const ref = "div[data-uia='timeline'].active";
const onclick = (e) => {
    console.log("clicked on", e);
};
const prepare = (obj, e) => {
    $(e.target).css("pointer-events","auto").css("border", "0.1px solid rgba(255,255,255,0)");
    $(obj).off("click.test").on("click.test", (clickevent) => {onclick(clickevent.target);});
};

$("[data-uia='player']").on("DOMSubtreeModified", function(modevent){
    $(ref).each(() => {
        prepare(ref,modevent);
    });
});

I had to face several difficulties :

  1. even the "timeline" node is regenerated, so we to attach the "click" event to it at each "player" modification
  2. basically, we often have to click on empty divs (for example exactly on the timeline), and then no "click" event is fired, so we apply an almost invisible layout to it to force the browser consider it as a clickable node.
  3. and not the least one : Netflix uses the "pointer-events" css property to some block "click" events, so we have to fix it back to "auto"

I tested this code several times and it seems working fine ;)

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda