@growth-labs/video 0.3.8 → 0.3.9

package/package.json

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

package/src/components/Video.astro

@@ -94,17 +94,22 @@ const playerBoolAttrs = buildPlayerBooleanAttrs({
 <script>
 	import { bootstrapPremiumPlayer } from './premium-bootstrap'
 
-	import('vidstack/elements').then((mod: any) => {
-		if (typeof mod.defineCustomElements === 'function') {
-			mod.defineCustomElements()
-		}
-	})
+	// Vidstack registration is the consumer's responsibility — they choose
+	// which player bundle to ship (`vidstack/player` vs. `vidstack/elements`
+	// vs. a per-component define) and which layouts to register. The
+	// bootstrap below uses `customElements.whenDefined('media-player')`
+	// internally to wait for whatever registration path the consumer picked,
+	// so we no longer fire-and-forget a load of `vidstack/elements` here
+	// (it has no `defineCustomElements` export anyway — that was dead code).
 
 	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.
+	// the manifest — otherwise preload="metadata" 401s on mount. The
+	// bootstrap is single-flight (consumes `data-pending-src` on entry) so
+	// re-invocation (e.g. from a view-transition `astro:after-swap` re-running
+	// page scripts) is a no-op and never tears down an in-flight HLS load.
 	document.querySelectorAll<HTMLElement>('media-player[data-premium="true"]').forEach((player) => {
 		bootstrapPremiumPlayer(player as unknown as Parameters<typeof bootstrapPremiumPlayer>[0], {
 			emitAccessDenied: (videoId) =>

package/src/components/premium-bootstrap.ts

@@ -1,11 +1,30 @@
 export interface PremiumPlayerLike {
 	dataset: { videoId?: string; sessionRoute?: string; pendingSrc?: string }
 	src?: string
+	tagName?: string
 }
 
 export interface BootstrapOptions {
 	fetch?: typeof fetch
 	emitAccessDenied?: (videoId: string) => void
+	/**
+	 * Hook used by tests to bypass `customElements.whenDefined('media-player')`.
+	 * In production the bootstrap awaits the upgrade so `player.src` (a Vidstack
+	 * property setter installed during upgrade) is in place before assignment.
+	 */
+	waitForUpgrade?: (tagName: string) => Promise<void>
+}
+
+/**
+ * Default `waitForUpgrade` — resolves once `customElements.whenDefined()` for
+ * the player tag has run. Resolves immediately if `customElements` is missing
+ * (SSR / non-browser tests) so the bootstrap is still callable.
+ */
+function defaultWaitForUpgrade(tagName: string): Promise<void> {
+	if (typeof globalThis === 'undefined') return Promise.resolve()
+	const ce = (globalThis as { customElements?: CustomElementRegistry }).customElements
+	if (!ce || typeof ce.whenDefined !== 'function') return Promise.resolve()
+	return ce.whenDefined(tagName).then(() => undefined)
 }
 
 export async function bootstrapPremiumPlayer(
@@ -15,6 +34,19 @@ export async function bootstrapPremiumPlayer(
 	const { videoId, sessionRoute, pendingSrc } = player.dataset
 	if (!videoId || !sessionRoute) return 'skipped'
 
+	// Single-flight guard. The bootstrap is supposed to run exactly once per
+	// premium <media-player>, but consumers can re-run page scripts on
+	// view-transition swaps (`astro:after-swap`), or a defensive consumer can
+	// call into the bootstrap from multiple lifecycle hooks. A second
+	// `player.src = pendingSrc` after Vidstack has attached the HLS provider
+	// tears the provider down — the in-flight master.m3u8 / playlist.m3u8 XHRs
+	// abort, the player is left without a source, and `<media-quality-radio-
+	// group>` reports zero qualities so the picker disappears. Consuming
+	// `data-pending-src` makes the function a no-op on every call after the
+	// first authorized one, and prevents the race regardless of how many times
+	// the host script invokes it.
+	delete player.dataset.pendingSrc
+
 	const f = opts.fetch ?? fetch
 	let ok = false
 	try {
@@ -30,7 +62,21 @@ export async function bootstrapPremiumPlayer(
 	}
 
 	if (ok) {
-		if (pendingSrc) player.src = pendingSrc
+		if (pendingSrc) {
+			// Wait for Vidstack to upgrade <media-player>. The `src` getter/setter
+			// is installed during element upgrade; assigning to `player.src`
+			// before then writes a plain JS property that the Vidstack provider
+			// never reads, so the manifest URL is silently lost and the player
+			// stays inert. `customElements.whenDefined('media-player')` resolves
+			// the moment `vidstack/player`'s `defineCustomElement(MediaPlayer
+			// Element)` has run; in practice this is the same microtask as the
+			// session POST returns. The await is virtually free on a warm page
+			// and prevents the lost-source race on a cold one.
+			const tagName = (player.tagName ?? 'media-player').toLowerCase()
+			const waitForUpgrade = opts.waitForUpgrade ?? defaultWaitForUpgrade
+			await waitForUpgrade(tagName)
+			player.src = pendingSrc
+		}
 		return 'authorized'
 	}
 	opts.emitAccessDenied?.(videoId)