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

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

@@ -1,14 +1,10 @@
 'use client';
 
 import { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';
-import { logMissingFeature, selectTime } from '@videojs/core/dom';
-import type { ForwardedRef } from 'react';
-import { forwardRef, useState } from 'react';
+import { selectTime } 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 SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}
 
@@ -29,40 +25,12 @@ export interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCo
  * />
  * ```
  */
-export const SeekButton = forwardRef(function SeekButton(
-  componentProps: SeekButtonProps,
-  forwardedRef: ForwardedRef<HTMLButtonElement>
-) {
-  const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;
-
-  const time = usePlayer(selectTime);
-
-  const [core] = useState(() => new SeekButtonCore());
-  core.setProps({ seconds, label, disabled });
-
-  const { getButtonProps, buttonRef } = useButton({
-    displayName: 'SeekButton',
-    onActivate: () => core.seek(time!),
-    isDisabled: () => disabled || !time,
-  });
-
-  if (!time) {
-    if (__DEV__) logMissingFeature('SeekButton', 'time');
-    return null;
-  }
-
-  const state = core.getState(time);
-
-  return renderElement(
-    'button',
-    { render, className, style },
-    {
-      state,
-      stateAttrMap: SeekButtonDataAttrs,
-      ref: [forwardedRef, buttonRef],
-      props: [core.getAttrs(state), elementProps, getButtonProps()],
-    }
-  );
+export const SeekButton = createMediaButton<SeekButtonCore, SeekButtonProps>({
+  displayName: 'SeekButton',
+  core: SeekButtonCore,
+  stateAttrMap: SeekButtonDataAttrs,
+  selector: selectTime,
+  action: (core, state) => core.seek(state),
 });
 
 export namespace SeekButton {