refactor: standardize state property names across core, HTML, and React packages

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 <noreply@anthropic.com>

packages/core/media-store/src/factory.ts

@@ -38,10 +38,10 @@ export type FacadeProp<T, S = T, D = T> = ReadonlyFacadeProp<T, D> & {
 };
 
 export type StateMediator = {
-  mediaPaused: FacadeProp<HTMLMediaElement['paused']>;
-  mediaMuted: FacadeProp<HTMLMediaElement['muted']>;
-  mediaVolume: FacadeProp<HTMLMediaElement['volume']>;
-  mediaVolumeLevel: ReadonlyFacadeProp<'high' | 'medium' | 'low' | 'off'>;
+  paused: FacadeProp<HTMLMediaElement['paused']>;
+  muted: FacadeProp<HTMLMediaElement['muted']>;
+  volume: FacadeProp<HTMLMediaElement['volume']>;
+  volumeLevel: ReadonlyFacadeProp<'high' | 'medium' | 'low' | 'off'>;
 };
 
 export function createMediaStore({
@@ -49,7 +49,7 @@ export function createMediaStore({
   stateMediator,
 }: {
   media?: any;
-  stateMediator: Partial<StateMediator> & Pick<StateMediator, 'mediaPaused'>;
+  stateMediator: Partial<StateMediator> & Pick<StateMediator, 'paused'>;
 }) {
   const stateOwners: StateOwners = {};
   const store = map<any>({});
@@ -137,7 +137,7 @@ export function createMediaStore({
 }
 
 function getInitialState(
-  stateMediator: Partial<StateMediator> & Pick<StateMediator, 'mediaPaused'>,
+  stateMediator: Partial<StateMediator> & Pick<StateMediator, 'paused'>,
   stateOwners: any,
 ) {
   let initialState: any = {};

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<CustomEvent<any>, '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';

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,
     },
   },
 };

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 });
     },
   }),

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 });
     },
   }),

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 {

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 {