@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/typography/typography.js

@@ -0,0 +1,40 @@
+import { cn } from "../../lib/utils.js";
+import { typographyVariants } from "./types.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { createElement } from "react";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/typography/typography.tsx
+/** Элемент по умолчанию для каждого стиля */
+const typographyTags = {
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h4",
+	p: "p",
+	blockquote: "blockquote",
+	list: "ul",
+	code: "code",
+	lead: "p",
+	large: "div",
+	small: "small",
+	muted: "p",
+	link: "a"
+};
+/**
+* Текст в одном из стилей типографики: заголовок, абзац, цитата, список, код
+* @param props - пропсы текста
+* @returns элемент стиля или дочерний элемент в этом стиле (render)
+*/
+function Typography({ className, variant = "p", render, ...props }) {
+	const classes = cn(typographyVariants({ variant }), className);
+	const element = render ?? createElement(typographyTags[variant]);
+	return useRender({
+		render: element,
+		props: mergeProps({
+			"data-slot": "typography",
+			"data-variant": variant,
+			className: classes
+		}, props)
+	});
+}
+export { Typography };

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

@@ -0,0 +1,6 @@
+import { VideoPlayerBufferingPropsT, VideoPlayerControlsPropsT, VideoPlayerFullscreenButtonPropsT, VideoPlayerIndicatorPropsT, VideoPlayerPlayButtonPropsT, VideoPlayerProgressPropsT, VideoPlayerPropsT, VideoPlayerTimePropsT, VideoPlayerVolumePropsT, VideoQualityT, VideoSourceT, VideoSubtitleI } from "./types.js";
+import { VideoPlayer } from "./video-player.js";
+import { VideoPlayerControls, VideoPlayerFullscreenButton, VideoPlayerPlayButton, VideoPlayerProgress, VideoPlayerTime, VideoPlayerVolume } from "./video-player-controls.js";
+import { VideoPlayerBuffering, VideoPlayerIndicator } from "./video-player-overlay.js";
+import { useVideoPlayerContext } from "./video-player-context.js";
+export { VideoPlayer, VideoPlayerBuffering, type VideoPlayerBufferingPropsT, VideoPlayerControls, type VideoPlayerControlsPropsT, VideoPlayerFullscreenButton, type VideoPlayerFullscreenButtonPropsT, VideoPlayerIndicator, type VideoPlayerIndicatorPropsT, VideoPlayerPlayButton, type VideoPlayerPlayButtonPropsT, VideoPlayerProgress, type VideoPlayerProgressPropsT, type VideoPlayerPropsT, VideoPlayerTime, type VideoPlayerTimePropsT, VideoPlayerVolume, type VideoPlayerVolumePropsT, type VideoQualityT, type VideoSourceT, type VideoSubtitleI, useVideoPlayerContext };

package/dist/components/video-player/index.js

@@ -0,0 +1,5 @@
+import { useVideoPlayerContext } from "./video-player-context.js";
+import { VideoPlayerBuffering, VideoPlayerIndicator } from "./video-player-overlay.js";
+import { VideoPlayerControls, VideoPlayerFullscreenButton, VideoPlayerPlayButton, VideoPlayerProgress, VideoPlayerTime, VideoPlayerVolume } from "./video-player-controls.js";
+import { VideoPlayer } from "./video-player.js";
+export { VideoPlayer, VideoPlayerBuffering, VideoPlayerControls, VideoPlayerFullscreenButton, VideoPlayerIndicator, VideoPlayerPlayButton, VideoPlayerProgress, VideoPlayerTime, VideoPlayerVolume, useVideoPlayerContext };

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

@@ -0,0 +1,143 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { ButtonPropsT } from "../button/types.js";
+import "../button/index.js";
+import { ComponentProps, ReactNode } from "react";
+import { Slider } from "@base-ui/react/slider";
+/**
+ * Качество видео
+ */
+export type VideoQualityT = '2160p' | '1440p' | '1080p' | '720p' | '480p' | '360p' | '240p';
+/**
+ * Источник видео: одна ссылка или ссылки по качеству
+ */
+export type VideoSourceT = string | Partial<Record<VideoQualityT, string>>;
+/**
+ * Дорожка субтитров
+ * @property src - ссылка на файл WebVTT
+ * @property lang - код языка: ru, en
+ * @property label - название в меню субтитров браузера
+ * @property default - включить дорожку по умолчанию
+ */
+export interface VideoSubtitleI {
+  src: string;
+  lang: string;
+  label: string;
+  default?: boolean;
+}
+/**
+ * Пропсы видеоплеера
+ */
+export type VideoPlayerPropsT = Omit<ComponentProps<'div'>, 'onPlay' | 'onPause' | 'onEnded'> & {
+  /** Источник видео: ссылка или ссылки по качеству ({ '1080p': '…', '720p': '…' }); берётся лучшее доступное */
+  src: VideoSourceT;
+  /** Постер: картинка, пока видео не запущено */
+  poster?: string;
+  /** Начать воспроизведение сразу. Браузеры разрешают это только без звука */
+  autoPlay?: boolean;
+  /** Повторять видео после окончания */
+  loop?: boolean;
+  /** Начальная громкость от 0 до 1 */
+  defaultVolume?: number;
+  /** Начать без звука */
+  defaultMuted?: boolean;
+  /** Шаг перемотки стрелками, секунд */
+  seekStep?: number;
+  /** Что загружать заранее: ничего, метаданные или всё видео */
+  preload?: 'none' | 'metadata' | 'auto';
+  /** Откуда разрешена загрузка видео с другого домена: anonymous — без cookie, use-credentials — с ними */
+  crossOrigin?: 'anonymous' | 'use-credentials';
+  /** Дорожки субтитров */
+  subtitles?: VideoSubtitleI[];
+  /** Подпись плеера для скринридера, по умолчанию «Видеоплеер» */
+  label?: string;
+  /** Классы элемента video */
+  videoClassName?: string;
+  /** Воспроизведение началось */
+  onPlay?: () => void;
+  /** Воспроизведение остановлено */
+  onPause?: () => void;
+  /** Видео закончилось */
+  onEnded?: () => void;
+  /** Части плеера: VideoPlayerControls, VideoPlayerIndicator и другие. Без них — стандартный набор */
+  children?: ReactNode;
+};
+/**
+ * Действие, о котором сообщает индикатор по центру плеера
+ */
+export type VideoIndicatorT = 'play' | 'pause' | 'volume-up' | 'volume-down' | 'volume-muted' | 'seek-forward' | 'seek-backward';
+/**
+ * Показанный индикатор: id меняется при каждом показе, чтобы анимация запускалась заново
+ * @property type - действие
+ * @property id - номер показа
+ */
+export interface VideoIndicatorStateI {
+  type: VideoIndicatorT;
+  id: number;
+}
+/**
+ * Пропсы кнопок плеера: у них фиксированы оформление, размер и содержимое, нет удержания и загрузки
+ */
+export type ButtonBasePropsT = Omit<ButtonPropsT, 'children' | 'onClick' | 'size' | 'variant' | 'ref' | 'loading' | 'loadingLabel' | 'holdToConfirm' | 'holdDuration' | 'holdResetDelay' | 'onConfirm' | 'onHoldCancel' | 'confirmedContent' | 'holdLabel'>;
+/**
+ * Пропсы панели управления
+ */
+export type VideoPlayerControlsPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы кнопки воспроизведения
+ */
+export type VideoPlayerPlayButtonPropsT = ButtonBasePropsT & {
+  /** Подпись, пока видео стоит, по умолчанию «Воспроизвести» */
+  playLabel?: string;
+  /** Подпись во время воспроизведения, по умолчанию «Пауза» */
+  pauseLabel?: string;
+};
+/**
+ * Пропсы блока громкости
+ */
+export type VideoPlayerVolumePropsT = Omit<ComponentProps<'div'>, 'children'> & {
+  /** Подпись кнопки, когда звук включён, по умолчанию «Выключить звук» */
+  muteLabel?: string;
+  /** Подпись кнопки, когда звук выключен, по умолчанию «Включить звук» */
+  unmuteLabel?: string;
+  /** Подпись ползунка громкости, по умолчанию «Громкость» */
+  label?: string;
+};
+/**
+ * Пропсы времени
+ */
+export type VideoPlayerTimePropsT = Omit<ComponentProps<'span'>, 'children'> & {
+  /** Как записать время; по умолчанию «3:05» или «1:03:05» */
+  formatTime?: (seconds: number) => string;
+};
+/**
+ * Пропсы полосы перемотки
+ */
+export type VideoPlayerProgressPropsT = PartPropsT<Omit<Slider.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'min' | 'max' | 'step' | 'largeStep' | 'orientation' | 'children' | 'aria-label' | 'disabled' | 'format' | 'locale'>> & {
+  /** Подпись полосы для скринридера, по умолчанию «Перемотка» */
+  label?: string;
+  /** Текст значения для скринридера; по умолчанию «0:12 из 3:45» */
+  getValueLabel?: (time: number, duration: number) => string;
+};
+/**
+ * Пропсы кнопки полного экрана
+ */
+export type VideoPlayerFullscreenButtonPropsT = ButtonBasePropsT & {
+  /** Подпись, пока плеер в обычном режиме, по умолчанию «Полный экран» */
+  enterLabel?: string;
+  /** Подпись в полноэкранном режиме, по умолчанию «Выйти из полноэкранного режима» */
+  exitLabel?: string;
+};
+/**
+ * Пропсы индикатора загрузки
+ */
+export type VideoPlayerBufferingPropsT = Omit<ComponentProps<'div'>, 'children'> & {
+  /** Подпись для скринридера, по умолчанию «Загрузка…» */
+  label?: string;
+};
+/**
+ * Пропсы индикатора действия
+ */
+export type VideoPlayerIndicatorPropsT = Omit<ComponentProps<'div'>, 'children'> & {
+  /** Подпись перемотки по числу секунд, по умолчанию «+5 с» / «−5 с» */
+  getSeekLabel?: (seconds: number) => string;
+};

package/dist/components/video-player/use-video-player.js

@@ -0,0 +1,319 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+// src/components/video-player/use-video-player.ts
+/** Через сколько мс без движения мыши панель управления скрывается во время воспроизведения */
+const IDLE_DELAY = 2500;
+/** Сколько мс показывается индикатор действия */
+const INDICATOR_DELAY = 800;
+/** Шаг громкости с клавиатуры */
+const VOLUME_STEP = .1;
+/**
+* Ограничить число диапазоном
+* @param value - число
+* @param min - нижняя граница
+* @param max - верхняя граница
+* @returns число в диапазоне
+*/
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+/**
+* Состояние и действия плеера. Единственный источник правды — элемент video:
+* состояние читается из его событий, действия вызывают его методы
+* @param options - настройки плеера
+* @returns состояние, действия, ref'ы и обработчики событий для video
+*/
+function useVideoPlayer(options) {
+	const { autoPlay, loop, defaultVolume, defaultMuted, seekStep, onPlay, onPause, onEnded } = options;
+	const videoRef = useRef(null);
+	const containerRef = useRef(null);
+	const indicatorTimer = useRef(void 0);
+	const idleTimer = useRef(void 0);
+	const indicatorCount = useRef(0);
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [isBuffering, setIsBuffering] = useState(false);
+	const [isIdle, setIsIdle] = useState(false);
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	const [currentTime, setCurrentTime] = useState(0);
+	const [duration, setDuration] = useState(0);
+	const [bufferedEnd, setBufferedEnd] = useState(0);
+	const [volume, setVolumeState] = useState(defaultVolume);
+	const [isMuted, setIsMuted] = useState(defaultMuted);
+	const [indicator, setIndicator] = useState(null);
+	const [subtitleText, setSubtitleText] = useState("");
+	/**
+	* Показать индикатор действия и скрыть через INDICATOR_DELAY
+	* @param type - действие
+	*/
+	const showIndicator = useCallback((type) => {
+		indicatorCount.current += 1;
+		setIndicator({
+			type,
+			id: indicatorCount.current
+		});
+		clearTimeout(indicatorTimer.current);
+		indicatorTimer.current = setTimeout(() => setIndicator(null), INDICATOR_DELAY);
+	}, []);
+	/**
+	* Пользователь активен: показать панель и запустить отсчёт до скрытия
+	*/
+	const wake = useCallback(() => {
+		setIsIdle(false);
+		clearTimeout(idleTimer.current);
+		idleTimer.current = setTimeout(() => setIsIdle(true), IDLE_DELAY);
+	}, []);
+	/**
+	* Начать воспроизведение
+	*/
+	const play = useCallback(() => {
+		videoRef.current?.play().catch(() => void 0);
+	}, []);
+	/**
+	* Поставить на паузу
+	*/
+	const pause = useCallback(() => {
+		videoRef.current?.pause();
+	}, []);
+	/**
+	* Переключить воспроизведение и показать индикатор
+	*/
+	const togglePlay = useCallback(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		if (video.paused) {
+			showIndicator("play");
+			play();
+			return;
+		}
+		showIndicator("pause");
+		pause();
+	}, [
+		pause,
+		play,
+		showIndicator
+	]);
+	/**
+	* Перемотать на время
+	* @param time - секунды от начала
+	*/
+	const seekTo = useCallback((time) => {
+		const video = videoRef.current;
+		if (!video || !Number.isFinite(video.duration)) return;
+		const next = clamp(time, 0, video.duration);
+		video.currentTime = next;
+		setCurrentTime(next);
+	}, []);
+	/**
+	* Перемотать относительно текущего места и показать индикатор
+	* @param delta - секунды, отрицательные — назад
+	*/
+	const seekBy = useCallback((delta) => {
+		const video = videoRef.current;
+		if (!video) return;
+		showIndicator(delta > 0 ? "seek-forward" : "seek-backward");
+		seekTo(video.currentTime + delta);
+	}, [seekTo, showIndicator]);
+	/**
+	* Задать громкость; нулевая выключает звук
+	* @param next - громкость от 0 до 1
+	* @param shouldShow - показать индикатор
+	*/
+	const setVolume = useCallback((next, shouldShow = false) => {
+		const video = videoRef.current;
+		if (!video) return;
+		const value = clamp(next, 0, 1);
+		if (shouldShow) {
+			const direction = value > video.volume ? "volume-up" : "volume-down";
+			showIndicator(value === 0 ? "volume-muted" : direction);
+		}
+		video.volume = value;
+		video.muted = value === 0;
+	}, [showIndicator]);
+	/**
+	* Включить или выключить звук; при включении на нулевой громкости вернуть половину
+	*/
+	const toggleMute = useCallback(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		if (video.muted || video.volume === 0) {
+			video.muted = false;
+			if (video.volume === 0) video.volume = .5;
+			showIndicator("volume-up");
+			return;
+		}
+		video.muted = true;
+		showIndicator("volume-muted");
+	}, [showIndicator]);
+	/**
+	* Войти в полноэкранный режим или выйти из него
+	*/
+	const toggleFullscreen = useCallback(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		if (document.fullscreenElement) {
+			document.exitFullscreen().catch(() => void 0);
+			return;
+		}
+		container.requestFullscreen().catch(() => void 0);
+	}, []);
+	/**
+	* Горячие клавиши на плеере: пробел и K — пауза, стрелки — перемотка и громкость,
+	* M — звук, F — полный экран. Клавиши сфокусированных кнопок и ползунков не перехватываются
+	* @param event - нажатие клавиши
+	*/
+	const handleKeyDown = useCallback((event) => {
+		wake();
+		const video = videoRef.current;
+		const hasModifier = event.altKey || event.ctrlKey || event.metaKey;
+		if (!video || event.target !== event.currentTarget || hasModifier) return;
+		const action = {
+			" ": togglePlay,
+			k: togglePlay,
+			ArrowRight: () => seekBy(seekStep),
+			ArrowLeft: () => seekBy(-seekStep),
+			ArrowUp: () => setVolume(video.volume + VOLUME_STEP, true),
+			ArrowDown: () => setVolume(video.volume - VOLUME_STEP, true),
+			m: toggleMute,
+			f: toggleFullscreen
+		}[event.key.length === 1 ? event.key.toLowerCase() : event.key];
+		if (!action) return;
+		event.preventDefault();
+		action();
+	}, [
+		seekBy,
+		seekStep,
+		setVolume,
+		toggleFullscreen,
+		toggleMute,
+		togglePlay,
+		wake
+	]);
+	/**
+	* Прочитать время, длительность и буфер из video
+	* @param video - элемент video
+	*/
+	const readTime = useCallback((video) => {
+		const ranges = video.buffered;
+		let end = 0;
+		for (let index = 0; index < ranges.length; index++) if (ranges.start(index) <= video.currentTime) end = Math.max(end, ranges.end(index));
+		setCurrentTime(video.currentTime);
+		setBufferedEnd(end);
+		if (Number.isFinite(video.duration)) setDuration(video.duration);
+	}, []);
+	/**
+	* Обработчики событий video: единственное место, где состояние плеера читается из элемента
+	*/
+	const videoHandlers = {
+		onPlay: () => {
+			setIsPlaying(true);
+			onPlay?.();
+		},
+		onPause: () => {
+			setIsPlaying(false);
+			onPause?.();
+		},
+		onEnded: () => {
+			setIsPlaying(false);
+			onEnded?.();
+		},
+		onTimeUpdate: (event) => readTime(event.currentTarget),
+		onProgress: (event) => readTime(event.currentTarget),
+		onLoadedMetadata: (event) => readTime(event.currentTarget),
+		onDurationChange: (event) => readTime(event.currentTarget),
+		onVolumeChange: (event) => {
+			setVolumeState(event.currentTarget.volume);
+			setIsMuted(event.currentTarget.muted);
+		},
+		onWaiting: () => setIsBuffering(true),
+		onPlaying: () => setIsBuffering(false),
+		onCanPlay: () => setIsBuffering(false),
+		onSeeked: () => setIsBuffering(false)
+	};
+	useEffect(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		video.volume = defaultVolume;
+		video.muted = defaultMuted;
+		video.loop = loop;
+		setIsPlaying(!video.paused);
+		if (video.readyState > 0) readTime(video);
+	}, []);
+	useEffect(() => {
+		if (videoRef.current) videoRef.current.loop = loop;
+	}, [loop]);
+	useEffect(() => {
+		if (autoPlay) play();
+	}, [autoPlay, play]);
+	useEffect(() => {
+		const textTracks = videoRef.current?.textTracks;
+		if (!textTracks) return;
+		const shownTracks = /* @__PURE__ */ new Set();
+		/** Собрать текст активных реплик всех включённых дорожек */
+		const readCues = () => {
+			const lines = [];
+			for (const track of shownTracks) for (const cue of track.activeCues ?? []) if (cue instanceof VTTCue) lines.push(cue.getCueAsHTML().textContent ?? "");
+			setSubtitleText(lines.join("\n"));
+		};
+		/** Включённые дорожки субтитров — в скрытый режим и в показ, выключенные — убрать из показа */
+		const syncTracks = () => {
+			for (const track of textTracks) {
+				if (!(track.kind === "subtitles" || track.kind === "captions")) continue;
+				if (track.mode === "showing") track.mode = "hidden";
+				if (track.mode === "hidden" && !shownTracks.has(track)) {
+					shownTracks.add(track);
+					track.addEventListener("cuechange", readCues);
+				}
+				if (track.mode === "disabled" && shownTracks.has(track)) {
+					shownTracks.delete(track);
+					track.removeEventListener("cuechange", readCues);
+				}
+			}
+			readCues();
+		};
+		syncTracks();
+		textTracks.addEventListener("change", syncTracks);
+		textTracks.addEventListener("addtrack", syncTracks);
+		return () => {
+			textTracks.removeEventListener("change", syncTracks);
+			textTracks.removeEventListener("addtrack", syncTracks);
+			for (const track of shownTracks) track.removeEventListener("cuechange", readCues);
+		};
+	}, []);
+	useEffect(() => {
+		const handleChange = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
+		document.addEventListener("fullscreenchange", handleChange);
+		return () => document.removeEventListener("fullscreenchange", handleChange);
+	}, []);
+	useEffect(() => () => {
+		clearTimeout(indicatorTimer.current);
+		clearTimeout(idleTimer.current);
+	}, []);
+	return {
+		videoRef,
+		containerRef,
+		isPlaying,
+		isBuffering,
+		isIdle,
+		isFullscreen,
+		currentTime,
+		duration,
+		bufferedEnd,
+		volume,
+		isMuted,
+		indicator,
+		subtitleText,
+		seekStep,
+		play,
+		pause,
+		togglePlay,
+		seekTo,
+		seekBy,
+		setVolume,
+		toggleMute,
+		toggleFullscreen,
+		wake,
+		handleKeyDown,
+		videoHandlers
+	};
+}
+export { useVideoPlayer };

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

@@ -0,0 +1,45 @@
+import { VideoIndicatorStateI } from "./types.js";
+/**
+ * Состояние и действия ближайшего VideoPlayer: для своих частей управления
+ * @returns состояние плеера и методы управления
+ */
+export declare function useVideoPlayerContext(): {
+  videoRef: import("react").RefObject<HTMLVideoElement | null>;
+  containerRef: import("react").RefObject<HTMLDivElement | null>;
+  isPlaying: boolean;
+  isBuffering: boolean;
+  isIdle: boolean;
+  isFullscreen: boolean;
+  currentTime: number;
+  duration: number;
+  bufferedEnd: number;
+  volume: number;
+  isMuted: boolean;
+  indicator: VideoIndicatorStateI | null;
+  subtitleText: string;
+  seekStep: number;
+  play: () => void;
+  pause: () => void;
+  togglePlay: () => void;
+  seekTo: (time: number) => void;
+  seekBy: (delta: number) => void;
+  setVolume: (next: number, shouldShow?: boolean) => void;
+  toggleMute: () => void;
+  toggleFullscreen: () => void;
+  wake: () => void;
+  handleKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+  videoHandlers: {
+    onPlay: () => void;
+    onPause: () => void;
+    onEnded: () => void;
+    onTimeUpdate: (event: import("react").SyntheticEvent<HTMLVideoElement>) => void;
+    onProgress: (event: import("react").SyntheticEvent<HTMLVideoElement>) => void;
+    onLoadedMetadata: (event: import("react").SyntheticEvent<HTMLVideoElement>) => void;
+    onDurationChange: (event: import("react").SyntheticEvent<HTMLVideoElement>) => void;
+    onVolumeChange: (event: import("react").SyntheticEvent<HTMLVideoElement>) => void;
+    onWaiting: () => void;
+    onPlaying: () => void;
+    onCanPlay: () => void;
+    onSeeked: () => void;
+  };
+};

package/dist/components/video-player/video-player-context.js

@@ -0,0 +1,15 @@
+"use client";
+import { createContext, useContext } from "react";
+// src/components/video-player/video-player-context.ts
+/** Контекст плеера: состояние и действия для частей */
+const VideoPlayerContext = createContext(null);
+/**
+* Состояние и действия ближайшего VideoPlayer: для своих частей управления
+* @returns состояние плеера и методы управления
+*/
+function useVideoPlayerContext() {
+	const context = useContext(VideoPlayerContext);
+	if (!context) throw new Error("Части плеера нужно использовать внутри VideoPlayer");
+	return context;
+}
+export { VideoPlayerContext, useVideoPlayerContext };

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

@@ -0,0 +1,38 @@
+import { VideoPlayerControlsPropsT, VideoPlayerFullscreenButtonPropsT, VideoPlayerPlayButtonPropsT, VideoPlayerProgressPropsT, VideoPlayerTimePropsT, VideoPlayerVolumePropsT } from "./types.js";
+/**
+ * Панель управления: располагается внизу плеера и скрывается через пару секунд без движения
+ * мыши во время воспроизведения. Внутрь кладут кнопки, громкость, время и перемотку
+ * @param props - пропсы панели
+ * @returns контейнер элементов управления
+ */
+export declare function VideoPlayerControls({ className, ...props }: VideoPlayerControlsPropsT): import("react").JSX.Element;
+/**
+ * Кнопка воспроизведения и паузы
+ * @param props - пропсы кнопки
+ * @returns круглая кнопка с иконкой по состоянию
+ */
+export declare function VideoPlayerPlayButton({ playLabel, pauseLabel, className, ...props }: VideoPlayerPlayButtonPropsT): import("react").JSX.Element;
+/**
+ * Блок громкости: кнопка звука и ползунок, который раскрывается при наведении или фокусе
+ * @param props - пропсы блока
+ * @returns кнопка и ползунок громкости
+ */
+export declare function VideoPlayerVolume({ muteLabel, unmuteLabel, label, className, ...props }: VideoPlayerVolumePropsT): import("react").JSX.Element;
+/**
+ * Время: текущее и общее, «0:12 / 3:45»
+ * @param props - пропсы времени
+ * @returns текст со временем
+ */
+export declare function VideoPlayerTime({ formatTime, className, ...props }: VideoPlayerTimePropsT): import("react").JSX.Element;
+/**
+ * Полоса перемотки: показывает прогресс и загруженную часть, перетаскивание и клавиши меняют время
+ * @param props - пропсы полосы
+ * @returns слайдер времени
+ */
+export declare function VideoPlayerProgress({ label, getValueLabel, className, ...props }: VideoPlayerProgressPropsT): import("react").JSX.Element;
+/**
+ * Кнопка входа в полноэкранный режим и выхода из него
+ * @param props - пропсы кнопки
+ * @returns круглая кнопка с иконкой по состоянию
+ */
+export declare function VideoPlayerFullscreenButton({ enterLabel, exitLabel, className, ...props }: VideoPlayerFullscreenButtonPropsT): import("react").JSX.Element;