@meowdown/embed 0.1.0 → 0.3.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,
@@ -262,14 +259,14 @@ function renderDate(post) {
 
 //#endregion
 //#region src/x/render-post.ts
-function renderBody(post, collapseBlankLines = false) {
+function renderBody(post) {
 	const permalink = getPermalink(post);
 	return el("p", {
 		"data-body": "",
 		dir: "auto",
 		lang: post.lang || void 0
 	}, el("span", { "data-text": "" }, post.body.map((segment) => {
-		return segment.type === "link" ? renderLink(segment.text, segment.url) : segment.text.split(collapseBlankLines ? /\n+/ : "\n").map((line, index) => {
+		return segment.type === "link" ? renderLink(segment.text, segment.url) : segment.text.split("\n").map((line, index) => {
 			return [index ? el("br", {}) : void 0, line];
 		});
 	})), post.truncated && permalink ? [" ", renderLink("Show more", permalink)] : void 0);
@@ -282,12 +279,12 @@ function renderQuoted(post, protocols) {
 	return el("article", {
 		"data-quoted": "",
 		"aria-label": "Quoted post"
-	}, renderAuthor(post.author, protocols, renderDate(post)), renderBody(post, true), renderMedia(post.media, protocols, getPermalink(post)), renderEdit(post));
+	}, renderAuthor(post.author, protocols, renderDate(post)), renderBody(post), renderMedia(post.media, protocols, getPermalink(post)), renderEdit(post));
 }
 function renderPost(post, protocols = null) {
 	const reply = post.replyTo;
 	const replyUrl = reply && /^\w{1,15}$/.test(reply.handle) && /^\d+$/.test(reply.id) ? `https://x.com/${reply.handle}/status/${reply.id}` : void 0;
-	return el("article", {}, renderAuthor(post.author, protocols, renderDate(post)), reply ? el("div", { "data-reply-to": "" }, renderLink(`Replying to @${reply.handle}`, replyUrl)) : void 0, renderBody(post), renderMedia(post.media, protocols, getPermalink(post)), post.quote ? renderQuoted(post.quote, protocols) : void 0, renderEdit(post));
+	return el("article", {}, el("div", { "data-content": "" }, renderAuthor(post.author, protocols, renderDate(post)), reply ? el("div", { "data-reply-to": "" }, renderLink(`Replying to @${reply.handle}`, replyUrl)) : void 0, renderBody(post), renderMedia(post.media, protocols, getPermalink(post)), post.quote ? renderQuoted(post.quote, protocols) : void 0, renderEdit(post)), el("details", { "data-show-more": "" }, el("summary", {})));
 }
 
 //#endregion
@@ -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/x/theme.css

@@ -33,6 +33,24 @@
   inherits: true;
 }
 
+@property --meowdown-embed-max-height {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --_overflowing {
+  syntax: '<integer>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@keyframes meowdown-embed-overflowing {
+  from,
+  to {
+    --_overflowing: 1;
+  }
+}
+
 /*
  * Hard reset. `all: revert` rolls every property on every box inside the card
  * back to the user-agent default, so a host rule on `p`, `a`, `img`,
@@ -58,6 +76,7 @@
   --_link: var(--meowdown-embed-link-color, #1d9bf0);
   --_tint: color-mix(in srgb, currentColor 5%, transparent);
   --_media-height: 7.5rem;
+  --_show-more-height: 2rem;
 
   display: block;
   /* As wide as the content, between 18rem and 28rem: a short text post stays
@@ -184,6 +203,111 @@
     color: inherit;
   }
 
+  /* Max height. The article is clipped to `--_body-limit`, the tallest
+   * article that keeps the card within `--meowdown-embed-max-height`. As a
+   * scroll container it has a scroll timeline only while the clip hides
+   * content, so the animation on that timeline sets `--_overflowing` exactly
+   * when the card is too tall. Then the article gives up one row, which the
+   * "Show more" toggle takes, so the whole card is exactly the limit. The
+   * toggle is anchored to the card's padding box, out of the article's clip.
+   * Browsers without scroll-driven animations show the whole card. */
+  & > article {
+    /* Room inside the clip for focus rings at the article's edges. */
+    --_clip-gutter: 4px;
+    --_body-limit: calc(
+      var(--meowdown-embed-max-height, 256px) - 2 * var(--meowdown-embed-padding, 1rem) - 2px + 2 *
+        var(--_clip-gutter)
+    );
+  }
+  & > article > [data-show-more] {
+    display: none;
+  }
+  & > article > [data-show-more] > summary {
+    display: block;
+    width: fit-content;
+    font-size: 0.9375em;
+    line-height: var(--_show-more-height);
+    color: var(--_link);
+    list-style: none;
+    cursor: pointer;
+  }
+  & > article > [data-show-more] > summary::-webkit-details-marker {
+    display: none;
+  }
+  & > article > [data-show-more] > summary::before {
+    content: 'Show more';
+  }
+  & > article > [data-show-more][open] > summary::before {
+    content: 'Show less';
+  }
+  & > article > [data-show-more] > summary:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  & > article > [data-show-more] > summary:focus-visible {
+    outline: 2px solid var(--_link);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+  @supports (animation-timeline: scroll()) {
+    & > article {
+      max-height: calc(var(--_body-limit) - var(--_overflowing) * var(--_show-more-height));
+      overflow: hidden;
+      padding: var(--_clip-gutter);
+      margin: calc(-1 * var(--_clip-gutter));
+      margin-block-end: calc(var(--_overflowing) * var(--_show-more-height) - var(--_clip-gutter));
+      animation: meowdown-embed-overflowing linear both;
+      animation-timeline: scroll(self);
+    }
+    /* Opened, or holding keyboard focus that the clip could hide. */
+    & > article:has(> [data-show-more][open]),
+    & > article:has(:focus-visible:not(summary)) {
+      max-height: none;
+      overflow: visible;
+      margin-block-end: calc(-1 * var(--_clip-gutter));
+    }
+    @container style(--_overflowing: 1) {
+      /* On the content, not the article: a mask on the article would also
+       * hide the toggle below it. */
+      & > article > [data-content] {
+        mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
+        mask-size: 100%
+          calc(var(--_body-limit) - var(--_show-more-height) - 2 * var(--_clip-gutter));
+        mask-repeat: no-repeat;
+      }
+      & > article > [data-show-more] {
+        display: block;
+        position: absolute;
+        inset-inline-start: var(--meowdown-embed-padding, 1rem);
+        bottom: var(--meowdown-embed-padding, 1rem);
+      }
+    }
+    /* Opened, "Show less" sticks to the bottom of the scrollport until the
+     * card's end scrolls into view. */
+    & > article > [data-show-more][open] {
+      display: block;
+      position: sticky;
+      bottom: 0.75rem;
+      z-index: 1;
+      width: fit-content;
+      margin: 0.5rem auto 0;
+    }
+    & > article > [data-show-more][open] > summary {
+      padding: 0.375rem 0.875rem;
+      border: 1px solid var(--_hairline);
+      border-radius: 999px;
+      background: var(--meowdown-embed-background, Canvas);
+      box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
+      font-size: 0.875em;
+      font-weight: 500;
+      line-height: normal;
+    }
+    & > article > [data-show-more][open] > summary:hover {
+      text-decoration: none;
+      background: color-mix(in srgb, var(--_link) 8%, var(--meowdown-embed-background, Canvas));
+    }
+  }
+
   /* Body */
   & [data-reply-to] {
     display: block;
@@ -353,11 +477,6 @@
     align-self: center;
   }
   & [data-quoted] [data-body] {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    overflow: hidden;
     margin-block-start: 0.25rem;
     font-size: 0.9375em;
   }

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.3.0",
   "license": "MIT",
   "repository": {
     "type": "git",