refactor(packages)!: fix audit issues and remove createMediaButton curry

Author: mihar-22

packages/core/src/core/ui/slider/slider-core.ts

@@ -25,7 +25,7 @@ export interface SliderProps {
   max?: number | undefined;
 }
 
-/** Current pointer/drag interaction state, typically provided by a DOM controller. */
+/** Current pointer/drag input state, typically provided by a DOM controller. */
 export interface SliderInput {
   /** Pointer position as a percentage of the track (0–100). */
   pointerPercent: number;

packages/core/src/dom/ui/popover/popover.ts

@@ -299,7 +299,7 @@ export function createPopover(options: PopoverOptions): PopoverApi {
     popupEl = el;
 
     if (el) {
-      // If the interaction is already open (e.g., React mount after state
+      // If the popover is already open (e.g., React mount after state
       // change), show the popover now. In `applyOpen` the element may not
       // have been in the DOM yet, so the earlier `tryShowPopover` was a no-op.
       if (state.current.active) {

packages/core/src/dom/ui/popover/tests/popover.test.ts

@@ -9,7 +9,7 @@ describe('createPopover', () => {
   });
 
   describe('open/close', () => {
-    it('updates interaction state and calls onOpenChange when opening', () => {
+    it('updates input state and calls onOpenChange when opening', () => {
       const { popover, onOpenChange } = createTestPopover();
 
       popover.open();

packages/html/src/ui/slider/slider-thumb-element.ts

@@ -1,4 +1,3 @@
-import { SliderDataAttrs } from '@videojs/core';
 import { applyElementProps, applyStateDataAttrs } from '@videojs/core/dom';
 import type { PropertyValues } from '@videojs/element';
 import { ContextConsumer } from '@videojs/element/context';
@@ -46,6 +45,6 @@ export class SliderThumbElement extends MediaElement {
     applyElementProps(this, ctx.thumbAttrs);
 
     // Apply state data attributes.
-    applyStateDataAttrs(this, ctx.state, SliderDataAttrs);
+    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
   }
 }

packages/html/src/ui/slider/slider-value-element.ts

@@ -1,4 +1,3 @@
-import { SliderDataAttrs } from '@videojs/core';
 import { applyStateDataAttrs } from '@videojs/core/dom';
 import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
 import { ContextConsumer } from '@videojs/element/context';
@@ -35,6 +34,6 @@ export class SliderValueElement extends MediaElement {
 
     this.textContent = ctx.formatValue ? ctx.formatValue(value, this.type) : String(Math.round(value));
 
-    applyStateDataAttrs(this, ctx.state, SliderDataAttrs);
+    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
   }
 }

packages/html/src/ui/thumbnail/thumbnail-element.ts

@@ -119,7 +119,7 @@ export class ThumbnailElement extends MediaElement {
       fetchpriority: this.fetchPriority,
     });
 
-    // Track src changes via the handle.
+    // Track src changes via the thumbnail API.
     this.#api?.updateSrc(thumbnail?.url);
 
     if (!thumbnail) {

packages/react/src/ui/create-media-button.tsx

@@ -1,82 +1,84 @@
 'use client';
 
-import type { InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';
+import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';
 import { logMissingFeature } from '@videojs/core/dom';
 import type { Selector } from '@videojs/store';
 import type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { forwardRef, useState } from 'react';
 
 import { usePlayer } from '../player/context';
+import type { renderElement as renderElementFn } from '../utils/use-render';
 import { renderElement } from '../utils/use-render';
 import { useButton } from './hooks/use-button';
 
-interface MediaButtonConfig<Core extends MediaUIComponent> {
+interface MediaButtonConfig<Core extends Required<MediaUIComponent>> {
   displayName: string;
   core: { new (): Core; defaultProps: Record<string, unknown> };
-  stateAttrMap: StateAttrMap<object>;
+  stateAttrMap: StateAttrMap<InferComponentState<Core>>;
   selector: Selector<object, InferMediaState<Core> | undefined>;
   action: (core: Core, state: InferMediaState<Core>) => void;
 }
 
-/**
- * Creates a media button React component. Curried so `ComponentProps` is explicit
- * while `Core` is inferred from the config.
- */
-export function createMediaButton<ComponentProps extends object>() {
-  return <Core extends Required<MediaUIComponent>>(
-    config: MediaButtonConfig<Core>
-  ): ForwardRefExoticComponent<ComponentProps & RefAttributes<HTMLButtonElement>> => {
-    const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;
-
-    // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.
-    const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));
-
-    const Component = forwardRef(function MediaButton(
-      componentProps: Record<string, unknown>,
-      forwardedRef: ForwardedRef<HTMLButtonElement>
-    ) {
-      const { render, className, style, ...rest } = componentProps;
-
-      const coreProps: Record<string, unknown> = {};
-      const elementProps: Record<string, unknown> = {};
-
-      for (const key of Object.keys(rest)) {
-        if (corePropKeys.has(key)) {
-          coreProps[key] = rest[key];
-        } else {
-          elementProps[key] = rest[key];
-        }
+/** Creates a media button React component from a core class and config. */
+export function createMediaButton<Core extends Required<MediaUIComponent>, Props extends object>(
+  config: MediaButtonConfig<Core>
+): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {
+  const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;
+
+  // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.
+  const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));
+
+  const Component = forwardRef(function MediaButton(
+    componentProps: Record<string, unknown>,
+    forwardedRef: ForwardedRef<HTMLButtonElement>
+  ) {
+    const { render, className, style, ...rest } = componentProps;
+
+    const coreProps: Record<string, unknown> = {};
+    const elementProps: Record<string, unknown> = {};
+
+    for (const key of Object.keys(rest)) {
+      if (corePropKeys.has(key)) {
+        coreProps[key] = rest[key];
+      } else {
+        elementProps[key] = rest[key];
       }
+    }
 
-      const feature = usePlayer(selector);
+    const feature = usePlayer(selector);
 
-      const [core] = useState(() => new CoreClass());
-      core.setProps(coreProps);
+    const [core] = useState(() => new CoreClass());
+    core.setProps(coreProps);
 
-      const { getButtonProps, buttonRef } = useButton({
-        displayName,
-        onActivate: () => action(core, feature!),
-        isDisabled: () => !!coreProps.disabled || !feature,
-      });
+    const { getButtonProps, buttonRef } = useButton({
+      displayName,
+      onActivate: () => action(core, feature!),
+      isDisabled: () => !!coreProps.disabled || !feature,
+    });
 
-      if (!feature) {
-        if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);
-        return null;
-      }
+    if (!feature) {
+      if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);
+      return null;
+    }
+
+    type State = InferComponentState<Core>;
 
-      core.setMedia(feature);
-      const state = core.getState() as object & Record<string, unknown>;
+    core.setMedia(feature);
+    const state = core.getState() as State;
 
-      return renderElement('button', { render, className, style } as Parameters<typeof renderElement>[1], {
+    return renderElement(
+      'button',
+      { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,
+      {
         state,
         stateAttrMap,
         ref: [forwardedRef, buttonRef],
         props: [core.getAttrs(state), elementProps, getButtonProps()],
-      });
-    });
+      }
+    );
+  });
 
-    Component.displayName = displayName;
+  Component.displayName = displayName;
 
-    return Component as unknown as ForwardRefExoticComponent<ComponentProps & RefAttributes<HTMLButtonElement>>;
-  };
+  return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;
 }

packages/react/src/ui/fullscreen-button/fullscreen-button.tsx

@@ -11,7 +11,7 @@ export interface FullscreenButtonProps
     FullscreenButtonCore.Props {}
 
 /** A button that toggles fullscreen. */
-export const FullscreenButton = createMediaButton<FullscreenButtonProps>()({
+export const FullscreenButton = createMediaButton<FullscreenButtonCore, FullscreenButtonProps>({
   displayName: 'FullscreenButton',
   core: FullscreenButtonCore,
   stateAttrMap: FullscreenButtonDataAttrs,

packages/react/src/ui/hooks/use-slider.ts

@@ -45,10 +45,10 @@ export interface UseSliderReturnValue<State extends SliderState = SliderState> {
 }
 
 /**
- * Manages slider interaction lifecycle for React.
+ * Manages slider input lifecycle for React.
  *
  * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its
- * interaction state via `useSnapshot`. Returns split props for the root
+ * input state via `useSnapshot`. Returns split props for the root
  * (pointer events) and thumb (keyboard/focus) elements.
  */
 export function useSlider<State extends SliderState = SliderState>(

packages/react/src/ui/mute-button/mute-button.tsx

@@ -9,7 +9,7 @@ import { createMediaButton } from '../create-media-button';
 export interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}
 
 /** A button that toggles mute state. */
-export const MuteButton = createMediaButton<MuteButtonProps>()({
+export const MuteButton = createMediaButton<MuteButtonCore, MuteButtonProps>({
   displayName: 'MuteButton',
   core: MuteButtonCore,
   stateAttrMap: MuteButtonDataAttrs,