lazyvids - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0

dist/lazyvids.es5.min.js

@@ -1,1 +0,1 @@
-"use strict";(function(configObj){if(window.NodeList&&!NodeList.prototype.forEach){NodeList.prototype.forEach=Array.prototype.forEach}document.addEventListener("DOMContentLoaded",(function(){var config={logLevel:configObj&&configObj.logLevel?configObj.logLevel:"silent",ignoreHidden:configObj&&configObj.ignoreHidden?configObj.ignoreHidden:false,minBandwidth:configObj&&configObj.minBandwidth?Number.parseFloat(configObj.minBandwidth):0,reduceData:configObj&&configObj.reduceData?configObj.reduceData:false,requirePoster:configObj&&configObj.requirePoster?configObj.requirePoster:true};var log=function log(message,object){if(config.logLevel!=="verbose")return;object?window.console.log("lazyvids: ".concat(message),object):window.console.log("lazyvids: ".concat(message))};var warn=function warn(message,object){if(config.logLevel==="silent")return;object?window.console.warn("lazyvids: ".concat(message),object):window.console.warn("lazyvids: ".concat(message))};var hasIo=typeof window.IntersectionObserver==="function";var intersectionObserver;if(config.reduceData&&config.minBandwidth&&navigator.connection&&navigator.connection.downlink&&(navigator.connection.downlink<config.minBandwidth||navigator.connection.saveData)){warn("Slow connection (".concat(navigator.connection.downlink,"mbps). Lazy autoplay disabled."));return}var playVideo=function playVideo(video){video.setAttribute("playsinline","");video.setAttribute("muted","");video.setAttribute("autoplay","");video.play();video.setAttribute("data-lazyvids","loaded")};var isVisible=function isVisible(element){if(element.style&&element.style.display&&element.style.display==="none")return false;if(config.ignoreHidden&&element.style&&element.style.visibility&&element.style.visibility==="hidden")return false;var styles=getComputedStyle(element);var display=styles.getPropertyValue("display");if(display==="none")return false;if(config.ignoreHidden){var visibility=styles.getPropertyValue("visibility");if(visibility==="hidden")return false}if(element.parentNode&&element.parentNode!==document)return isVisible(element.parentNode);return true};var handleIntersection=function handleIntersection(entries,intersectionObserver){entries.forEach((function(entry){window.requestAnimationFrame((function(){var target=entry.target;if(entry.isIntersecting===false)return;if(isVisible(target)===false)return;playVideo(target);intersectionObserver.unobserve(target)}))}))};if(hasIo){intersectionObserver=new IntersectionObserver(handleIntersection)}var process=function process(video){if(config.requirePoster&&(video.poster===undefined||video.poster==="")){playVideo(video);warn("Video missing poster image. Lazy autoplay disabled for:",video);return}if(hasIo===false){playVideo(video);warn("Unsupported browser. Lazy autoplay disabled.");return}video.setAttribute("data-lazyvids","unloaded");intersectionObserver.observe(video)};var selector="video[data-lazyvids]:not([data-lazyvids=loaded])";var lazyVideos=document.querySelectorAll(selector);log("Initialised — ".concat(lazyVideos.length," ").concat(lazyVideos.length===1?"video":"videos"," detected"));lazyVideos.forEach((function(video){return process(video)}));var handleMutation=function handleMutation(mutationsList){mutationsList.forEach((function(mutation){mutation.addedNodes.forEach((function(node){if(node.tagName!=="VIDEO"||node.dataset.lazyvids===undefined||node.dataset.lazyvids==="loaded")return;process(node)}))}))};var mutationConfig={childList:true,subtree:true};var mutationObserver=new MutationObserver(handleMutation);mutationObserver.observe(document,mutationConfig)}))})(window.lazyvidsConfig||{});
+"use strict";(function(configObj){if(window.NodeList&&!NodeList.prototype.forEach){NodeList.prototype.forEach=Array.prototype.forEach}document.addEventListener("DOMContentLoaded",(function(){var config={logLevel:configObj&&configObj.logLevel?configObj.logLevel:"silent",ignoreHidden:configObj&&configObj.ignoreHidden?configObj.ignoreHidden:false,minBandwidth:configObj&&configObj.minBandwidth?Number.parseFloat(configObj.minBandwidth):0,reduceData:configObj&&configObj.reduceData?configObj.reduceData:false,requirePoster:configObj&&configObj.requirePoster?configObj.requirePoster:true};var log=function log(message,object){if(config.logLevel!=="verbose")return;object?window.console.log("lazyvids: ".concat(message),object):window.console.log("lazyvids: ".concat(message))};var warn=function warn(message,object){if(config.logLevel==="silent")return;object?window.console.warn("lazyvids: ".concat(message),object):window.console.warn("lazyvids: ".concat(message))};var supportsIntersectionObserver=typeof window.IntersectionObserver==="function";var intersectionObserver;if(config.reduceData&&config.minBandwidth&&navigator.connection&&navigator.connection.downlink&&(navigator.connection.downlink<config.minBandwidth||navigator.connection.saveData)){warn("Slow connection (".concat(navigator.connection.downlink,"mbps). Lazy autoplay disabled."));return}var playVideo=function playVideo(video){video.setAttribute("playsinline","");video.setAttribute("muted","");video.setAttribute("autoplay","");video.play();video.setAttribute("data-lazyvids","loaded")};var isVisible=function isVisible(element){if(element.style&&element.style.display&&element.style.display==="none")return false;if(config.ignoreHidden&&element.style&&element.style.visibility&&element.style.visibility==="hidden")return false;var styles=getComputedStyle(element);var display=styles.getPropertyValue("display");if(display==="none")return false;if(config.ignoreHidden){var visibility=styles.getPropertyValue("visibility");if(visibility==="hidden")return false}if(element.parentNode&&element.parentNode!==document)return isVisible(element.parentNode);return true};var handleIntersection=function handleIntersection(entries,intersectionObserver){entries.forEach((function(entry){window.requestAnimationFrame((function(){var target=entry.target;if(entry.isIntersecting===false)return;if(isVisible(target)===false)return;playVideo(target);intersectionObserver.unobserve(target)}))}))};if(supportsIntersectionObserver){intersectionObserver=new IntersectionObserver(handleIntersection)}var process=function process(video){if(config.requirePoster&&(video.poster===undefined||video.poster==="")){playVideo(video);warn("Video missing poster image. Lazy autoplay disabled for:",video);return}if(supportsIntersectionObserver===false){playVideo(video);warn("Unsupported browser. Lazy autoplay disabled.");return}video.setAttribute("data-lazyvids","unloaded");intersectionObserver.observe(video)};var domSelector="video[data-lazyvids]:not([data-lazyvids=loaded])";var lazyVideos=document.querySelectorAll(domSelector);log("Initialised — ".concat(lazyVideos.length," ").concat(lazyVideos.length===1?"video":"videos"," detected"));lazyVideos.forEach((function(video){return process(video)}));var handleMutation=function handleMutation(mutationsList){mutationsList.forEach((function(mutation){mutation.addedNodes.forEach((function(node){if(node.tagName==="VIDEO"&&node.dataset.lazyvids!==undefined&&node.dataset.lazyvids!=="loaded"){process(node);return}if(node.hasChildNodes()===false)return;var nestedLazyvids=node.querySelectorAll(domSelector);if(nestedLazyvids.length===0)return;nestedLazyvids.forEach((function(videoNode){return process(videoNode)}))}))}))};var mutationConfig={childList:true,subtree:true};var mutationObserver=new MutationObserver(handleMutation);mutationObserver.observe(document,mutationConfig)}))})(window.lazyvidsConfig||{});

dist/lazyvids.js

@@ -1,1 +0,1 @@
-(configObj=>{if(window.NodeList&&!NodeList.prototype.forEach){NodeList.prototype.forEach=Array.prototype.forEach}document.addEventListener("DOMContentLoaded",(()=>{const config={logLevel:configObj&&configObj.logLevel?configObj.logLevel:"silent",ignoreHidden:configObj&&configObj.ignoreHidden?configObj.ignoreHidden:false,minBandwidth:configObj&&configObj.minBandwidth?Number.parseFloat(configObj.minBandwidth):0,reduceData:configObj&&configObj.reduceData?configObj.reduceData:false,requirePoster:configObj&&configObj.requirePoster?configObj.requirePoster:true};const log=(message,object)=>{if(config.logLevel!=="verbose")return;object?window.console.log(`lazyvids: ${message}`,object):window.console.log(`lazyvids: ${message}`)};const warn=(message,object)=>{if(config.logLevel==="silent")return;object?window.console.warn(`lazyvids: ${message}`,object):window.console.warn(`lazyvids: ${message}`)};const hasIo=typeof window.IntersectionObserver==="function";let intersectionObserver;if(config.reduceData&&config.minBandwidth&&navigator.connection&&navigator.connection.downlink&&(navigator.connection.downlink<config.minBandwidth||navigator.connection.saveData)){warn(`Slow connection (${navigator.connection.downlink}mbps). Lazy autoplay disabled.`);return}const playVideo=video=>{video.setAttribute("playsinline","");video.setAttribute("muted","");video.setAttribute("autoplay","");video.play();video.setAttribute("data-lazyvids","loaded")};const isVisible=element=>{if(element.style&&element.style.display&&element.style.display==="none")return false;if(config.ignoreHidden&&element.style&&element.style.visibility&&element.style.visibility==="hidden")return false;const styles=getComputedStyle(element);const display=styles.getPropertyValue("display");if(display==="none")return false;if(config.ignoreHidden){const visibility=styles.getPropertyValue("visibility");if(visibility==="hidden")return false}if(element.parentNode&&element.parentNode!==document)return isVisible(element.parentNode);return true};const handleIntersection=(entries,intersectionObserver)=>{entries.forEach((entry=>{window.requestAnimationFrame((()=>{const target=entry.target;if(entry.isIntersecting===false)return;if(isVisible(target)===false)return;playVideo(target);intersectionObserver.unobserve(target)}))}))};if(hasIo){intersectionObserver=new IntersectionObserver(handleIntersection)}const process=video=>{if(config.requirePoster&&(video.poster===undefined||video.poster==="")){playVideo(video);warn(`Video missing poster image. Lazy autoplay disabled for:`,video);return}if(hasIo===false){playVideo(video);warn(`Unsupported browser. Lazy autoplay disabled.`);return}video.setAttribute("data-lazyvids","unloaded");intersectionObserver.observe(video)};const selector="video[data-lazyvids]:not([data-lazyvids=loaded])";const lazyVideos=document.querySelectorAll(selector);log(`Initialised — ${lazyVideos.length} ${lazyVideos.length===1?"video":"videos"} detected`);lazyVideos.forEach((video=>process(video)));const handleMutation=mutationsList=>{mutationsList.forEach((mutation=>{mutation.addedNodes.forEach((node=>{if(node.tagName!=="VIDEO"||node.dataset.lazyvids===undefined||node.dataset.lazyvids==="loaded")return;process(node)}))}))};const mutationConfig={childList:true,subtree:true};const mutationObserver=new MutationObserver(handleMutation);mutationObserver.observe(document,mutationConfig)}))})(window.lazyvidsConfig||{});
+(configObj=>{if(window.NodeList&&!NodeList.prototype.forEach){NodeList.prototype.forEach=Array.prototype.forEach}document.addEventListener("DOMContentLoaded",(()=>{const config={logLevel:configObj&&configObj.logLevel?configObj.logLevel:"silent",ignoreHidden:configObj&&configObj.ignoreHidden?configObj.ignoreHidden:false,minBandwidth:configObj&&configObj.minBandwidth?Number.parseFloat(configObj.minBandwidth):0,reduceData:configObj&&configObj.reduceData?configObj.reduceData:false,requirePoster:configObj&&configObj.requirePoster?configObj.requirePoster:true};const log=(message,object)=>{if(config.logLevel!=="verbose")return;object?window.console.log(`lazyvids: ${message}`,object):window.console.log(`lazyvids: ${message}`)};const warn=(message,object)=>{if(config.logLevel==="silent")return;object?window.console.warn(`lazyvids: ${message}`,object):window.console.warn(`lazyvids: ${message}`)};const supportsIntersectionObserver=typeof window.IntersectionObserver==="function";let intersectionObserver;if(config.reduceData&&config.minBandwidth&&navigator.connection&&navigator.connection.downlink&&(navigator.connection.downlink<config.minBandwidth||navigator.connection.saveData)){warn(`Slow connection (${navigator.connection.downlink}mbps). Lazy autoplay disabled.`);return}const playVideo=video=>{video.setAttribute("playsinline","");video.setAttribute("muted","");video.setAttribute("autoplay","");video.play();video.setAttribute("data-lazyvids","loaded")};const isVisible=element=>{if(element.style&&element.style.display&&element.style.display==="none")return false;if(config.ignoreHidden&&element.style&&element.style.visibility&&element.style.visibility==="hidden")return false;const styles=getComputedStyle(element);const display=styles.getPropertyValue("display");if(display==="none")return false;if(config.ignoreHidden){const visibility=styles.getPropertyValue("visibility");if(visibility==="hidden")return false}if(element.parentNode&&element.parentNode!==document)return isVisible(element.parentNode);return true};const handleIntersection=(entries,intersectionObserver)=>{entries.forEach((entry=>{window.requestAnimationFrame((()=>{const target=entry.target;if(entry.isIntersecting===false)return;if(isVisible(target)===false)return;playVideo(target);intersectionObserver.unobserve(target)}))}))};if(supportsIntersectionObserver){intersectionObserver=new IntersectionObserver(handleIntersection)}const process=video=>{if(config.requirePoster&&(video.poster===undefined||video.poster==="")){playVideo(video);warn(`Video missing poster image. Lazy autoplay disabled for:`,video);return}if(supportsIntersectionObserver===false){playVideo(video);warn(`Unsupported browser. Lazy autoplay disabled.`);return}video.setAttribute("data-lazyvids","unloaded");intersectionObserver.observe(video)};const domSelector="video[data-lazyvids]:not([data-lazyvids=loaded])";const lazyVideos=document.querySelectorAll(domSelector);log(`Initialised — ${lazyVideos.length} ${lazyVideos.length===1?"video":"videos"} detected`);lazyVideos.forEach((video=>process(video)));const handleMutation=mutationsList=>{mutationsList.forEach((mutation=>{mutation.addedNodes.forEach((node=>{if(node.tagName==="VIDEO"&&node.dataset.lazyvids!==undefined&&node.dataset.lazyvids!=="loaded"){process(node);return}if(node.hasChildNodes()===false)return;const nestedLazyvids=node.querySelectorAll(domSelector);if(nestedLazyvids.length===0)return;nestedLazyvids.forEach((videoNode=>process(videoNode)))}))}))};const mutationConfig={childList:true,subtree:true};const mutationObserver=new MutationObserver(handleMutation);mutationObserver.observe(document,mutationConfig)}))})(window.lazyvidsConfig||{});

package.json

 {
   "name": "lazyvids",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "A small utility to lazy-load autoplay HTML5 videos once they enter the viewport.",
@@ -5,0 +5,0 @@ "main": "dist/lazyvids.js",

README.md

@@ -67,5 +67,5 @@ # lazyvids.js
 | `logLevel` | `string` | `silent` | Set logging level: `verbose`, `warn`, `silent`. |
-| `ignoreHidden` | `boolean` | `false` | Set whether to skip `<videos>` with `display: hidden`. |
-| `minBandwidth` | `number` | `0` | If `reducedData` is `true`, set threshold above which videos will play. |
+| `ignoreHidden` | `boolean` | `false` | Set whether to skip `<video>` elements with `display: hidden`. |
+| `minBandwidth` | `number` | `0` | If `reduceData` is `true`, set threshold above which videos will play. |
 | `reduceData` | `boolean` | `false` | If `true`, will not play videos if data saver is enabled or bandwidth is below `minBandwidth`. |
 | `requirePoster` | `boolean` | `true` | When `false`, will lazy-play video even if poster image is missing. |

src/lazyvids.js

@@ -37,6 +37,9 @@ ((configObj) => {
 
-    const hasIo = typeof window.IntersectionObserver === 'function';
+    const supportsIntersectionObserver =
+      typeof window.IntersectionObserver === 'function';
     let intersectionObserver;
 
-    // Don't load videos on slow connections (optional)
+    /**
+     * Don't load videos on slow connections (optional)
+     */
     if (
@@ -119,3 +122,3 @@ config.reduceData &&
      */
-    if (hasIo) {
+    if (supportsIntersectionObserver) {
       intersectionObserver = new IntersectionObserver(handleIntersection);
@@ -140,3 +143,3 @@ }
       // IE fallback — no support for IntersectionObserver
-      if (hasIo === false) {
+      if (supportsIntersectionObserver === false) {
         playVideo(video);
@@ -155,4 +158,4 @@ warn(`Unsupported browser. Lazy autoplay disabled.`);
      */
-    const selector = 'video[data-lazyvids]:not([data-lazyvids=loaded])';
-    const lazyVideos = document.querySelectorAll(selector);
+    const domSelector = 'video[data-lazyvids]:not([data-lazyvids=loaded])';
+    const lazyVideos = document.querySelectorAll(domSelector);
     log(
@@ -168,2 +171,5 @@ `Initialised — ${lazyVideos.length} ${
      * added to the DOM.
+     *
+     * If added node is not a <video>, search within the added node
+     * for lazyvid videos.
      */
@@ -174,8 +180,13 @@ const handleMutation = (mutationsList) => {
           if (
-            node.tagName !== 'VIDEO' ||
-            node.dataset.lazyvids === undefined ||
-            node.dataset.lazyvids === 'loaded'
-          )
+            node.tagName === 'VIDEO' &&
+            node.dataset.lazyvids !== undefined &&
+            node.dataset.lazyvids !== 'loaded'
+          ) {
+            process(node);
             return;
-          process(node);
+          }
+          if (node.hasChildNodes() === false) return;
+          const nestedLazyvids = node.querySelectorAll(domSelector);
+          if (nestedLazyvids.length === 0) return;
+          nestedLazyvids.forEach((videoNode) => process(videoNode));
         });
@@ -182,0 +193,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17616

increased by6.06%

Lines of code

198

increased by5.88%

No dependency changes