399 lines
13 KiB
JavaScript
399 lines
13 KiB
JavaScript
/**
|
|
* KV-Stream - Hero Billboard Component
|
|
* Modern Apple TV+ / Netflix inspired hero section
|
|
*/
|
|
|
|
/**
|
|
* Create a modern hero section with featured content
|
|
* @param {Object|Array<Object>} featuredItems - Featured video object or array
|
|
* @param {Function} onPlay - Callback when play is clicked
|
|
* @param {Function} onInfo - Callback when more info is clicked
|
|
* @param {string} modifier - Optional CSS class for variants
|
|
* @returns {HTMLElement} Hero section element
|
|
*/
|
|
export function createHeroSection(featuredItems, onPlay, onInfo, modifier = '') {
|
|
const hero = document.createElement('section');
|
|
hero.className = `hero-billboard ${modifier}`;
|
|
hero.id = 'heroSection';
|
|
|
|
// Normalize input to array
|
|
const items = Array.isArray(featuredItems) ? featuredItems : [featuredItems];
|
|
|
|
if (items.length === 0 || !items[0]) {
|
|
return hero;
|
|
}
|
|
|
|
// Get first featured item for display
|
|
const featured = items[0];
|
|
const backdropUrl = featured.backdrop || featured.thumbnail || featured.poster_url || '';
|
|
const year = featured.year || new Date().getFullYear();
|
|
const rating = featured.rating ? `${featured.rating}★` : '';
|
|
const quality = featured.resolution || featured.quality || 'HD';
|
|
const genre = featured.genre || featured.category || '';
|
|
const duration = featured.duration || '';
|
|
|
|
// Build meta items
|
|
const metaItems = [quality, year, genre, duration, rating].filter(Boolean);
|
|
|
|
hero.innerHTML = `
|
|
<div class="hero-billboard__backdrop">
|
|
<img src="${backdropUrl}" alt="${featured.title}" loading="eager" />
|
|
<div class="hero-billboard__gradient"></div>
|
|
</div>
|
|
|
|
<div class="hero-billboard__content">
|
|
<div class="hero-billboard__info">
|
|
<h1 class="hero-billboard__title">${featured.title}</h1>
|
|
|
|
<div class="hero-billboard__meta">
|
|
${metaItems.map((item, i) => `
|
|
<span class="hero-billboard__meta-item">${item}</span>
|
|
${i < metaItems.length - 1 ? '<span class="hero-billboard__meta-dot">•</span>' : ''}
|
|
`).join('')}
|
|
</div>
|
|
|
|
<p class="hero-billboard__description">${featured.description || ''}</p>
|
|
|
|
<div class="hero-billboard__actions">
|
|
<button class="hero-billboard__btn hero-billboard__btn--primary" data-action="play" data-id="${featured.id}">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
|
|
<path d="M8 5v14l11-7z"/>
|
|
</svg>
|
|
<span>Watch Now</span>
|
|
</button>
|
|
<button class="hero-billboard__btn hero-billboard__btn--secondary" data-action="info" data-id="${featured.id}">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M12 16v-4"></path>
|
|
<path d="M12 8h.01"></path>
|
|
</svg>
|
|
<span>More Info</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
${items.length > 1 ? createSliderDots(items) : ''}
|
|
`;
|
|
|
|
// Add styles
|
|
addHeroStyles();
|
|
|
|
// Setup slider if multiple items
|
|
if (items.length > 1) {
|
|
setupSlider(hero, items, onPlay, onInfo);
|
|
} else {
|
|
// Single item events
|
|
setupSingleItemEvents(hero, featured, onPlay, onInfo);
|
|
}
|
|
|
|
return hero;
|
|
}
|
|
|
|
function createSliderDots(items) {
|
|
return `
|
|
<div class="hero-billboard__dots">
|
|
${items.map((_, i) => `
|
|
<button class="hero-billboard__dot ${i === 0 ? 'active' : ''}" data-index="${i}"></button>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function setupSingleItemEvents(hero, featured, onPlay, onInfo) {
|
|
const playBtn = hero.querySelector('[data-action="play"]');
|
|
const infoBtn = hero.querySelector('[data-action="info"]');
|
|
|
|
if (playBtn) {
|
|
playBtn.addEventListener('click', () => onPlay && onPlay(featured));
|
|
}
|
|
if (infoBtn) {
|
|
infoBtn.addEventListener('click', () => onInfo && onInfo(featured));
|
|
}
|
|
}
|
|
|
|
function setupSlider(hero, items, onPlay, onInfo) {
|
|
let currentIndex = 0;
|
|
let interval;
|
|
const dots = hero.querySelectorAll('.hero-billboard__dot');
|
|
|
|
const showSlide = (index) => {
|
|
if (index < 0) index = items.length - 1;
|
|
if (index >= items.length) index = 0;
|
|
currentIndex = index;
|
|
|
|
const featured = items[index];
|
|
const backdropUrl = featured.backdrop || featured.thumbnail || featured.poster_url || '';
|
|
|
|
// Update content
|
|
const backdrop = hero.querySelector('.hero-billboard__backdrop img');
|
|
const title = hero.querySelector('.hero-billboard__title');
|
|
const description = hero.querySelector('.hero-billboard__description');
|
|
const playBtn = hero.querySelector('[data-action="play"]');
|
|
const infoBtn = hero.querySelector('[data-action="info"]');
|
|
|
|
if (backdrop) backdrop.src = backdropUrl;
|
|
if (title) title.textContent = featured.title;
|
|
if (description) description.textContent = featured.description || '';
|
|
if (playBtn) playBtn.dataset.id = featured.id;
|
|
if (infoBtn) infoBtn.dataset.id = featured.id;
|
|
|
|
// Update dots
|
|
dots.forEach((dot, i) => dot.classList.toggle('active', i === index));
|
|
};
|
|
|
|
const startAutoPlay = () => {
|
|
if (interval) clearInterval(interval);
|
|
interval = setInterval(() => showSlide(currentIndex + 1), 8000);
|
|
};
|
|
|
|
startAutoPlay();
|
|
|
|
// Dot click events
|
|
dots.forEach(dot => {
|
|
dot.addEventListener('click', () => {
|
|
const idx = parseInt(dot.dataset.index);
|
|
showSlide(idx);
|
|
startAutoPlay();
|
|
});
|
|
});
|
|
|
|
// Button events
|
|
hero.addEventListener('click', (e) => {
|
|
const playBtn = e.target.closest('[data-action="play"]');
|
|
const infoBtn = e.target.closest('[data-action="info"]');
|
|
|
|
if (playBtn && onPlay) {
|
|
onPlay(items[currentIndex]);
|
|
} else if (infoBtn && onInfo) {
|
|
onInfo(items[currentIndex]);
|
|
}
|
|
});
|
|
}
|
|
|
|
function addHeroStyles() {
|
|
if (document.getElementById('hero-billboard-styles')) return;
|
|
|
|
const styles = document.createElement('style');
|
|
styles.id = 'hero-billboard-styles';
|
|
styles.textContent = `
|
|
.hero-billboard {
|
|
position: relative;
|
|
width: 100%;
|
|
/* Fluid height: scales with viewport, min 300px, max 85vh */
|
|
height: clamp(300px, 60vh, 85vh);
|
|
overflow: hidden;
|
|
margin-bottom: clamp(10px, 2vw, 30px);
|
|
}
|
|
|
|
.hero-billboard__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.hero-billboard__backdrop img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center 20%;
|
|
}
|
|
|
|
.hero-billboard__gradient {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 0.95) 0%,
|
|
rgba(0, 0, 0, 0.7) 25%,
|
|
rgba(0, 0, 0, 0.3) 50%,
|
|
transparent 75%
|
|
),
|
|
linear-gradient(
|
|
to top,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 0.6) 15%,
|
|
transparent 50%
|
|
);
|
|
}
|
|
|
|
.hero-billboard__content {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
/* Fluid padding: scales with viewport */
|
|
padding: 0 clamp(20px, 5vw, 80px);
|
|
}
|
|
|
|
.hero-billboard__info {
|
|
/* Fluid max-width: scales between 280px and 600px based on viewport */
|
|
max-width: clamp(280px, 40vw, 600px);
|
|
z-index: 2;
|
|
}
|
|
|
|
.hero-billboard__title {
|
|
/* Fluid font-size: scales dynamically with screen */
|
|
font-size: clamp(1.5rem, 4vw, 3.5rem);
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin: 0 0 clamp(8px, 1.5vw, 20px) 0;
|
|
line-height: 1.15;
|
|
text-shadow: 0 2px 10px rgba(0,0,0,0.6);
|
|
}
|
|
|
|
.hero-billboard__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: clamp(4px, 0.8vw, 10px);
|
|
margin-bottom: clamp(8px, 1.5vw, 20px);
|
|
}
|
|
|
|
.hero-billboard__meta-item {
|
|
font-size: clamp(0.7rem, 1vw, 1rem);
|
|
color: rgba(255,255,255,0.9);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hero-billboard__meta-item:first-child {
|
|
background: #0071e3;
|
|
padding: clamp(2px, 0.4vw, 6px) clamp(6px, 0.8vw, 12px);
|
|
border-radius: 4px;
|
|
font-size: clamp(0.65rem, 0.9vw, 0.85rem);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hero-billboard__meta-dot {
|
|
color: rgba(255,255,255,0.5);
|
|
font-size: clamp(0.6rem, 0.8vw, 0.85rem);
|
|
}
|
|
|
|
.hero-billboard__description {
|
|
font-size: clamp(0.85rem, 1.1vw, 1.1rem);
|
|
color: rgba(255,255,255,0.8);
|
|
line-height: 1.5;
|
|
margin: 0 0 clamp(12px, 2vw, 28px) 0;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-billboard__actions {
|
|
display: flex;
|
|
gap: clamp(8px, 1vw, 14px);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-billboard__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: clamp(6px, 0.6vw, 10px);
|
|
padding: clamp(10px, 1.2vw, 16px) clamp(16px, 2vw, 32px);
|
|
border: none;
|
|
border-radius: clamp(6px, 0.6vw, 10px);
|
|
font-size: clamp(0.85rem, 1vw, 1.1rem);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hero-billboard__btn--primary {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.hero-billboard__btn--primary:hover {
|
|
background: rgba(255,255,255,0.9);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.hero-billboard__btn--secondary {
|
|
background: rgba(255,255,255,0.15);
|
|
color: #fff;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.hero-billboard__btn--secondary:hover {
|
|
background: rgba(255,255,255,0.25);
|
|
}
|
|
|
|
.hero-billboard__btn svg {
|
|
flex-shrink: 0;
|
|
width: clamp(18px, 1.5vw, 24px);
|
|
height: clamp(18px, 1.5vw, 24px);
|
|
}
|
|
|
|
.hero-billboard__dots {
|
|
position: absolute;
|
|
bottom: clamp(15px, 3vh, 35px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: clamp(5px, 0.6vw, 10px);
|
|
z-index: 10;
|
|
}
|
|
|
|
.hero-billboard__dot {
|
|
width: clamp(6px, 0.6vw, 10px);
|
|
height: clamp(6px, 0.6vw, 10px);
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: rgba(255,255,255,0.4);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
padding: 0;
|
|
}
|
|
|
|
.hero-billboard__dot.active {
|
|
background: #fff;
|
|
width: clamp(16px, 2vw, 28px);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.hero-billboard__dot:hover {
|
|
background: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
/* Small variant for category pages */
|
|
.hero-billboard.hero--small {
|
|
height: clamp(200px, 35vh, 400px);
|
|
}
|
|
|
|
/* Mobile-specific adjustments (small screens need content at bottom) */
|
|
@media (max-width: 600px) {
|
|
.hero-billboard__content {
|
|
align-items: flex-end;
|
|
padding-bottom: clamp(50px, 10vh, 80px);
|
|
}
|
|
|
|
.hero-billboard__info {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.hero-billboard__description {
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.hero-billboard__actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-billboard__btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(styles);
|
|
}
|
|
|
|
export function initHeroCarousel(container, featuredVideos, onPlay, onInfo) {
|
|
if (!featuredVideos || featuredVideos.length === 0) return;
|
|
|
|
const hero = createHeroSection(featuredVideos, onPlay, onInfo);
|
|
container.innerHTML = '';
|
|
container.appendChild(hero);
|
|
}
|
|
|