@htmlbricks/hb-card-video 0.66.8 → 0.66.10
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 +51 -0
- package/manifest.json +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
## `hb-card-video` — card-video
|
|
2
|
+
|
|
3
|
+
**Category:** media | **Tags:** media, video
|
|
4
|
+
|
|
5
|
+
### What it does
|
|
6
|
+
|
|
7
|
+
Bootstrap card with a 16:9 media area: YouTube embed when `provider` is `youtube`, otherwise an HTML5 `<video>` with MP4 source. Optional title, truncated description, formatted `time` via Day.js (`dateformat`), “read more” link label, and social share placeholders when `pageuri` is set.
|
|
8
|
+
|
|
9
|
+
### Custom element
|
|
10
|
+
|
|
11
|
+
`hb-card-video`
|
|
12
|
+
|
|
13
|
+
### Attributes / props (snake_case)
|
|
14
|
+
|
|
15
|
+
| Property | Type | Notes |
|
|
16
|
+
| --- | --- | --- |
|
|
17
|
+
| `id` | string (optional) | Element identifier. |
|
|
18
|
+
| `style` | string (optional) | Inline style string. |
|
|
19
|
+
| `title` | string (optional) | Card title. |
|
|
20
|
+
| `description` | string (optional) | Body text (truncated in UI). |
|
|
21
|
+
| `videosrc` | string (required) | Video URL or embed source. |
|
|
22
|
+
| `provider` | union (optional) | `"youtube"` or `""` for native video. |
|
|
23
|
+
| `pageuri` | string (optional) | Page URL for share widgets. |
|
|
24
|
+
| `linklabel` | string (optional) | Label for the “read more” style link. |
|
|
25
|
+
| `time` | Date (optional) | Publication or event time; pass parseable date string in HTML. |
|
|
26
|
+
| `dateformat` | string (optional) | Day.js format string for `time`. |
|
|
27
|
+
|
|
28
|
+
**Slot:** `card-footer`. No CSS vars in metadata.
|
|
29
|
+
|
|
30
|
+
### Events (`CustomEvent` names)
|
|
31
|
+
|
|
32
|
+
None declared in types (`Events` is an empty object).
|
|
33
|
+
|
|
34
|
+
### Usage notes
|
|
35
|
+
|
|
36
|
+
- Card layout follows Bootstrap card patterns.
|
|
37
|
+
- YouTube vs file video is selected only via `provider`; ensure `videosrc` matches the mode.
|
|
38
|
+
- Shadow DOM contains the player and share UI; slot `card-footer` extends the card.
|
|
39
|
+
- No i18n in `docs.ts`.
|
|
40
|
+
|
|
41
|
+
### Minimal HTML example
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<hb-card-video
|
|
45
|
+
videosrc="https://example.com/media/clip.mp4"
|
|
46
|
+
title="Product tour"
|
|
47
|
+
description="A short walkthrough of the dashboard."
|
|
48
|
+
time="2026-03-01T12:00:00.000Z"
|
|
49
|
+
dateformat="MMM D, YYYY"
|
|
50
|
+
></hb-card-video>
|
|
51
|
+
```
|
package/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@htmlbricks/hb-card-video",
|
|
3
|
-
"version": "0.66.
|
|
3
|
+
"version": "0.66.10",
|
|
4
4
|
"contributors": [],
|
|
5
5
|
"description": "Bootstrap card with a 16:9 media area: YouTube embed when `provider` is `youtube`, otherwise an HTML5 `<video>` with MP4 source. Optional title, truncated description (100 chars), formatted `time` via Day.js (`dateformat`), “read more” link label, and social share placeholders (Facebook/Twitter widgets) when `pageuri` is set.",
|
|
6
6
|
"licenses": [
|