@growth-labs/video 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-labs/video",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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)
@@ -47,12 +54,13 @@ const captionsSrc = showCaptions
 	data-video-id={videoId}
 	data-premium={premium ? 'true' : 'false'}
 	data-session-route={premium ? config.premium?.sessionRoute : undefined}
+	data-pending-src={premium ? src : undefined}
 	data-chapters-src={chaptersSrc}
 	data-captions-src={captionsSrc}
 	data-captions-lang={captionsLang}
 	data-progress-marks={JSON.stringify(config.analytics.progressMarks)}
 	title={title}
-	src={src}
+	src={premium ? undefined : src}
 	poster={poster}
 	preload={config.player.preload}
 	autoplay={Astro.props.autoplay ?? config.player.autoplay}
@@ -75,6 +83,8 @@ const captionsSrc = showCaptions
 </media-player>
 
 <script>
+	import { bootstrapPremiumPlayer } from './premium-bootstrap'
+
 	import('vidstack/elements').then((mod: any) => {
 		if (typeof mod.defineCustomElements === 'function') {
 			mod.defineCustomElements()
@@ -83,36 +93,16 @@ const captionsSrc = showCaptions
 
 	const VIDEO_ACCESS_DENIED = 'gl:video-access-denied'
 
+	// Premium players ship without `src` and with `data-pending-src` carrying
+	// the manifest URL. Establish the session cookie *before* Vidstack loads
+	// the manifest — otherwise preload="metadata" 401s on mount.
 	document.querySelectorAll<HTMLElement>('media-player[data-premium="true"]').forEach((player) => {
-		const videoId = player.dataset.videoId
-		const sessionRoute = player.dataset.sessionRoute
-		if (!videoId || !sessionRoute) return
-
-		let sessionChecked = false
-		const ensure = async () => {
-			if (sessionChecked) return
-			sessionChecked = true
-			try {
-				const res = await fetch(sessionRoute, {
-					method: 'POST',
-					credentials: 'same-origin',
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify({ videoId }),
-				})
-				if (!res.ok) {
-					window.dispatchEvent(
-						new CustomEvent(VIDEO_ACCESS_DENIED, { detail: { videoId } }),
-					)
-				}
-			} catch {
+		bootstrapPremiumPlayer(player as unknown as Parameters<typeof bootstrapPremiumPlayer>[0], {
+			emitAccessDenied: (videoId) =>
 				window.dispatchEvent(
 					new CustomEvent(VIDEO_ACCESS_DENIED, { detail: { videoId } }),
-				)
-			}
-		}
-
-		player.addEventListener('pointerenter', ensure, { once: true })
-		player.addEventListener('play', ensure)
+				),
+		})
 	})
 
 	const emit = (name: string, detail: unknown) =>

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}

package/src/components/premium-bootstrap.ts

@@ -0,0 +1,38 @@
+export interface PremiumPlayerLike {
+	dataset: { videoId?: string; sessionRoute?: string; pendingSrc?: string }
+	src?: string
+}
+
+export interface BootstrapOptions {
+	fetch?: typeof fetch
+	emitAccessDenied?: (videoId: string) => void
+}
+
+export async function bootstrapPremiumPlayer(
+	player: PremiumPlayerLike,
+	opts: BootstrapOptions = {},
+): Promise<'authorized' | 'denied' | 'skipped'> {
+	const { videoId, sessionRoute, pendingSrc } = player.dataset
+	if (!videoId || !sessionRoute) return 'skipped'
+
+	const f = opts.fetch ?? fetch
+	let ok = false
+	try {
+		const res = await f(sessionRoute, {
+			method: 'POST',
+			credentials: 'same-origin',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ videoId }),
+		})
+		ok = res.ok
+	} catch {
+		ok = false
+	}
+
+	if (ok) {
+		if (pendingSrc) player.src = pendingSrc
+		return 'authorized'
+	}
+	opts.emitAccessDenied?.(videoId)
+	return 'denied'
+}