@growth-labs/video 0.1.0

package/src/components/VideoEmbed.astro

@@ -0,0 +1,109 @@
+---
+import { config } from 'virtual:growth-labs/video/config'
+import { youtubeEmbedUrl, youtubeThumbnailUrl } from '@growth-labs/video/utils'
+
+interface Props {
+	videoId: string
+	title: string
+	start?: number
+	end?: number
+	autoplay?: boolean
+	muted?: boolean
+	privacyMode?: boolean
+	lazyLoad?: boolean
+	class?: string
+}
+
+const {
+	videoId,
+	title,
+	start,
+	end,
+	autoplay,
+	muted,
+	class: className,
+} = Astro.props
+const privacyMode = Astro.props.privacyMode ?? config.youtube.privacyMode
+const lazyLoad = Astro.props.lazyLoad ?? config.youtube.lazyLoad
+
+const embedSrc = youtubeEmbedUrl(videoId, { start, end, autoplay, muted, privacyMode })
+const thumbnail = youtubeThumbnailUrl(videoId, 'maxres')
+---
+
+{lazyLoad ? (
+	<div class={`gl-youtube-embed ${className ?? ''}`.trim()} data-youtube-embed data-src={embedSrc}>
+		<button type="button" class="gl-youtube-play" aria-label={`Play ${title}`}>
+			<img src={thumbnail} alt="" loading="lazy" decoding="async" />
+			<span aria-hidden="true" class="gl-youtube-play-icon">▶</span>
+		</button>
+	</div>
+) : (
+	<iframe
+		class={`gl-youtube-embed ${className ?? ''}`.trim()}
+		src={embedSrc}
+		title={title}
+		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+		allowfullscreen
+		loading="lazy"
+	></iframe>
+)}
+
+<script>
+	document.querySelectorAll<HTMLElement>('[data-youtube-embed]').forEach((wrapper) => {
+		const button = wrapper.querySelector<HTMLButtonElement>('.gl-youtube-play')
+		const src = wrapper.dataset.src
+		if (!button || !src) return
+		button.addEventListener(
+			'click',
+			() => {
+				const iframe = document.createElement('iframe')
+				iframe.src = `${src}${src.includes('?') ? '&' : '?'}autoplay=1`
+				iframe.title = button.getAttribute('aria-label')?.replace(/^Play /, '') ?? ''
+				iframe.allow =
+					'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+				iframe.setAttribute('allowfullscreen', '')
+				iframe.className = wrapper.className
+				wrapper.replaceWith(iframe)
+			},
+			{ once: true },
+		)
+	})
+</script>
+
+<style>
+	.gl-youtube-embed {
+		width: 100%;
+		aspect-ratio: 16 / 9;
+		display: block;
+		position: relative;
+		border: 0;
+		background: #000;
+	}
+	.gl-youtube-play {
+		all: unset;
+		display: block;
+		cursor: pointer;
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	.gl-youtube-play img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+	.gl-youtube-play-icon {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		font-size: 3rem;
+		color: #fff;
+		text-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
+	}
+	.gl-youtube-play:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+</style>

package/src/components/VideoGallery.astro

@@ -0,0 +1,36 @@
+---
+import VideoPreview from './VideoPreview.astro'
+
+interface Item {
+	videoId: string
+	title: string
+	href: string
+	durationSeconds?: number
+}
+
+interface Props {
+	items: Item[]
+	class?: string
+}
+
+const { items, class: className } = Astro.props
+---
+
+<div class={`gl-video-gallery ${className ?? ''}`.trim()}>
+	{items.map((item) => (
+		<VideoPreview
+			videoId={item.videoId}
+			title={item.title}
+			href={item.href}
+			durationSeconds={item.durationSeconds}
+		/>
+	))}
+</div>
+
+<style>
+	.gl-video-gallery {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+		gap: 1rem;
+	}
+</style>

package/src/components/VideoPreview.astro

@@ -0,0 +1,70 @@
+---
+import { config } from 'virtual:growth-labs/video/config'
+import { posterUrl } from '@growth-labs/video/utils'
+
+interface Props {
+	videoId: string
+	title: string
+	href: string
+	durationSeconds?: number
+	class?: string
+}
+
+const { videoId, title, href, durationSeconds, class: className } = Astro.props
+const poster = posterUrl(config.publicDomain, videoId)
+const durationLabel = durationSeconds
+	? `${Math.floor(durationSeconds / 60)}:${String(durationSeconds % 60).padStart(2, '0')}`
+	: null
+---
+
+<a class={`gl-video-preview ${className ?? ''}`.trim()} href={href} aria-label={title}>
+	<img src={poster} alt="" loading="lazy" decoding="async" />
+	<span aria-hidden="true" class="gl-video-preview-play">▶</span>
+	<span class="gl-video-preview-title">{title}</span>
+	{durationLabel ? <span class="gl-video-preview-duration">{durationLabel}</span> : null}
+</a>
+
+<style>
+	.gl-video-preview {
+		display: block;
+		position: relative;
+		aspect-ratio: 16 / 9;
+		text-decoration: none;
+		color: inherit;
+	}
+	.gl-video-preview img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.gl-video-preview-play {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 2.5rem;
+		color: #fff;
+		text-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
+	}
+	.gl-video-preview-title {
+		position: absolute;
+		left: 0.75rem;
+		bottom: 0.75rem;
+		right: 0.75rem;
+		color: #fff;
+		font-weight: 600;
+		line-height: 1.2;
+		text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
+	}
+	.gl-video-preview-duration {
+		position: absolute;
+		right: 0.5rem;
+		top: 0.5rem;
+		background: rgba(0, 0, 0, 0.75);
+		color: #fff;
+		padding: 0.125rem 0.5rem;
+		border-radius: 0.25rem;
+		font-size: 0.875rem;
+	}
+</style>

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { default as Video } from './Video.astro'
+export { default as VideoEmbed } from './VideoEmbed.astro'
+export { default as VideoGallery } from './VideoGallery.astro'
+export { default as VideoPreview } from './VideoPreview.astro'