Angular Reel Player

Features

Installation

Basic Usage

Import the stylesheet and the standalone RkReelPlayerOverlayComponent into your component's imports array.

Template Slots

Six template slot directives let you customize every aspect of the player's UI. Each receives a strongly-typed context object. Only provide the slots you want to override — the defaults are used for the rest.

Custom Timeline

The rkPlayerTimeline template slot is invoked only when the overlay's gating rules would render the default bar (same timeline mode + timelineMinDurationSeconds), so you don't re-implement it. Reuse the .rk-reel-timeline class on your root to inherit flush-bottom positioning, safe-area padding, and touch-device clearance. Call state.bindInteractions(el) on your scrub track to wire pointer + keyboard scrubbing.

Nested Slider (Multi-Media Items)

When a ContentItem contains multiple media entries, the player renders them in a horizontal nested slider (Instagram carousel style). Use the rkPlayerNestedSlide slot to customize the inner slide content.

Content Loading & Error Handling

The player tracks per-slide loading and error states. A wave loader shows while content loads; an error icon shows for broken media. Errored URLs are cached so revisiting shows the error instantly without retrying.

Lifecycle Callbacks

When using the rkPlayerSlide template slot, use the context callbacks to control the loading indicator:

Custom Loading & Error UI

Replace the default wave loader and error icon with custom templates:

Timeline

The overlay renders a built-in playback timeline bar over the active video. Gate it via the timeline input: 'auto' (default) renders whenever the active media is a video longer than timelineMinDurationSeconds (default 30), 'always' whenever a video is active, 'never' to disable. For a fully custom scrub bar, use the rkPlayerTimeline template directive; its context exposes a timelineState backed by the underlying TimelineController.

Theme via the --rk-reel-timeline-* CSS custom properties. For direct control in custom consumer components, inject TimelineStateService.

RkTimelineBarComponent

Default playback scrub bar component. Consumes TimelineStateService (provided by RkReelPlayerOverlayComponent) and renders the track, buffered ranges, progress fill, and scrub pill. Selector: rk-timeline-bar. Inputs: class?: string, style?: Record<string, string>. Use inside an rkPlayerTimeline template to wrap or augment the default bar; use standalone only inside a consumer that provides the service.

SoundStateService

Provided at the RkReelPlayerOverlayComponent level. Injected by the default sound button and exposed in the controls template slot context. Can be injected in custom controls that are children of the overlay for direct access.

Custom Data Types

Extend BaseContentItem to use your own domain model. The component is generic: RkReelPlayerOverlayComponent<T extends BaseContentItem>.

RkReelPlayerOverlayComponent Inputs

RkReelPlayerOverlayComponent Outputs

MediaItem Interface

Template Slot Context Types

CSS Classes

All CSS classes are plain (not scoped), so they can be targeted with higher-specificity selectors in a stylesheet loaded after @reelkit/angular-reel-player/styles.css. For color, size, and z-index changes, prefer the CSS custom properties documented in the Theming section below — they're designed for exactly that.

Theming

Every color, size, z-index, and transition lives in a CSS custom property. Override one or many at :root (or any ancestor of the overlay) to retheme without touching component source. The tokens match the React and Vue packages, so overrides port between bindings.

Drop the snippet below into a stylesheet loaded after @reelkit/angular-reel-player/styles.css.

Accessibility

The overlay root is a modal dialog (role="dialog", aria-modal="true"). Set the ariaLabel input to change the screen-reader announcement; it defaults to "Video player". Each slide carries role="group", aria-roledescription="slide", and aria-label="Slide N of M".

The overlay captures focus on open and returns it to the trigger on close. Tab and Shift+Tab cycle through focusable elements inside; focus that escapes (click outside, programmatic focus) gets pulled back. Implemented with captureFocusForReturn and createFocusTrap from @reelkit/core.