@growth-labs/video 0.3.1 → 0.3.2

package/package.json

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

package/src/components/Video.astro

@@ -54,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}
@@ -82,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()
@@ -90,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/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'
+}