From ad7aa79b618c57f1d5c926dd2c1e8fd35530d3bf Mon Sep 17 00:00:00 2001 From: Christian Pillsbury Date: Wed, 27 Aug 2025 08:36:40 -0700 Subject: [PATCH] refactor: standardize state property names across core, HTML, and React packages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove 'media' prefix from state mediator properties (mediaPaused -> paused, mediaMuted -> muted, etc.) and action types (mediaplayrequest -> playrequest) for cleaner, more consistent API across all platform implementations. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- packages/core/media-store/src/factory.ts | 12 ++++++------ .../core/media-store/src/state-mediators/audible.ts | 12 ++++++------ .../core/media-store/src/state-mediators/playable.ts | 6 +++--- .../html/html/src/components/media-mute-button.ts | 10 +++++----- .../html/html/src/components/media-play-button.ts | 8 ++++---- packages/react/react/src/components/MuteButton.tsx | 8 ++++---- packages/react/react/src/components/PlayButton.tsx | 6 +++--- 7 files changed, 31 insertions(+), 31 deletions(-) diff --git a/packages/core/media-store/src/factory.ts b/packages/core/media-store/src/factory.ts index c31fff11..d5917dad 100644 --- a/packages/core/media-store/src/factory.ts +++ b/packages/core/media-store/src/factory.ts @@ -38,10 +38,10 @@ export type FacadeProp = ReadonlyFacadeProp & { }; export type StateMediator = { - mediaPaused: FacadeProp; - mediaMuted: FacadeProp; - mediaVolume: FacadeProp; - mediaVolumeLevel: ReadonlyFacadeProp<'high' | 'medium' | 'low' | 'off'>; + paused: FacadeProp; + muted: FacadeProp; + volume: FacadeProp; + volumeLevel: ReadonlyFacadeProp<'high' | 'medium' | 'low' | 'off'>; }; export function createMediaStore({ @@ -49,7 +49,7 @@ export function createMediaStore({ stateMediator, }: { media?: any; - stateMediator: Partial & Pick; + stateMediator: Partial & Pick; }) { const stateOwners: StateOwners = {}; const store = map({}); @@ -137,7 +137,7 @@ export function createMediaStore({ } function getInitialState( - stateMediator: Partial & Pick, + stateMediator: Partial & Pick, stateOwners: any, ) { let initialState: any = {}; diff --git a/packages/core/media-store/src/state-mediators/audible.ts b/packages/core/media-store/src/state-mediators/audible.ts index 88ac1c18..5ac584b4 100644 --- a/packages/core/media-store/src/state-mediators/audible.ts +++ b/packages/core/media-store/src/state-mediators/audible.ts @@ -1,5 +1,5 @@ export const audible = { - mediaMuted: { + muted: { get(stateOwners: any) { const { media } = stateOwners; return media?.muted ?? false; @@ -12,11 +12,11 @@ export const audible = { mediaEvents: ['volumechange'], actions: { /** @TODO Refactor me to play more nicely with side effects that don't/can't correlate with set() API or aren't simple 1:1 with getter vs. setter (CJP) */ - mediamuterequest: () => true, - mediaunmuterequest: () => false, + muterequest: () => true, + unmuterequest: () => false, }, }, - mediaVolume: { + volume: { get(stateOwners: any) { const { media } = stateOwners; return media?.volume ?? 1.0; @@ -30,13 +30,13 @@ export const audible = { mediaEvents: ['volumechange'], actions: { /** @TODO Refactor me to play more nicely with side effects that don't/can't correlate with set() API (CJP) */ - mediavolumerequest: ( + volumerequest: ( { detail }: Pick, 'detail'> = { detail: 0 }, ) => +detail, }, }, // NOTE: This could be (re)implemented as "derived state" in some manner (e.g. selectors but also other patterns/conventions) if preferred. (CJP) - mediaVolumeLevel: { + volumeLevel: { get(stateOwners: any) { const { media } = stateOwners; if (typeof media?.volume == 'undefined') return 'high'; diff --git a/packages/core/media-store/src/state-mediators/playable.ts b/packages/core/media-store/src/state-mediators/playable.ts index 3171e7ee..32802b62 100644 --- a/packages/core/media-store/src/state-mediators/playable.ts +++ b/packages/core/media-store/src/state-mediators/playable.ts @@ -1,5 +1,5 @@ export const playable = { - mediaPaused: { + paused: { get(stateOwners: any) { const { media } = stateOwners; return media?.paused ?? true; @@ -11,8 +11,8 @@ export const playable = { mediaEvents: ['play', 'playing', 'pause', 'emptied'], actions: { /** @TODO Refactor me to play more nicely with side effects that don't/can't correlate with set() API (CJP) */ - mediaplayrequest: () => false, - mediapauserequest: () => true, + playrequest: () => false, + pauserequest: () => true, }, }, }; diff --git a/packages/html/html/src/components/media-mute-button.ts b/packages/html/html/src/components/media-mute-button.ts index 2fff0077..caf0761d 100644 --- a/packages/html/html/src/components/media-mute-button.ts +++ b/packages/html/html/src/components/media-mute-button.ts @@ -56,16 +56,16 @@ export const useMuteButtonState: StateHook<{ muted: boolean; volumeLevel: string; }> = { - keys: ['mediaMuted', 'mediaVolumeLevel'], + keys: ['muted', 'volumeLevel'], transform: (rawState, mediaStore) => ({ - muted: rawState.mediaMuted ?? false, - volumeLevel: rawState.mediaVolumeLevel ?? 'off', + muted: rawState.muted ?? false, + volumeLevel: rawState.volumeLevel ?? 'off', requestMute() { - const type = 'mediamuterequest'; + const type = 'muterequest'; mediaStore.dispatch({ type }); }, requestUnmute() { - const type = 'mediaunmuterequest'; + const type = 'unmuterequest'; mediaStore.dispatch({ type }); }, }), diff --git a/packages/html/html/src/components/media-play-button.ts b/packages/html/html/src/components/media-play-button.ts index 63809abe..c619a1e8 100644 --- a/packages/html/html/src/components/media-play-button.ts +++ b/packages/html/html/src/components/media-play-button.ts @@ -44,15 +44,15 @@ export class PlayButtonBase extends MediaChromeButton { * Handles media store state subscription and transformation */ export const usePlayButtonState: StateHook<{ paused: boolean }> = { - keys: ['mediaPaused'], + keys: ['paused'], transform: (rawState, mediaStore) => ({ - paused: rawState.mediaPaused ?? true, + paused: rawState.paused ?? true, requestPlay() { - const type = 'mediaplayrequest'; + const type = 'playrequest'; mediaStore.dispatch({ type }); }, requestPause() { - const type = 'mediapauserequest'; + const type = 'pauserequest'; mediaStore.dispatch({ type }); }, }), diff --git a/packages/react/react/src/components/MuteButton.tsx b/packages/react/react/src/components/MuteButton.tsx index ad6e72ab..07e92688 100644 --- a/packages/react/react/src/components/MuteButton.tsx +++ b/packages/react/react/src/components/MuteButton.tsx @@ -5,16 +5,16 @@ import { toConnectedComponent } from '../utils/component-factory'; export const useMuteButtonState = (_props: any) => { /** @TODO Fix type issues with hooks (CJP) */ const volumeLevel = useMediaSelector( - (state: any) => state.mediaVolumeLevel, + (state: any) => state.volumeLevel, ) as string; - const muted = useMediaSelector((state: any) => state.mediaMuted) as boolean; + const muted = useMediaSelector((state: any) => state.muted) as boolean; const dispatch = useMediaDispatch(); const requestMute = React.useCallback(() => { - dispatch({ type: 'mediamuterequest' }); + dispatch({ type: 'muterequest' }); }, [dispatch]); const requestUnmute = React.useCallback(() => { - dispatch({ type: 'mediaunmuterequest' }); + dispatch({ type: 'unmuterequest' }); }, [dispatch]); return { diff --git a/packages/react/react/src/components/PlayButton.tsx b/packages/react/react/src/components/PlayButton.tsx index e459d1fc..656175e4 100644 --- a/packages/react/react/src/components/PlayButton.tsx +++ b/packages/react/react/src/components/PlayButton.tsx @@ -5,15 +5,15 @@ import { toConnectedComponent } from '../utils/component-factory'; export const usePlayButtonState = (_props: any) => { /** @TODO Fix type issues with hooks (CJP) */ const paused = useMediaSelector( - (state: any) => typeof state.mediaPaused !== 'boolean' || state.mediaPaused, + (state: any) => typeof state.paused !== 'boolean' || state.paused, ) as boolean; const dispatch = useMediaDispatch(); const requestPlay = React.useCallback(() => { - dispatch({ type: 'mediaplayrequest' }); + dispatch({ type: 'playrequest' }); }, [dispatch]); const requestPause = React.useCallback(() => { - dispatch({ type: 'mediapauserequest' }); + dispatch({ type: 'pauserequest' }); }, [dispatch]); return {