@@ -10,11 +10,11 @@ const qs = (params: Record<string, string>) => {
1010 . join ( '&' )
1111}
1212
13- type ImageType = 'jpg' | 'webp' ;
13+ type ImageType = 'jpg' | 'webp'
1414// Define a type for video resolutions
15- type VideoResolution = 120 | 320 | 480 | 640 | 1280 ;
15+ type VideoResolution = 120 | 320 | 480 | 640 | 1280
1616
17- const resolutions : VideoResolution [ ] = [ 120 , 320 , 480 , 640 , 1280 ] ;
17+ const resolutions : VideoResolution [ ] = [ 120 , 320 , 480 , 640 , 1280 ]
1818
1919const resolutionMap : Record < VideoResolution , string > = {
2020 120 : 'default' ,
@@ -24,28 +24,32 @@ const resolutionMap: Record<VideoResolution, string> = {
2424 1280 : 'maxresdefault'
2525 // 2k, 4k, 8k images don't seem to be available
2626 // Source: https://longzero.com/articles/youtube-thumbnail-sizes-url/
27- } ;
27+ }
2828
2929// 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 {
3135 // Return the appropriate URL based on the image type
3236 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`
3438 }
3539 // 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`
3741}
3842
3943function generateSrcSet ( id : string , type : ImageType = 'jpg' ) : string {
4044 return resolutions
4145 . map ( ( resolution ) => `${ getPosterUrl ( id , resolution , type ) } ${ resolution } w` )
42- . join ( ', ' ) ;
46+ . join ( ', ' )
4347}
4448
4549function generateSizes ( ) : string {
4650 return resolutions
4751 . map ( ( resolution ) => `(max-width: ${ resolution } px) ${ resolution } px` )
48- . join ( ', ' ) ;
52+ . join ( ', ' )
4953}
5054
5155export function LiteYouTubeEmbed ( {
@@ -104,7 +108,13 @@ export function LiteYouTubeEmbed({
104108 'it seems pretty unlikely for a browser to support preloading but not WebP images'
105109 Source: https://blog.laurenashpole.com/post/658079409151016960
106110 */ }
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+ />
108118
109119 { isPreconnected && (
110120 < >
0 commit comments