StoreController

Import

import { StoreController } from "@videojs/store/html";

StoreController is a reactive controller for accessing store state and actions in custom elements. It accepts a store instance or a context, resolving the store automatically.

Without selector – returns the store instance directly. Does NOT subscribe to changes. Use this to access store actions.

class VolumeControl extends HTMLElement {
  #store = new StoreController(this, storeSource);

  handleClick() {
    this.#store.value.setVolume(0.5);
  }
}

With selector – returns the selected value and subscribes to changes. Triggers a host update when the selected value changes (using shallow equality).

class PlayButton extends HTMLElement {
  #playback = new StoreController(this, storeSource, selectPlayback);

  render() {
    const playback = this.#playback.value;
    // Re-renders when playback state changes
  }
}

StoreController vs PlayerController vs SnapshotController

PlayerController is a typed wrapper around StoreController scoped to the player store. For player UI, prefer PlayerController. Use StoreController when working with a custom store outside the player system.

When you pass a selector, StoreController internally creates a SnapshotController on the store’s $state container. Without a selector, no subscription is created – you get the store instance for imperative access to actions.

{ addController(controller: ReactiveController): void; removeController(controller: ReactiveController): void; requestUpdate(): void; updateComplete: Promise<boolean> } & HTMLElement

{ addController(controller: ReactiveController): void; removeController(controller: ReactiveController): void; requestUpdate(): void; updateComplete: Promise<boolean> } & HTMLElement

{ (state: Store['state']): Result; displayName?: string }