hb-gallery-video

Category: media · Tags: media, video, gallery

Summary

Paginated hb-card-video grid from JSON cards, with hb-paginate, optional text and date filters, and internal vs external filter modes.

What it does

1. Cards: Parse JSON string; assign _id; parse time with Day.js when present; sort/filter/slice per mode.
2. Pagination: pageChange from paginator updates page unless externalfilter is set.
3. Filters: Text + date toolbar when all cards have time (otherwise date search disabled with console warning).

Custom element

hb-gallery-video

Attributes

Snake_case in HTML; link_label maps to prop linkLabel. Numbers as strings; disabletextfilter: yes hides text search.

| Attribute | Type (logical) | Notes | | --- | --- | --- | | cards | string | ICard[] | Required content; invalid JSON → empty list. | | id | string (optional) | | | style | string (optional) | Typings only. | | size | number | string | Items per page (default 12). | | page | number | string | 0-based; when 0, date format forced to dddd DD MMMM YYYY HH:mm. | | pages | number | string | With externalfilter, total pages from host. | | link_label | string | Prop linkLabel. | | dateformat | string | Day.js format when page ≠ 0. | | primarycolor | string | Passed to hb-paginate. | | filter | string | Text filter. | | externalfilter | string | Non-empty → host-driven filtering; see README behavior in source. | | disabletextfilter | string | yes hides text field. | | initialdate / lastdate | Date | string | Fallback bounds. |

Custom events

| Event name | detail shape | | --- | --- | | pageChange | { page: number; cards: ICard[] } — slice vs full list per externalfilter. | | textFilterVideos | { filter?: string } — when externalfilter and filter defined. | | dateFilterVideos | { start?: Date; end?: Date; dateKey: "start" \| "end" } |

Styling

CSS custom properties (extra/docs.ts)

| Variable | Role | | --- | --- | | --hb-gallery-video-date-input-max-width | Date inputs max width. | | --bulma-column-gap | Toolbar / grid gutters. |

CSS parts (extra/docs.ts)

| Part | Role | | --- | --- | | container | Root container is-fluid. |

Slots

None.

TypeScript

types/webcomponent.type.d.ts — Component, Events, ICard.

Minimal HTML example

<hb-gallery-video
  cards='[{"title":"Clip","videoSrc":"https://example.com/video.mp4","time":"2021-08-06T22:46:30.565Z"}]'
  size="12"
  page="0"
></hb-gallery-video>