feat(html): refactor attach contexts to carry state and setter (#1024)

Co-authored-by: Wesley Luyten <luwes@users.noreply.github.com>
This commit is contained in:
rahim
2026-03-19 00:49:40 -07:00
committed by GitHub
co-authored by Wesley Luyten
parent eabd06550d
commit c07da27ead
13 changed files with 143 additions and 52 deletions
+21 -11
View File
@@ -5,7 +5,7 @@ import { type Context, createContext } from '@videojs/element/context';
// Player Context
// ----------------------------------------
export const PLAYER_CONTEXT_KEY = Symbol('@videojs/player');
export const PLAYER_CONTEXT_KEY = Symbol.for('@videojs/player');
export type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;
@@ -22,23 +22,33 @@ export type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<
export const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);
// ----------------------------------------
// Attach Contexts
// Media Context
// ----------------------------------------
export const MEDIA_ATTACH_KEY = Symbol('@videojs/media-attach');
export const MEDIA_CONTEXT_KEY = Symbol.for('@videojs/media');
export type MediaAttachValue = (media: Media | null) => void;
export interface MediaContextValue {
media: Media | null;
setMedia: (media: Media | null) => void;
}
export type MediaAttachContext = Context<typeof MEDIA_ATTACH_KEY, MediaAttachValue>;
export type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;
export const mediaAttachContext = createContext<MediaAttachValue, typeof MEDIA_ATTACH_KEY>(MEDIA_ATTACH_KEY);
export const mediaContext = createContext<MediaContextValue, typeof MEDIA_CONTEXT_KEY>(MEDIA_CONTEXT_KEY);
export const CONTAINER_ATTACH_KEY = Symbol('@videojs/container-attach');
// ----------------------------------------
// Container Context
// ----------------------------------------
export type ContainerAttachValue = (container: MediaContainer | null) => void;
export const CONTAINER_CONTEXT_KEY = Symbol.for('@videojs/container');
export type ContainerAttachContext = Context<typeof CONTAINER_ATTACH_KEY, ContainerAttachValue>;
export interface ContainerContextValue {
container: MediaContainer | null;
setContainer: (container: MediaContainer | null) => void;
}
export const containerAttachContext = createContext<ContainerAttachValue, typeof CONTAINER_ATTACH_KEY>(
CONTAINER_ATTACH_KEY
export type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;
export const containerContext = createContext<ContainerContextValue, typeof CONTAINER_CONTEXT_KEY>(
CONTAINER_CONTEXT_KEY
);
+4 -4
View File
@@ -11,7 +11,7 @@ import { combine, createStore } from '@videojs/store';
import { type ContainerMixin, createContainerMixin } from '../store/container-mixin';
import { createProviderMixin, type ProviderMixin } from '../store/provider-mixin';
import { containerAttachContext, mediaAttachContext, type PlayerContext, playerContext } from './context';
import { containerContext, mediaContext, type PlayerContext, playerContext } from './context';
import { PlayerController } from './player-controller';
export interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {
@@ -89,14 +89,14 @@ export function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): Cr
const ProviderMixin = createProviderMixin<PlayerStore>({
playerContext,
mediaAttachContext,
containerAttachContext,
mediaContext,
containerContext,
factory: create,
});
const ContainerMixin = createContainerMixin<PlayerStore>({
playerContext,
containerAttachContext,
containerContext,
});
return {