Problem/Motivation

I have a Drupal view of videos which are displayed on a page using the OEmbed Lazyload widget. The first page of items displays just fine and operates as expected. The videos lazyload in as you scroll down and clicking on the videos triggers the video to play. However, upon moving to any of the other pages using the pager the videos no longer appear to lazyload and instead appear to already be loaded and upon clicking them you get redirected to the youtube website.

Steps to reproduce

Create a few media entities of type video and set display to use the oembed lazyload widget.
Create view of media entities of type video and set number of items to be less than total number of media entities.
Add pager and turn on use ajax.
Go to view and observe desired behavior on furst page.
Use pager and then observe buggy behaviour thereafter.

Proposed resolution

Not sure what the proposed resolution will be just yet but I will be taking a look.

Remaining tasks

N/A

User interface changes

N/A

API changes

N/A

Data model changes

N/A

CommentFileSizeAuthor
#5 3268187-ajax-io-issue.patch5.88 KBluke.leber

Issue fork oembed_lazyload-3268187

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

darren.fisher created an issue. See original summary.

d.fisher’s picture

d.fisher commented
luke.leber’s picture

luke.leber
Primary language English
Location Pennsylvania
commented
Priority: Normal » Major

Hi Darren, thanks for the bug report. I think that I see the problem.

(function (Drupal, drupalSettings) {

  let io_initialized = false;

  Drupal.behaviors.oembedLazyloadIntersectionObserver = {
    attach: function attach(context) {

      if (io_initialized) {
        return;   // <-- OUCH!  This means that any oembed content added to a page via AJAX won't get the lazy load javascript applied to it!
      }
      io_initialized = true;

If I'm correct, this means that the scope of this issue includes any implementations that:

  1. Utilize the intersection observer lazy loading method.
  2. Load content asynchronously via AJAX

Luckily, this seems like a relatively easy fix! All we have to do is skip the intersection observer creation part of the javascript instead of returning from the method entirely. I'll try to get a patch ready for testing either today or tomorrow.

Luke.Leber opened merge request !11

luke.leber’s picture

luke.leber
Primary language English
Location Pennsylvania
commented
StatusFileSize
new 3268187-ajax-io-issue.patch5.88 KB

Attached patch for testing convenience - the MR contains the canonical work.

luke.leber’s picture

luke.leber
Primary language English
Location Pennsylvania
commented
Status: Active » Needs review

  • Luke.Leber committed 7bde4d5 on 1.0.x 
    Issue #3268187 by Luke.Leber, darren.fisher: View of media items using...
luke.leber’s picture

luke.leber
Primary language English
Location Pennsylvania
commented
Status: Needs review » Fixed

Given this has been in NR status for 4 months, I'm going to merge this in and cut a 1.0.0 stable release.

Thank you for your contribution!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.