@justinribeiro/lite-youtube - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

lite-youtube.js

@@ -20,2 +20,4 @@ /**
     this.setupDom();
+
+    this.__iframeLoaded = false;
   }
@@ -127,6 +129,9 @@
     // https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#rule-2---attribute-escape-before-inserting-untrusted-data-into-html-common-attributes
-    this.videoId = encodeURIComponent( this.getAttribute( 'videoid' ) );
-    this.videoTitle = this.getAttribute( 'videotitle' ) || 'Video';
-    this.videoPlay = this.getAttribute('videoplay') || 'Play';
+    this.videoId = encodeURIComponent(this.getAttribute( 'videoid' ));
+    this.videoTitle = this.getAttribute('videotitle') || 'Video';
+    this.videoPlay = this.getAttribute( 'videoplay' ) || 'Play';
 
+    // when set, this comes in as an empty string; when not set, undefined
+    this.autoLoad = this.getAttribute( 'autoload' ) === '' ? true : false;
+
     /**
@@ -154,3 +159,8 @@ * Lo, the youtube placeholder image!  (aka the thumbnail, poster image, etc)
     this.__domRefPlayButton.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);
-    this.setAttribute('title', `${this.videoPlay}: ${this.videoTitle}`);
+    this.setAttribute( 'title', `${this.videoPlay}: ${this.videoTitle}` );
+
+    // fire up the intersection observer
+    if (this.autoLoad) {
+      this.__initIntersectionObserver();
+    }
   }
@@ -184,2 +194,31 @@
   /**
+   * Setup the Intersection Observer to load the iframe when scrolled into view
+   * @private
+   */
+  __initIntersectionObserver () {
+    if (
+      ('IntersectionObserver' in window) &&
+      ('IntersectionObserverEntry' in window)
+    ) {
+      const options = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0
+      }
+
+      const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting && !this.__iframeLoaded) {
+            LiteYTEmbed.warmConnections();
+            this.addIframe();
+            observer.unobserve(this);
+          }
+        });
+      }, options);
+
+      observer.observe(this);
+    }
+  }
+
+  /**
    * Add a <link rel={preload | preconnect} ...> to the head
@@ -231,3 +270,4 @@ */
     this.__domRefFrame.insertAdjacentHTML('beforeend', iframeHTML);
-    this.__domRefFrame.classList.add('lyt-activated');
+    this.__domRefFrame.classList.add( 'lyt-activated' );
+    this.__iframeLoaded = true;
   }
@@ -234,0 +274,0 @@ }

package.json

@@ -10,3 +10,3 @@ {
   "license": "MIT",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "lite-youtube.js",
@@ -13,0 +13,0 @@ "module": "lite-youtube.js",

README.md

@@ -15,2 +15,3 @@ [![npm version](https://badge.fury.io/js/%40justinribeiro%2Flite-youtube.svg)](https://badge.fury.io/js/%40justinribeiro%2Flite-youtube)
 * It's locale ready; you can set the `videoplay` to have a properly locale based label
+* You can set `autoload` to use Intersection Observer to load the iframe when scrolled into view.
 
@@ -57,2 +58,3 @@ ## Install
 ## Change "Play" for Locale</h3>
+
 ```html
@@ -67,3 +69,5 @@ <lite-youtube
 ## Style It
+
 Height and Width are responsive in the component.
+
 ```html
@@ -81,2 +85,13 @@ <style>
 
+## AutoLoad with IntersectionObserver
+
+Uses Intersection Observer if available to automatically load the YouTube iframe when scrolled into view.
+
+```html
+  <lite-youtube
+    videoid="guJLfqTFfIw"
+    autoload>
+   </lite-youtube>
+```
+
 ## Attributes
@@ -83,0 +98,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

17272

increased by11.7%

Lines of code

295

increased by13.03%

Number of lines in readme file

103

increased by17.05%

No dependency changes