@justinribeiro/lite-youtube - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lite-youtube.d.ts

@@ -19,6 +19,7 @@ /**
     shadowRoot: ShadowRoot;
-    private iframeLoaded;
     private domRefFrame;
     private domRefImg;
     private domRefPlayButton;
+    private static isPreconnected;
+    private isIframeLoaded;
     constructor();
@@ -29,2 +30,4 @@ static get observedAttributes(): string[];
     set videoId(id: string);
+    get playlistId(): string;
+    set playlistId(id: string);
     get videoTitle(): string;
@@ -38,5 +41,3 @@ set videoTitle(title: string);
     get noCookie(): boolean;
-    set noCookie(value: boolean);
     get posterQuality(): string;
-    set posterQuality(quality: string);
     get params(): string;
@@ -71,12 +72,11 @@ /**
     private initIntersectionObserver;
-    private static preconnected;
     /**
      * Add a <link rel={preload | preconnect} ...> to the head
-     * @param {*} kind
-     * @param {*} url
-     * @param {*} as
+     * @param {string} kind
+     * @param {string} url
+     * @param {string} as
      */
     private static addPrefetch;
     /**
-     * Begin preconnecting to warm up the iframe load Since the embed's netwok
+     * Begin preconnecting to warm up the iframe load Since the embed's network
      * requests load within its iframe, preload/prefetch'ing them outside the
@@ -83,0 +83,0 @@ * iframe will only cause double-downloads. So, the best we can do is warm up

lite-youtube.js

@@ -20,7 +20,7 @@ /**
         super();
-        this.iframeLoaded = false;
+        this.isIframeLoaded = false;
         this.setupDom();
     }
     static get observedAttributes() {
-        return ['videoid'];
+        return ['videoid', 'playlistid'];
     }
@@ -39,2 +39,8 @@ connectedCallback() {
     }
+    get playlistId() {
+        return encodeURIComponent(this.getAttribute('playlistid') || '');
+    }
+    set playlistId(id) {
+        this.setAttribute('playlistid', id);
+    }
     get videoTitle() {
@@ -64,16 +70,5 @@ return this.getAttribute('videotitle') || 'Video';
     }
-    set noCookie(value) {
-        if (value) {
-            this.setAttribute('nocookie', '');
-        }
-        else {
-            this.removeAttribute('nocookie');
-        }
-    }
     get posterQuality() {
         return this.getAttribute('posterquality') || 'hqdefault';
     }
-    set posterQuality(quality) {
-        this.setAttribute('posterquality', quality);
-    }
     get params() {
@@ -174,10 +169,9 @@ return `start=${this.videoStartAt}&${this.getAttribute('params')}`;
     `;
-        this.domRefFrame = this.shadowRoot.querySelector('#frame');
+        this.domRefFrame = shadowDom.querySelector('#frame');
         this.domRefImg = {
-            fallback: this.shadowRoot.querySelector('#fallbackPlaceholder'),
-            webp: this.shadowRoot.querySelector('#webpPlaceholder'),
-            jpeg: this.shadowRoot.querySelector('#jpegPlaceholder'),
+            fallback: shadowDom.querySelector('#fallbackPlaceholder'),
+            webp: shadowDom.querySelector('#webpPlaceholder'),
+            jpeg: shadowDom.querySelector('#jpegPlaceholder'),
         };
-        this.domRefPlayButton =
-            this.shadowRoot.querySelector('.lty-playbtn');
+        this.domRefPlayButton = shadowDom.querySelector('.lty-playbtn');
     }
@@ -203,3 +197,4 @@ /**
         switch (name) {
-            case 'videoid': {
+            case 'videoid':
+            case 'playlistid': {
                 if (oldVal !== newVal) {
@@ -211,3 +206,3 @@ this.setupComponent();
                         this.shadowRoot.querySelector('iframe').remove();
-                        this.iframeLoaded = false;
+                        this.isIframeLoaded = false;
                     }
@@ -226,14 +221,21 @@ }
     addIframe(isIntersectionObserver = false) {
-        if (!this.iframeLoaded) {
+        if (!this.isIframeLoaded) {
             // Don't autoplay the intersection observer injection, it's weird
             const autoplay = isIntersectionObserver ? 0 : 1;
             const wantsNoCookie = this.noCookie ? '-nocookie' : '';
+            let embedTarget;
+            if (this.playlistId) {
+                embedTarget = `?listType=playlist&list=${this.playlistId}&`;
+            }
+            else {
+                embedTarget = `${this.videoId}?`;
+            }
             const iframeHTML = `
 <iframe frameborder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
-  src="https://www.youtube${wantsNoCookie}.com/embed/${this.videoId}?autoplay=${autoplay}&${this.params}"
+  src="https://www.youtube${wantsNoCookie}.com/embed/${embedTarget}autoplay=${autoplay}&${this.params}"
 ></iframe>`;
             this.domRefFrame.insertAdjacentHTML('beforeend', iframeHTML);
             this.domRefFrame.classList.add('lyt-activated');
-            this.iframeLoaded = true;
+            this.isIframeLoaded = true;
             this.dispatchEvent(new CustomEvent('liteYoutubeIframeLoaded', {
@@ -260,3 +262,3 @@ detail: {
         this.domRefImg.fallback.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);
-        this.domRefImg.fallback.setAttribute('alt', `${this.videoPlay}: ${this.videoTitle}`);
+        this.domRefImg?.fallback?.setAttribute('alt', `${this.videoPlay}: ${this.videoTitle}`);
     }
@@ -267,26 +269,23 @@ /**
     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(true);
-                        observer.unobserve(this);
-                    }
-                });
-            }, options);
-            observer.observe(this);
-        }
+        const options = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 0,
+        };
+        const observer = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting && !this.isIframeLoaded) {
+                    LiteYTEmbed.warmConnections();
+                    this.addIframe(true);
+                    observer.unobserve(this);
+                }
+            });
+        }, options);
+        observer.observe(this);
     }
     /**
      * Add a <link rel={preload | preconnect} ...> to the head
-     * @param {*} kind
-     * @param {*} url
-     * @param {*} as
+     * @param {string} kind
+     * @param {string} url
+     * @param {string} as
      */
@@ -304,3 +303,3 @@ static addPrefetch(kind, url, as) {
     /**
-     * Begin preconnecting to warm up the iframe load Since the embed's netwok
+     * Begin preconnecting to warm up the iframe load Since the embed's network
      * requests load within its iframe, preload/prefetch'ing them outside the
@@ -315,3 +314,3 @@ * iframe will only cause double-downloads. So, the best we can do is warm up
     static warmConnections() {
-        if (LiteYTEmbed.preconnected)
+        if (LiteYTEmbed.isPreconnected)
             return;
@@ -329,8 +328,8 @@ // Host that YT uses to serve JS needed by player, per amp-youtube
         LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
-        LiteYTEmbed.preconnected = true;
+        LiteYTEmbed.isPreconnected = true;
     }
 }
-LiteYTEmbed.preconnected = false;
+LiteYTEmbed.isPreconnected = false;
 // Register custom element
 customElements.define('lite-youtube', LiteYTEmbed);
 //# sourceMappingURL=lite-youtube.js.map

package.json

@@ -10,6 +10,12 @@ {
   "scripts": {
-    "build": "tsc --project tsconfig.json",
+    "build": "tsc",
+    "build:watch": "tsc --watch",
+    "start": "yarn build && yarn web-dev-server --open demo/ --node-resolve",
+    "start:watch": "concurrently --raw \"yarn tsc --watch --preserveWatchOutput\" \"yarn wds --watch --open /demo --node-resolve\"",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint *.ts --ignore-path .gitignore",
     "lint:prettier": "prettier --check *.ts --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && wtr --coverage --watch",
+    "make-test-badges": "yarn istanbul-badges-readme",
     "prepublishOnly": "npm run build"
@@ -23,3 +29,3 @@ },
   "license": "MIT",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "lite-youtube.js",
@@ -33,12 +39,47 @@ "module": "lite-youtube.js",
   "devDependencies": {
+    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@open-wc/eslint-config": "^4.3.0",
+    "@open-wc/testing": "^2.5.33",
     "@typescript-eslint/eslint-plugin": "^2.29.0",
     "@typescript-eslint/parser": "^2.29.0",
+    "@web/dev-server": "^0.1.24",
+    "@web/test-runner": "^0.13.18",
+    "concurrently": "^6.3.0",
     "eslint": "^6.8.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-html": "^6.0.0",
     "eslint-plugin-lit": "^1.2.0",
+    "istanbul-badges-readme": "^1.4.0",
     "prettier": "^2.0.0",
-    "typescript": "^3.8.0"
+    "typescript": "^4.0.0"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
   }
 }

README.md

 [![npm version](https://badge.fury.io/js/@justinribeiro%2Flite-youtube.svg)](https://badge.fury.io/js/@justinribeiro%2Flite-youtube) [![min+gzip](https://badgen.net/bundlephobia/minzip/@justinribeiro/lite-youtube)](https://bundlephobia.com/result?p=@justinribeiro/lite-youtube) [![](https://data.jsdelivr.com/v1/package/npm/@justinribeiro/lite-youtube/badge)](https://www.jsdelivr.com/package/npm/@justinribeiro/lite-youtube)
 
+![Statements](https://img.shields.io/badge/statements-97.67%25-brightgreen.svg) ![Branches](https://img.shields.io/badge/branches-86.2%25-yellow.svg) ![Functions](https://img.shields.io/badge/functions-88%25-yellow.svg) ![Lines](https://img.shields.io/badge/lines-97.67%25-brightgreen.svg)
+
 # \<lite-youtube\>
 
-> A web component that displays render YouTube embeds faster. The shadowDom web component version of Paul's [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed).
+> A web component that renders YouTube embeds faster. The ShadowDom web component version of Paul's [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed).
 
@@ -43,3 +45,3 @@ ## Features
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.1.0/lite-youtube.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.2.0/lite-youtube.js"></script>
 ```
@@ -121,2 +123,3 @@
 | `videoid`      | The YouTube videoid                                              | ``      |
+| `playlistid`   | The YouTube playlistid; requires a videoid for thumbnail         | ``      |
 | `videotitle`   | The title of the video                                           | `Video` |
@@ -132,4 +135,3 @@ | `videoplay`    | The title of the play button (for translation)                   | `Play`  |
 
-The web component allows certain attributes to be give a little additional
-flexibility.
+The web component fires events to give the ability understand important lifecycle.
 
@@ -136,0 +138,0 @@ | Event Name     | Description                                                      | Returns |

No alert changes

Improved metrics

Total package byte prevSize

40663

increased by49.25%

Number of lines in readme file

138

increased by1.47%

Worsened metrics

Dev dependency count

16

increased by77.78%

Lines of code

409

decreased by-0.24%

No dependency changes