react-lazy-media - npm Package Compare versions

Comparing version 0.2.7 to 0.3.0

lib/components/LazyBackground/LazyBackground.js

@@ -63,9 +63,3 @@ "use strict";
     value: function componentDidMount() {
-      _ReactLazyMedia.ReactLazyMedia.getInstance().update();
-    } // Update lazyLoad after re-rendering of every image
-
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      _ReactLazyMedia.ReactLazyMedia.getInstance().update();
+      _ReactLazyMedia.ReactLazyMedia.getInstance();
     }
@@ -78,8 +72,11 @@ }, {
           id = _this$props.id,
-          src = _this$props.src;
-      return _react["default"].createElement("div", {
-        className: _classnames["default"].apply(void 0, ['lazy'].concat(_toConsumableArray(classes))),
-        id: id,
-        "data-bg": "url(".concat(src, ")")
-      }, this.props.children);
+          src = _this$props.src,
+          backgroundClass = _this$props.backgroundClass;
+      var css = ".".concat(backgroundClass, ".lazy-bg-loaded {\n                    background: url(\"").concat(src, "\")\n                }");
+      return (//TODO: Revisit this to remove the extra dom elements
+        _react["default"].createElement("div", null, _react["default"].createElement("style", null, css), _react["default"].createElement("div", {
+          className: _classnames["default"].apply(void 0, ['lazy-bg'].concat(_toConsumableArray(classes), [backgroundClass])),
+          id: id
+        }, this.props.children))
+      );
     }
@@ -96,2 +93,3 @@ }]);
   id: _propTypes["default"].string,
+  backgroundClass: _propTypes["default"].string.isRequired,
   src: _propTypes["default"].string.isRequired
@@ -98,0 +96,0 @@ });

lib/components/LazyIframe/LazyIframe.js

@@ -61,11 +61,4 @@ "use strict";
     key: "componentDidMount",
-    // Update lazyLoad after first rendering of every iframe
     value: function componentDidMount() {
-      _ReactLazyMedia.ReactLazyMedia.getInstance().update();
-    } // Update lazyLoad after re-rendering of every iframe
-
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      _ReactLazyMedia.ReactLazyMedia.getInstance().update();
+      _ReactLazyMedia.ReactLazyMedia.getInstance();
     }
@@ -72,0 +65,0 @@ }, {

lib/components/LazyImage/LazyImage.js

@@ -61,11 +61,4 @@ "use strict";
     key: "componentDidMount",
-    // Update lazyLoad after first rendering of every image
     value: function componentDidMount() {
-      _ReactLazyMedia.ReactLazyMedia.getInstance().update();
-    } // Update lazyLoad after re-rendering of every image
-
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      _ReactLazyMedia.ReactLazyMedia.getInstance().update();
+      _ReactLazyMedia.ReactLazyMedia.getInstance();
     }
@@ -72,0 +65,0 @@ }, {

lib/components/LazyVideo/LazyVideo.js

@@ -63,12 +63,5 @@ "use strict";
     value: function componentDidMount() {
-      _ReactLazyMedia.ReactLazyMedia.getInstance().update();
-    } // Update lazyLoad after re-rendering of every image
-
+      _ReactLazyMedia.ReactLazyMedia.getInstance();
+    }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      _ReactLazyMedia.ReactLazyMedia.getInstance().update();
-    } // TODO - Add dynamic support for other video sources
-
-  }, {
     key: "render",
@@ -88,2 +81,9 @@ value: function render() {
           loop = _this$props.loop;
+      var mediaType = src.split('.').pop(); //Only supporting mp4 and webm (for now?)
+
+      if (mediaType !== 'mp4' && mediaType !== 'webm') {
+        return null;
+      } //TODO: Add support for autoplaying videos
+
+
       return _react["default"].createElement("video", {
@@ -94,4 +94,3 @@ className: _classnames["default"].apply(void 0, ['lazy'].concat(_toConsumableArray(classes))),
         height: height,
-        "data-src": src,
-        poster: poster,
+        "data-poster": poster,
         controls: controls,
@@ -104,3 +103,3 @@ autoPlay: autoplay,
         src: src,
-        type: "video/mp4"
+        type: "video/".concat(mediaType)
       }));
@@ -107,0 +106,0 @@ }

lib/components/LazyWebpPicture/LazyWebpPicture.js

@@ -65,9 +65,3 @@ "use strict";
     value: function componentDidMount() {
-      _ReactLazyMedia.ReactLazyMedia.getInstance().update();
-    } // Update lazyLoad after re-rendering of every image
-
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      _ReactLazyMedia.ReactLazyMedia.getInstance().update();
+      _ReactLazyMedia.ReactLazyMedia.getInstance();
     } // Fallback to src if webp failed to load.
@@ -74,0 +68,0 @@

lib/ReactLazyMedia.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _yallJs = _interopRequireDefault(require("yall-js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -21,6 +23,2 @@
 
-if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-  var LazyLoad = require('vanilla-lazyload');
-}
-
 var ReactLazyMedia =
@@ -30,4 +28,2 @@ /*#__PURE__*/
   function ReactLazyMedia() {
-    var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '.lazy';
-
     _classCallCheck(this, ReactLazyMedia);
@@ -44,5 +40,5 @@
     var config = {
-      elements_selector: selector
+      threshold: 300
     };
-    ReactLazyMedia.instance = new LazyLoad(config);
+    ReactLazyMedia.instance = (0, _yallJs["default"])(config);
   }
@@ -49,0 +45,0 @@

package.json

 {
   "name": "react-lazy-media",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "Lazy load image, picture, video, and iframe media React components",
@@ -41,3 +41,3 @@ "main": "lib/index.js",
     "prop-types": "^15.7.2",
-    "vanilla-lazyload": "^12.0.0"
+    "yall-js": "^3.1.5"
   },
@@ -44,0 +44,0 @@ "peerDependencies": {

README.md

@@ -7,3 +7,3 @@ ## react-lazy-media
 
-Lazy load image, picture, video, and iframe media React components. react-lazy-media uses [vanilla-lazyload](https://github.com/verlok/lazyload) under the hood to handle lazy loading.
+Lazy load image, picture, video, and iframe media React components. react-lazy-media uses [yall-js](https://github.com/malchata/yall.js) under the hood to handle lazy loading.
 
@@ -10,0 +10,0 @@ Polyfilled with the [Intersection Observer Polyfill](https://www.npmjs.com/package/intersection-observer)

No alert changes

Worsened metrics

Total package byte prevSize

42307

-1.81%

Lines of code

494

-4.45%

Dependency changes

• + Added

  yall-js@^3.1.5

• + Added

  yall-js@3.2.0
  (transitive)

• - Removed

  vanilla-lazyload@^12.0.0

• - Removed

  vanilla-lazyload@12.5.1
  (transitive)