@micromag/element-visual 0.3.803 → 0.3.811

package/es/index.js

@@ -6,12 +6,13 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useMemo, useCallback } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { useIsVisible } from '@micromag/core/hooks';
 import Image from '@micromag/element-image';
 import Video from '@micromag/element-video';
 
 var styles = {"container":"micromag-element-visual-container","videoContainer":"micromag-element-visual-videoContainer","videoTag":"micromag-element-visual-videoTag","videoTouchOverlay":"micromag-element-visual-videoTouchOverlay"};
 
-var _excluded = ["media", "mediaRef", "width", "height", "resolution", "objectFit", "playing", "muted", "shouldLoad", "videoLoop", "videoInitialMuted", "onLoaded", "className", "imageClassName", "videoClassName", "withoutVideo", "qualityStartLevel", "onQualityLevelChange"];
+var _excluded = ["media", "mediaRef", "width", "height", "resolution", "objectFit", "playing", "muted", "loadingMode", "shouldLoad", "videoLoop", "videoInitialMuted", "onLoaded", "className", "imageClassName", "videoClassName", "withoutVideo", "qualityStartLevel", "onQualityLevelChange"];
 var propTypes = {
   media: PropTypes$1.media,
   mediaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
@@ -25,6 +26,7 @@ var propTypes = {
   playing: PropTypes.bool,
   muted: PropTypes.bool,
   shouldLoad: PropTypes.bool,
+  loadingMode: PropTypes.string,
   videoLoop: PropTypes.bool,
   withoutVideo: PropTypes.bool,
   videoInitialMuted: PropTypes.bool,
@@ -44,6 +46,7 @@ var defaultProps = {
   objectFit: null,
   playing: true,
   muted: true,
+  loadingMode: null,
   shouldLoad: true,
   videoLoop: true,
   withoutVideo: false,
@@ -64,6 +67,7 @@ var Visual = function Visual(_ref) {
     objectFit = _ref.objectFit,
     playing = _ref.playing,
     muted = _ref.muted,
+    loadingMode = _ref.loadingMode,
     shouldLoad = _ref.shouldLoad,
     videoLoop = _ref.videoLoop;
     _ref.videoInitialMuted;
@@ -88,6 +92,15 @@ var Visual = function Visual(_ref) {
       media: media
     });
   }, [props, media]);
+  var isLazyLoading = loadingMode === 'lazy';
+  var _useIsVisible = useIsVisible({
+      rootMargin: '200px',
+      persist: true,
+      disabled: !isLazyLoading
+    }),
+    refVisible = _useIsVisible.ref,
+    isVisible = _useIsVisible.visible;
+  var finalShouldLoad = (!isLazyLoading || isVisible) && shouldLoad;
   var imageElProps = useMemo(function () {
     var tmpProps = (!shouldLoad || withoutVideo) && isVideo ? _objectSpread(_objectSpread({}, elProps), {}, {
       media: {
@@ -133,11 +146,13 @@ var Visual = function Visual(_ref) {
     }
   }, []);
   return type !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, type === 'image' || !shouldLoad || withoutVideo ? /*#__PURE__*/React.createElement(Image, Object.assign({}, imageElProps, {
+    ref: refVisible,
+    loadingMode: loadingMode !== 'lazy' ? 'lazy' : null,
     objectFit: objectFit,
     width: width,
     height: height,
     resolution: resolution,
-    shouldLoad: shouldLoad,
+    shouldLoad: finalShouldLoad,
     onLoaded: onLoaded,
     className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
     imageClassName: imageClassName
@@ -146,7 +161,8 @@ var Visual = function Visual(_ref) {
     style: {
       width: width,
       height: height
-    }
+    },
+    ref: refVisible
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.videoContainer, _defineProperty({}, videoClassName, videoClassName !== null)]),
     style: videoContainerStyle
@@ -158,7 +174,7 @@ var Visual = function Visual(_ref) {
     paused: !playing,
     muted: muted,
     loop: videoLoop,
-    shouldLoad: shouldLoad,
+    shouldLoad: finalShouldLoad,
     onReady: onLoaded,
     autoPlay: true,
     qualityStartLevel: qualityStartLevel,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-visual",
-    "version": "0.3.803",
+    "version": "0.3.811",
     "private": false,
     "description": "",
     "keywords": [
@@ -60,9 +60,9 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.803",
-        "@micromag/element-image": "^0.3.803",
-        "@micromag/element-video": "^0.3.803",
+        "@micromag/core": "^0.3.811",
+        "@micromag/element-image": "^0.3.811",
+        "@micromag/element-video": "^0.3.811",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "uuid": "^9.0.0"
@@ -71,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "b8d7486367da5144fa0824e48527c44aa4123ddf"
+    "gitHead": "80a754e5a50e86fa1e195015112ea0ff39008da8"
 }