lazyvids - npm Package Compare versions

Comparing version 0.1.0 to 0.2.1

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 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||{});
+(t=>{window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),document.addEventListener("DOMContentLoaded",()=>{const a={logLevel:t&&t.logLevel?t.logLevel:"silent",ignoreHidden:t&&t.ignoreHidden?t.ignoreHidden:!1,minBandwidth:t&&t.minBandwidth?Number.parseFloat(t.minBandwidth):0,reduceData:t&&t.reduceData?t.reduceData:!1,requirePoster:t&&t.requirePoster?t.requirePoster:!0},f=(e,r="")=>{a.logLevel==="verbose"&&window.console.log(`lazyvids: ${e}`,r)},s=(e,r="")=>{a.logLevel!=="silent"&&window.console.warn(`lazyvids: ${e}`,r)},u=typeof window.IntersectionObserver=="function";let c;if(a.reduceData&&a.minBandwidth&&navigator.connection&&navigator.connection.downlink&&(navigator.connection.downlink<a.minBandwidth||navigator.connection.saveData)){s(`Slow connection (${navigator.connection.downlink}mbps). Lazy autoplay disabled.`);return}const o=e=>{e.playsinline=!0,e.muted=!0,e.autoplay=!0,e.play()!==void 0?e.play().then(()=>e.dataset.lazyvids="loaded").catch(r=>s("Autoplay blocked by browser for:",e)):e.dataset.lazyvids="loaded"},y=e=>{if(e.style&&e.style.display&&e.style.display==="none"||a.ignoreHidden&&e.style&&e.style.visibility&&e.style.visibility==="hidden")return!1;const r=getComputedStyle(e);return r.getPropertyValue("display")==="none"||a.ignoreHidden&&r.getPropertyValue("visibility")==="hidden"?!1:e.parentNode&&e.parentNode!==document?y(e.parentNode):!0},v=(e,r)=>{e.forEach(n=>{window.requestAnimationFrame(()=>{const i=n.target;n.isIntersecting!==!1&&y(i)!==!1&&(o(i),r.unobserve(i))})})};u&&(c=new IntersectionObserver(v));const d=e=>{if(a.requirePoster&&(e.poster===void 0||e.poster==="")){o(e),s("Video missing poster image. Lazy autoplay disabled for:",e);return}if(u===!1){o(e),s("Unsupported browser. Lazy autoplay disabled.");return}e.dataset.lazyvids="unloaded",c.observe(e)},p="video[data-lazyvids]:not([data-lazyvids=loaded])",l=document.querySelectorAll(p);f(`Initialised \u2014 ${l.length} ${l.length===1?"video":"videos"} detected`),l.forEach(e=>d(e));const w=e=>{e.forEach(r=>{r.addedNodes.forEach(n=>{if(n.tagName==="VIDEO"&&n.dataset.lazyvids!==void 0&&n.dataset.lazyvids!=="loaded"){d(n);return}if(n.hasChildNodes()===!1)return;const i=n.querySelectorAll(p);i.length!==0&&i.forEach(g=>d(g))})})},h={childList:!0,subtree:!0};new MutationObserver(w).observe(document,h)})})(window.lazyvidsConfig||{});

package.json

 {
   "name": "lazyvids",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "A small utility to lazy-load autoplay HTML5 videos once they enter the viewport.",
@@ -17,15 +17,9 @@ "main": "dist/lazyvids.js",
   "scripts": {
-    "build": "yarn clean && mkdir -p dist && yarn build:es5 && yarn build:es6",
-    "build:es5": "babel src/lazyvids.js --out-file dist/lazyvids.es5.min.js && terser dist/lazyvids.es5.min.js -o dist/lazyvids.es5.min.js",
-    "build:es6": "terser src/lazyvids.js -o dist/lazyvids.js",
-    "clean": "rimraf dist/",
-    "deploy": "yarn build && yarn publish"
+    "build": "yarn clean && esbuild src/lazyvids.js --outdir=dist --minify --target=safari12",
+    "deploy": "yarn build && yarn publish",
+    "clean": " rm -rf dist/"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.10",
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "rimraf": "^3.0.2",
-    "terser": "^5.6.0"
+    "esbuild": "^0.12.25"
   }
 }

README.md

@@ -49,3 +49,3 @@ # lazyvids.js
 
-Configuration options are available using a `lazyvidsConfig` object on the global `window` object. This must be included in the HTML before the `lazyvids` script.
+Configuration options are available using a `lazyvidsConfig` object on the global `window` object.
 
@@ -52,0 +52,0 @@ ```html

src/lazyvids.js

@@ -24,13 +24,9 @@ ((configObj) => {
 
-    const log = (message, object) => {
+    const log = (message, object = '') => {
       if (config.logLevel !== 'verbose') return;
-      object
-        ? window.console.log(`lazyvids: ${message}`, object)
-        : window.console.log(`lazyvids: ${message}`);
+      window.console.log(`lazyvids: ${message}`, object);
     };
-    const warn = (message, object) => {
+    const warn = (message, object = '') => {
       if (config.logLevel === 'silent') return;
-      object
-        ? window.console.warn(`lazyvids: ${message}`, object)
-        : window.console.warn(`lazyvids: ${message}`);
+      window.console.warn(`lazyvids: ${message}`, object);
     };
@@ -67,7 +63,14 @@
     const playVideo = (video) => {
-      video.setAttribute('playsinline', '');
-      video.setAttribute('muted', '');
-      video.setAttribute('autoplay', '');
-      video.play();
-      video.setAttribute('data-lazyvids', 'loaded');
+      video.playsinline = true;
+      video.muted = true;
+      video.autoplay = true;
+
+      if (video.play() !== undefined) {
+        video
+          .play()
+          .then(() => (video.dataset.lazyvids = 'loaded'))
+          .catch((error) => warn(`Autoplay blocked by browser for:`, video));
+      } else {
+        video.dataset.lazyvids = 'loaded';
+      }
     };
@@ -150,3 +153,3 @@
       // Fully supported
-      video.setAttribute('data-lazyvids', 'unloaded');
+      video.dataset.lazyvids = 'unloaded';
       intersectionObserver.observe(video);
@@ -153,0 +156,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

Dev dependency count

1

decreased by-80%

Lines of code

203

increased by2.53%

Worsened metrics

Total package byte prevSize

12470

decreased by-29.21%

Number of package files

8

decreased by-11.11%

No dependency changes