build(react): build26 from 45504a2b

dist/dev/ui/buffering-indicator/buffering-indicator.js

@@ -0,0 +1,53 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { renderElement } from "../../utils/use-render.js";
+import { logMissingFeature, 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) {
+		logMissingFeature("BufferingIndicator", "playback");
+		return null;
+	}
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: BufferingIndicatorDataAttrs,
+		ref: [forwardedRef],
+		props: [elementProps]
+	});
+});
+//#endregion
+export { BufferingIndicator };
+
+//# sourceMappingURL=buffering-indicator.js.map