@growth-labs/video 0.3.4 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -0
- package/package.json +1 -1
- package/src/components/Video.astro +1 -1
package/README.md
CHANGED
|
@@ -54,6 +54,32 @@ Why a module spec instead of an inline function? The integration runs in the bui
|
|
|
54
54
|
|
|
55
55
|
`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.
|
|
56
56
|
|
|
57
|
+
## Customizing the layout
|
|
58
|
+
|
|
59
|
+
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.
|
|
60
|
+
|
|
61
|
+
```astro
|
|
62
|
+
---
|
|
63
|
+
import { Video } from '@growth-labs/video/components'
|
|
64
|
+
import MyVideoLayout from '../components/MyVideoLayout.astro'
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
<Video videoId="..." title="..." premium>
|
|
68
|
+
<MyVideoLayout slot="layout" />
|
|
69
|
+
</Video>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
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.
|
|
73
|
+
|
|
74
|
+
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`):
|
|
75
|
+
|
|
76
|
+
```ts
|
|
77
|
+
// inside MyVideoLayout.astro's <script>
|
|
78
|
+
import 'vidstack/player/ui'
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Captions and chapter `<track>` elements continue to be rendered by `<Video>` inside `<media-provider>` — do not duplicate them inside your slotted layout.
|
|
82
|
+
|
|
57
83
|
## R2 Layout
|
|
58
84
|
|
|
59
85
|
```text
|
package/package.json
CHANGED
|
@@ -87,7 +87,7 @@ const playerBoolAttrs = buildPlayerBooleanAttrs({
|
|
|
87
87
|
)}
|
|
88
88
|
{chaptersSrc && <track src={chaptersSrc} kind="chapters" srclang="en" label="Chapters" default />}
|
|
89
89
|
</media-provider>
|
|
90
|
-
<media-video-layout></media-video-layout>
|
|
90
|
+
<slot name="layout"><media-video-layout></media-video-layout></slot>
|
|
91
91
|
</media-player>
|
|
92
92
|
|
|
93
93
|
<script>
|