feat(core): add fullscreen button component (#459)

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

@@ -0,0 +1,53 @@
+'use client';
+
+import { FullscreenButtonCore } from '@videojs/core';
+import { logMissingFeature, selectFullscreen } 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 FullscreenButtonProps
+  extends UIComponentProps<'button', FullscreenButtonCore.State>,
+    FullscreenButtonCore.Props {}
+
+export const FullscreenButton = forwardRef(function FullscreenButton(
+  componentProps: FullscreenButtonProps,
+  forwardedRef: ForwardedRef<HTMLButtonElement>
+) {
+  const { render, className, style, label, disabled = false, ...elementProps } = componentProps;
+
+  const fullscreen = usePlayer(selectFullscreen);
+
+  const [core] = useState(() => new FullscreenButtonCore());
+  core.setProps({ label, disabled });
+
+  const { getButtonProps, buttonRef } = useButton({
+    displayName: 'FullscreenButton',
+    onActivate: () => core.toggle(fullscreen!),
+    isDisabled: () => disabled || !fullscreen,
+  });
+
+  if (!fullscreen) {
+    logMissingFeature('FullscreenButton', 'fullscreen');
+    return null;
+  }
+
+  return renderElement(
+    'button',
+    { render, className, style },
+    {
+      state: core.getState(fullscreen),
+      ref: [forwardedRef, buttonRef],
+      props: [core.getAttrs(fullscreen), elementProps, getButtonProps()],
+    }
+  );
+});
+
+export namespace FullscreenButton {
+  export type Props = FullscreenButtonProps;
+  export type State = FullscreenButtonCore.State;
+}