@@ -10,11 +10,11 @@ const qs = (params: Record<string, string>) => {
10
10
. join ( '&' )
11
11
}
12
12
13
- type ImageType = 'jpg' | 'webp' ;
13
+ type ImageType = 'jpg' | 'webp'
14
14
// Define a type for video resolutions
15
- type VideoResolution = 120 | 320 | 480 | 640 | 1280 ;
15
+ type VideoResolution = 120 | 320 | 480 | 640 | 1280
16
16
17
- const resolutions : VideoResolution [ ] = [ 120 , 320 , 480 , 640 , 1280 ] ;
17
+ const resolutions : VideoResolution [ ] = [ 120 , 320 , 480 , 640 , 1280 ]
18
18
19
19
const resolutionMap : Record < VideoResolution , string > = {
20
20
120 : 'default' ,
@@ -24,28 +24,32 @@ const resolutionMap: Record<VideoResolution, string> = {
24
24
1280 : 'maxresdefault'
25
25
// 2k, 4k, 8k images don't seem to be available
26
26
// Source: https://longzero.com/articles/youtube-thumbnail-sizes-url/
27
- } ;
27
+ }
28
28
29
29
// Function to get the poster URL based on the resolution type
30
- function getPosterUrl ( id : string , resolution : VideoResolution = 480 , type : ImageType = 'jpg' ) : string {
30
+ function getPosterUrl (
31
+ id : string ,
32
+ resolution : VideoResolution = 480 ,
33
+ type : ImageType = 'jpg'
34
+ ) : string {
31
35
// Return the appropriate URL based on the image type
32
36
if ( type === 'webp' ) {
33
- return `https://i.ytimg.com/vi_webp/${ id } /${ resolutionMap [ resolution ] } .webp` ;
37
+ return `https://i.ytimg.com/vi_webp/${ id } /${ resolutionMap [ resolution ] } .webp`
34
38
}
35
39
// Default to jpg
36
- return `https://i.ytimg.com/vi/${ id } /${ resolutionMap [ resolution ] } .jpg` ;
40
+ return `https://i.ytimg.com/vi/${ id } /${ resolutionMap [ resolution ] } .jpg`
37
41
}
38
42
39
43
function generateSrcSet ( id : string , type : ImageType = 'jpg' ) : string {
40
44
return resolutions
41
45
. map ( ( resolution ) => `${ getPosterUrl ( id , resolution , type ) } ${ resolution } w` )
42
- . join ( ', ' ) ;
46
+ . join ( ', ' )
43
47
}
44
48
45
49
function generateSizes ( ) : string {
46
50
return resolutions
47
51
. map ( ( resolution ) => `(max-width: ${ resolution } px) ${ resolution } px` )
48
- . join ( ', ' ) ;
52
+ . join ( ', ' )
49
53
}
50
54
51
55
export function LiteYouTubeEmbed ( {
@@ -104,7 +108,13 @@ export function LiteYouTubeEmbed({
104
108
'it seems pretty unlikely for a browser to support preloading but not WebP images'
105
109
Source: https://blog.laurenashpole.com/post/658079409151016960
106
110
*/ }
107
- < link rel = 'preload' as = 'image' href = { getPosterUrl ( id ) } imageSrcSet = { generateSrcSet ( id , 'webp' ) } imageSizes = { generateSizes ( ) } />
111
+ < link
112
+ rel = 'preload'
113
+ as = 'image'
114
+ href = { getPosterUrl ( id ) }
115
+ imageSrcSet = { generateSrcSet ( id , 'webp' ) }
116
+ imageSizes = { generateSizes ( ) }
117
+ />
108
118
109
119
{ isPreconnected && (
110
120
< >
0 commit comments