@growth-labs/video 0.3.3 → 0.3.5

package/README.md

@@ -54,6 +54,32 @@ Why a module spec instead of an inline function? The integration runs in the bui
 
 `per-video` scope (the 0.3.0 default) issues a cookie restricted to one `videoId`, so video status changes propagate within `sessionTtl`. `wildcard` issues a cookie that plays every premium video for the cookie's lifetime — cheaper per page but status changes do not propagate until the cookie expires.
 
+## Customizing the layout
+
+Since **0.3.5**, `<Video>` exposes a named slot `layout` for replacing the Vidstack chrome (controls, sliders, menus) without losing anything the package wires up around the player — premium bootstrap, accessCheck, `gl:video-*` analytics events, captions/chapter `<track>` elements, progress marks.
+
+```astro
+---
+import { Video } from '@growth-labs/video/components'
+import MyVideoLayout from '../components/MyVideoLayout.astro'
+---
+
+<Video videoId="..." title="..." premium>
+  <MyVideoLayout slot="layout" />
+</Video>
+```
+
+If you omit the slot, you get Vidstack's stock `<media-video-layout>` (the package's current default). If you provide it, your slotted content **replaces** the default entirely — it is rendered as a direct child of `<media-player>`, so any Vidstack layout primitive (`<media-controls>`, `<media-time-slider>`, `<media-quality-radio-group>`, etc.) works.
+
+Consumers writing a custom layout typically need to import Vidstack's full UI element registry once at the top of their component (Vidstack's `vidstack/elements` only defines a minimal set; the full primitive set is under `vidstack/player/ui`):
+
+```ts
+// inside MyVideoLayout.astro's <script>
+import 'vidstack/player/ui'
+```
+
+Captions and chapter `<track>` elements continue to be rendered by `<Video>` inside `<media-provider>` — do not duplicate them inside your slotted layout.
+
 ## R2 Layout
 
 ```text

package/package.json

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

package/src/components/Video.astro

@@ -7,6 +7,7 @@ import {
 	posterUrl,
 	premiumManifestUrl,
 } from '@growth-labs/video/utils'
+import { buildPlayerBooleanAttrs } from './player-boolean-attrs'
 
 interface Props {
 	videoId: string
@@ -48,6 +49,14 @@ const chaptersSrc = showChapters ? chaptersUrl(config.publicDomain, videoId) : n
 const captionsSrc = showCaptions
 	? captionsUrl(config.publicDomain, videoId, captionsLang)
 	: null
+
+// Custom elements treat attribute *presence* as truthy. Spread only the
+// keys that resolve to true so SSR for `autoplay: false` / `muted: false`
+// omits the attributes entirely — see player-boolean-attrs.ts.
+const playerBoolAttrs = buildPlayerBooleanAttrs({
+	autoplay: Astro.props.autoplay ?? config.player.autoplay,
+	muted: Astro.props.muted ?? config.player.muted,
+})
 ---
 
 <media-player
@@ -63,9 +72,8 @@ const captionsSrc = showCaptions
 	src={premium ? undefined : src}
 	poster={poster}
 	preload={config.player.preload}
-	autoplay={Astro.props.autoplay ?? config.player.autoplay}
-	muted={Astro.props.muted ?? config.player.muted}
 	class={`gl-video ${className ?? ''}`.trim()}
+	{...playerBoolAttrs}
 >
 	<media-provider>
 		{captionsSrc && (
@@ -79,7 +87,7 @@ const captionsSrc = showCaptions
 		)}
 		{chaptersSrc && <track src={chaptersSrc} kind="chapters" srclang="en" label="Chapters" default />}
 	</media-provider>
-	<media-video-layout></media-video-layout>
+	<slot name="layout"><media-video-layout></media-video-layout></slot>
 </media-player>
 
 <script>

package/src/components/player-boolean-attrs.ts

@@ -0,0 +1,24 @@
+/**
+ * Build the subset of boolean-presence attributes for a `<media-player>`
+ * element. Custom elements (including Vidstack's `media-player`) treat
+ * attribute *presence* as truthy regardless of the string value — so
+ * `autoplay="false"` is read as truthy by `hasAttribute('autoplay')` and
+ * triggers autoplay. Astro renders interpolated booleans as the literal
+ * strings `"true"` / `"false"` for custom elements (it has no allowlist
+ * of HTML-spec'd boolean attrs on non-HTMLElement tags), so we cannot
+ * write `autoplay={resolvedAutoplay}` directly. Instead we spread an
+ * attrs object that only contains the key when the value is truthy.
+ *
+ * The returned shape is `Record<string, true>` so a downstream
+ * `<media-player {...attrs}>` emits `autoplay` / `muted` as bare
+ * presence attributes when set, and emits nothing for them when not.
+ */
+export function buildPlayerBooleanAttrs(input: {
+	autoplay: boolean
+	muted: boolean
+}): Record<string, true> {
+	const attrs: Record<string, true> = {}
+	if (input.autoplay) attrs.autoplay = true
+	if (input.muted) attrs.muted = true
+	return attrs
+}

package/dist/access-registry.d.ts

@@ -1,16 +0,0 @@
-import type { APIContext } from 'astro';
-export interface AccessCheckParams {
-    videoId: string;
-    request: Request;
-    env: Record<string, unknown>;
-}
-export interface AccessResult {
-    allowed: boolean;
-    reason?: string;
-    subjectId?: string;
-}
-export type AccessCheck = (params: AccessCheckParams, context: APIContext) => Promise<AccessResult>;
-export declare function registerAccessCheck(check: AccessCheck): void;
-export declare function getAccessCheck(): AccessCheck | null;
-export declare function _resetAccessRegistry(): void;
-//# sourceMappingURL=access-registry.d.ts.map

package/dist/access-registry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"access-registry.d.ts","sourceRoot":"","sources":["../src/access-registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvC,MAAM,WAAW,iBAAiB;IACjC,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAC5B;AAED,MAAM,WAAW,YAAY;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,UAAU,KAAK,OAAO,CAAC,YAAY,CAAC,CAAA;AAInG,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAK5D;AAED,wBAAgB,cAAc,IAAI,WAAW,GAAG,IAAI,CAEnD;AAGD,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/dist/access-registry.js

@@ -1,15 +0,0 @@
-let registered = null;
-export function registerAccessCheck(check) {
-    if (registered) {
-        console.warn('@growth-labs/video: access check replaced (previous registration overwritten)');
-    }
-    registered = check;
-}
-export function getAccessCheck() {
-    return registered;
-}
-// Test-only reset. Not exported from the package's public surface.
-export function _resetAccessRegistry() {
-    registered = null;
-}
-//# sourceMappingURL=access-registry.js.map

package/dist/access-registry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"access-registry.js","sourceRoot":"","sources":["../src/access-registry.ts"],"names":[],"mappings":"AAgBA,IAAI,UAAU,GAAuB,IAAI,CAAA;AAEzC,MAAM,UAAU,mBAAmB,CAAC,KAAkB;IACrD,IAAI,UAAU,EAAE,CAAC;QAChB,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAA;IAC9F,CAAC;IACD,UAAU,GAAG,KAAK,CAAA;AACnB,CAAC;AAED,MAAM,UAAU,cAAc;IAC7B,OAAO,UAAU,CAAA;AAClB,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,oBAAoB;IACnC,UAAU,GAAG,IAAI,CAAA;AAClB,CAAC"}