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

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

@@ -1,51 +1,20 @@
 'use client';
 
 import { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';
-import { logMissingFeature, selectPiP } from '@videojs/core/dom';
-import type { ForwardedRef } from 'react';
-import { forwardRef, useState } from 'react';
+import { selectPiP } from '@videojs/core/dom';
 
-import { usePlayer } from '../../player/context';
 import type { UIComponentProps } from '../../utils/types';
-import { renderElement } from '../../utils/use-render';
-import { useButton } from '../hooks/use-button';
+import { createMediaButton } from '../create-media-button';
 
 export interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}
 
-export const PiPButton = forwardRef(function PiPButton(
-  componentProps: PiPButtonProps,
-  forwardedRef: ForwardedRef<HTMLButtonElement>
-) {
-  const { render, className, style, label, disabled, ...elementProps } = componentProps;
-
-  const pip = usePlayer(selectPiP);
-
-  const [core] = useState(() => new PiPButtonCore());
-  core.setProps({ label, disabled });
-
-  const { getButtonProps, buttonRef } = useButton({
-    displayName: 'PiPButton',
-    onActivate: () => core.toggle(pip!),
-    isDisabled: () => disabled || !pip,
-  });
-
-  if (!pip) {
-    if (__DEV__) logMissingFeature('PiPButton', 'pip');
-    return null;
-  }
-
-  const state = core.getState(pip);
-
-  return renderElement(
-    'button',
-    { render, className, style },
-    {
-      state,
-      stateAttrMap: PiPButtonDataAttrs,
-      ref: [forwardedRef, buttonRef],
-      props: [core.getAttrs(state), elementProps, getButtonProps()],
-    }
-  );
+/** A button that toggles picture-in-picture. */
+export const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({
+  displayName: 'PiPButton',
+  core: PiPButtonCore,
+  stateAttrMap: PiPButtonDataAttrs,
+  selector: selectPiP,
+  action: (core, state) => core.toggle(state),
 });
 
 export namespace PiPButton {