refactor(packages): dry up core, html, and react UI architecture (#699)

packages/react/src/ui/controls/context.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import type { ControlsState, StateAttrMap } from '@videojs/core';
+import { createContext, useContext } from 'react';
+
+export interface ControlsContextValue {
+  state: ControlsState;
+  stateAttrMap: StateAttrMap<ControlsState>;
+}
+
+const ControlsContext = createContext<ControlsContextValue | null>(null);
+
+export const ControlsContextProvider = ControlsContext.Provider;
+
+export function useControlsContext(): ControlsContextValue {
+  const ctx = useContext(ControlsContext);
+  if (!ctx) throw new Error('Controls compound components must be used within a Controls.Root');
+  return ctx;
+}

packages/react/src/ui/controls/controls-group.tsx

@@ -1,14 +1,14 @@
 'use client';
 
+import type { ControlsCore } from '@videojs/core';
 import type { ForwardedRef, ReactNode } from 'react';
 import { forwardRef } from 'react';
 
 import type { UIComponentProps } from '../../utils/types';
 import { renderElement } from '../../utils/use-render';
+import { useControlsContext } from './context';
 
-type GroupState = Record<string, never>;
-
-export interface ControlsGroupProps extends UIComponentProps<'div', GroupState> {
+export interface ControlsGroupProps extends UIComponentProps<'div', ControlsCore.State> {
   children?: ReactNode | undefined;
 }
 
@@ -19,15 +19,15 @@ export const ControlsGroup = forwardRef(function ControlsGroup(
 ) {
   const { render, className, style, children, ...elementProps } = componentProps;
 
+  const { state, stateAttrMap } = useControlsContext();
   const role = elementProps['aria-label'] || elementProps['aria-labelledby'] ? 'group' : undefined;
 
-  const state: GroupState = {};
-
   return renderElement(
     'div',
     { render, className, style },
     {
       state,
+      stateAttrMap,
       ref: [forwardedRef],
       props: [{ role, children }, elementProps],
     }

packages/react/src/ui/controls/controls-root.tsx

@@ -8,6 +8,7 @@ import { forwardRef, useState } from 'react';
 import { usePlayer } from '../../player/context';
 import type { UIComponentProps } from '../../utils/types';
 import { renderElement } from '../../utils/use-render';
+import { ControlsContextProvider } from './context';
 
 export interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {
   children?: ReactNode | undefined;
@@ -29,17 +30,22 @@ export const ControlsRoot = forwardRef(function ControlsRoot(
     return null;
   }
 
-  const state = core.getState(controls);
+  core.setMedia(controls);
+  const state = core.getState();
 
-  return renderElement(
-    'div',
-    { render, className, style },
-    {
-      state,
-      stateAttrMap: ControlsDataAttrs,
-      ref: [forwardedRef],
-      props: [{ children }, elementProps],
-    }
+  return (
+    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>
+      {renderElement(
+        'div',
+        { render, className, style },
+        {
+          state,
+          stateAttrMap: ControlsDataAttrs,
+          ref: [forwardedRef],
+          props: [{ children }, elementProps],
+        }
+      )}
+    </ControlsContextProvider>
   );
 });