@micromag/element-background 0.2.401 → 0.2.403

package/es/index.js

@@ -1,13 +1,14 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import React, { useMemo } from 'react';
+import React, { useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { getStyleFromColor, getOptimalImageUrl, getLayersFromBackground } from '@micromag/core/utils';
-import Video from '@micromag/element-video';
 import { getSizeWithinBounds } from '@folklore/size';
+import { useIntersectionObserver } from '@micromag/core/hooks';
+import Video from '@micromag/element-video';
 
 var styles = {"container":"micromag-element-background-container","layer":"micromag-element-background-layer","layers":"micromag-element-background-layers","video":"micromag-element-background-video","videoContainer":"micromag-element-background-videoContainer","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
 
@@ -22,7 +23,8 @@ var propTypes$1 = {
   media: PropTypes.oneOfType([PropTypes$1.imageMedia, PropTypes$1.videoMedia]),
   className: PropTypes.string,
   playing: PropTypes.bool,
-  children: PropTypes.node
+  children: PropTypes.node,
+  loadingMode: PropTypes.string
 };
 var defaultProps$1 = {
   width: null,
@@ -35,7 +37,8 @@ var defaultProps$1 = {
   media: null,
   className: null,
   playing: false,
-  children: null
+  children: null,
+  loadingMode: 'lazy'
 };
 
 var Background = function Background(_ref) {
@@ -49,7 +52,8 @@ var Background = function Background(_ref) {
       media = _ref.media,
       className = _ref.className,
       playing = _ref.playing,
-      children = _ref.children;
+      children = _ref.children,
+      loadingMode = _ref.loadingMode;
 
   var _ref2 = media || {},
       _ref2$type = _ref2.type,
@@ -65,7 +69,23 @@ var Background = function Background(_ref) {
       mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height;
 
   var isVideo = mediaType === 'video';
-  var isImage = mediaType === 'image'; // color
+  var isImage = mediaType === 'image'; // Lazy load
+
+  var _useIntersectionObser = useIntersectionObserver({
+    disabled: loadingMode !== 'lazy',
+    rootMargin: '-10px'
+  }),
+      intersectingRef = _useIntersectionObser.ref,
+      isIntersecting = _useIntersectionObser.entry.isIntersecting;
+
+  var shouldLoadRef = useRef(isIntersecting || loadingMode !== 'lazy');
+
+  if (isIntersecting && !shouldLoadRef.current) {
+    shouldLoadRef.current = isIntersecting;
+  }
+
+  var shouldLoad = shouldLoadRef.current;
+  console.log(shouldLoad, isIntersecting); // color
 
   var containerStyle = _objectSpread({
     width: width,
@@ -77,7 +97,7 @@ var Background = function Background(_ref) {
     var finalUrl = getOptimalImageUrl(isVideo ? {
       url: mediaThumbnailUrl
     } : media, width, height);
-    containerStyle.backgroundImage = finalUrl !== null ? "url(\"".concat(finalUrl, "\")") : null;
+    containerStyle.backgroundImage = finalUrl !== null && shouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
     containerStyle.backgroundRepeat = repeat ? 'repeat' : 'no-repeat';
     containerStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
 
@@ -121,9 +141,11 @@ var Background = function Background(_ref) {
     media: media,
     autoPlay: playing,
     initialMuted: true,
-    loop: true
+    loop: true,
+    preload: shouldLoad ? 'auto' : 'metadata'
   })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles.content
+    className: styles.content,
+    ref: intersectingRef
   }, children));
 };
 

package/lib/index.js

@@ -10,8 +10,9 @@ var PropTypes = require('prop-types');
 var classNames = require('classnames');
 var core = require('@micromag/core');
 var utils = require('@micromag/core/utils');
-var Video = require('@micromag/element-video');
 var size = require('@folklore/size');
+var hooks = require('@micromag/core/hooks');
+var Video = require('@micromag/element-video');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -36,7 +37,8 @@ var propTypes$1 = {
   media: PropTypes__default["default"].oneOfType([core.PropTypes.imageMedia, core.PropTypes.videoMedia]),
   className: PropTypes__default["default"].string,
   playing: PropTypes__default["default"].bool,
-  children: PropTypes__default["default"].node
+  children: PropTypes__default["default"].node,
+  loadingMode: PropTypes__default["default"].string
 };
 var defaultProps$1 = {
   width: null,
@@ -49,7 +51,8 @@ var defaultProps$1 = {
   media: null,
   className: null,
   playing: false,
-  children: null
+  children: null,
+  loadingMode: 'lazy'
 };
 
 var Background = function Background(_ref) {
@@ -63,7 +66,8 @@ var Background = function Background(_ref) {
       media = _ref.media,
       className = _ref.className,
       playing = _ref.playing,
-      children = _ref.children;
+      children = _ref.children,
+      loadingMode = _ref.loadingMode;
 
   var _ref2 = media || {},
       _ref2$type = _ref2.type,
@@ -79,7 +83,23 @@ var Background = function Background(_ref) {
       mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height;
 
   var isVideo = mediaType === 'video';
-  var isImage = mediaType === 'image'; // color
+  var isImage = mediaType === 'image'; // Lazy load
+
+  var _useIntersectionObser = hooks.useIntersectionObserver({
+    disabled: loadingMode !== 'lazy',
+    rootMargin: '-10px'
+  }),
+      intersectingRef = _useIntersectionObser.ref,
+      isIntersecting = _useIntersectionObser.entry.isIntersecting;
+
+  var shouldLoadRef = React.useRef(isIntersecting || loadingMode !== 'lazy');
+
+  if (isIntersecting && !shouldLoadRef.current) {
+    shouldLoadRef.current = isIntersecting;
+  }
+
+  var shouldLoad = shouldLoadRef.current;
+  console.log(shouldLoad, isIntersecting); // color
 
   var containerStyle = _objectSpread__default["default"]({
     width: width,
@@ -91,7 +111,7 @@ var Background = function Background(_ref) {
     var finalUrl = utils.getOptimalImageUrl(isVideo ? {
       url: mediaThumbnailUrl
     } : media, width, height);
-    containerStyle.backgroundImage = finalUrl !== null ? "url(\"".concat(finalUrl, "\")") : null;
+    containerStyle.backgroundImage = finalUrl !== null && shouldLoad ? "url(\"".concat(finalUrl, "\")") : null;
     containerStyle.backgroundRepeat = repeat ? 'repeat' : 'no-repeat';
     containerStyle.backgroundPosition = [horizontalAlign, verticalAlign].join(' ');
 
@@ -135,9 +155,11 @@ var Background = function Background(_ref) {
     media: media,
     autoPlay: playing,
     initialMuted: true,
-    loop: true
+    loop: true,
+    preload: shouldLoad ? 'auto' : 'metadata'
   })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles.content
+    className: styles.content,
+    ref: intersectingRef
   }, children));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-background",
-    "version": "0.2.401",
+    "version": "0.2.403",
     "description": "",
     "keywords": [
         "javascript"
@@ -48,8 +48,8 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.15",
-        "@micromag/core": "^0.2.401",
-        "@micromag/element-video": "^0.2.401",
+        "@micromag/core": "^0.2.403",
+        "@micromag/element-video": "^0.2.403",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -59,5 +59,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "fd03ec6d9decc9e18d6088a36e47c7b1e0e72b4c"
+    "gitHead": "7a6604651c990286e594350ef730d40772937195"
 }