@meowdown/embed 0.1.0 → 0.2.0

package/dist/{render-link-BqiZxTy9.js → is-plain-click-QDpLdFP7.js}

@@ -53,23 +53,6 @@ function isPromiseLike(value) {
 	return typeof value === "object" && value !== null && typeof value.then === "function";
 }
 
-//#endregion
-//#region src/root.ts
-/**
-* The direct `<div data-root>` child that holds the rendered snapshot. Reused
-* across updates so other children the host appended survive; created on
-* first use.
-*/
-function getRootContainer(host) {
-	let container = host.querySelector(":scope > div[data-root]");
-	if (!container) {
-		container = host.ownerDocument.createElement("div");
-		container.dataset.root = "";
-		host.append(container);
-	}
-	return container;
-}
-
 //#endregion
 //#region src/safe-url.ts
 function getSafeUrl(value, protocols) {
@@ -97,4 +80,27 @@ function renderLink(content, destination) {
 }
 
 //#endregion
-export { useFetch as i, getSafeUrl as n, getRootContainer as r, renderLink as t };
+//#region src/root.ts
+/**
+* The direct `<div data-root>` child that holds the rendered snapshot. Reused
+* across updates so other children the host appended survive; created on
+* first use.
+*/
+function getRootContainer(host) {
+	let container = host.querySelector(":scope > div[data-root]");
+	if (!container) {
+		container = host.ownerDocument.createElement("div");
+		container.dataset.root = "";
+		host.append(container);
+	}
+	return container;
+}
+
+//#endregion
+//#region src/is-plain-click.ts
+function isPlainClick(event) {
+	return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+
+//#endregion
+export { useFetch as a, getSafeUrl as i, getRootContainer as n, renderLink as r, isPlainClick as t };

package/dist/x/index.js

@@ -1,4 +1,4 @@
-import { i as useFetch, n as getSafeUrl, r as getRootContainer, t as renderLink } from "../render-link-BqiZxTy9.js";
+import { a as useFetch, i as getSafeUrl, n as getRootContainer, r as renderLink, t as isPlainClick } from "../is-plain-click-QDpLdFP7.js";
 import { defineCustomElement, defineProps, registerCustomElement, useEffect } from "@aria-ui/core";
 import { parseXPost, parseXPostId } from "@post-embed/schema";
 import el from "crelt";
@@ -121,9 +121,6 @@ function renderError(permalink) {
 		hidden: true
 	}, "Media could not be loaded. ", renderLink("View on X", permalink));
 }
-function isPlainClick(event) {
-	return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
-}
 function renderPhoto(media, error, onClick) {
 	const image = el("img", {
 		src: media.url,
@@ -305,17 +302,18 @@ function useXPost(host, props) {
 		const url = props.url.get();
 		const value = result && !result.issues ? result.value : void 0;
 		const valid = value && (props.data.get() != null || !url || parseXPostId(url) === value.id);
-		container.replaceChildren(valid ? renderPost(value, protocols) : renderFallback(pending.get()));
+		container.replaceChildren(valid ? renderPost(value, protocols) : renderFallback(pending.get(), url));
 		return () => {
 			for (const video of container.querySelectorAll("video")) video.pause();
 		};
 	});
 }
-function renderFallback(pending) {
+function renderFallback(pending, url) {
+	const permalink = url != null && parseXPostId(url) ? url : void 0;
 	return el("article", pending ? {
 		"data-fallback": "",
 		"data-pending": ""
-	} : { "data-fallback": "" }, el("header", { "data-author": "" }, el("bdi", {}, "X post")), el("p", { "data-body": "" }, pending ? "Loading this post…" : "This post is unavailable."), pending ? null : el("footer", { "data-footer": "" }, "No saved post could be displayed."));
+	} : { "data-fallback": "" }, el("header", { "data-author": "" }, el("bdi", {}, "X post")), el("p", { "data-body": "" }, pending ? "Loading this post…" : "This post is unavailable."), pending ? null : el("footer", { "data-footer": "" }, permalink ? renderLink("View on X", permalink) : "No saved post could be displayed."));
 }
 const XPost = defineCustomElement(useXPost, defineProps({
 	data: {

package/dist/youtube/index.d.ts

@@ -1,6 +1,34 @@
 import { n as Resolver, t as FetchProps } from "../fetch-Djnul03u.js";
 import { HostElement, State } from "@aria-ui/core";
 import { YouTubeVideo } from "@post-embed/types";
+//#region src/youtube/video-click.d.ts
+export declare const YOUTUBE_VIDEO_CLICK = "meowdown-embed-youtube-click";
+interface YouTubeVideoClickDetail {
+  /**
+   * The snapshot the card rendered.
+   */
+  video: YouTubeVideo;
+  videoId: string;
+  /**
+   * Where playback starts, from the `t` or `start` parameter of the URL.
+   */
+  startSeconds: number;
+  /**
+   * A Short, which plays in portrait.
+   */
+  short: boolean;
+  /**
+   * The player page for an `<iframe>`. It starts playing as soon as it loads.
+   */
+  embedUrl: string;
+  /**
+   * The rendered thumbnail: the poster `<img>`, or the poster itself when the
+   * snapshot has no thumbnail.
+   */
+  element: HTMLElement;
+}
+type YouTubeVideoClickEvent = CustomEvent<YouTubeVideoClickDetail>;
+//#endregion
 //#region src/youtube/youtube-video.d.ts
 interface YouTubeVideoProps extends FetchProps<YouTubeVideo> {
   /**
@@ -21,6 +49,9 @@ declare global {
   interface HTMLElementTagNameMap {
     'meowdown-embed-youtube': YouTubeVideoElement;
   }
+  interface HTMLElementEventMap {
+    'meowdown-embed-youtube-click': YouTubeVideoClickEvent;
+  }
 }
 //#endregion
-export type { Resolver, YouTubeVideoElement, YouTubeVideoProps };
+export type { Resolver, YouTubeVideoClickDetail, YouTubeVideoClickEvent, YouTubeVideoElement, YouTubeVideoProps };

package/dist/youtube/index.js

@@ -1,4 +1,4 @@
-import { i as useFetch, n as getSafeUrl, r as getRootContainer, t as renderLink } from "../render-link-BqiZxTy9.js";
+import { a as useFetch, i as getSafeUrl, n as getRootContainer, r as renderLink, t as isPlainClick } from "../is-plain-click-QDpLdFP7.js";
 import { defineCustomElement, defineProps, registerCustomElement, useEffect } from "@aria-ui/core";
 import { parseYouTubeVideo } from "@post-embed/schema";
 import el from "crelt";
@@ -56,6 +56,22 @@ function getEmbedUrl(ref) {
 	return `https://www.youtube-nocookie.com/embed/${ref.videoId}?${params}`;
 }
 
+//#endregion
+//#region src/youtube/video-click.ts
+const YOUTUBE_VIDEO_CLICK = "meowdown-embed-youtube-click";
+/**
+* Returns false when a listener called `preventDefault()`: the host plays the
+* video itself, so the card must not run its own default.
+*/
+function dispatchVideoClick(target, detail) {
+	return target.dispatchEvent(new CustomEvent(YOUTUBE_VIDEO_CLICK, {
+		detail,
+		bubbles: true,
+		cancelable: true,
+		composed: true
+	}));
+}
+
 //#endregion
 //#region src/youtube/render-video.ts
 function renderFrame(ref, title) {
@@ -75,7 +91,7 @@ function renderVideo(video, ref, playback) {
 		target: "_blank",
 		rel: "noopener noreferrer"
 	};
-	const posterContent = [poster ? el("img", {
+	const image = poster ? el("img", {
 		src: poster,
 		alt: "",
 		width: video.thumbnail_width || void 0,
@@ -83,10 +99,19 @@ function renderVideo(video, ref, playback) {
 		loading: "lazy",
 		decoding: "async",
 		referrerpolicy: "no-referrer"
-	}) : void 0, el("span", {
+	}) : void 0;
+	const posterContent = [image, el("span", {
 		"data-play": "",
 		"aria-hidden": "true"
 	})];
+	const onClick = (element) => {
+		return dispatchVideoClick(element, {
+			video,
+			...ref,
+			embedUrl: getEmbedUrl(ref),
+			element
+		});
+	};
 	let posterElement;
 	if (playback === "inline") {
 		const button = el("button", {
@@ -95,16 +120,23 @@ function renderVideo(video, ref, playback) {
 			"aria-label": `Play: ${title}`
 		}, posterContent);
 		button.addEventListener("click", () => {
+			if (!onClick(image ?? button)) return;
 			const frame = renderFrame(ref, title);
 			button.replaceWith(frame);
 			frame.focus();
 		});
 		posterElement = button;
-	} else posterElement = el("a", {
-		"data-poster": "",
-		href: watchUrl,
-		...external
-	}, posterContent);
+	} else {
+		const link = el("a", {
+			"data-poster": "",
+			href: watchUrl,
+			...external
+		}, posterContent);
+		link.addEventListener("click", (event) => {
+			if (isPlainClick(event) && !onClick(image ?? link)) event.preventDefault();
+		});
+		posterElement = link;
+	}
 	return el("article", { "data-orientation": ref.short ? "portrait" : void 0 }, posterElement, el("div", { "data-details": "" }, el("a", {
 		"data-title": "",
 		href: watchUrl,
@@ -161,4 +193,4 @@ function registerYouTubeVideo(name = "meowdown-embed-youtube") {
 }
 
 //#endregion
-export { registerYouTubeVideo, useYouTubeVideo };
+export { YOUTUBE_VIDEO_CLICK, registerYouTubeVideo, useYouTubeVideo };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/embed",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",