From dc569a333424c72e9e6479c51e4113d66683d798 Mon Sep 17 00:00:00 2001
From: Justin Ribeiro <justin@justinribeiro.com>
Date: Fri, 1 Oct 2021 15:41:33 -0700
Subject: [PATCH] feat: add poster quality attr (#36)

---
 README.md       |  3 ++-
 demo/index.html |  9 +++++++++
 lite-youtube.ts | 12 ++++++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 687946b..f33eb89 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ import '@justinribeiro/lite-youtube';
 If you want the paste-and-go version, you can simply load it via CDN:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.9.2/lite-youtube.js">
+<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.9.2/lite-youtube.js"></script>
 ```
 
 ## Basic Usage
@@ -122,5 +122,6 @@ flexibility.
 | `videotitle`   | The title of the video                                           | `Video` |
 | `videoplay`    | The title of the play button (for translation)                   | `Play`  |
 | `videoStartAt` | Set the point at which the video should start, in seconds        | `0`     |
+| `posterquality`| Set thumbnail poster quality (maxresdefault, sddefault, mqdefault, hqdefault) | `hqdefault`  |
 | `autoload`     | Use Intersection Observer to load iframe when scrolled into view | `false` |
 | `params`       | Set YouTube query parameters                                     | ``      |
diff --git a/demo/index.html b/demo/index.html
index fcb6a10..e20f54b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -107,5 +107,14 @@ <h3>YouTube QueryParams</h3>
       videoid="guJLfqTFfIw"
       params="controls=0&enablejsapi=1"
     ></lite-youtube>
+
+    <pre>
+
+&lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot; posterquality=&quot;maxresdefault&gt;&lt;/lite-youtube&gt;
+    </pre>
+    <lite-youtube
+      videoid="guJLfqTFfIw"
+      posterquality="maxresdefault"
+    ></lite-youtube>
   </body>
 </html>
diff --git a/lite-youtube.ts b/lite-youtube.ts
index 19806fd..17af567 100644
--- a/lite-youtube.ts
+++ b/lite-youtube.ts
@@ -86,6 +86,14 @@ export class LiteYTEmbed extends HTMLElement {
     }
   }
 
+  get posterQuality(): string {
+    return this.getAttribute('posterquality') || 'hqdefault';
+  }
+
+  set posterQuality(quality: string) {
+    this.setAttribute('posterquality', quality);
+  }
+
   get params(): string {
     return `start=${this.videoStartAt}&${this.getAttribute('params')}`;
   }
@@ -271,8 +279,8 @@ export class LiteYTEmbed extends HTMLElement {
     // we don't know which image type to preload, so warm the connection
     LiteYTEmbed.addPrefetch('preconnect', 'https://i.ytimg.com/');
 
-    const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/hqdefault.webp`;
-    const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
+    const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
+    const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;
     this.domRefImg.webp.srcset = posterUrlWebp;
     this.domRefImg.jpeg.srcset = posterUrlJpeg;
     this.domRefImg.fallback.src = posterUrlJpeg;