@vplayer/react 0.1.0

package/dist/components/player/adapter-types.d.ts

@@ -0,0 +1,31 @@
+import type { Store } from '@tanstack/store';
+import type { EventBus, HotkeyRegistry, I18n, MediaRemote, MediaState, PlayerInstance, PlayerLabels, PlayerOptions, PluginAPI, Storage } from '@vplayer/core';
+export interface UsePlayerResult {
+    state: MediaState;
+    remote: MediaRemote;
+    attach(container: HTMLDivElement, video: HTMLVideoElement): void;
+    detach(): void;
+    use(plugin: import('@vplayer/core').PlayerPlugin): void;
+    updateOptions(opts: Partial<PlayerOptions>): void;
+    instance: PlayerInstance;
+}
+export interface PluginAPIContext {
+    store: Store<MediaState>;
+    remote: MediaRemote;
+    events: EventBus;
+    storage: Storage;
+    i18n: I18n;
+    hotkeys: HotkeyRegistry;
+    containerEl: HTMLDivElement | null;
+    videoEl: HTMLVideoElement | null;
+}
+export interface PluginAPIBuilder {
+    (name: string, ctx: PluginAPIContext): PluginAPI;
+}
+export interface AdapterContextValue {
+    instance: PlayerInstance;
+    containerEl: HTMLElement | null;
+    videoEl: HTMLVideoElement | null;
+    labels: PlayerLabels;
+    createPluginAPI: PluginAPIBuilder;
+}

package/dist/components/player/components/aspect-ratio-setting.d.ts

@@ -0,0 +1,13 @@
+import type { PluginAPI } from '@vplayer/core';
+import { type FC } from 'react';
+/**
+ * Settings panel item for video aspect ratio.
+ *
+ * Renders common VLC-style radio options (Default / 16:9 / 4:3 / 21:9 / cover / fill).
+ * and calls `api.remote.setAspectRatio()` on change.
+ *
+ * Designed to be registered via `api.addSetting()` from a plugin.
+ */
+export declare const AspectRatioSetting: FC<{
+    api: PluginAPI;
+}>;

package/dist/components/player/components/auto-resume-overlay.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const AutoResumeOverlay: FC;

package/dist/components/player/components/context-menu.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const ContextMenu: FC;

package/dist/components/player/components/error-overlay.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const ErrorOverlay: FC;

package/dist/components/player/components/flip-setting.d.ts

@@ -0,0 +1,13 @@
+import type { PluginAPI } from '@vplayer/core';
+import { type FC } from 'react';
+/**
+ * Settings panel item for video flip orientation.
+ *
+ * Renders three radio-style options (normal / horizontal / vertical)
+ * and calls `api.remote.setFlip()` on change.
+ *
+ * Designed to be registered via `api.addSetting()` from a plugin.
+ */
+export declare const FlipSetting: FC<{
+    api: PluginAPI;
+}>;

package/dist/components/player/components/info-panel.d.ts

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+/**
+ * Debug overlay panel rendered in the top-right corner of the player.
+ *
+ * Displays version, duration, resolution, current time, volume,
+ * playback rate, dropped frames, and network state in a compact
+ * monospace grid.
+ */
+export declare const InfoPanel: FC;

package/dist/components/player/components/mini-progress-bar.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const MiniProgressBar: FC;

package/dist/components/player/components/screenshot-button.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+/**
+ * Screenshot button. Delegates capture to the core's remote.takeScreenshot()
+ * instead of duplicating the canvas logic.
+ */
+export declare const ScreenshotButton: FC;

package/dist/components/player/context.d.ts

@@ -0,0 +1,16 @@
+import type { PluginAPI } from '@vplayer/core';
+import type { MediaRemote, MediaState, MiniPlayerState, PlayerContextValue } from './types';
+export declare const PlayerContext: import("react").Context<PlayerContextValue | null>;
+export declare function usePlayerContext(): PlayerContextValue;
+export declare function usePlayerState(): MediaState;
+export declare function usePlayerState<K extends keyof MediaState>(key: K): MediaState[K];
+export declare function usePlayerState<TSelected>(selector: (state: MediaState) => TSelected): TSelected;
+export declare function usePlayerRemote(): MediaRemote;
+export declare function useMiniPlayer(): MiniPlayerState;
+/**
+ * Hook for components that need access to the PluginAPI.
+ * Note: addControl/addSetting/addLayer/addHotkey will log warnings
+ * when called outside plugin setup — plugins should only register
+ * during their setup() callback.
+ */
+export declare function usePluginAPI(): PluginAPI;

package/dist/components/player/controls.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+export declare const SeekBar: FC;
+export declare const PlayButton: FC<{
+    size?: number;
+}>;
+export declare const SkipButton: FC<{
+    seconds: number;
+}>;
+export declare const TimeDisplay: FC;
+export declare const VolumeControl: FC;
+export declare const SettingsTrigger: FC;
+export declare const MiniPlayerButton: FC;
+export declare const PiPButton: FC;
+export declare const FullscreenButton: FC;

package/dist/components/player/defaults.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React-specific defaults.
+ *
+ * Note: defaultPlayerLabels and defaultPlayerIcons live in @vplayer/core
+ * as framework-agnostic plain data (strings + Iconify icon IDs).
+ * Re-export them here so consumers can import from @vplayer/react.
+ */
+export { defaultPlayerLabels, defaultPlayerIcons } from '@vplayer/core';

package/dist/components/player/hooks/use-controls-visibility.d.ts

@@ -0,0 +1,15 @@
+import type { Store } from '@tanstack/store';
+import type { MediaState } from '../types';
+export declare function useControlsVisibility(mediaStore: Store<MediaState>): {
+    clearHideTimer: () => void;
+    hideControls: () => void;
+    rootHandlers: {
+        onMouseMove: () => void;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+    scheduleHide: (delay?: number) => void;
+    showControls: (delay?: number) => void;
+};

package/dist/components/player/hooks/use-mini-player-state.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+import type { MiniPlayerOptions, MiniPlayerState } from '../types';
+export declare function useMiniPlayerState(anchorRef: RefObject<HTMLElement | null>, miniPlayer?: boolean | MiniPlayerOptions): MiniPlayerState;
+export declare function createDisabledMiniPlayerState(): MiniPlayerState;

package/dist/components/player/hooks/use-mobile-gestures.d.ts

@@ -0,0 +1,3 @@
+import type { Store } from '@tanstack/store';
+import type { GestureHandlers, MediaRemote, MediaState } from '@vplayer/core';
+export declare function usePlayerGestures(store?: Store<MediaState>, remote?: MediaRemote): GestureHandlers;

package/dist/components/player/hooks/use-player.d.ts

@@ -0,0 +1,35 @@
+/**
+ * usePlayer — Low-level hook per @vplayer/react adapter contract.
+ *
+ * Creates a PlayerInstance and subscribes to state via
+ * @tanstack/react-store's useStore. Returns a UsePlayerResult.
+ *
+ * Unlike the <VideoPlayer> component, this hook gives you full control
+ * over rendering. Use it when building custom player UIs.
+ *
+ * @example
+ * ```tsx
+ * function MyPlayer({ src }: { src: string }) {
+ *   const { attach, detach, remote, state } = usePlayer({ src })
+ *   const containerRef = useRef<HTMLDivElement>(null)
+ *   const videoRef = useRef<HTMLVideoElement>(null)
+ *
+ *   useEffect(() => {
+ *     attach(containerRef.current!, videoRef.current!)
+ *     return () => detach()
+ *   }, [attach, detach])
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       <video ref={videoRef} />
+ *       <button onClick={() => remote.togglePlay()}>
+ *         {state.isPlaying ? 'Pause' : 'Play'}
+ *       </button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+import type { PlayerOptions } from '@vplayer/core';
+import type { UsePlayerResult } from '../adapter-types';
+export declare function usePlayer(options: PlayerOptions): UsePlayerResult;

package/dist/components/player/index.d.ts

@@ -0,0 +1,25 @@
+export { VideoPlayer } from './player';
+export { ControlsBar, PlayerChrome } from './layout/player-chrome';
+export { DefaultVideoLayout } from './layout/default-video-layout';
+export { CompactVideoLayout } from './layout/compact-video-layout';
+export { LargeVideoLayout } from './layout/large-video-layout';
+export { SeekBar, PlayButton, SkipButton, TimeDisplay, VolumeControl, SettingsTrigger, PiPButton, FullscreenButton, MiniPlayerButton, } from './controls';
+export { TopGradient, PauseOverlay, BufferingOverlay, EndOverlay } from './overlays';
+export { usePlayerContext, usePlayerState, usePlayerRemote, useMiniPlayer, usePluginAPI } from './context';
+export { usePlayerGestures } from './hooks/use-mobile-gestures';
+export { usePlayer } from './hooks/use-player';
+export { PlayerProvider } from './player-provider';
+export type { PlayerProviderProps } from './player-provider';
+export type { PlayerProps, PlayerSlots, PlayerLabels, PlayerIcons, MediaState, MediaRemote, PlayerContextValue, MiniPlayerOptions, MiniPlayerPosition, MiniPlayerState, ThumbnailPreviewOptions, NormalizedThumbnailPreviewOptions, } from './types';
+export type { UsePlayerResult, PluginAPIBuilder, PluginAPIContext } from './adapter-types';
+export { createPluginAPIBuilder } from './plugin-api';
+export { createPluginAPI } from './plugin-api';
+export { createPlayer, createGestureEngine, EventBus, Storage, STORAGE_KEYS, I18n, HotkeyRegistry, defaultPlayerLabels, defaultPlayerIcons, formatTime, } from '@vplayer/core';
+export { parseSRT, parseVTT, fetchSubtitles, getActiveCue, fetchThumbnails, parseThumbnailVTT, getThumbnailAtTime, } from '@vplayer/core';
+export type { PlayerOptions, PlayerInstance, PlayerSystems, PlayerError, PlayerEventName, PlayerEventHandler, SubtitleCue, SubtitleTrack, ThumbnailCue, LanguageDict, HotkeyBinding, ControlRegistration, SettingRegistration, LayerRegistration, SettingItem, ContextMenuItem, ContextMenuRegistration, PlayerPlugin, PluginAPI, RemoteRef, PlayerContextRef, FlipState, AspectRatioState, } from '@vplayer/core';
+export { PluginControlsLeft, PluginControlsRight, PluginControlsTop, PluginControlsCenter, PluginLayers, PluginSettings, NotificationOverlay, } from './plugin-renderer';
+export { MiniProgressBar } from './components/mini-progress-bar';
+export { ScreenshotButton } from './components/screenshot-button';
+export { ErrorOverlay } from './components/error-overlay';
+export { AutoResumeOverlay } from './components/auto-resume-overlay';
+export { ContextMenu } from './components/context-menu';

package/dist/components/player/layout/compact-video-layout.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const CompactVideoLayout: FC;

package/dist/components/player/layout/default-video-layout.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const DefaultVideoLayout: FC;

package/dist/components/player/layout/large-video-layout.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const LargeVideoLayout: FC;

package/dist/components/player/layout/player-chrome.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react';
+export declare const ControlsBar: FC<{
+    children?: ReactNode;
+}>;
+export declare const Spacer: FC;
+export declare const MiniPlayerChrome: FC;
+export declare const PlayerChrome: FC;

package/dist/components/player/layout/slots.d.ts

@@ -0,0 +1 @@
+export type PlayerSlotName = 'playButton' | 'seekBar' | 'volumeControl' | 'timeDisplay' | 'settingsButton' | 'settingsMenu' | 'fullscreenButton' | 'pipButton' | 'bufferingOverlay' | 'pauseOverlay' | 'endOverlay';

package/dist/components/player/overlays.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+export declare const TopGradient: FC;
+export declare const PauseOverlay: FC;
+export declare const BufferingOverlay: FC;
+export declare const EndOverlay: FC;

package/dist/components/player/player-provider.d.ts

@@ -0,0 +1,33 @@
+/**
+ * PlayerProvider — Standalone context provider per @vplayer/react contract.
+ *
+ * Creates a PlayerInstance via usePlayer() and makes it available
+ * to all descendant components via PlayerContext.
+ *
+ * Handles mount/unmount lifecycle, reactive option syncing (subtitles,
+ * qualities, thumbnails), and plugin initialization — giving you a
+ * complete player context without opinionated UI.
+ *
+ * Use this when you want <VideoPlayer>'s component tree but need
+ * to control the player instance lifecycle yourself.
+ *
+ * @example
+ * ```tsx
+ * <PlayerProvider options={{ src: 'video.mp4' }}>
+ *   <DefaultVideoLayout />
+ * </PlayerProvider>
+ * ```
+ */
+import type { PlayerIcons, PlayerLabels } from '@vplayer/core';
+import { type FC, type ReactNode } from 'react';
+import { usePlayer } from './hooks/use-player';
+import type { PlayerSlots } from './types';
+import type { DeepPartial } from './utils/merge';
+export interface PlayerProviderProps {
+    options: Parameters<typeof usePlayer>[0];
+    labels?: DeepPartial<PlayerLabels>;
+    icons?: DeepPartial<PlayerIcons>;
+    slots?: PlayerSlots;
+    children?: ReactNode;
+}
+export declare const PlayerProvider: FC<PlayerProviderProps>;

package/dist/components/player/player.d.ts

@@ -0,0 +1,2 @@
+import type { PlayerProps } from './types';
+export declare function VideoPlayer({ className, children, ...options }: PlayerProps): import("react").JSX.Element;

package/dist/components/player/plugin-api.d.ts

@@ -0,0 +1,3 @@
+import type { PluginAPIBuilder } from './adapter-types';
+export declare function createPluginAPIBuilder(): PluginAPIBuilder;
+export declare const createPluginAPI: PluginAPIBuilder;

package/dist/components/player/plugin-renderer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Renders plugin-registered controls, settings, and layers.
+ */
+import { type FC } from 'react';
+export declare const PluginControlsLeft: FC;
+export declare const PluginControlsRight: FC;
+export declare const PluginControlsTop: FC;
+export declare const PluginControlsCenter: FC;
+export declare const PluginLayers: FC;
+export declare const PluginSettings: FC;
+export declare const NotificationOverlay: FC;

package/dist/components/player/types.d.ts

@@ -0,0 +1,92 @@
+import type { Store } from '@tanstack/store';
+import type { EventBus, HotkeyRegistry, I18n, MediaEngine, MediaRemote, MediaState, PlayerIcons, PlayerLabels, PlayerInstance, PlayerOptions, SvgIcon, Storage, SubtitleTrack, ThumbnailCue } from '@vplayer/core';
+import type { AspectRatioState, ControlRegistration, ContextMenuItem, FlipState, LayerRegistration, PlayerPlugin, PluginAPI, SettingRegistration } from '@vplayer/core';
+import type { ReactNode, RefObject } from 'react';
+import type { PluginAPIBuilder } from './adapter-types';
+export type { MediaState, MediaRemote, PlayerIcons, PlayerLabels, PlayerOptions, SvgIcon };
+export type { AspectRatioState, ControlRegistration, ContextMenuItem, FlipState, LayerRegistration, PlayerPlugin, PluginAPI, SettingRegistration, };
+export type { EventBus, HotkeyRegistry, I18n, Storage, SubtitleTrack, ThumbnailCue };
+export interface PlayerSlots {
+    playButton?: ReactNode;
+    seekBar?: ReactNode;
+    volumeControl?: ReactNode;
+    timeDisplay?: ReactNode;
+    settingsButton?: ReactNode;
+    miniPlayerButton?: ReactNode;
+    settingsMenu?: ReactNode;
+    fullscreenButton?: ReactNode;
+    pipButton?: ReactNode;
+    bufferingOverlay?: ReactNode;
+    pauseOverlay?: ReactNode;
+    endOverlay?: ReactNode;
+}
+export type MiniPlayerPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export interface MiniPlayerOptions {
+    /** Enables YouTube-like floating mini-player mode. */
+    enabled?: boolean;
+    /** Automatically enter mini-player when the player leaves the viewport. Defaults to false. */
+    auto?: boolean;
+    /** Floating corner. Defaults to bottom-right. */
+    position?: MiniPlayerPosition;
+    /** CSS width for the mini player. Defaults to 360px. */
+    width?: number | string;
+}
+export interface ThumbnailPreviewOptions {
+    /** Enables seekbar thumbnail previews. Defaults to true when thumbnails are configured. */
+    enabled?: boolean;
+    /** Preview viewport width in pixels. Defaults to 180. */
+    width?: number;
+    /** Preview viewport height in pixels. Defaults to 101. */
+    height?: number;
+    /** Gap from the seekbar in pixels. Defaults to 10. */
+    gap?: number;
+    /** Show the time pill under the preview. Defaults to true. */
+    showTime?: boolean;
+    /** How scaled sprite regions should fit the preview viewport. Defaults to cover. */
+    fit?: 'cover' | 'contain';
+}
+export interface NormalizedThumbnailPreviewOptions {
+    enabled: boolean;
+    width: number;
+    height: number;
+    gap: number;
+    showTime: boolean;
+    fit: 'cover' | 'contain';
+}
+export interface MiniPlayerState {
+    enabled: boolean;
+    active: boolean;
+    auto: boolean;
+    position: MiniPlayerPosition;
+    width: number | string;
+    enter: () => void;
+    exit: () => void;
+    toggle: () => void;
+}
+export interface PlayerProps extends PlayerOptions {
+    className?: string;
+    children?: ReactNode;
+    labels?: Partial<PlayerLabels>;
+    icons?: Partial<PlayerIcons>;
+    slots?: PlayerSlots;
+    miniPlayer?: boolean | MiniPlayerOptions;
+    thumbnailPreview?: boolean | ThumbnailPreviewOptions;
+}
+export interface PlayerContextValue {
+    containerRef: RefObject<HTMLDivElement | null>;
+    videoRef: RefObject<HTMLVideoElement | null>;
+    labels: PlayerLabels;
+    icons: PlayerIcons;
+    slots: PlayerSlots;
+    mediaStore: Store<MediaState>;
+    mediaRemote: MediaRemote;
+    events: EventBus;
+    storage: Storage;
+    i18n: I18n;
+    hotkeys: HotkeyRegistry;
+    engine: MediaEngine | null;
+    instance: PlayerInstance;
+    createPluginAPI: PluginAPIBuilder;
+    miniPlayer: MiniPlayerState;
+    thumbnailPreview: NormalizedThumbnailPreviewOptions;
+}

package/dist/components/player/utils/merge.d.ts

@@ -0,0 +1,6 @@
+import type { PlayerIcons, PlayerLabels } from '@vplayer/core';
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export declare function mergeLabels(defaults: PlayerLabels, overrides?: DeepPartial<PlayerLabels>): PlayerLabels;
+export declare function mergeIcons(defaults: PlayerIcons, overrides?: DeepPartial<PlayerIcons>): PlayerIcons;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components/player';