playwright-director 0.2.0

package/templates/site/src/components/VideoModal.astro

@@ -0,0 +1,170 @@
+---
+// Video modal component - handles inline video playback with prev/next navigation
+---
+
+<div id="video-modal" class="video-modal" style="display: none;">
+	<button class="video-modal-close" aria-label="Close">×</button>
+	<div class="video-container">
+		<button class="video-nav video-nav-prev" aria-label="Previous" style="display: none;">‹</button>
+		<video controls id="modal-video">
+			<source src="" type="video/webm" />
+		</video>
+		<button class="video-nav video-nav-next" aria-label="Next" style="display: none;">›</button>
+	</div>
+	<div class="video-title-bar">
+		<span id="video-title"></span>
+		<span id="video-counter"></span>
+	</div>
+</div>
+
+<style>
+	.video-container {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		max-width: 100%;
+	}
+
+	.video-nav {
+		background: rgba(255, 255, 255, 0.9);
+		border: none;
+		width: 50px;
+		height: 50px;
+		border-radius: 50%;
+		font-size: 2rem;
+		cursor: pointer;
+		transition: all 0.2s;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+	}
+
+	.video-nav:hover {
+		background: white;
+		transform: scale(1.1);
+	}
+
+	.video-nav:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+		transform: none;
+	}
+
+	.video-title-bar {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		max-width: 900px;
+		margin-top: 1rem;
+		padding: 0 60px;
+		color: white;
+		font-size: 0.9rem;
+	}
+
+	#video-title {
+		font-weight: 500;
+	}
+
+	#video-counter {
+		opacity: 0.7;
+	}
+</style>
+
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		const modal = document.getElementById('video-modal') as HTMLDivElement;
+		const video = document.getElementById('modal-video') as HTMLVideoElement;
+		const closeBtn = modal?.querySelector('.video-modal-close');
+		const prevBtn = modal?.querySelector('.video-nav-prev') as HTMLButtonElement;
+		const nextBtn = modal?.querySelector('.video-nav-next') as HTMLButtonElement;
+		const videoSource = video?.querySelector('source');
+		const titleEl = document.getElementById('video-title');
+		const counterEl = document.getElementById('video-counter');
+
+		// Collect all video cards
+		const cards = Array.from(document.querySelectorAll('.video-card'));
+		let currentIndex = 0;
+
+		const playVideo = (index: number) => {
+			if (index < 0 || index >= cards.length) return;
+
+			currentIndex = index;
+			const card = cards[index];
+			const videoUrl = card.getAttribute('data-video-url');
+			const title = card.querySelector('.video-title')?.textContent || '';
+
+			if (videoUrl && videoSource && video) {
+				videoSource.src = videoUrl;
+				video.load();
+				video.play();
+
+				// Update title and counter
+				if (titleEl) titleEl.textContent = title;
+				if (counterEl) counterEl.textContent = `${index + 1} / ${cards.length}`;
+
+				// Update nav buttons
+				if (prevBtn) {
+					prevBtn.style.display = 'flex';
+					prevBtn.disabled = index === 0;
+				}
+				if (nextBtn) {
+					nextBtn.style.display = 'flex';
+					nextBtn.disabled = index === cards.length - 1;
+				}
+			}
+		};
+
+		// Open modal on card click
+		cards.forEach((card, index) => {
+			card.addEventListener('click', () => {
+				if (modal) {
+					modal.style.display = 'flex';
+					playVideo(index);
+				}
+			});
+		});
+
+		// Navigation
+		prevBtn?.addEventListener('click', (e) => {
+			e.stopPropagation();
+			playVideo(currentIndex - 1);
+		});
+
+		nextBtn?.addEventListener('click', (e) => {
+			e.stopPropagation();
+			playVideo(currentIndex + 1);
+		});
+
+		// Auto-advance on video end
+		video?.addEventListener('ended', () => {
+			if (currentIndex < cards.length - 1) {
+				playVideo(currentIndex + 1);
+			}
+		});
+
+		// Close modal
+		const closeModal = () => {
+			if (modal && video) {
+				modal.style.display = 'none';
+				video.pause();
+			}
+		};
+
+		closeBtn?.addEventListener('click', closeModal);
+		modal?.addEventListener('click', (e) => {
+			if (e.target === modal) closeModal();
+		});
+
+		// Keyboard navigation
+		document.addEventListener('keydown', (e) => {
+			if (modal?.style.display !== 'flex') return;
+
+			if (e.key === 'Escape') closeModal();
+			if (e.key === 'ArrowLeft') playVideo(currentIndex - 1);
+			if (e.key === 'ArrowRight') playVideo(currentIndex + 1);
+		});
+	});
+</script>

package/templates/site/src/layouts/Base.astro

@@ -0,0 +1,56 @@
+---
+import '../styles/tutorials.css';
+import siteConfig from '../data/site-config.json';
+
+interface Props {
+	title: string;
+	description?: string;
+}
+
+const config = siteConfig as any;
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+const { title, description = config.title } = Astro.props;
+
+const cssVars = [
+	config.primaryColor && `--color-primary: ${config.primaryColor}`,
+	config.font && `--font-family: ${config.font}`,
+]
+	.filter(Boolean)
+	.join('; ');
+---
+
+<!doctype html>
+<html lang={config.lang || 'en'}>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="description" content={description} />
+		<title>{title} | {config.title}</title>
+	</head>
+	<body style={cssVars || undefined}>
+		<header>
+			<div class="header-content">
+				<a href={`${base}/`} class="logo">
+					{
+						config.logo ? (
+							<img src={config.logo} alt={config.title} class="logo-img" />
+						) : (
+							<span class="logo-icon">🎬</span>
+						)
+					}
+					<span class="logo-text">{config.title}</span>
+				</a>
+			</div>
+		</header>
+		<main>
+			<slot />
+		</main>
+		<footer>
+			<div class="footer-content">
+				<span>© {new Date().getFullYear()} {config.title}</span>
+				<span>·</span>
+				<span>Built with playwright-director</span>
+			</div>
+		</footer>
+	</body>
+</html>