forked from vyla-entertainment/home-frontend
25 lines
902 B
JavaScript
25 lines
902 B
JavaScript
import { createElement, qs } from '../utils/dom.js';
|
|
import { youtubeThumbnailUrl } from '../utils/youtube.js';
|
|
|
|
export function createShowcaseItem(video) {
|
|
const item = createElement('div', 'showcase-item');
|
|
item.innerHTML = `
|
|
<button class="showcase-card" type="button" aria-label="Play video">
|
|
<img class="showcase-thumb" src="${youtubeThumbnailUrl(video.id)}" alt="" width="280" height="157" loading="lazy" decoding="async">
|
|
</button>
|
|
`;
|
|
|
|
const img = qs('img', item);
|
|
img.addEventListener('load', () => item.classList.add('loaded'));
|
|
img.addEventListener('error', () => {
|
|
item.style.display = 'none';
|
|
});
|
|
|
|
const cardBtn = qs('.showcase-card', item);
|
|
cardBtn.addEventListener('click', () => {
|
|
cardBtn.classList.add('clicked');
|
|
window.open(video.url, '_blank', 'noopener,noreferrer');
|
|
});
|
|
|
|
return item;
|
|
} |