refactor(react,html): update PlayButton to use centralized state definitions

- Update React PlayButton to import from state-definitions/play-button
- Update HTML PlayButton to import from state-definitions/play-button
- Maintain consistency with MuteButton refactor pattern

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

Co-Authored-By: Claude <noreply@anthropic.com>

packages/html/html/src/components/media-play-button.ts

@@ -4,6 +4,7 @@ import {
   PropsHook,
 } from '../utils/component-factory';
 import { MediaChromeButton } from './media-chrome-button';
+import { playButtonStateDefinition } from './state-definitions/play-button';
 
 export class PlayButtonBase extends MediaChromeButton {
   _state:
@@ -44,17 +45,10 @@ export class PlayButtonBase extends MediaChromeButton {
  * Handles media store state subscription and transformation
  */
 export const usePlayButtonState: StateHook<{ paused: boolean }> = {
-  keys: ['paused'],
+  keys: playButtonStateDefinition.keys,
   transform: (rawState, mediaStore) => ({
-    paused: rawState.paused ?? true,
-    requestPlay() {
-      const type = 'playrequest';
-      mediaStore.dispatch({ type });
-    },
-    requestPause() {
-      const type = 'pauserequest';
-      mediaStore.dispatch({ type });
-    },
+    ...playButtonStateDefinition.stateTransform(rawState),
+    ...playButtonStateDefinition.createRequestMethods(mediaStore.dispatch),
   }),
 };
 

packages/react/react/src/components/PlayButton.tsx

@@ -1,52 +1,25 @@
 import {
   shallowEqual,
-  // useMediaDispatch,
   useMediaSelector,
   useMediaStore,
 } from '@vjs-10/react-media-store';
 import * as React from 'react';
 import { toConnectedComponent } from '../utils/component-factory';
-
-/**
- * PlayButton state hook - equivalent to React's usePlayButtonState
- * Handles media store state subscription and transformation
- */
-export const playButtonStateDef = {
-  keys: ['paused'],
-  stateTransform: (rawState: any) => ({
-    paused: rawState.paused ?? true,
-  }),
-  /** @TODO Consider "promoting" this up to state-mediator defs + media store (CJP) */
-  requestMethods: (mediaStore: ReturnType<typeof useMediaStore>) => {
-    return {
-      requestPlay() {
-        const type = 'playrequest';
-        mediaStore.dispatch({ type });
-      },
-      requestPause() {
-        const type = 'pauserequest';
-        mediaStore.dispatch({ type });
-      },
-    };
-  },
-} as const;
+import { playButtonStateDefinition } from './state-definitions/play-button';
 
 export const usePlayButtonState = (_props: any) => {
   const mediaStore = useMediaStore();
   /** @TODO Fix type issues with hooks (CJP) */
   const mediaState = useMediaSelector(
-    playButtonStateDef.stateTransform,
+    playButtonStateDefinition.stateTransform,
     shallowEqual,
   );
 
-  const [methods, setMethods] = React.useState(
-    playButtonStateDef.requestMethods(mediaStore),
+  const methods = React.useMemo(
+    () => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch),
+    [mediaStore],
   );
 
-  React.useEffect(() => {
-    setMethods(playButtonStateDef.requestMethods(mediaStore));
-  }, [mediaStore]);
-
   return {
     paused: mediaState.paused,
     requestPlay: methods.requestPlay,