Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-15 06:35:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Use poster component for cards

Browse source
This commit is contained in:
Sam Carlton 2021-05-15 19:01:06 -05:00
parent 7b004ea590
commit f7d7c7266f
3 changed files with 37 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components-eleventy/video/card.js
View file

@ -1,3 +1,4 @@
import renderPoster from './poster.js'
function pill ( text ) {
return /* html */`
@ -20,6 +21,8 @@ export default async function ( video, options = {} ) {
// console.log('video', video)
const posterHtml = renderPoster( video )
return /* html */`
<div class="video-card ${ classes }" style="max-width: ${ width }; flex-basis: ${ width }; scroll-snap-align: start;">
<a
@ -29,18 +32,7 @@ export default async function ( video, options = {} ) {
<div class="video-card-container relative overflow-hidden bg-black">
<div class="video-card-image ratio-wrapper">
<div class="relative overflow-hidden w-full pb-16/9">
<picture>
<source
sizes="${video.thumbnail.sizes}"
data-srcset="${video.thumbnail.srcset}"
type="image/jpg"
>
<img
data-src="${video.thumbnail.src}"
alt="${video.name}"
class="lazyload absolute h-full w-full object-cover"
>
</picture>
${ posterHtml }
</div>
</div>
<div

31
components-eleventy/video/player.js
View file

@ -1,33 +1,4 @@
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 */`
<picture>
${ Object.entries( mergedSources ).map( ([ key, source ]) => (/* html */`
<source
sizes="${ source.sizes }"
data-srcset="${ source.srcset }"
type="image/${ key }"
>
`) ).join('') }
<img
:data-src="${ video.thumbnail.src }"
alt="${ video.name }"
class="absolute inset-0 h-full w-full object-cover lazyload"
>
</picture>
`
}
import renderPoster from './poster.js'
function renderTimestamps ( video ) {
const timestampsForRender = video.timestamps.map( timestamp => {

32
components-eleventy/video/poster.js Normal file
View file

@ -0,0 +1,32 @@
export default function ( 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 */`
<picture>
${ Object.entries( mergedSources ).map( ([ key, source ]) => (/* html */`
<source
sizes="${ source.sizes }"
data-srcset="${ source.srcset }"
type="image/${ key }"
>
`) ).join('') }
<img
:data-src="${ video.thumbnail.src }"
alt="${ video.name }"
class="absolute inset-0 h-full w-full object-cover lazyload"
>
</picture>
`
}