feat(media-store): add fullscreen button component state definition

Add reusable state definition for fullscreen button components:
- FullscreenButtonState interface with fullscreen boolean
- Explicit request methods: requestEnterFullscreen, requestExitFullscreen
- Follows established pattern similar to play/pause and mute/unmute
- Platform-agnostic state logic shared between HTML and React

State definition provides consistent behavior across all platforms
while enabling explicit control over fullscreen enter/exit actions.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Christian Pillsbury
2025-09-12 08:06:08 -07:00
committed by Christian Pillsbury
co-authored by Claude
parent 7f243c22d8
commit e19b98b120
2 changed files with 38 additions and 1 deletions
@@ -0,0 +1,36 @@
export interface FullscreenButtonState {
fullscreen: boolean;
}
export interface FullscreenButtonMethods {
requestEnterFullscreen: () => void;
requestExitFullscreen: () => void;
}
export interface FullscreenButtonStateDefinition {
keys: string[];
stateTransform: (rawState: any) => FullscreenButtonState;
createRequestMethods: (
dispatch: (action: { type: string; detail?: any }) => void,
) => FullscreenButtonMethods;
}
/**
* FullscreenButton state definition
* Defines the core state logic that can be shared between implementations
*/
export const fullscreenButtonStateDefinition: FullscreenButtonStateDefinition =
{
keys: ['fullscreen'],
stateTransform: (rawState: any): FullscreenButtonState => ({
fullscreen: rawState.fullscreen ?? false,
}),
createRequestMethods: (dispatch): FullscreenButtonMethods => ({
requestEnterFullscreen: () =>
dispatch({ type: 'fullscreenrequest', detail: true }),
requestExitFullscreen: () =>
dispatch({ type: 'fullscreenrequest', detail: false }),
}),
};
+2 -1
View File
@@ -6,4 +6,5 @@ export * from './state-mediators/temporal';
export * from './component-state-definitions/play-button';
export * from './component-state-definitions/mute-button';
export * from './component-state-definitions/volume-range';
export * from './component-state-definitions/time-range';
export * from './component-state-definitions/time-range';
export * from './component-state-definitions/fullscreen-button';