From 5d6375a3520e0a9e386d0536bf6e5dabf1c94c14 Mon Sep 17 00:00:00 2001 From: gabrielelpidio Date: Mon, 21 Feb 2022 17:36:54 -0400 Subject: [PATCH] Added custom thumbnail capability --- README.md | 30 ++++++++++++++++-------------- src/index.tsx | 15 +++++++++++++-- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index c8a301c..2e41994 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@

+ A responsive react component to render YouTube videos in a lazyload mode to get a high speed load website. You can see a [demo here](https://danestves.github.io/react-youtube-lite/?path=/story/component-react-youtube-lite--default) @@ -56,19 +57,20 @@ const App = () => { ## 🔗 Props -| Name | Type | Default | Description | Re quired | -| ---------------- | --------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| `adNetwork` | `boolean` | `true` | If `https://static.doubleclick.net` is enabled or not | No | -| `url` | `string` | | The URL of the video in any format like youtube.com or youtu.be we take care of get the ID of the video | Yes | -| `playlist` | `boolean` | `false` | If the video URL contains a playlist or not | No | -| `poster` | `string` | `hqdefault` | The different quality to show the poster see: https://developers.google.com/youtube/v3/docs/thumbnails for more information. Available options: `maxresdefault`, `0`, `1`, `2`, `3`, `default`, `hqdefault`, `mqdefault`, `sddefault` | No | -| `title` | `string` | `React YouTube Lite` | The `data-title` to insert in the `iframe` | No | -| `noCookie` | `boolean` | `false` | If you use GDPR and don't want YouTube cookies enable this option | No | -| `activatedClass` | `string` | `lty-playbt` | The class used to hide the elements when the iframe is already renderer | No | -| `iframeClass` | `string` | `embed-reponsive-item` | Default classes to put iframe responsive | No | -| `playerClass` | `string` | `lty-playbtn` | Class for youtube play button | No | -| `wrapperClass` | `string` | `ryt-lite embed-responsive` | Default classes to put container responsive | No | -| `aspectRatio` | `string` | `aspect-ratio-16/9` | Implements a `padding-bottom` to generate the size of the iframe. Available options: `aspect-ratio-none`, `aspect-ratio-square`, `aspect-ratio-16/9`, `aspect-ratio-4/3`, `aspect-ratio-21/9` | No | +| Name | Type | Default | Description | Re quired | +| ----------------- | --------- | --------------------------- | ------------------------------------------------------------ | --------- | +| `adNetwork` | `boolean` | `true` | If `https://static.doubleclick.net` is enabled or not | No | +| `url` | `string` | | The URL of the video in any format like youtube.com or youtu.be we take care of get the ID of the video | Yes | +| `playlist` | `boolean` | `false` | If the video URL contains a playlist or not | No | +| `poster` | `string` | `hqdefault` | The different quality to show the poster see: https://developers.google.com/youtube/v3/docs/thumbnails for more information. Available options: `maxresdefault`, `0`, `1`, `2`, `3`, `default`, `hqdefault`, `mqdefault`, `sddefault` | No | +| `title` | `string` | `React YouTube Lite` | The `data-title` to insert in the `iframe` | No | +| `noCookie` | `boolean` | `false` | If you use GDPR and don't want YouTube cookies enable this option | No | +| `activatedClass` | `string` | `lty-playbt` | The class used to hide the elements when the iframe is already renderer | No | +| `customThumbnail` | `string` | | A custom thumbnail image url to show instead of the original youtube thumbnail | No | +| `iframeClass` | `string` | `embed-reponsive-item` | Default classes to put iframe responsive | No | +| `playerClass` | `string` | `lty-playbtn` | Class for youtube play button | No | +| `wrapperClass` | `string` | `ryt-lite embed-responsive` | Default classes to put container responsive | No | +| `aspectRatio` | `string` | `aspect-ratio-16/9` | Implements a `padding-bottom` to generate the size of the iframe. Available options: `aspect-ratio-none`, `aspect-ratio-square`, `aspect-ratio-16/9`, `aspect-ratio-4/3`, `aspect-ratio-21/9` | No | ## 🤝 Contributing @@ -76,4 +78,4 @@ Contributions, issues and feature requests are welcome!
Feel free to check ## License -[MIT License](LICENSE.md) Copyright (c) 2020 [Daniel Esteves](https://danestves.com/). +[MIT License](LICENSE.md) Copyright (c) 2020 [Daniel Esteves](https://danestves.com/). \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 64e5ff7..84d70b9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -57,6 +57,12 @@ export interface Props { * @default "lty-playbt" */ activatedClass?: string; + /** + * A custom thumbnail image url to show instead of the original youtube thumbnail + * + * @default false + */ + customThumbnail?: string; /** * Default classes to put iframe responsive * @@ -100,7 +106,8 @@ export interface Props { * @param url - The URL of the video (we take care of ) */ export function getYoutubeId(url: string): string { - const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/; + const regExp = + /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/; const match = url.match(regExp); return match && match[7].length === 11 ? match[7] : ''; @@ -116,6 +123,7 @@ export const ReactYouTubeLite = ({ poster = 'hqdefault', title = 'React YouTube Lite', noCookie = false, + customThumbnail = '', activatedClass = 'lyt-activated', iframeClass = 'embed-responsive-item', playerClass = 'lty-playbtn', @@ -126,7 +134,10 @@ export const ReactYouTubeLite = ({ const [iframe, setIframe] = React.useState(false); const videoId = encodeURIComponent(getYoutubeId(url)); const videoTitle = title; - const posterUrl = `https://i.ytimg.com/vi/${videoId}/${poster}.jpg`; + const posterUrl = + customThumbnail && typeof customThumbnail === 'string' + ? customThumbnail + : `https://i.ytimg.com/vi/${videoId}/${poster}.jpg`; const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';