ProviderMixin

ProviderMixin creates a class that provides the player store to descendant elements via context. It owns the store lifecycle: creates the store lazily on first access and destroys it on disconnect.

Store lifecycle

The store is created lazily using the factory from createPlayer. On connectedCallback, the mixin publishes the store to context so descendant elements can consume it. On disconnectedCallback, it calls store.destroy() and cleans up.

Any PlayerController or ContainerMixin element below the provider in the DOM tree receives the store automatically through context.

When to split provider and container

Use ProviderMixin separate from ContainerMixin when the store owner is a different element from the one containing the media. This is common in complex layouts:

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

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

// Content region discovers and attaches the media element
class VideoRegion extends ContainerMixin(MediaElement) {}

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

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

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