refactor(media-store): add container state owner and rename event types

- Add container state owner to StateOwners type for fullscreen support
- Rename mediaelementchangerequest to mediastateownerchangerequest
- Add containerstateownerchangerequest event handling
- Refactor updateStateOwners to support multiple state owners
- Update all usage locations across HTML and React packages
- Validated with Playwright testing on both demo applications

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

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

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

@@ -2,6 +2,7 @@ import { getKey, map, subscribeKeys } from 'nanostores';
 
 export type StateOwners = {
   media?: any;
+  container?: any;
 };
 
 export type EventOrAction<D = undefined> = {
@@ -52,6 +53,7 @@ export function createMediaStore({
   stateMediator,
 }: {
   media?: any;
+  container?: any;
   stateMediator: Partial<StateMediator> & Pick<StateMediator, 'paused'>;
 }) {
   const stateOwners: StateOwners = {};
@@ -60,7 +62,12 @@ export function createMediaStore({
   const keys = Object.keys(stateMediator);
 
   function updateStateOwners(nextStateOwners: any) {
-    if (nextStateOwners.media === stateOwners.media) {
+    // Check if any state owner has changed
+    const hasChanges = Object.entries(nextStateOwners).some(
+      ([key, value]) => stateOwners[key as keyof StateOwners] !== value
+    );
+    
+    if (!hasChanges) {
       return;
     }
 
@@ -101,8 +108,10 @@ export function createMediaStore({
     dispatch(action: Pick<CustomEvent<any>, 'type' | 'detail'>) {
       const { type, detail } = action;
 
-      if (type === 'mediaelementchangerequest') {
+      if (type === 'mediastateownerchangerequest') {
         updateStateOwners({ media: detail });
+      } else if (type === 'containerstateownerchangerequest') {
+        updateStateOwners({ container: detail });
       } else {
         for (const stateObject of Object.values(stateMediator).filter(
           (

packages/html/html/src/media-container.ts

@@ -40,7 +40,7 @@ export class MediaContainer extends ConsumerMixin(HTMLElement) {
 
   _handleMediaSlotChange = () => {
     const media = this._mediaSlot.assignedElements({ flatten: true })[0];
-    this._mediaStore.dispatch({ type: 'mediaelementchangerequest', detail: media });
+    this._mediaStore.dispatch({ type: 'mediastateownerchangerequest', detail: media });
   };
 }
 

packages/react/react-media-store/src/MediaProvider.tsx

@@ -58,9 +58,9 @@ export const useMediaRef = () => {
     // NOTE: This should get invoked with `null` when using as a `ref` callback whenever
     // the corresponding react media element instance (e.g. a `<video>`) is being removed.
     /*
-    { type: 'mediaelementchangerequest', detail: media }
+    { type: 'mediastateownerchangerequest', detail: media }
     */
-    dispatch({ type: 'mediaelementchangerequest', detail: mediaEl });
+    dispatch({ type: 'mediastateownerchangerequest', detail: mediaEl });
   };
 };