@growth-labs/video 0.3.8 → 0.3.10

package/README.md

@@ -88,8 +88,8 @@ video/<videoId>/hls/<rendition>/index.m3u8
 video/<videoId>/hls/<rendition>/init.mp4
 video/<videoId>/hls/<rendition>/segment-00001.m4s
 video/<videoId>/poster.jpg
-video/<videoId>/captions_en.vtt
-video/<videoId>/chapters.vtt
+video/<videoId>/text/captions_en.vtt
+video/<videoId>/text/chapters.vtt
 ```
 
 ## Ingest Helpers
@@ -116,6 +116,6 @@ await writeChaptersVtt({ bucket: env.MEDIA_BUCKET, videoId: 'intro-video', vtt:
 
 The ingestion helper validates `master.m3u8`, referenced rendition playlists, segment paths, and local HLS `URI="..."` attributes such as `EXT-X-MAP`, `EXT-X-MEDIA`, `EXT-X-I-FRAME-STREAM-INF`, and `EXT-X-KEY` before writing to R2. Absolute/external URLs and unsafe relative paths are rejected. Transcoding is out of scope; pass already-generated HLS and VTT files.
 
-All R2 key helpers normalize `videoId` with the same safe contract: IDs must start with an ASCII letter or number and then contain only ASCII letters, numbers, `_`, or `-`. Text-track helpers write only under `video/<videoId>/captions_<lang>.vtt` and `video/<videoId>/chapters.vtt`.
+All R2 key helpers normalize `videoId` with the same safe contract: IDs must start with an ASCII letter or number and then contain only ASCII letters, numbers, `_`, or `-`. Text-track helpers write only under `video/<videoId>/text/captions_<lang>.vtt` and `video/<videoId>/text/chapters.vtt`.
 
 Injected routes read bindings from `cloudflare:workers` `env`; no `locals.runtime` shim is required.

package/dist/utils/keys.js

@@ -19,11 +19,11 @@ export function captionsKey(videoId, lang = 'en') {
         .trim()
         .toLowerCase()
         .replace(/[^a-z0-9-]/g, '_') || 'en';
-    return `video/${safeVideoId}/captions_${normalized}.vtt`;
+    return `video/${safeVideoId}/text/captions_${normalized}.vtt`;
 }
 export function chaptersKey(videoId) {
     const safeVideoId = normalizeVideoId(videoId);
-    return `video/${safeVideoId}/chapters.vtt`;
+    return `video/${safeVideoId}/text/chapters.vtt`;
 }
 export function chaptersJsonKey(videoId) {
     const safeVideoId = normalizeVideoId(videoId);

package/dist/utils/keys.js.map

@@ -1 +1 @@
-{"version":3,"file":"keys.js","sourceRoot":"","sources":["../../src/utils/keys.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB,CAAC,OAAe;IAC/C,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,EAAE,CAAA;IACjC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;QACrD,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAA;IACnC,CAAC;IACD,OAAO,UAAU,CAAA;AAClB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,OAAe;IAC/C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,SAAS,WAAW,kBAAkB,CAAA;AAC9C,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,OAAe;IACxC,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,SAAS,WAAW,aAAa,CAAA;AACzC,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,OAAe,EAAE,OAAe,IAAI;IAC/D,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,MAAM,UAAU,GACf,IAAI;SACF,IAAI,EAAE;SACN,WAAW,EAAE;SACb,OAAO,CAAC,aAAa,EAAE,GAAG,CAAC,IAAI,IAAI,CAAA;IACtC,OAAO,SAAS,WAAW,aAAa,UAAU,MAAM,CAAA;AACzD,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,OAAe;IAC1C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,SAAS,WAAW,eAAe,CAAA;AAC3C,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,OAAe;IAC9C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,SAAS,WAAW,gBAAgB,CAAA;AAC5C,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,OAAe;IAC9C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,SAAS,WAAW,OAAO,CAAA;AACnC,CAAC"}
+{"version":3,"file":"keys.js","sourceRoot":"","sources":["../../src/utils/keys.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB,CAAC,OAAe;IAC/C,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,EAAE,CAAA;IACjC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;QACrD,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAA;IACnC,CAAC;IACD,OAAO,UAAU,CAAA;AAClB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,OAAe;IAC/C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,SAAS,WAAW,kBAAkB,CAAA;AAC9C,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,OAAe;IACxC,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,SAAS,WAAW,aAAa,CAAA;AACzC,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,OAAe,EAAE,OAAe,IAAI;IAC/D,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,MAAM,UAAU,GACf,IAAI;SACF,IAAI,EAAE;SACN,WAAW,EAAE;SACb,OAAO,CAAC,aAAa,EAAE,GAAG,CAAC,IAAI,IAAI,CAAA;IACtC,OAAO,SAAS,WAAW,kBAAkB,UAAU,MAAM,CAAA;AAC9D,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,OAAe;IAC1C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,SAAS,WAAW,oBAAoB,CAAA;AAChD,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,OAAe;IAC9C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,SAAS,WAAW,gBAAgB,CAAA;AAC5C,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,OAAe;IAC9C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC7C,OAAO,SAAS,WAAW,OAAO,CAAA;AACnC,CAAC"}

package/dist/utils/url.js

@@ -9,10 +9,10 @@ export function captionsUrl(publicDomain, videoId, lang = 'en') {
         .trim()
         .toLowerCase()
         .replace(/[^a-z0-9-]/g, '_') || 'en';
-    return `https://${publicDomain}/video/${videoId}/captions_${normalized}.vtt`;
+    return `https://${publicDomain}/video/${videoId}/text/captions_${normalized}.vtt`;
 }
 export function chaptersUrl(publicDomain, videoId) {
-    return `https://${publicDomain}/video/${videoId}/chapters.vtt`;
+    return `https://${publicDomain}/video/${videoId}/text/chapters.vtt`;
 }
 export function chaptersJsonUrl(publicDomain, videoId) {
     return `https://${publicDomain}/video/${videoId}/chapters.json`;

package/dist/utils/url.js.map

@@ -1 +1 @@
-{"version":3,"file":"url.js","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,YAAoB,EAAE,OAAe;IAChE,OAAO,WAAW,YAAY,UAAU,OAAO,kBAAkB,CAAA;AAClE,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,YAAoB,EAAE,OAAe;IAC9D,OAAO,WAAW,YAAY,+EAA+E,OAAO,aAAa,CAAA;AAClI,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,YAAoB,EAAE,OAAe,EAAE,OAAe,IAAI;IACrF,MAAM,UAAU,GACf,IAAI;SACF,IAAI,EAAE;SACN,WAAW,EAAE;SACb,OAAO,CAAC,aAAa,EAAE,GAAG,CAAC,IAAI,IAAI,CAAA;IACtC,OAAO,WAAW,YAAY,UAAU,OAAO,aAAa,UAAU,MAAM,CAAA;AAC7E,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,YAAoB,EAAE,OAAe;IAChE,OAAO,WAAW,YAAY,UAAU,OAAO,eAAe,CAAA;AAC/D,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,YAAoB,EAAE,OAAe;IACpE,OAAO,WAAW,YAAY,UAAU,OAAO,gBAAgB,CAAA;AAChE,CAAC;AAED,SAAS,cAAc,CAAC,KAAa;IACpC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;AACxD,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,aAAqB,EAAE,OAAe;IACxE,OAAO,GAAG,cAAc,CAAC,aAAa,CAAC,IAAI,OAAO,kBAAkB,CAAA;AACrE,CAAC;AAED,MAAM,UAAU,kBAAkB,CACjC,aAAqB,EACrB,OAAe,EACf,OAAe;IAEf,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IACpE,OAAO,GAAG,cAAc,CAAC,aAAa,CAAC,IAAI,OAAO,IAAI,OAAO,EAAE,CAAA;AAChE,CAAC"}
+{"version":3,"file":"url.js","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,YAAoB,EAAE,OAAe;IAChE,OAAO,WAAW,YAAY,UAAU,OAAO,kBAAkB,CAAA;AAClE,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,YAAoB,EAAE,OAAe;IAC9D,OAAO,WAAW,YAAY,+EAA+E,OAAO,aAAa,CAAA;AAClI,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,YAAoB,EAAE,OAAe,EAAE,OAAe,IAAI;IACrF,MAAM,UAAU,GACf,IAAI;SACF,IAAI,EAAE;SACN,WAAW,EAAE;SACb,OAAO,CAAC,aAAa,EAAE,GAAG,CAAC,IAAI,IAAI,CAAA;IACtC,OAAO,WAAW,YAAY,UAAU,OAAO,kBAAkB,UAAU,MAAM,CAAA;AAClF,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,YAAoB,EAAE,OAAe;IAChE,OAAO,WAAW,YAAY,UAAU,OAAO,oBAAoB,CAAA;AACpE,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,YAAoB,EAAE,OAAe;IACpE,OAAO,WAAW,YAAY,UAAU,OAAO,gBAAgB,CAAA;AAChE,CAAC;AAED,SAAS,cAAc,CAAC,KAAa;IACpC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;AACxD,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,aAAqB,EAAE,OAAe;IACxE,OAAO,GAAG,cAAc,CAAC,aAAa,CAAC,IAAI,OAAO,kBAAkB,CAAA;AACrE,CAAC;AAED,MAAM,UAAU,kBAAkB,CACjC,aAAqB,EACrB,OAAe,EACf,OAAe;IAEf,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IACpE,OAAO,GAAG,cAAc,CAAC,aAAa,CAAC,IAAI,OAAO,IAAI,OAAO,EAAE,CAAA;AAChE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-labs/video",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "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)

package/src/utils/keys.ts

@@ -23,12 +23,12 @@ export function captionsKey(videoId: string, lang: string = 'en'): string {
 			.trim()
 			.toLowerCase()
 			.replace(/[^a-z0-9-]/g, '_') || 'en'
-	return `video/${safeVideoId}/captions_${normalized}.vtt`
+	return `video/${safeVideoId}/text/captions_${normalized}.vtt`
 }
 
 export function chaptersKey(videoId: string): string {
 	const safeVideoId = normalizeVideoId(videoId)
-	return `video/${safeVideoId}/chapters.vtt`
+	return `video/${safeVideoId}/text/chapters.vtt`
 }
 
 export function chaptersJsonKey(videoId: string): string {

package/src/utils/url.ts

@@ -12,11 +12,11 @@ export function captionsUrl(publicDomain: string, videoId: string, lang: string
 			.trim()
 			.toLowerCase()
 			.replace(/[^a-z0-9-]/g, '_') || 'en'
-	return `https://${publicDomain}/video/${videoId}/captions_${normalized}.vtt`
+	return `https://${publicDomain}/video/${videoId}/text/captions_${normalized}.vtt`
 }
 
 export function chaptersUrl(publicDomain: string, videoId: string): string {
-	return `https://${publicDomain}/video/${videoId}/chapters.vtt`
+	return `https://${publicDomain}/video/${videoId}/text/chapters.vtt`
 }
 
 export function chaptersJsonUrl(publicDomain: string, videoId: string): string {