feat(packages): add UI support for gestures and hotkeys (#1388)

Co-authored-by: Rahim <rahim.alwer@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/react/src/ui/status-indicator/context.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import type { StatusIndicatorCore } from '@videojs/core';
+import { createContext, type ProviderProps, useContext } from 'react';
+
+export interface StatusIndicatorContextValue {
+  state: StatusIndicatorCore.State;
+}
+
+const StatusIndicatorContext = createContext<StatusIndicatorContextValue | null>(null);
+
+export function StatusIndicatorProvider({ value, children }: ProviderProps<StatusIndicatorContextValue>) {
+  return <StatusIndicatorContext.Provider value={value}>{children}</StatusIndicatorContext.Provider>;
+}
+
+export function useStatusIndicatorContext(): StatusIndicatorContextValue {
+  const ctx = useContext(StatusIndicatorContext);
+  if (!ctx) throw new Error('StatusIndicator child compounds must be used within a StatusIndicator.Root');
+  return ctx;
+}

packages/react/src/ui/status-indicator/index.parts.ts

@@ -0,0 +1,8 @@
+export {
+  StatusIndicatorRoot as Root,
+  type StatusIndicatorRootProps as RootProps,
+} from './status-indicator-root';
+export {
+  StatusIndicatorValue as Value,
+  type StatusIndicatorValueProps as ValueProps,
+} from './status-indicator-value';

packages/react/src/ui/status-indicator/index.ts

@@ -0,0 +1 @@
+export * as StatusIndicator from './index.parts';

packages/react/src/ui/status-indicator/status-indicator-root.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { StatusIndicatorCore, StatusIndicatorDataAttrs } from '@videojs/core';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+
+import type { UIComponentProps } from '../../utils/types';
+import { renderElement } from '../../utils/use-render';
+import { useInputIndicatorRoot } from '../input-indicators/use-input-indicator-root';
+import { StatusIndicatorProvider } from './context';
+
+export interface StatusIndicatorRootProps
+  extends UIComponentProps<'div', StatusIndicatorCore.State>,
+    StatusIndicatorCore.Props {}
+
+export const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(
+  componentProps: StatusIndicatorRootProps,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+) {
+  const { render, className, style, actions, closeDelay, labels, ...elementProps } = componentProps;
+  const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {
+    actions,
+    closeDelay,
+    labels,
+  });
+
+  if (!present) return null;
+
+  return (
+    <StatusIndicatorProvider value={{ state }}>
+      {renderElement(
+        'div',
+        { render, className, style },
+        {
+          state,
+          stateAttrMap: StatusIndicatorDataAttrs,
+          ref: [forwardedRef, elementRef],
+          props: [elementProps],
+        }
+      )}
+    </StatusIndicatorProvider>
+  );
+});
+
+export namespace StatusIndicatorRoot {
+  export type Props = StatusIndicatorRootProps;
+  export type State = StatusIndicatorCore.State;
+}

packages/react/src/ui/status-indicator/status-indicator-value.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { getStatusIndicatorDisplayValue, type StatusIndicatorCore } from '@videojs/core';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+
+import type { UIComponentProps } from '../../utils/types';
+import { renderElement } from '../../utils/use-render';
+import { useStatusIndicatorContext } from './context';
+
+export interface StatusIndicatorValueProps extends UIComponentProps<'span', StatusIndicatorCore.State> {}
+
+export const StatusIndicatorValue = forwardRef(function StatusIndicatorValue(
+  componentProps: StatusIndicatorValueProps,
+  forwardedRef: ForwardedRef<HTMLSpanElement>
+) {
+  const { render, className, style, ...elementProps } = componentProps;
+  const { state } = useStatusIndicatorContext();
+
+  return renderElement(
+    'span',
+    { render, className, style },
+    {
+      state,
+      ref: forwardedRef,
+      props: [{ children: getStatusIndicatorDisplayValue(state) }, elementProps],
+    }
+  );
+});
+
+export namespace StatusIndicatorValue {
+  export type Props = StatusIndicatorValueProps;
+}