diff --git a/components-eleventy/video/player.js b/components-eleventy/video/player.js index 39658fa..c87eca2 100644 --- a/components-eleventy/video/player.js +++ b/components-eleventy/video/player.js @@ -1,3 +1,34 @@ +function renderPoster ( video ) { + const webpSource = { + ...video.thumbnail, + srcset: video.thumbnail.srcset.replaceAll('ytimg.com/vi/', 'ytimg.com/vi_webp/').replace(/.png|.jpg|.jpeg/g, '.webp') + } + + const mergedSources = { + webp: webpSource, + jpeg: video.thumbnail + } + + return /* html */` + + + ${ Object.entries( mergedSources ).map( ([ key, source ]) => (/* html */` + + `) ).join('') } + + ${ video.name } + + ` +} + function renderTimestamps ( video ) { const timestampsForRender = video.timestamps.map( timestamp => { const [ minutes, seconds ] = timestamp.time.split(':') @@ -33,6 +64,8 @@ export default async function ( video, options = {} ) { // console.log('video', video) + const posterHtml = renderPoster( video ) + const timestampsHtml = renderTimestamps( video ) return /* html */` @@ -48,11 +81,7 @@ export default async function ( video, options = {} ) {
- - - - M1 Macs + Windows 10 GAMING and PERFORMANCE Improvements with Parallels 16.5! - + ${ posterHtml }
diff --git a/helpers/lite-youtube.js b/helpers/lite-youtube.js index af23ce6..7c4d7f8 100644 --- a/helpers/lite-youtube.js +++ b/helpers/lite-youtube.js @@ -172,18 +172,6 @@ class LiteYTEmbed extends HTMLElement { // Computed methods - posterSources = () => { - const webpSource = { - ...this.video.thumbnail, - srcset: this.video.thumbnail.srcset.replaceAll('ytimg.com/vi/', 'ytimg.com/vi_webp/').replace(/.png|.jpg|.jpeg/g, '.webp') - } - - return { - webp: webpSource, - jpeg: this.video.thumbnail - } - } - frameId = () => { return `youtube-player-${this.video.id}-${this._uid}` } diff --git a/pages-eleventy/tv.11ty.js b/pages-eleventy/tv.11ty.js index 669f751..e254365 100644 --- a/pages-eleventy/tv.11ty.js +++ b/pages-eleventy/tv.11ty.js @@ -68,6 +68,23 @@ class TV { return makeDescription( data.tvEntry ) }, + + headLinkTags: data => { + // Declare dependencies for Eleventy + // https://www.11ty.dev/docs/data-computed/#declaring-your-dependencies + data.tvEntry + + return [ + // Preload video thumbnail + // + { + 'rel': 'preload', + 'as': 'image', + 'href': `https://i.ytimg.com/vi_webp/${ data.tvEntry.payload.video.id }/sddefault.webp` + }, + ] + }, + structuredData: data => { // Declare dependencies for Eleventy // https://www.11ty.dev/docs/data-computed/#declaring-your-dependencies