@archytechtor/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,226 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { formatDuration } from "../../lib/format.js";
+import { Button } from "../button/button.js";
+import { Slider as Slider$1 } from "../slider/slider.js";
+import { useVideoPlayerContext } from "./video-player-context.js";
+import { MaximizeIcon, MinimizeIcon, PauseIcon, PlayIcon, Volume1Icon, Volume2Icon, VolumeOffIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Slider } from "@base-ui/react/slider";
+// src/components/video-player/video-player-controls.tsx
+/** Полупрозрачная круглая подложка элементов управления поверх видео */
+const PILL_CLASSES = cn("shrink-0", "rounded-full", "bg-background/60", "text-foreground", "backdrop-blur-sm", "transition-colors", "duration-300", "hover:bg-background/80", "dark:hover:bg-background/80");
+/**
+* Панель управления: располагается внизу плеера и скрывается через пару секунд без движения
+* мыши во время воспроизведения. Внутрь кладут кнопки, громкость, время и перемотку
+* @param props - пропсы панели
+* @returns контейнер элементов управления
+*/
+function VideoPlayerControls({ className, ...props }) {
+	const { isPlaying, isIdle } = useVideoPlayerContext();
+	const isHidden = isPlaying && isIdle;
+	const classes = cn("absolute", "inset-x-0", "bottom-0", "flex", "items-center", "gap-2", "p-3", "transition-opacity", "duration-300", "data-hidden:pointer-events-none", "data-hidden:opacity-0", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "video-player-controls",
+		"data-hidden": isHidden || void 0,
+		className: classes,
+		...props
+	});
+}
+/**
+* Кнопка воспроизведения и паузы
+* @param props - пропсы кнопки
+* @returns круглая кнопка с иконкой по состоянию
+*/
+function VideoPlayerPlayButton({ playLabel = "Воспроизвести", pauseLabel = "Пауза", className, ...props }) {
+	const { isPlaying, togglePlay } = useVideoPlayerContext();
+	const label = isPlaying ? pauseLabel : playLabel;
+	const icon = isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {});
+	const classes = cn(PILL_CLASSES, "active:scale-90", "active:translate-y-0", className);
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "video-player-play-button",
+		variant: "ghost",
+		size: "icon-lg",
+		"aria-label": label,
+		className: classes,
+		onClick: togglePlay,
+		...props,
+		children: icon
+	});
+}
+/**
+* Блок громкости: кнопка звука и ползунок, который раскрывается при наведении или фокусе
+* @param props - пропсы блока
+* @returns кнопка и ползунок громкости
+*/
+function VideoPlayerVolume({ muteLabel = "Выключить звук", unmuteLabel = "Включить звук", label = "Громкость", className, ...props }) {
+	const { volume, isMuted, toggleMute, setVolume } = useVideoPlayerContext();
+	const isSilent = isMuted || volume === 0;
+	const buttonLabel = isSilent ? unmuteLabel : muteLabel;
+	const value = isSilent ? 0 : Math.round(volume * 100);
+	const classes = cn("group/volume", "flex", "items-center", "overflow-hidden", PILL_CLASSES, className);
+	const sliderWrapperClasses = cn("w-0", "transition-[width]", "duration-150", "ease-linear", "group-hover/volume:w-24", "group-focus-within/volume:w-24");
+	let icon = /* @__PURE__ */ jsx(Volume2Icon, {});
+	if (isSilent) icon = /* @__PURE__ */ jsx(VolumeOffIcon, {});
+	else if (volume < .5) icon = /* @__PURE__ */ jsx(Volume1Icon, {});
+	/**
+	* Ползунок двигают: громкость от 0 до 100 переводится в долю
+	* @param next - значение ползунка
+	*/
+	const handleChange = (next) => setVolume((next[0] ?? 0) / 100);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "video-player-volume",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-lg",
+			"aria-label": buttonLabel,
+			className: "shrink-0 rounded-full hover:bg-transparent dark:hover:bg-transparent",
+			onClick: toggleMute,
+			children: icon
+		}), /* @__PURE__ */ jsx("div", {
+			className: sliderWrapperClasses,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex h-9 w-24 items-center pr-4 pl-0.5",
+				children: /* @__PURE__ */ jsx(Slider$1, {
+					value: [value],
+					min: 0,
+					max: 100,
+					step: 1,
+					"aria-label": label,
+					onValueChange: handleChange
+				})
+			})
+		})]
+	});
+}
+/**
+* Время: текущее и общее, «0:12 / 3:45»
+* @param props - пропсы времени
+* @returns текст со временем
+*/
+function VideoPlayerTime({ formatTime = formatDuration, className, ...props }) {
+	const { currentTime, duration } = useVideoPlayerContext();
+	const current = formatTime(currentTime);
+	const total = formatTime(duration);
+	const classes = cn("rounded-full", "px-3", "py-1.5", "text-xs", "font-medium", "whitespace-nowrap", "tabular-nums", "bg-background/60", "text-foreground", "backdrop-blur-sm", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "video-player-time",
+		className: classes,
+		...props,
+		children: `${current} / ${total}`
+	});
+}
+/**
+* Полоса перемотки: показывает прогресс и загруженную часть, перетаскивание и клавиши меняют время
+* @param props - пропсы полосы
+* @returns слайдер времени
+*/
+function VideoPlayerProgress({ label = "Перемотка", getValueLabel, className, ...props }) {
+	const { currentTime, duration, bufferedEnd, seekStep, isPlaying, play, pause, seekTo } = useVideoPlayerContext();
+	const wasPlayingRef = useRef(false);
+	const hasDuration = duration > 0;
+	const loadedPercent = hasDuration ? Math.min(100, bufferedEnd / duration * 100) : 0;
+	const step = duration > 60 ? 1 : .25;
+	const rootClasses = cn("group/progress", "min-w-6", "flex-1", className);
+	const thumbClasses = cn("block", "size-3", "rounded-full", "bg-primary", "opacity-0", "ring-ring/50", "transition-[opacity,box-shadow]", "group-hover/progress:opacity-100", "focus-visible:opacity-100", "focus-visible:ring-3", "focus-visible:outline-hidden", "after:absolute", "after:-inset-2");
+	/**
+	* Текст значения для скринридера
+	* @param _formatted - значение в виде строки (не используется)
+	* @param time - секунды
+	* @returns «0:12 из 3:45» или текст из getValueLabel
+	*/
+	const getAriaValueText = (_formatted, time) => {
+		if (getValueLabel) return getValueLabel(time, duration);
+		const current = formatDuration(time);
+		const total = formatDuration(duration);
+		return `${current} ${texts.of} ${total}`;
+	};
+	/**
+	* Полосу двигают: перемотать видео
+	* @param next - секунды
+	*/
+	const handleChange = (next) => {
+		const time = typeof next === "number" ? next : next[0] ?? 0;
+		seekTo(time);
+	};
+	/**
+	* Полосу отпустили: продолжить воспроизведение, если видео играло до нажатия
+	*/
+	const handleRelease = () => {
+		document.removeEventListener("pointerup", handleRelease);
+		document.removeEventListener("pointercancel", handleRelease);
+		if (wasPlayingRef.current) play();
+		wasPlayingRef.current = false;
+	};
+	/**
+	* Нажатие на полосу: пауза на время перемотки, иначе видео уводит бегунок из-под курсора
+	*/
+	const handlePointerDown = () => {
+		wasPlayingRef.current = isPlaying;
+		if (isPlaying) pause();
+		document.addEventListener("pointerup", handleRelease);
+		document.addEventListener("pointercancel", handleRelease);
+	};
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		"data-slot": "video-player-progress",
+		value: hasDuration ? currentTime : 0,
+		min: 0,
+		max: hasDuration ? duration : 1,
+		step,
+		largeStep: seekStep,
+		disabled: !hasDuration,
+		thumbAlignment: "edge",
+		"aria-label": label,
+		className: rootClasses,
+		onValueChange: handleChange,
+		...props,
+		children: /* @__PURE__ */ jsxs(Slider.Control, {
+			"data-slot": "video-player-progress-control",
+			className: "relative flex h-6 w-full cursor-pointer touch-none items-center select-none",
+			onPointerDown: handlePointerDown,
+			children: [/* @__PURE__ */ jsxs(Slider.Track, {
+				"data-slot": "video-player-progress-track",
+				className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-background/60 backdrop-blur-sm",
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-slot": "video-player-progress-buffer",
+					className: "absolute inset-y-0 left-0 bg-foreground/30",
+					style: { width: `${loadedPercent}%` }
+				}), /* @__PURE__ */ jsx(Slider.Indicator, {
+					"data-slot": "video-player-progress-range",
+					className: "absolute h-full bg-primary"
+				})]
+			}), /* @__PURE__ */ jsx(Slider.Thumb, {
+				"data-slot": "video-player-progress-thumb",
+				"aria-label": label,
+				getAriaValueText,
+				className: thumbClasses
+			})]
+		})
+	});
+}
+/**
+* Кнопка входа в полноэкранный режим и выхода из него
+* @param props - пропсы кнопки
+* @returns круглая кнопка с иконкой по состоянию
+*/
+function VideoPlayerFullscreenButton({ enterLabel = "Полный экран", exitLabel = "Выйти из полноэкранного режима", className, ...props }) {
+	const { isFullscreen, toggleFullscreen } = useVideoPlayerContext();
+	const label = isFullscreen ? exitLabel : enterLabel;
+	const icon = isFullscreen ? /* @__PURE__ */ jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsx(MaximizeIcon, {});
+	const classes = cn(PILL_CLASSES, "active:scale-90", "active:translate-y-0", className);
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "video-player-fullscreen-button",
+		variant: "ghost",
+		size: "icon-lg",
+		"aria-label": label,
+		className: classes,
+		onClick: toggleFullscreen,
+		...props,
+		children: icon
+	});
+}
+export { VideoPlayerControls, VideoPlayerFullscreenButton, VideoPlayerPlayButton, VideoPlayerProgress, VideoPlayerTime, VideoPlayerVolume };

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

@@ -0,0 +1,13 @@
+import { VideoPlayerBufferingPropsT, VideoPlayerIndicatorPropsT } from "./types.js";
+/**
+ * Индикатор загрузки: спиннер поверх видео, пока плеер ждёт данные
+ * @param props - пропсы индикатора
+ * @returns спиннер с плавным появлением
+ */
+export declare function VideoPlayerBuffering({ label, className, ...props }: VideoPlayerBufferingPropsT): import("react").JSX.Element;
+/**
+ * Индикатор действия: ненадолго показывает пуск, паузу, громкость или перемотку
+ * @param props - пропсы индикатора
+ * @returns анимированная иконка по центру или у края
+ */
+export declare function VideoPlayerIndicator({ getSeekLabel, className, ...props }: VideoPlayerIndicatorPropsT): import("react").JSX.Element;

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

@@ -0,0 +1,113 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Spinner } from "../spinner/spinner.js";
+import { useVideoPlayerContext } from "./video-player-context.js";
+import { ChevronsLeftIcon, ChevronsRightIcon, PauseIcon, PlayIcon, Volume1Icon, Volume2Icon, VolumeOffIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+// src/components/video-player/video-player-overlay.tsx
+/**
+* Индикатор загрузки: спиннер поверх видео, пока плеер ждёт данные
+* @param props - пропсы индикатора
+* @returns спиннер с плавным появлением
+*/
+function VideoPlayerBuffering({ label = "Загрузка…", className, ...props }) {
+	const { isBuffering } = useVideoPlayerContext();
+	const classes = cn("pointer-events-none", "absolute", "inset-0", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "video-player-buffering",
+		className: classes,
+		...props,
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: isBuffering && /* @__PURE__ */ jsx(motion.div, {
+			className: "flex size-full items-center justify-center bg-background/20",
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: { duration: .2 },
+			children: /* @__PURE__ */ jsx(Spinner, {
+				"aria-label": label,
+				className: "size-12 text-foreground"
+			})
+		}) })
+	});
+}
+/**
+* Подпись перемотки по умолчанию
+* @param seconds - секунды со знаком
+* @returns «+5 с» или «−5 с»
+*/
+function getDefaultSeekLabel(seconds) {
+	return `${seconds > 0 ? "+" : "−"}${Math.abs(seconds)} с`;
+}
+/**
+* Иконка действия для центра плеера
+* @param type - действие
+* @returns иконка
+*/
+function getCenterIcon(type) {
+	if (type === "play") return /* @__PURE__ */ jsx(PlayIcon, {});
+	if (type === "pause") return /* @__PURE__ */ jsx(PauseIcon, {});
+	if (type === "volume-up") return /* @__PURE__ */ jsx(Volume2Icon, {});
+	if (type === "volume-down") return /* @__PURE__ */ jsx(Volume1Icon, {});
+	return /* @__PURE__ */ jsx(VolumeOffIcon, {});
+}
+/**
+* Индикатор действия: ненадолго показывает пуск, паузу, громкость или перемотку
+* @param props - пропсы индикатора
+* @returns анимированная иконка по центру или у края
+*/
+function VideoPlayerIndicator({ getSeekLabel = getDefaultSeekLabel, className, ...props }) {
+	const { indicator, seekStep } = useVideoPlayerContext();
+	const isSeek = indicator?.type === "seek-forward" || indicator?.type === "seek-backward";
+	const isForward = indicator?.type === "seek-forward";
+	const alignClasses = isForward ? "justify-end pr-6" : "justify-start pl-6";
+	const classes = cn("pointer-events-none", "absolute", "inset-0", className);
+	const seconds = isForward ? seekStep : -seekStep;
+	const pillClasses = cn("flex", "items-center", "justify-center", "gap-1", "rounded-full", "bg-background/50", "text-foreground", "backdrop-blur-sm", "[&_svg]:size-10");
+	const seekRowClasses = cn("flex", "w-full", alignClasses);
+	const seekPillClasses = cn(pillClasses, "h-14", "px-3", "text-lg", "font-medium");
+	const centerPillClasses = cn(pillClasses, "size-20");
+	let content = null;
+	if (indicator && isSeek) content = /* @__PURE__ */ jsx("div", {
+		className: seekRowClasses,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: seekPillClasses,
+			children: [
+				!isForward && /* @__PURE__ */ jsx(ChevronsLeftIcon, {}),
+				getSeekLabel(seconds),
+				isForward && /* @__PURE__ */ jsx(ChevronsRightIcon, {})
+			]
+		})
+	});
+	if (indicator && !isSeek) content = /* @__PURE__ */ jsx("div", {
+		className: "flex w-full justify-center",
+		children: /* @__PURE__ */ jsx("div", {
+			className: centerPillClasses,
+			children: getCenterIcon(indicator.type)
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "video-player-indicator",
+		"aria-hidden": true,
+		className: classes,
+		...props,
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: indicator && /* @__PURE__ */ jsx(motion.div, {
+			className: "absolute inset-0 flex items-center",
+			initial: {
+				opacity: 0,
+				scale: .8
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: .8
+			},
+			transition: { duration: .25 },
+			children: content
+		}, indicator.id) })
+	});
+}
+export { VideoPlayerBuffering, VideoPlayerIndicator };

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

@@ -0,0 +1,8 @@
+import { VideoPlayerPropsT } from "./types.js";
+/**
+ * Видеоплеер со своими элементами управления. Клавиши при фокусе на плеере: пробел и K — пауза,
+ * ← → — перемотка, ↑ ↓ — громкость, M — звук, F — полный экран
+ * @param props - пропсы плеера
+ * @returns плеер с видео и частями управления
+ */
+export declare function VideoPlayer({ src, poster, autoPlay, loop, defaultVolume, defaultMuted, seekStep, preload, crossOrigin, subtitles, label, className, videoClassName, onPlay, onPause, onEnded, onKeyDown, onPointerMove, children, ...props }: VideoPlayerPropsT): import("react").JSX.Element;

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

@@ -0,0 +1,139 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { VideoPlayerContext } from "./video-player-context.js";
+import { VideoPlayerBuffering, VideoPlayerIndicator } from "./video-player-overlay.js";
+import { useVideoPlayer } from "./use-video-player.js";
+import { VideoPlayerControls, VideoPlayerFullscreenButton, VideoPlayerPlayButton, VideoPlayerProgress, VideoPlayerTime, VideoPlayerVolume } from "./video-player-controls.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/video-player/video-player.tsx
+/** Качества от лучшего к худшему: из набора ссылок берётся первое доступное */
+const QUALITY_ORDER = [
+	"2160p",
+	"1440p",
+	"1080p",
+	"720p",
+	"480p",
+	"360p",
+	"240p"
+];
+/**
+* Выбрать ссылку на видео
+* @param source - ссылка или ссылки по качеству
+* @returns лучшая доступная ссылка или undefined
+*/
+function getVideoUrl(source) {
+	if (typeof source === "string") return source;
+	const quality = QUALITY_ORDER.find((item) => source[item]);
+	if (!quality) return;
+	return source[quality];
+}
+/**
+* Стандартный набор частей: загрузка, индикатор и панель управления
+* @returns части плеера
+*/
+function VideoPlayerDefaultParts() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(VideoPlayerBuffering, {}),
+		/* @__PURE__ */ jsx(VideoPlayerIndicator, {}),
+		/* @__PURE__ */ jsxs(VideoPlayerControls, { children: [
+			/* @__PURE__ */ jsx(VideoPlayerPlayButton, {}),
+			/* @__PURE__ */ jsx(VideoPlayerVolume, {}),
+			/* @__PURE__ */ jsx(VideoPlayerTime, {}),
+			/* @__PURE__ */ jsx(VideoPlayerProgress, {}),
+			/* @__PURE__ */ jsx(VideoPlayerFullscreenButton, {})
+		] })
+	] });
+}
+/**
+* Видеоплеер со своими элементами управления. Клавиши при фокусе на плеере: пробел и K — пауза,
+* ← → — перемотка, ↑ ↓ — громкость, M — звук, F — полный экран
+* @param props - пропсы плеера
+* @returns плеер с видео и частями управления
+*/
+function VideoPlayer({ src, poster, autoPlay = false, loop = false, defaultVolume = 1, defaultMuted = false, seekStep = 5, preload = "metadata", crossOrigin, subtitles, label = "Видеоплеер", className, videoClassName, onPlay, onPause, onEnded, onKeyDown, onPointerMove, children, ...props }) {
+	const player = useVideoPlayer({
+		autoPlay,
+		loop,
+		defaultVolume,
+		defaultMuted,
+		seekStep,
+		onPlay,
+		onPause,
+		onEnded
+	});
+	const isIdle = player.isPlaying && player.isIdle;
+	const classes = cn("group/video-player", "relative", "aspect-video", "w-full", "overflow-hidden", "rounded-lg", "bg-muted", "outline-none", "focus-visible:ring-3", "focus-visible:ring-ring/50", "data-fullscreen:rounded-none", "data-idle:cursor-none", className);
+	const videoClasses = cn("size-full", "cursor-pointer", "object-contain", videoClassName);
+	const subtitlesClasses = cn("pointer-events-none", "absolute", "inset-x-0", "bottom-16", "flex", "justify-center", "px-4", "transition-[bottom]", "duration-300", "group-data-idle/video-player:bottom-4");
+	const subtitleClasses = cn("max-w-full", "rounded-md", "bg-background/70", "px-2", "py-1", "text-center", "text-sm", "whitespace-pre-line", "text-foreground", "backdrop-blur-sm", "sm:text-base");
+	const videoUrl = getVideoUrl(src);
+	const parts = children ?? /* @__PURE__ */ jsx(VideoPlayerDefaultParts, {});
+	const tracks = subtitles?.map((track) => /* @__PURE__ */ jsx("track", {
+		kind: "subtitles",
+		src: track.src,
+		srcLang: track.lang,
+		label: track.label,
+		default: track.default
+	}, `${track.lang}-${track.src}`));
+	/**
+	* Нажатие клавиши: горячие клавиши плеера, затем пользовательский обработчик
+	* @param event - нажатие клавиши
+	*/
+	const handleKeyDown = (event) => {
+		player.handleKeyDown(event);
+		onKeyDown?.(event);
+	};
+	/**
+	* Движение указателя: показать панель управления
+	* @param event - движение указателя
+	*/
+	const handlePointerMove = (event) => {
+		player.wake();
+		onPointerMove?.(event);
+	};
+	return /* @__PURE__ */ jsx(VideoPlayerContext.Provider, {
+		value: player,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "video-player",
+			"data-playing": player.isPlaying || void 0,
+			"data-fullscreen": player.isFullscreen || void 0,
+			"data-idle": isIdle || void 0,
+			ref: player.containerRef,
+			role: "region",
+			"aria-label": label,
+			"aria-roledescription": "видеоплеер",
+			tabIndex: 0,
+			className: classes,
+			onKeyDown: handleKeyDown,
+			onPointerMove: handlePointerMove,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx("video", {
+					"data-slot": "video-player-video",
+					ref: player.videoRef,
+					src: videoUrl,
+					poster,
+					preload,
+					crossOrigin,
+					playsInline: true,
+					controls: false,
+					className: videoClasses,
+					onClick: player.togglePlay,
+					...player.videoHandlers,
+					children: tracks
+				}),
+				player.subtitleText && /* @__PURE__ */ jsx("div", {
+					"data-slot": "video-player-subtitles",
+					"aria-hidden": true,
+					className: subtitlesClasses,
+					children: /* @__PURE__ */ jsx("span", {
+						className: subtitleClasses,
+						children: player.subtitleText
+					})
+				}),
+				parts
+			]
+		})
+	});
+}
+export { VideoPlayer };