SubscriptionController

Reactive controller that resolves a store and manages a derived subscription

Import

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

Usage

Provide a store or store context plus functions that read the current value and subscribe to changes.

class QueueController {
  readonly #tasks;

  constructor(host, storeSource) {
    this.#tasks = new SubscriptionController(host, storeSource, {
      getValue: (store) => store.queue.tasks,
      subscribe: (store, onChange) => store.queue.subscribe(onChange),
    });
  }

  get value() {
    return this.#tasks.value;
  }
}

The controller requests a host update when the subscription changes and unsubscribes when the host disconnects. Reading value throws until a store is available.

API Reference

Parameters

Parameter	Type	Default
`host*`	`object`	`—`
Description The host element that owns this controller. Type `{ addController(controller: ReactiveController): void; removeController(controller: ReactiveController): void; requestUpdate(): void; updateComplete: Promise<boolean> } & HTMLElement`
`source*`	`Store \| Context<unknown, Store>`	`—`
Description Store instance or context to resolve the store from.
`config*`	`function`	`—`
Description Subscription and value extraction configuration. Type `{ getValue: ((store: Store) => Value); subscribe: ((store: Store, onChange: (() => void)) => (() => void)) }`

Return Value

Property	Type	Details
`value`	`Value`
`hostDisconnected`	`(() => void)`