Skip to content

Commit 3416e4c

Browse files
committed
performance optimization 🚀
1 parent 6ac70bd commit 3416e4c

File tree

3 files changed

+22
-15
lines changed

3 files changed

+22
-15
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "1.1.7",
2+
"version": "1.2.0",
33
"license": "MIT",
44
"main": "dist/index.js",
55
"typings": "dist/index.d.ts",

src/LiteYoutubeEmbed.tsx

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState, useEffect, useMemo, useCallback } from 'react';
22

33
import styles from './styles.module.css';
4+
import { qs } from './utils';
45

5-
const qs = (params: Record<string, string>) => {
6-
return Object.keys(params)
7-
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
8-
.join('&');
6+
enum thumbnailResolution {
7+
HIGH = 'maxresdefault',
8+
MEDIUM = 'sddefault',
9+
LOW = 'hqdefault'
910
}
1011

1112
// https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
12-
type ResolutionType = 'maxresdefault' | 'sddefault' | 'hqdefault';
13+
type ResolutionType = thumbnailResolution.HIGH | thumbnailResolution.MEDIUM | thumbnailResolution.LOW;
1314

1415
interface ILiteYouTubeEmbedProps {
1516
id: string;
@@ -33,11 +34,11 @@ const LiteYoutubeEmbed = ({
3334
noCookie = true,
3435
mute = true,
3536
isMobile = false,
36-
mobileResolution = 'hqdefault',
37-
desktopResolution = 'maxresdefault',
37+
mobileResolution = thumbnailResolution.LOW,
38+
desktopResolution = thumbnailResolution.HIGH,
3839
}: ILiteYouTubeEmbedProps): React.ReactElement => {
3940
const muteParam = mute || defaultPlay ? '1' : '0'; // Default play must be mute
40-
const queryString = qs({ autoplay: '1', mute: muteParam, ...params });
41+
const queryString = useMemo(() => qs({ autoplay: '1', mute: muteParam, ...params }), []);
4142
const defaultPosterUrl = isMobile ? `https://i.ytimg.com/vi/${id}/${mobileResolution}.jpg` : `https://i.ytimg.com/vi/${id}/${desktopResolution}.jpg`;
4243
const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
4344
const iframeSrc = isPlaylist ? `${ytUrl}/embed/videoseries?list=${id}` : `${ytUrl}/embed/${id}?${queryString}`; // * Lo, the youtube placeholder image! (aka the thumbnail, poster image, etc)
@@ -46,19 +47,20 @@ const LiteYoutubeEmbed = ({
4647
const [iframeLoaded, setIframeLoaded] = useState(defaultPlay);
4748
const [posterUrl, setPosterUrl] = useState(defaultPosterUrl);
4849

49-
const warmConnections = () => {
50+
const warmConnections = useCallback(() => {
5051
if (isPreconnected) return;
5152
setIsPreconnected(true);
52-
};
53+
}, []);
5354

54-
const loadIframeFunc = () => {
55+
const loadIframeFunc = useCallback(() => {
5556
if (iframeLoaded) return;
5657
setIframeLoaded(true);
57-
};
58+
}, []);
5859

5960
// fallback to hqdefault resolution if maxresdefault is not supported.
6061
useEffect(() => {
61-
if ((isMobile && mobileResolution === 'hqdefault') || (!isMobile && desktopResolution === 'hqdefault')) return;
62+
if ((isMobile && mobileResolution === thumbnailResolution.LOW) || (!isMobile && desktopResolution === thumbnailResolution.LOW)) return;
63+
6264
const img = new Image();
6365
img.onload = function() {
6466
if (img.width === 120 || img.width === 0) setPosterUrl(`https://i.ytimg.com/vi/${id}/hqdefault.jpg`);

src/utils.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const qs = (params: Record<string, string>) => {
2+
return Object.keys(params)
3+
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
4+
.join('&');
5+
}

0 commit comments

Comments
 (0)