@growth-labs/video 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-labs/video",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "exports": {
     ".": {

package/src/components/Video.astro

@@ -36,7 +36,14 @@ const src = premium
 	? premiumManifestUrl(config.premium!.playbackRoute, videoId)
 	: manifestUrl(config.publicDomain, videoId)
 
-const poster = Astro.props.poster ?? posterUrl(config.publicDomain, videoId)
+// Convention-URL fallback fires only when the caller omits `poster` entirely.
+// Explicit `poster={null | undefined | ""}` is treated as "no poster" so that
+// consumers passing through video metadata with a missing posterUrl don't get
+// a 404'd /cdn-cgi/image/.../poster.jpg attribute (broken-image icon).
+const poster =
+	'poster' in Astro.props
+		? Astro.props.poster || undefined
+		: posterUrl(config.publicDomain, videoId)
 const chaptersSrc = showChapters ? chaptersUrl(config.publicDomain, videoId) : null
 const captionsSrc = showCaptions
 	? captionsUrl(config.publicDomain, videoId, captionsLang)

package/src/components/VideoGallery.astro

@@ -6,6 +6,7 @@ interface Item {
 	title: string
 	href: string
 	durationSeconds?: number
+	poster?: string | null
 }
 
 interface Props {
@@ -14,16 +15,24 @@ interface Props {
 }
 
 const { items, class: className } = Astro.props
+// Only forward `poster` to VideoPreview when the item literal carries the key.
+// Preserves VideoPreview's discriminator: items without a `poster` key fall
+// back to the convention URL; items with `poster: null | undefined | ""`
+// explicitly opt out of any <img> render.
+const previewItems = items.map((item) => ({
+	common: {
+		videoId: item.videoId,
+		title: item.title,
+		href: item.href,
+		durationSeconds: item.durationSeconds,
+	},
+	posterProps: ('poster' in item ? { poster: item.poster } : {}) as { poster?: string | null },
+}))
 ---
 
 <div class={`gl-video-gallery ${className ?? ''}`.trim()}>
-	{items.map((item) => (
-		<VideoPreview
-			videoId={item.videoId}
-			title={item.title}
-			href={item.href}
-			durationSeconds={item.durationSeconds}
-		/>
+	{previewItems.map(({ common, posterProps }) => (
+		<VideoPreview {...common} {...posterProps} />
 	))}
 </div>
 

package/src/components/VideoPreview.astro

@@ -7,18 +7,26 @@ interface Props {
 	title: string
 	href: string
 	durationSeconds?: number
+	poster?: string | null
 	class?: string
 }
 
 const { videoId, title, href, durationSeconds, class: className } = Astro.props
-const poster = posterUrl(config.publicDomain, videoId)
+// Convention-URL fallback fires only when the caller omits `poster` entirely.
+// Explicit `poster={null | undefined | ""}` is treated as "no poster" so that
+// gallery items passing through video metadata with a missing posterUrl don't
+// render a 404'd /cdn-cgi/image/.../poster.jpg <img> (broken-image icon).
+const poster =
+	'poster' in Astro.props
+		? Astro.props.poster || undefined
+		: 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" />
+	{poster && <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}