Skip to content

Commit

Permalink
feat(poster): add posterloading for img lazy load
Browse files Browse the repository at this point in the history
  • Loading branch information
justinribeiro committed Nov 16, 2021
1 parent f19ebfa commit 66e8751
Show file tree
Hide file tree
Showing 4 changed files with 314 additions and 393 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[![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)
![Statements](https://img.shields.io/badge/statements-97.7%25-brightgreen.svg?style=flat) ![Branches](https://img.shields.io/badge/branches-86.66%25-yellow.svg?style=flat) ![Functions](https://img.shields.io/badge/functions-88.46%25-yellow.svg?style=flat) ![Lines](https://img.shields.io/badge/lines-97.7%25-brightgreen.svg?style=flat)

# \<lite-youtube\>

Expand Down Expand Up @@ -124,6 +124,7 @@ flexibility.
| `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` |
| `posterloading`| Set img lazy load attr `loading` for poster image | `lazy` |
| `nocookie` | Use youtube-nocookie.com as iframe embed uri | `false` |
| `autoload` | Use Intersection Observer to load iframe when scrolled into view | `false` |
| `params` | Set YouTube query parameters | `` |
Expand Down
5 changes: 5 additions & 0 deletions lite-youtube.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,10 @@ export class LiteYTEmbed extends HTMLElement {
return this.getAttribute('posterquality') || 'hqdefault';
}

get posterLoading(): string {
return this.getAttribute('posterloading') || 'lazy';
}

get params(): string {
return `start=${this.videoStartAt}&${this.getAttribute('params')}`;
}
Expand Down Expand Up @@ -292,6 +296,7 @@ export class LiteYTEmbed extends HTMLElement {

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.fallback.loading = this.posterLoading;
this.domRefImg.webp.srcset = posterUrlWebp;
this.domRefImg.jpeg.srcset = posterUrlJpeg;
this.domRefImg.fallback.src = posterUrlJpeg;
Expand Down
33 changes: 33 additions & 0 deletions test/lite-youtube.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,39 @@ describe('<lite-youtube>', () => {
expect(fallback?.src).to.be.equal(checkStringOne);
});

it('posterLoading attr default', async () => {
const el = await fixture<LiteYTEmbed>(
html`<lite-youtube
videoid="guJLfqTFfIw"
posterQuality="mqdefault"
></lite-youtube>`
);
expect(el.posterLoading).to.be.equal('lazy');

const fallback = el.shadowRoot?.querySelector<HTMLImageElement>(
'#fallbackPlaceholder'
);

expect(fallback?.loading).to.be.equal('lazy');
});

it('posterLoading attr set should stick to img', async () => {
const el = await fixture<LiteYTEmbed>(
html`<lite-youtube
videoid="guJLfqTFfIw"
posterQuality="mqdefault"
posterloading="eager"
></lite-youtube>`
);
expect(el.posterLoading).to.be.equal('eager');

const fallback = el.shadowRoot?.querySelector<HTMLImageElement>(
'#fallbackPlaceholder'
);

expect(fallback?.loading).to.be.equal('eager');
});

it('is valid A11y via aXe', async () => {
const el = await fixture<LiteYTEmbed>(baseTemplate);
await expect(el).shadowDom.to.be.accessible();
Expand Down
Loading

0 comments on commit 66e8751

Please sign in to comment.