bulbs-video lazy loading

[kand]

Implement loadOnDemand wrapper for bulbs-video to lazy load video elements.

Release Type: patch
No large-scale new features, updates should not be breaking.

Updates

1. bulbs-video now implements loadOnDemand for lazy loading. Lazy loading will occur by default. If this behavior is not necessary for a particular bulbs-video, give the element the disable-lazy-loading attribute to prevent lazy loading.
2. Stage 2 features for babel activated.

[kand]

Final Fix for video autoplay (don't use iframe)

[kand]

Allows us to use object spread provided in current es-next Stage 3; babel, for some reason, is currently providing this in stage-2.

let a = {'one': 1};
let b = {'two': 2};
let c = {...a, ...b};
console.log(c);
// outputs: {'one': 1, 'two': 2}

[kand]

A helpful note.

[kand]

This is the main change. If the bulbs-video instance has not been provided a disable-lazy-loading property, the video element will be subject to lazy loading.

[kand]

Moved this into each context that needs it since we want to delay this instantiation in lazy load tests.

[kand]

@collin is this the best way we can test this? Doesn't seem to be the best way to do this, but it works.

[collin]

Yeah, I'm not sure of a better way either.

[kand]

Per @collin, this property is no longer used and was throwing errors during tests.

[kand]

@collin @daytonn @spra85 please review.

[collin]

Please ask resolve @MichaelButkovic to resolve @spra85's merge conflicts.

[spra85]

@kand, pulled down the branch and ran the example and I see both requests for clickhole.json firing on page load. Should we be waiting to dispatch the request for the video metadata until it's in view?

[collin]

Ah, bit of a trick that.

We could extend the loadOnDemand wrapper to check on thedisableLazyLoading` prop.

Changing this:

export default function loadOnDemand (component) {
  const wrapped = (props) => { // eslint-disable-line react/no-multi-comp
    return (
      <LoadOnDemand
        component={component}
        componentProps={props}
      />
    );
  };

...to something like:

export default function loadOnDemand (Component) {
  const wrapped = (props) => { // eslint-disable-line react/no-multi-comp
    if (props. disableLazyLoading) {
      return <Component ...props/>;
    }
    return (
      <LoadOnDemand
        component={Component}
        componentProps={props}
      />
    );
  };

Then the bulb-video definition could change to someting like:

registerReactElement('bulbs-video', loadOnDemand(BulbsVideo);

[kand]

@collin @spra85 that'll work, that way the disable lazy loading code/attribute will be reusable. I'll implement that solution with tests.

[collin]

👍

[kand]

@collin @spra85 @daytonn alright, ready for review again.