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/seek-indicator/context.tsx

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

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

@@ -0,0 +1,2 @@
+export { SeekIndicatorRoot as Root, type SeekIndicatorRootProps as RootProps } from './seek-indicator-root';
+export { SeekIndicatorValue as Value, type SeekIndicatorValueProps as ValueProps } from './seek-indicator-value';

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

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

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

@@ -0,0 +1,44 @@
+'use client';
+
+import { SeekIndicatorCore, SeekIndicatorDataAttrs } 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 { SeekIndicatorProvider } from './context';
+
+export interface SeekIndicatorRootProps
+  extends UIComponentProps<'div', SeekIndicatorCore.State>,
+    SeekIndicatorCore.Props {}
+
+export const SeekIndicatorRoot = forwardRef(function SeekIndicatorRoot(
+  componentProps: SeekIndicatorRootProps,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+) {
+  const { render, className, style, closeDelay, ...elementProps } = componentProps;
+  const { elementRef, present, state } = useInputIndicatorRoot(() => new SeekIndicatorCore(), { closeDelay });
+
+  if (!present) return null;
+
+  return (
+    <SeekIndicatorProvider value={{ state }}>
+      {renderElement(
+        'div',
+        { render, className, style },
+        {
+          state,
+          stateAttrMap: SeekIndicatorDataAttrs,
+          ref: [forwardedRef, elementRef],
+          props: [elementProps],
+        }
+      )}
+    </SeekIndicatorProvider>
+  );
+});
+
+export namespace SeekIndicatorRoot {
+  export type Props = SeekIndicatorRootProps;
+  export type State = SeekIndicatorCore.State;
+}

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { getSeekIndicatorDisplayValue, type SeekIndicatorCore } 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 { useSeekIndicatorContext } from './context';
+
+export interface SeekIndicatorValueProps extends UIComponentProps<'div', SeekIndicatorCore.State> {}
+
+export const SeekIndicatorValue = forwardRef(function SeekIndicatorValue(
+  componentProps: SeekIndicatorValueProps,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+) {
+  const { render, className, style, ...elementProps } = componentProps;
+  const { state } = useSeekIndicatorContext();
+
+  return renderElement(
+    'div',
+    { render, className, style },
+    {
+      state,
+      ref: forwardedRef,
+      props: [{ children: getSeekIndicatorDisplayValue(state) }, elementProps],
+    }
+  );
+});
+
+export namespace SeekIndicatorValue {
+  export type Props = SeekIndicatorValueProps;
+}