@openmockup-studio/player 0.0.0-stage → 0.2.0

package/dist/embed.js

@@ -0,0 +1,106 @@
+// src/options.ts
+var e = (e, t) => e === null ? t : e !== "false" && e !== "0", t = (e) => e === null || e === "" || Number.isNaN(Number(e)) ? void 0 : Number(e);
+function n(n) {
+	let r = (e) => n.getAttribute(e), i = {}, a = {}, o = r("trigger");
+	if (o && o !== "scene") {
+		let e = {
+			load: "load",
+			click: "click",
+			hover: "hover",
+			scroll: "scroll",
+			inview: "in-view",
+			"in-view": "in-view",
+			mousemove: "cursor-move",
+			"cursor-move": "cursor-move",
+			none: "none"
+		}[o];
+		e && (i.trigger = e);
+	}
+	let s = r("trigger-loop");
+	s !== null && (i.loop = s === "pingpong" ? "pingpong" : e(s, !0) ? "loop" : "none");
+	let c = t(r("trigger-delay"));
+	c !== void 0 && (i.delay = c / 1e3);
+	let l = t(r("trigger-speed"));
+	l !== void 0 && (i.speed = l), e(r("cursor-enabled"), !0) || (a.follow = 0);
+	let u = t(r("cursor-amount"));
+	u !== void 0 && (a.follow = u / 100);
+	let d = r("cursor-mode");
+	(d === "device" || d === "camera") && (a.mode = d);
+	let f = t(r("zoom-amount"));
+	f !== void 0 && e(r("zoom-enabled"), !0) && (r("zoom-mode") === "dolly" ? a.dolly = f / 100 : a.zoom = f / 100);
+	let p = t(r("shake-intensity"));
+	p !== void 0 && e(r("shake-enabled"), !0) && (a.shake = p / 100), Object.keys(a).length && (i.cursor = a);
+	let m = t(r("camera-zoom"));
+	m && (i.cameraZoom = m);
+	let h = navigator.connection, g = !!h?.saveData || /(^|-)2g$/.test(h?.effectiveType ?? "");
+	return {
+		src: r("src"),
+		mockupId: r("mockup-id") ?? r("uid"),
+		base: r("base") ?? "https://irgtrjmgflkcsye5.public.blob.vercel-storage.com/scenes",
+		poster: r("poster"),
+		loader: e(r("loader"), !1),
+		progressive: e(r("progressive"), !0),
+		lowBandwidth: r("low-bandwidth") === null ? g : e(r("low-bandwidth"), g),
+		theme: r("theme") === "dark" ? "dark" : "light",
+		backgroundColor: r("background-color")?.trim() || null,
+		overrides: i
+	};
+}
+function r(e) {
+	return e.src ? e.src : e.mockupId ? `${e.base.replace(/\/$/, "")}/${e.mockupId}/project.json` : null;
+}
+// src/embed.ts
+var i = "mockup-embed", a = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"src",
+			"mockup-id",
+			"aspect-ratio",
+			"width",
+			"height",
+			"poster",
+			"theme"
+		];
+	}
+	player = null;
+	observer = null;
+	poster = null;
+	loading = !1;
+	connectedCallback() {
+		this.style.display ||= "block", this.style.position ||= "relative", this.style.overflow = "hidden", this.applySize(), this.showPoster();
+		let e = n(this);
+		e.lowBandwidth || (e.overrides.trigger === "load" || this.getAttribute("trigger") === "load" ? this.load() : (this.observer = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && (this.observer?.disconnect(), this.observer = null, this.load());
+		}, { rootMargin: "200px" }), this.observer.observe(this)));
+	}
+	disconnectedCallback() {
+		this.observer?.disconnect(), this.observer = null, this.player?.dispose(), this.player = null;
+	}
+	attributeChangedCallback(e) {
+		(e === "aspect-ratio" || e === "width" || e === "height") && this.applySize(), e === "poster" && this.showPoster();
+	}
+	applySize() {
+		let e = this.getAttribute("width"), t = this.getAttribute("height"), n = this.getAttribute("aspect-ratio"), r = (e) => /^\d+(\.\d+)?$/.test(e) ? `${e}px` : e;
+		e && (this.style.width = r(e)), t && (this.style.height = r(t)), n && !t && (this.style.aspectRatio = n), !e && !this.style.width && (this.style.width = "100%"), n || t || this.style.height || (this.style.aspectRatio = "16 / 9");
+	}
+	showPoster() {
+		let e = this.getAttribute("poster");
+		e && (this.poster || (this.poster = document.createElement("img"), this.poster.alt = "", this.poster.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s", this.prepend(this.poster)), this.poster.src = e);
+	}
+	async load() {
+		if (this.loading || this.player) return;
+		this.loading = !0;
+		let e = n(this), t = r(e);
+		if (!t) console.warn(`<${i}> needs a src or mockup-id attribute.`);
+		else try {
+			let n = await import("./runtime-RiyRiexX.js").then((e) => e.t);
+			this.player = await n.mount(this, e, t), this.poster && (this.poster.style.opacity = "0", setTimeout(() => this.poster?.remove(), 450));
+		} catch (e) {
+			console.error(`<${i}> failed to load`, e);
+		} finally {
+			this.loading = !1;
+		}
+	}
+};
+typeof customElements < "u" && !customElements.get(i) && customElements.define(i, a);
+export { a as MockupEmbed };

package/dist/rolldown-runtime-CGnMp29N.js

@@ -0,0 +1,10 @@
+// \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+export { t };