v10/dist/dev/ui/poster/poster.js

"use client";
import { usePlayer } from "../../player/context.js";
import { renderElement } from "../../utils/use-render.js";
import { logMissingFeature, selectPlayback } from "@videojs/core/dom";
import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import { PosterCore, PosterDataAttrs } from "@videojs/core";
//#region src/ui/poster/poster.tsx
/**
* Displays the video poster image. Shows before playback starts, hides after.
*
* @example
* ```tsx
* <Poster src="poster.jpg" alt="Video description" />
*
* <Poster
*   src="poster.jpg"
*   alt="Video description"
*   className={(state) => state.visible ? 'visible' : 'hidden'}
* />
* ```
*/
const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
	const { render, className, style, ...elementProps } = componentProps;
	const playback = usePlayer(selectPlayback);
	const [core] = useState(() => new PosterCore());
	const src = elementProps.src;
	const [loadedSrc, setLoadedSrc] = useState(void 0);
	const loaded = loadedSrc === src;
	const imgRef = useRef(null);
	useEffect(() => {
		const img = imgRef.current;
		if (img?.complete && img.naturalWidth > 0 && img.getAttribute("src") === src) setLoadedSrc(src);
	}, [src]);
	const handleLoad = useCallback((event) => {
		setLoadedSrc(event.currentTarget.getAttribute("src") ?? void 0);
	}, []);
	if (!playback) {
		logMissingFeature("Poster", "playback");
		return null;
	}
	core.setMedia(playback);
	return renderElement("img", {
		render,
		className,
		style
	}, {
		state: core.getState(),
		stateAttrMap: PosterDataAttrs,
		ref: [forwardedRef, imgRef],
		props: [elementProps, {
			"data-loaded": loaded ? "" : void 0,
			onLoad: handleLoad
		}]
	});
});
//#endregion
export { Poster };

//# sourceMappingURL=poster.js.map