feat(core): add mute button component (#455)

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { MuteButtonCore, MuteButtonDataAttributes } from '@videojs/core';
+import { logMissingFeature, selectVolume } from '@videojs/core/dom';
+import type { ForwardedRef } from 'react';
+import { forwardRef, useState } from 'react';
+
+import { usePlayer } from '../../player/context';
+import type { UIComponentProps } from '../../utils/types';
+import { renderElement } from '../../utils/use-render';
+import { useButton } from '../hooks/use-button';
+
+export interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}
+
+/**
+ * A button that toggles mute state.
+ */
+export const MuteButton = forwardRef(function MuteButton(
+  componentProps: MuteButtonProps,
+  forwardedRef: ForwardedRef<HTMLButtonElement>
+) {
+  const { render, className, style, label, disabled = false, ...elementProps } = componentProps;
+
+  const volume = usePlayer(selectVolume);
+
+  const [core] = useState(() => new MuteButtonCore());
+  core.setProps({ label, disabled });
+
+  const { getButtonProps, buttonRef } = useButton({
+    displayName: 'MuteButton',
+    onActivate: () => core.toggle(volume!),
+    isDisabled: () => disabled || !volume,
+  });
+
+  if (!volume) {
+    logMissingFeature('MuteButton', 'volume');
+    return null;
+  }
+
+  return renderElement(
+    'button',
+    { render, className, style },
+    {
+      state: core.getState(volume),
+      ref: [forwardedRef, buttonRef],
+      props: [core.getAttrs(volume), elementProps, getButtonProps()],
+      stateAttrMap: MuteButtonDataAttributes,
+    }
+  );
+});
+
+export namespace MuteButton {
+  export type Props = MuteButtonProps;
+  export type State = MuteButtonCore.State;
+}