import { b as e, e as t } from "./chunk.BlbRoQQ3.js";
var n = /* @__PURE__ */ e(((exports, n) => {
	var r = Object.create, i = Object.defineProperty, a = Object.getOwnPropertyDescriptor, o = Object.getOwnPropertyNames, s = Object.getPrototypeOf, c = Object.prototype.hasOwnProperty, l = (e, t, n) => t in e ? i(e, t, {
		enumerable: !0,
		configurable: !0,
		writable: !0,
		value: n
	}) : e[t] = n, u = (e, t) => {
		for (var n in t) i(e, n, {
			get: t[n],
			enumerable: !0
		});
	}, d = (e, t, n, r) => {
		if (t && typeof t == "object" || typeof t == "function") for (let s of o(t)) !c.call(e, s) && s !== n && i(e, s, {
			get: () => t[s],
			enumerable: !(r = a(t, s)) || r.enumerable
		});
		return e;
	}, f = (e, t, n) => (n = e == null ? {} : r(s(e)), d(t || !e || !e.__esModule ? i(n, "default", {
		value: e,
		enumerable: !0
	}) : n, e)), p = (e) => d(i({}, "__esModule", { value: !0 }), e), m = (e, t, n) => (l(e, typeof t == "symbol" ? t : t + "", n), n), h = {};
	u(h, { default: () => y }), n.exports = p(h);
	var g = f(t("react"));
	let _ = "64px", v = {};
	var y = class extends g.Component {
		constructor() {
			super(...arguments), m(this, "mounted", !1), m(this, "state", { image: null }), m(this, "handleKeyPress", (e) => {
				(e.key === "Enter" || e.key === " ") && this.props.onClick();
			});
		}
		componentDidMount() {
			this.mounted = !0, this.fetchImage(this.props);
		}
		componentDidUpdate(e) {
			let { url: t, light: n } = this.props;
			(e.url !== t || e.light !== n) && this.fetchImage(this.props);
		}
		componentWillUnmount() {
			this.mounted = !1;
		}
		fetchImage({ url: e, light: t, oEmbedUrl: n }) {
			if (!g.default.isValidElement(t)) {
				if (typeof t == "string") {
					this.setState({ image: t });
					return;
				}
				if (v[e]) {
					this.setState({ image: v[e] });
					return;
				}
				return this.setState({ image: null }), window.fetch(n.replace("{url}", e)).then((e) => e.json()).then((t) => {
					if (t.thumbnail_url && this.mounted) {
						let n = t.thumbnail_url.replace("height=100", "height=480").replace("-d_295x166", "-d_640");
						this.setState({ image: n }), v[e] = n;
					}
				});
			}
		}
		render() {
			let { light: e, onClick: t, playIcon: n, previewTabIndex: r, previewAriaLabel: i } = this.props, { image: a } = this.state, o = g.default.isValidElement(e), s = {
				display: "flex",
				alignItems: "center",
				justifyContent: "center"
			}, c = {
				preview: {
					width: "100%",
					height: "100%",
					backgroundImage: a && !o ? `url(${a})` : void 0,
					backgroundSize: "cover",
					backgroundPosition: "center",
					cursor: "pointer",
					...s
				},
				shadow: {
					background: "radial-gradient(rgb(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%)",
					borderRadius: _,
					width: _,
					height: _,
					position: o ? "absolute" : void 0,
					...s
				},
				playIcon: {
					borderStyle: "solid",
					borderWidth: "16px 0 16px 26px",
					borderColor: "transparent transparent transparent white",
					marginLeft: "7px"
				}
			}, l = /* @__PURE__ */ g.default.createElement("div", {
				style: c.shadow,
				className: "react-player__shadow"
			}, /* @__PURE__ */ g.default.createElement("div", {
				style: c.playIcon,
				className: "react-player__play-icon"
			}));
			return /* @__PURE__ */ g.default.createElement("div", {
				style: c.preview,
				className: "react-player__preview",
				onClick: t,
				tabIndex: r,
				onKeyPress: this.handleKeyPress,
				...i ? { "aria-label": i } : {}
			}, o ? e : null, n || l);
		}
	};
}));
export default n();

//# sourceMappingURL=Preview.DY-xtFyd.js.map