lazyvids - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

.prettierrc.json

@@ -6,4 +6,4 @@ {
   "singleQuote": true,
-  "printWidth": 80,
+  "printWidth": 120,
   "proseWrap": "never"
 }

dist/lazyvids.js

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

package.json

 {
   "name": "lazyvids",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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

@@ -29,3 +29,3 @@ # lazyvids.js
 
-4. Provide the `<video>` with a `poster` image attribute. A poster image is required for the video to lazy-play by default, but this behaviour can be changed using the relevant `lazyvidsConfig` option.
+4. Provide the `<video>` with a `poster` image attribute.
 
@@ -60,3 +60,2 @@ ```html
     reduceData: false,
-    requirePoster: true,
   };
@@ -72,2 +71,1 @@ </script>
 | `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

@@ -11,13 +11,6 @@ ((configObj) => {
     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,
+      logLevel: configObj?.logLevel ?? 'silent',
+      ignoreHidden: configObj?.ignoreHidden ?? false,
+      minBandwidth: configObj?.minBandwidth ? Number(configObj.minBandwidth) : 0,
+      reduceData: configObj?.reduceData ?? false,
     };
@@ -34,4 +27,3 @@
 
-    const supportsIntersectionObserver =
-      typeof window.IntersectionObserver === 'function';
+    const supportsIntersectionObserver = typeof window.IntersectionObserver === 'function';
     let intersectionObserver;
@@ -45,10 +37,5 @@
       config.minBandwidth &&
-      navigator.connection &&
-      navigator.connection.downlink &&
-      (navigator.connection.downlink < config.minBandwidth ||
-        navigator.connection.saveData)
+      (navigator.connection?.downlink < config.minBandwidth || navigator.connection?.saveData)
     ) {
-      warn(
-        `Slow connection (${navigator.connection.downlink}mbps). Lazy autoplay disabled.`
-      );
+      warn(`Slow connection (${navigator.connection?.downlink}mbps). Lazy autoplay disabled.`);
       return;
@@ -60,8 +47,7 @@ }
      *
-     * Set autoplay, muted and playsinline attributes on the video,
-     * and start playing it with .play(). Update data-lazyvids attribute
+     * Set autoplay and muted attributes on the video, and start
+     * playing it with .play(). Update data-lazyvids attribute
      * value to prevent re-detecting the video for processing.
      */
     const playVideo = (video) => {
-      video.playsinline = true;
       video.muted = true;
@@ -84,15 +70,4 @@ video.autoplay = true;
     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;
+      if (element.style?.display === 'none') return false;
+      if (config.ignoreHidden && element.style?.visibility === 'hidden') return false;
       const styles = getComputedStyle(element);
@@ -105,4 +80,3 @@ const display = styles.getPropertyValue('display');
       }
-      if (element.parentNode && element.parentNode !== document)
-        return isVisible(element.parentNode);
+      if (element.parentNode && element.parentNode !== document) return isVisible(element.parentNode);
       return true;
@@ -139,12 +113,2 @@ };
     const process = (video) => {
-      // lazyvids videos must have a poster image (default)
-      if (
-        config.requirePoster &&
-        (video.poster === undefined || video.poster === '')
-      ) {
-        playVideo(video);
-        warn(`Video missing poster image. Lazy autoplay disabled for:`, video);
-        return;
-      }
-
       // IE fallback — no support for IntersectionObserver
@@ -165,10 +129,5 @@ if (supportsIntersectionObserver === false) {
      */
-    const domSelector =
-      'video[data-lazyvids]:not([data-lazyvids=loaded]):not([data-lazyvids=false])';
+    const domSelector = 'video[data-lazyvids]:not([data-lazyvids=loaded]):not([data-lazyvids=false])';
     const lazyVideos = document.querySelectorAll(domSelector);
-    log(
-      `Initialised — ${lazyVideos.length} ${
-        lazyVideos.length === 1 ? 'video' : 'videos'
-      } detected`
-    );
+    log(`Initialised — ${lazyVideos.length} ${lazyVideos.length === 1 ? 'video' : 'videos'} detected`);
     lazyVideos.forEach((video) => process(video));
@@ -197,3 +156,2 @@
           const nestedLazyvids = node.querySelectorAll(domSelector);
-          if (nestedLazyvids.length === 0) return;
           nestedLazyvids.forEach((videoNode) => process(videoNode));
@@ -200,0 +158,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

Worsened metrics

Total package byte prevSize

11181

decreased by-11.33%

Lines of code

163

decreased by-20.49%

Number of lines in readme file

69

decreased by-2.82%

No dependency changes