@lobehub/tts/es/react/AudioVisualizer/index.mjs

A high-quality & reliable TTS React Hooks library

import Visualizer from "./Visualizer.mjs";
import { ErrorBoundary, Flexbox, Icon } from "@lobehub/ui";
import { Loader2 } from "lucide-react";
import { memo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/react/AudioVisualizer/index.tsx
const AudioVisualizer = memo(({ audioRef, isLoading, barStyle, style, className }) => {
	const { count, width, gap } = {
		count: 4,
		gap: 4,
		width: 48,
		...barStyle
	};
	const containerStyle = {
		fontSize: 24,
		height: barStyle?.maxHeight || width * 3,
		minWidth: (width + gap) * count,
		...style
	};
	return /* @__PURE__ */ jsx(ErrorBoundary, {
		fallback: /* @__PURE__ */ jsx("div", {
			className,
			style: containerStyle
		}),
		children: /* @__PURE__ */ jsx(Flexbox, {
			align: "center",
			className,
			gap,
			horizontal: true,
			justify: "center",
			style: containerStyle,
			children: isLoading ? /* @__PURE__ */ jsx(Icon, {
				icon: Loader2,
				spin: true
			}) : /* @__PURE__ */ jsx(Visualizer, {
				audioRef,
				...barStyle
			})
		})
	});
});

//#endregion
export { AudioVisualizer as default };