ProviderMixin

ProviderMixin creates a class that owns the player store and the media attach lifecycle. It publishes the store to context so descendants can consume it, and calls store.attach() when both a media element and a container are available.

Store lifecycle

The store is created when the element is constructed. On connectedCallback, the mixin publishes three context values to its descendants:

• playerContext — the store, consumed by PlayerController and other controllers
• mediaContext — a setter callback for media elements to register themselves
• containerContext — a setter callback for container elements to register themselves

When a media element and a container both register, the provider calls store.attach({ media, container }). If no media element registers via context within a microtask, the provider falls back to querySelector('video, audio') to support plain <video> and <audio> elements.

On disconnectedCallback, the mixin detaches the current media target but keeps the store alive. An element moved in the DOM reconnects without losing state. The store is destroyed in destroyCallback.

When to split provider and container

Use ProviderMixin separate from ContainerMixin when the store owner is a different element from the container:

const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });

// Layout shell owns the store
class AppShell extends ProviderMixin(MediaElement) {}

// Content region is the fullscreen target and container reference
class VideoRegion extends ContainerMixin(MediaElement) {}

When a single element handles both responsibilities, compose the mixins directly:

const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });

class VideoPlayer extends ProviderMixin(ContainerMixin(MediaElement)) {}