mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
b4746f7122
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Darius Cepulis <dcepulis@mux.com>
48 lines
2.5 KiB
Plaintext
48 lines
2.5 KiB
Plaintext
---
|
|
title: ProviderMixin
|
|
description: Mixin that creates the player store and manages the full media attach lifecycle
|
|
---
|
|
|
|
import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
|
|
import DocsLink from "@/components/docs/DocsLink.astro";
|
|
|
|
`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:
|
|
|
|
{/* TODO: link context keys to concept page once written (https://github.com/videojs/v10/issues/1033) */}
|
|
- **`playerContext`** — the store, consumed by <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> 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](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide), the provider falls back to `querySelector('video, audio')` to support plain `<video>` and `<audio>` elements.
|
|
|
|
{/* TODO: link destroyCallback to lifecycle reference once written (https://github.com/videojs/v10/issues/1034) */}
|
|
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 <DocsLink slug="reference/container-mixin">`ContainerMixin`</DocsLink> when the store owner is a different element from the container:
|
|
|
|
```ts
|
|
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:
|
|
|
|
```ts
|
|
const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });
|
|
|
|
class VideoPlayer extends ProviderMixin(ContainerMixin(MediaElement)) {}
|
|
```
|
|
|
|
<UtilReference util="ProviderMixin" />
|