feat: multiple thumbnail resolution support 🚀

Author: kylemocode

README.md

@@ -1,5 +1,5 @@
 # React Lite Youtube Embed
-React component version of [lite-youtube-embed]([https://](https://github.com/paulirish/lite-youtube-embed)) power by tsdx, which focus on visual performance, rendering just like the real thing but much faster.
+React component version of [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) build with tsdx, which focus on visual performance, rendering just like the real thing but much faster.
 
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fkylemocode%2Freact-lite-yt-embed.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fkylemocode%2Freact-lite-yt-embed?ref=badge_shield)
 [![Weekly Downloads](https://img.shields.io/npm/dw/react-lite-yt-embed)](https://img.shields.io/npm/dw/react-lite-yt-embed)
@@ -24,7 +24,7 @@ $ npm install react-lite-yt-embed
 
 ## Overview
 ### Introduction
-'react-lite-yt-embed' is a react component version of popular package [lite-youtube-embed]([https://](https://github.com/paulirish/lite-youtube-embed)), which can use in React project including server-side-rendering project. It renders just like the real iframe but way much faster.
+'react-lite-yt-embed' is a react component version of popular package [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed), which can use in React project including SSR and CSR project. It renders just like the real iframe but way much faster.
 
 ## Basic Usage
 
@@ -41,21 +41,21 @@ import { LiteYoutubeEmbed } from 'react-lite-yt-embed';
 
 ## Component Props
 
-| props       | required | default value | Type                     | Description                                                                                   |
-|-------------|----------|---------------|--------------------------|-----------------------------------------------------------------------------------------------|
-| id          | true     | none          | `string`                 | The unique id of the youtube video                                                            |
-| defaultPlay | false    | false         | `boolean`                | Set defaultPlay as  `true`  will directly show youtube iframe                                 |
-| isPlaylist  | false    | false         | `boolean`                | If you want to play playlist, set this as `true` and pass the playlist id                     |
-| noCookie    | false    | true          | `boolean`                | Use "https://www.youtube-nocookie.com" as path or "https://www.youtube.com"                   |
-| mute        | false    | true          | `boolean`                | Set the video is mute or not.                                                                 |
-| Params      | false    | {}            | `Object<string, string>` | Query string params (autoplay and mute are default query string, you do not have to set them) |
-
-
-## Roadmap
+| props             | required | default value   | Type                                          | Description                                                                                                                        |
+|-------------------|----------|-----------------|-----------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------|
+| id                | true     | none            | `string`                                      | The unique id of the youtube video                                                                                                 |
+| defaultPlay       | false    | false           | `boolean`                                     | Set defaultPlay as  `true`  will directly show youtube iframe                                                                      |
+| isPlaylist        | false    | false           | `boolean`                                     | If you want to play playlist, set this as `true` and pass the playlist id                                                          |
+| noCookie          | false    | true            | `boolean`                                     | Use "https://www.youtube-nocookie.com" as path or "https://www.youtube.com"                                                        |
+| mute              | false    | true            | `boolean`                                     | Set the video is mute or not.                                                                                                      |
+| params            | false    | {}              | `Object<string, string>`                      | Query string params (autoplay and mute are default query string, you do not have to set them), the value have to be a string type. |
+| isMobile          | false    | false           | `boolean`                                     | Use in mobile device or not.                                                                                                       |
+| mobileResolution  | false    | 'hqdefault'     | 'hqdefault' \| 'sddefault' \| 'maxresdefault' | You can specify the resolution of the thumbnail image on the phone (default is hqdefault, which is a lower resolution).            |
+| desktopResolution | false    | 'maxresdefault' | 'hqdefault' \| 'sddefault' \| 'maxresdefault' | You can specify the resolution of the thumbnail image on the desktop (default is maxresdefault, which is the highest resolution).  |
+
+## Roadmap (Welcome contribution)
   - [ ] Use react-testing-library to test whether component render correctly.
   - [ ] More features
-  - [x] Setup lint-stage
-  - [x] Add Prettier
   - [ ] CI/CD pipeline
 
 ## License

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.3",
+  "version": "1.1.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/LiteYoutubeEmbed.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import styles from './styles.module.css';
 
@@ -8,6 +8,9 @@ const qs = (params: Record<string, string>) => {
   .join('&');
 }
 
+// https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
+type ResolutionType = 'maxresdefault' | 'sddefault' | 'hqdefault';
+
 interface ILiteYouTubeEmbedProps {
   id: string;
   adLinksPreconnect?: boolean;
@@ -16,6 +19,9 @@ interface ILiteYouTubeEmbedProps {
   noCookie?: boolean;
   mute?: boolean;
   params?: Record<string, string>;
+  isMobile?: boolean;
+  mobileResolution?: ResolutionType;
+  desktopResolution?: ResolutionType;
 }
 
 const LiteYoutubeEmbed = ({
@@ -26,15 +32,19 @@ const LiteYoutubeEmbed = ({
   isPlaylist = false,
   noCookie = true,
   mute = true,
+  isMobile = false,
+  mobileResolution = 'hqdefault',
+  desktopResolution = 'maxresdefault',
 }: ILiteYouTubeEmbedProps): React.ReactElement => {
-  const [isPreconnected, setIsPreconnected] = useState(false);
-  const [iframeLoaded, setIframeLoaded] = useState(defaultPlay);
-
   const muteParam = mute || defaultPlay ? '1' : '0'; // Default play must be mute
   const queryString = qs({ autoplay: '1', mute: muteParam, ...params });
-  const posterUrl = `https://i.ytimg.com/vi/${id}/hqdefault.jpg`; // * Lo, the youtube placeholder image!  (aka the thumbnail, poster image, etc)
+  const defaultPosterUrl = isMobile ? `https://i.ytimg.com/vi/${id}/${mobileResolution}.jpg` : `https://i.ytimg.com/vi/${id}/${desktopResolution}.jpg`; 
   const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
-  const iframeSrc = isPlaylist ? `${ytUrl}/embed/videoseries?list=${id}` : `${ytUrl}/embed/${id}?${queryString}`;
+  const iframeSrc = isPlaylist ? `${ytUrl}/embed/videoseries?list=${id}` : `${ytUrl}/embed/${id}?${queryString}`; // * Lo, the youtube placeholder image!  (aka the thumbnail, poster image, etc)
+
+  const [isPreconnected, setIsPreconnected] = useState(false);
+  const [iframeLoaded, setIframeLoaded] = useState(defaultPlay);
+  const [posterUrl, setPosterUrl] = useState(defaultPosterUrl);
 
   const warmConnections = () => {
     if (isPreconnected) return;
@@ -46,6 +56,16 @@ const LiteYoutubeEmbed = ({
     setIframeLoaded(true);
   };
 
+  // fallback to hqdefault resolution if maxresdefault is not supported.
+  useEffect(() => {
+    if ((isMobile && mobileResolution === 'hqdefault') || (!isMobile && desktopResolution === 'hqdefault')) return;
+    const img = new Image();
+    img.onload = function() {
+      if (img.width === 120 || img.width === 0) setPosterUrl(`https://i.ytimg.com/vi/${id}/hqdefault.jpg`);
+    };
+    img.src = posterUrl;
+  }, [id, posterUrl]);
+
   return (
     <>
       {/* Link is "body-ok" element. Reference: https://html.spec.whatwg.org/multipage/links.html#body-ok */}