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/input-indicators/use-input-indicator-root.ts

@@ -0,0 +1,40 @@
+'use client';
+
+import type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';
+import type { State as StoreState } from '@videojs/store';
+import { useState, useSyncExternalStore } from 'react';
+
+import { useDestroy } from '../../utils/use-destroy';
+import { useIndicatorVisibility } from './use-indicator-visibility';
+import { useInputActionSubscription } from './use-input-action-subscription';
+import { useRenderedIndicatorState } from './use-rendered-indicator-state';
+
+interface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {
+  readonly state: StoreState<IndicatorState>;
+  setProps(props: Props): void;
+  destroy(): void;
+  close(): void;
+  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;
+}
+
+export function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(
+  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,
+  props: Props
+) {
+  const [core] = useState(createCore);
+  useDestroy(core);
+  core.setProps(props);
+  const showIndicator = useIndicatorVisibility(() => core.close());
+
+  useInputActionSubscription((event, snapshot) => {
+    if (core.processEvent(event, snapshot)) showIndicator();
+  });
+
+  const currentState = useSyncExternalStore(
+    (callback) => core.state.subscribe(callback),
+    () => core.state.current,
+    () => core.state.current
+  );
+
+  return useRenderedIndicatorState(currentState);
+}