hb-editor-video (editor-video)

Package: @htmlbricks/hb-editor-video
Category: media
Tags: media, video, editor

Overview

hb-editor-video is a video trimmer web component: it plays an MP4 from src, shows a 16:9 Bulma card with the video, and keeps an hb-range-slider in sync with playback so the user can set in and out times in seconds (track.minValue / track.maxValue). Numeric h / m / s fields and small cue buttons snap the trim window to the current playhead. An optional hb-form (driven by a JSON schema string on form) can gate the primary Send action until metadata is valid. The footer shows the selected duration and a Send control.

The component registers hb-range-slider and hb-form at runtime (same bundle version as the host package). Icons use Bootstrap Icons (stylesheet injected in the shadow tree).

Custom element

<hb-editor-video></hb-editor-video>

Attributes (HTML)

Web component attributes are strings. Use JSON strings for structured props where noted (track, form). Names follow snake_case where applicable.

| Attribute | Required | Description | | --- | --- | --- | | src | Yes | URL of the video source (MP4; passed to <video><source>. | | track | No | JSON string for the trim window in seconds, e.g. {"minValue":0,"maxValue":120}. Parsed on the client; if omitted, defaults apply and values are clamped to the loaded media duration on loadedmetadata. | | form | No | JSON string describing the hb-form schema (same shape the form component expects). When set, the embedded form is shown with submit hidden; Send triggers validation and, when valid, a dispatchTrack event with track fields merged into the submitted form payload. | | id | No | Optional element id. |

The TypeScript Component type also includes optional style; it is not wired in the current Svelte implementation—prefer styling the host with CSS or documented CSS variables below.

Behavior

• Playback: Play/pause toggles the <video> element. During timeupdate, the current time is clamped inside [track.minValue, track.maxValue] (pauses and seeks when crossing bounds).
• Slider: hb-range-slider receives min / max from the asset duration, minval / maxval from track, and position_value from the playhead. Moving the slider updates track, seeks the video, and emits changeTrackValues.
• Time inputs: Editing h/m/s recomputes track.minValue / track.maxValue in seconds and emits changeTrackValues.
• Cue buttons: Set in from current time (▼/▲ pair on the left) or out from current time (right), then emit changeTrackValues.
• No form: Send dispatches dispatchTrack with the current ITrack (minValue, maxValue in seconds).
• With form: Send is only enabled when the form is valid (hb-form update events). Clicking Send submits the form path; on success, dispatchTrack fires with Object.assign(track, formDetails) (validated form fields merged onto the track object).

Events

Listen with addEventListener or framework equivalents; event.detail shapes:

| Event | detail | | --- | --- | | changeTrackValues | { minVaule: number; maxValue: number } — fired when the trim range or slider changes. Note: the first property is spelled minVaule in the implementation and typings (typo preserved for compatibility). | | dispatchTrack | ITrack (seconds) as the event detail when form is unset. When form is set, the same object shape with validated hb-form fields merged in (Object.assign onto the track). |

CSS custom properties

Theme and layout follow Bulma 1.x tokens. Relevant variables (see extra/docs.ts / styleSetup):

| Variable | Role | | --- | --- | | --hb-slider-background-color | Accent for the nested hb-range-slider (trim bar). The markup maps it from --bulma-primary by default; set it on hb-editor-video to retint the slider independently. | | --bulma-primary | Primary Send button and default slider accent when mapped in markup. | | --bulma-control-height | Line box for the duration row and width of small time inputs. | | --bulma-link | Link-styled Bulma tokens where they apply. |

CSS ::part names

None.

Slots

None.

Minimal examples

Trim only (no form):

<hb-editor-video
  src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
  track='{"minValue":0,"maxValue":120}'
></hb-editor-video>

With a small metadata form (schema is a JSON string; this matches the Storybook-style example in extra/docs.ts):

<hb-editor-video
  id="my-editor"
  src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
  track='{"minValue":0,"maxValue":5}'
  form='[{"type":"text","id":"clipTitle","label":"Clip title","required":false,"value":"","placeholder":"Optional label"}]'
></hb-editor-video>

Listening from JavaScript:

const el = document.querySelector("hb-editor-video");

el.addEventListener("changeTrackValues", (e) => {
  console.log(e.detail.minVaule, e.detail.maxValue);
});

el.addEventListener("dispatchTrack", (e) => {
  console.log("final selection", e.detail);
});

TypeScript (authoring)

From types/webcomponent.type.d.ts:

export interface ITrack {
  minValue: number;
  maxValue: number;
}

export type Component = {
  id?: string;
  style?: string;
  src: string;
  form?: string;
  track?: ITrack;
};

export type Events = {
  changeTrackValues: { minVaule: number; maxValue: number };
  dispatchTrack: ITrack & Record<string, unknown>;
};

License

Package metadata in extra/docs.ts lists Apache-2.0 (LICENSE.md). The Svelte source file header may still cite MIT for historical attribution; treat the package license as authoritative for distribution.