v10/dist/default/ui/buffering-indicator/buffering-indicator.js

"use client";
import { usePlayer } from "../../player/context.js";
import { useDestroy } from "../../utils/use-destroy.js";
import { renderElement } from "../../utils/use-render.js";
import { selectPlayback } from "@videojs/core/dom";
import { forwardRef, useState, useSyncExternalStore } from "react";
import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from "@videojs/core";
//#region src/ui/buffering-indicator/buffering-indicator.tsx
/**
* Displays a buffering indicator when media is waiting for data.
*
* Visibility is delayed (default 500ms) to avoid flashing on quick buffers.
*
* @example
* ```tsx
* <BufferingIndicator />
*
* <BufferingIndicator delay={1000} />
*
* <BufferingIndicator
*   render={(props, state) => (
*     <div {...props}>{state.visible && <Spinner />}</div>
*   )}
* />
* ```
*/
const BufferingIndicator = forwardRef(function BufferingIndicator(componentProps, forwardedRef) {
	const { render, className, style, delay, ...elementProps } = componentProps;
	const playback = usePlayer(selectPlayback);
	const [core] = useState(() => new BufferingIndicatorCore());
	useDestroy(core);
	core.setProps({ delay });
	if (playback) core.update(playback);
	const state = useSyncExternalStore((cb) => core.state.subscribe(cb), () => core.state.current, () => core.state.current);
	if (!playback) return null;
	return renderElement("div", {
		render,
		className,
		style
	}, {
		state,
		stateAttrMap: BufferingIndicatorDataAttrs,
		ref: [forwardedRef],
		props: [elementProps]
	});
});
//#endregion
export { BufferingIndicator };

//# sourceMappingURL=buffering-indicator.js.map