Skip to content

click2load filters breaks ListenBrainz' YouTube embedded player #253

@gandbg

Description

@gandbg

Prerequisites

I tried to reproduce the issue when...

  • uBO is the only extension
  • uBO with default lists/settings
  • using a new, unmodified browser profile

Specific URL(s) where the issue occurs

https://listenbrainz.org/album/7475f419-fcfc-4d19-b717-c7afc62f92e4/

Description

The click2load filter list seems to break ListenBrainz' YouTube embedded player, making it impossible to listen to any song directly.

The problem goes away with the list disabled.

Steps to Reproduce

  1. Open any release, track or playlist page
  2. Try to play any track

Logger Output

<details><summary>Logger output</summary>

| | | | | | | | | |
|:--- |:--- |:--- |:--- |:--- |:--- |:--- |:--- |:--- |
| +16 | `` |  | listenbrainz.org | 1 | get | xhr | `https://api.listenbrainz.org/1/internet_archive/search?track=Solitaire+Clear&artist=Merneg` |
| +16 | `` |  | listenbrainz.org | 1 | get | xhr | `https://api.listenbrainz.org/1/internet_archive/search?track=Game+Over&artist=Merneg` |
| +16 | `` |  | listenbrainz.org | 1 | get | xhr | `https://api.listenbrainz.org/1/internet_archive/search?track=Level+Clear&artist=Merneg` |
| +15 | `` |  | listenbrainz.org | 1 | get | xhr | `https://api.listenbrainz.org/1/internet_archive/search?track=Practice&artist=Merneg` |
| +13 | `` |  | listenbrainz.org | 1 | get | xhr | `https://api.listenbrainz.org/1/internet_archive/search?track=Title+Theme&artist=Merneg` |
| +12 | `` |  | listenbrainz.org | 1 | get | xhr | `https://api.listenbrainz.org/1/internet_archive/search?track=Title+Theme&artist=Merneg` |
| +11 | `click2load.html` | << | listenbrainz.org | 3 | get | frame | `https://www.youtube.com/embed/?controls=0&showinfo=0&fs=0&iv_load_policy=3&modestbranding=1&rel=0&origin=https%3A%2F%2Flistenbrainz.org&enablejsapi=1&widgetid=1&forigin=https%3A%2F%2Flistenbrainz.org%2Falbum%2F7475f419-fcfc-4d19-b717-c7afc62f92e4%2F&aoriginsup=0&vf=1` |
| +11 | `\|\|youtube.com^$frame,3p,redirect-rule=click2load.html,from=~bing.com\|~chatreplay.stream\|~duckduckgo.com\|~google.com\|~songsterr.com\|~thebluealliance.com\|~theguardian.com\|~video.search.yahoo.com\|~w2g.tv` | -- | listenbrainz.org | 3 | get | frame | `https://www.youtube.com/embed/?controls=0&showinfo=0&fs=0&iv_load_policy=3&modestbranding=1&rel=0&origin=https%3A%2F%2Flistenbrainz.org&enablejsapi=1&widgetid=1&forigin=https%3A%2F%2Flistenbrainz.org%2Falbum%2F7475f419-fcfc-4d19-b717-c7afc62f92e4%2F&aoriginsup=0&vf=1` |
| +11 | `\|\|youtube.com^$frame,3p,from=~bing.com\|~chatreplay.stream\|~duckduckgo.com\|~google.com\|~songsterr.com\|~thebluealliance.com\|~theguardian.com\|~video.search.yahoo.com\|~w2g.tv` | -- | listenbrainz.org | 3 | get | frame | `https://www.youtube.com/embed/?controls=0&showinfo=0&fs=0&iv_load_policy=3&modestbranding=1&rel=0&origin=https%3A%2F%2Flistenbrainz.org&enablejsapi=1&widgetid=1&forigin=https%3A%2F%2Flistenbrainz.org%2Falbum%2F7475f419-fcfc-4d19-b717-c7afc62f92e4%2F&aoriginsup=0&vf=1` |
| +11 | `` |  | listenbrainz.org | 3 | get | script | `https://youtube-ui.l.google.com/` | `aliasURL=https://www.youtube.com/s/player/89e685a2/www-widgetapi.vflset/www-widgetapi.js` |
| +11 | `` |  | listenbrainz.org | 3 | get | script | `https://www.youtube.com/s/player/89e685a2/www-widgetapi.vflset/www-widgetapi.js` |
| +11 | `` |  | listenbrainz.org | 3 | get | script | `https://youtube-ui.l.google.com/` | `aliasURL=https://www.youtube.com/iframe_api` |
| +11 | `` |  | listenbrainz.org | 3 | get | script | `https://www.youtube.com/iframe_api` |
| +11 | `click2load.html` | << | listenbrainz.org | 3 | get | frame | `https://w.soundcloud.com/player/?auto_play=false` |
| +11 | `\|\|w.soundcloud.com/player/$frame,3p,redirect-rule=click2load.html` | -- | listenbrainz.org | 3 | get | frame | `https://w.soundcloud.com/player/?auto_play=false` |
| +11 | `* * 3p-frame block` | -- | listenbrainz.org | 3 | get | frame | `https://w.soundcloud.com/player/?auto_play=false` |
| +4 | `` |  | listenbrainz.org | 3 | get | image | `https://dn710006.ca.archive.org/0/items/mbid-9a42f932-6f39-4853-8233-bc33b041a46c/mbid-9a42f932-6f39-4853-8233-bc33b041a46c-42480831272_thumb250.jpg` |
| +4 | `` |  | listenbrainz.org | 3 | get | image | `https://archive.org/download/mbid-9a42f932-6f39-4853-8233-bc33b041a46c/mbid-9a42f932-6f39-4853-8233-bc33b041a46c-42480831272_thumb250.jpg` |
| +3 | `` |  | listenbrainz.org | 3 | get | xhr | `https://dn710006.ca.archive.org/0/items/mbid-9a42f932-6f39-4853-8233-bc33b041a46c/index.json` |
| +3 | `` |  | listenbrainz.org | 3 | get | image | `https://dn710006.ca.archive.org/0/items/mbid-9a42f932-6f39-4853-8233-bc33b041a46c/mbid-9a42f932-6f39-4853-8233-bc33b041a46c-42480831272_thumb500.jpg` |
| +2 | `` |  | listenbrainz.org | 3 | get | xhr | `https://archive.org/download/mbid-9a42f932-6f39-4853-8233-bc33b041a46c/index.json` |
| +2 | `` |  | listenbrainz.org | 3 | get | xhr | `https://coverartarchive.org/release/9a42f932-6f39-4853-8233-bc33b041a46c` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/logo_big.svg` |
| +2 | `` |  | listenbrainz.org | 3 | get | xhr | `https://critiquebrainz.org/ws/1/review/?limit=5&entity_id=7475f419-fcfc-4d19-b717-c7afc62f92e4&entity_type=release_group` |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ pagehide ⁝ ] Prevented: pagehide
function () {
    const args = Array.prototype.slice.call(arguments);

    try {
      if (before && typeof before === 'function') {
        before.apply(this, arguments);
      }

      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
      const wrappedArguments = args.map((arg) => wrap(arg, options));

      // Attempt to invoke user-land function
      // NOTE: If you are a Sentry user, and you are seeing this stack frame, it
      //       means the sentry.javascript SDK caught an error invoking your application code. This
      //       is expected behavior and NOT indicative of a bug with sentry.javascript.
      return fn.apply(this, wrappedArguments);
    } catch (ex) {
      ignoreNextOnError();

      currentScopes_withScope(scope => {
        scope.addEventProcessor(event => {
          if (options.mechanism) {
            addExceptionTypeValue(event, undefined, undefined);
            addExceptionMechanism(event, options.mechanism);
          }

          event.extra = {
            ...event.extra,
            arguments: args,
          };

          return event;
        });

        captureException(ex);
      });

      throw ex;
    }
  }
window` | info | scriptlet |
| +2 | `` |  | listenbrainz.org | 3 | get | font | `https://fonts.gstatic.com/s/sintony/v17/XoHj2YDqR7-98cVUGYgIr9AJkw.woff2` |
| +2 | `` |  | listenbrainz.org | 3 | get | font | `https://fonts.gstatic.com/s/roboto/v50/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/meb-icons/MetaBrainz.svg` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/meb-icons/CoverArtArchive.svg` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/meb-icons/AcousticBrainz.svg` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/meb-icons/BookBrainz.svg` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/meb-icons/Picard.svg` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/meb-icons/CritiqueBrainz.svg` |
| +2 | `` |  | listenbrainz.org | 3 | get | xhr | `https://critiquebrainz.org/ws/1/review/?limit=5&entity_id=7475f419-fcfc-4d19-b717-c7afc62f92e4&entity_type=release_group` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/listenbrainz-logo.svg` |
| +2 | `` |  | listenbrainz.org | 3 | get | image | `https://archive.org/download/mbid-9a42f932-6f39-4853-8233-bc33b041a46c/mbid-9a42f932-6f39-4853-8233-bc33b041a46c-42480831272_thumb500.jpg` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/listenbrainz_logo_icon.svg` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/navbar_logo.svg` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/listenbrainz-logo.svg` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/5258.ff18ef7e6f4a6ba7df99.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/4140.953f54ab8d2e1452b04d.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/meb-icons/MusicBrainz.svg` |
| +2 | `` |  | listenbrainz.org | 3 | get | image | `https://archive.org/download/mbid-9a42f932-6f39-4853-8233-bc33b041a46c/mbid-9a42f932-6f39-4853-8233-bc33b041a46c-42480831272_thumb500.jpg` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/listenbrainz_logo_icon.svg` |
| +2 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/navbar_logo.svg` |
| +2 | `` |  | listenbrainz.org | 1 | post | xhr | `https://listenbrainz.org/album/7475f419-fcfc-4d19-b717-c7afc62f92e4/` |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ visibilitychange ⁝ ] Prevented: visibilitychange
function () {
    const args = Array.prototype.slice.call(arguments);

    try {
      if (before && typeof before === 'function') {
        before.apply(this, arguments);
      }

      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
      const wrappedArguments = args.map((arg) => wrap(arg, options));

      // Attempt to invoke user-land function
      // NOTE: If you are a Sentry user, and you are seeing this stack frame, it
      //       means the sentry.javascript SDK caught an error invoking your application code. This
      //       is expected behavior and NOT indicative of a bug with sentry.javascript.
      return fn.apply(this, wrappedArguments);
    } catch (ex) {
      ignoreNextOnError();

      currentScopes_withScope(scope => {
        scope.addEventProcessor(event => {
          if (options.mechanism) {
            addExceptionTypeValue(event, undefined, undefined);
            addExceptionMechanism(event, options.mechanism);
          }

          event.extra = {
            ...event.extra,
            arguments: args,
          };

          return event;
        });

        captureException(ex);
      });

      throw ex;
    }
  }
window` | info | scriptlet |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/6700.12a3e9fe7fb370958ace.js` |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ pagehide ⁝ ] Prevented: pagehide
function () {
    const args = Array.prototype.slice.call(arguments);

    try {
      if (before && typeof before === 'function') {
        before.apply(this, arguments);
      }

      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
      const wrappedArguments = args.map((arg) => wrap(arg, options));

      // Attempt to invoke user-land function
      // NOTE: If you are a Sentry user, and you are seeing this stack frame, it
      //       means the sentry.javascript SDK caught an error invoking your application code. This
      //       is expected behavior and NOT indicative of a bug with sentry.javascript.
      return fn.apply(this, wrappedArguments);
    } catch (ex) {
      ignoreNextOnError();

      currentScopes_withScope(scope => {
        scope.addEventProcessor(event => {
          if (options.mechanism) {
            addExceptionTypeValue(event, undefined, undefined);
            addExceptionMechanism(event, options.mechanism);
          }

          event.extra = {
            ...event.extra,
            arguments: args,
          };

          return event;
        });

        captureException(ex);
      });

      throw ex;
    }
  }
window` | info | scriptlet |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ visibilitychange ⁝ ] Prevented: visibilitychange
() => {
      const activeSpan = getActiveSpan();
      if (!activeSpan) {
        return;
      }

      const rootSpan = getRootSpan(activeSpan);

      if (helpers_WINDOW.document.hidden && rootSpan) {
        const cancelledStatus = 'cancelled';

        const { op, status } = spanUtils_spanToJSON(rootSpan);

        if (npm_esm_debug_build_DEBUG_BUILD) {
          logger_logger.log(`[Tracing] Transaction: ${cancelledStatus} -> since tab moved to the background, op: ${op}`);
        }

        // We should not set status if it is already set, this prevent important statuses like
        // error or data loss from being overwritten on transaction.
        if (!status) {
          rootSpan.setStatus({ code: spanstatus_SPAN_STATUS_ERROR, message: cancelledStatus });
        }

        rootSpan.setAttribute('sentry.cancellation_reason', 'document.hidden');
        rootSpan.end();
      }
    }
document` | info | scriptlet |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ visibilitychange ⁝ ] Prevented: visibilitychange
() => {
        if (helpers_WINDOW.document.visibilityState === 'hidden') {
          this._flushOutcomes();
        }
      }
document` | info | scriptlet |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ pagehide ⁝ ] Prevented: pagehide
(event) => {
    if (event.type === 'pagehide' \|\| (types_WINDOW.document && types_WINDOW.document.visibilityState === 'hidden')) {
      cb(event);
    }
  }
?` | info | scriptlet |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ visibilitychange ⁝ ] Prevented: visibilitychange
(event) => {
    if (event.type === 'pagehide' \|\| (types_WINDOW.document && types_WINDOW.document.visibilityState === 'hidden')) {
      cb(event);
    }
  }
?` | info | scriptlet |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ pagehide ⁝ ] Prevented: pagehide
(event) => {
    if (event.type === 'pagehide' \|\| (types_WINDOW.document && types_WINDOW.document.visibilityState === 'hidden')) {
      cb(event);
    }
  }
?` | info | scriptlet |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ visibilitychange ⁝ ] Prevented: visibilitychange
(event) => {
    if (event.type === 'pagehide' \|\| (types_WINDOW.document && types_WINDOW.document.visibilityState === 'hidden')) {
      cb(event);
    }
  }
?` | info | scriptlet |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ pagehide ⁝ ] Prevented: pagehide
(event) => {
    if (event.type === 'pagehide' \|\| (types_WINDOW.document && types_WINDOW.document.visibilityState === 'hidden')) {
      cb(event);
    }
  }
?` | info | scriptlet |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ visibilitychange ⁝ ] Prevented: visibilitychange
(event) => {
    if (event.type === 'pagehide' \|\| (types_WINDOW.document && types_WINDOW.document.visibilityState === 'hidden')) {
      cb(event);
    }
  }
?` | info | scriptlet |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/7675.a62abc5febf21c81aca8.js` |
| +2 | `[listenbrainz.org][prevent-addEventListener ⁝ visibilitychange ⁝ ] Prevented: visibilitychange
(event) => {
  // If the document is 'hidden' and no previous hidden timestamp has been
  // set, update it based on the current event data.
  if (types_WINDOW.document.visibilityState === 'hidden' && firstHiddenTime > -1) {
    // If the event is a 'visibilitychange' event, it means the page was
    // visible prior to this change, so the event timestamp is the first
    // hidden time.
    // However, if the event is not a 'visibilitychange' event, then it must
    // be a 'prerenderingchange' event, and the fact that the document is
    // still 'hidden' from the above check means the tab was activated
    // in a background state and so has always been hidden.
    firstHiddenTime = event.type === 'visibilitychange' ? event.timeStamp : 0;

    // Remove all listeners now that a `firstHiddenTime` value has been set.
    removeEventListener('visibilitychange', onVisibilityUpdate, true);
    removeEventListener('prerenderingchange', onVisibilityUpdate, true);
  }
}
?` | info | scriptlet |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/3829.ff03107b9bc1c9a3b807.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/4620.32c02b35aa00d1f603bb.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/8680.cbe9c085d61d193d23a4.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/8210.3c39261bc9a2fafc7eb2.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/9306.9c1947192439a20beafd.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/9418.bd61fc6f8dc516ebd3ab.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/4660.6e5c3dfabed1e783ca56.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/1098.58951106fea26691cc74.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/3783.6665db2450f12012140f.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/4148.a109fa94eaf2b708d7f4.js` |
| +2 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/8060.6bd45492397310054821.js` |
| +1 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/favicon-16.png` |
| +1 | `` |  | listenbrainz.org | 1 | get | image | `https://listenbrainz.org/static/img/favicon-256.png` |
| +0 | `` |  | listenbrainz.org | 3 | get | font | `https://fonts.gstatic.com/s/sintony/v17/XoHm2YDqR7-98cVUETMtug.woff2` |
| +0 | `` |  | listenbrainz.org | 3 | get | css | `https://fonts.googleapis.com/css?family=Roboto:100,400,300,700\|Sintony:200,400,700&subset=latin,latin-ext,cyrillic,cyrillic-ext` |
| +0 | `##+js(addEventListener-defuser, pagehide)` |  | listenbrainz.org |  | get | scriptlet | `https://listenbrainz.org/album/7475f419-fcfc-4d19-b717-c7afc62f92e4/` |
| +0 | `##+js(addEventListener-defuser, visibilitychange)` |  | listenbrainz.org |  | get | scriptlet | `https://listenbrainz.org/album/7475f419-fcfc-4d19-b717-c7afc62f92e4/` |
| +0 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/dist/indexPage.e47f3272f6844f39cf1d.js` |
| +0 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/js/lib/dragscroll.js` |
| +0 | `` |  | listenbrainz.org | 1 | get | script | `https://listenbrainz.org/static/js/lib/bootstrap.bundle.min.js` |
| +0 | `` |  | listenbrainz.org | 1 | get | css | `https://listenbrainz.org/static/dist/main.b713d82e23bc3be3879c.css` |
| +0 | `` |  | listenbrainz.org | 1 | get | css | `https://listenbrainz.org/static/dist/vendors.84ae736771c1f32e3511.css` |
| +0 | `` |  | listenbrainz.org | 1 | get | doc | `https://listenbrainz.org/album/7475f419-fcfc-4d19-b717-c7afc62f92e4/` |
| +0 | `` |  | listenbrainz.org | 1 | get | doc | `https://listenbrainz.org/album/7475f419-fcfc-4d19-b717-c7afc62f92e4/` |
</details>

Expected behavior

The chosen track is able to play

Actual behavior

The chosen track is not able to play and ListenBrainz tries to skip it and go to the next, looping the error

uBlock Origin version

1.67.0

Browser name and version

Firefox 145.0.2

Operating System and version

Windows 10 21H2

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions