@meowdown/embed 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ocavue
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/x/index.d.ts

@@ -1,6 +1,29 @@
 import { n as Resolver, t as FetchProps } from "../fetch-Djnul03u.js";
 import { HostElement, State } from "@aria-ui/core";
-import { XPost } from "@post-embed/types";
+import { XPost, XPostMedia } from "@post-embed/types";
+//#region src/x/media-click.d.ts
+export declare const X_POST_MEDIA_CLICK = "meowdown-embed-media-click";
+interface XPostMediaClickDetail {
+  /**
+   * The activated item. Its URLs already passed the `mediaUrlProtocols` check,
+   * and video sources are sorted best first.
+   */
+  media: XPostMedia;
+  /**
+   * Every displayable item of the same post, in order, for paging.
+   */
+  items: XPostMedia[];
+  /**
+   * Position of `media` in `items`.
+   */
+  index: number;
+  /**
+   * The rendered thumbnail: the photo `<img>`, or the video poster.
+   */
+  element: HTMLElement;
+}
+type XPostMediaClickEvent = CustomEvent<XPostMediaClickDetail>;
+//#endregion
 //#region src/x/x-post.d.ts
 interface XPostProps extends FetchProps<XPost> {
   mediaUrlProtocols: readonly string[] | null;
@@ -17,6 +40,9 @@ declare global {
   interface HTMLElementTagNameMap {
     'meowdown-embed-x': XPostElement;
   }
+  interface HTMLElementEventMap {
+    'meowdown-embed-media-click': XPostMediaClickEvent;
+  }
 }
 //#endregion
-export type { Resolver, XPostElement, XPostProps };
+export type { Resolver, XPostElement, XPostMediaClickDetail, XPostMediaClickEvent, XPostProps };

package/dist/x/index.js

@@ -3,6 +3,22 @@ import { defineCustomElement, defineProps, registerCustomElement, useEffect } fr
 import { parseXPost, parseXPostId } from "@post-embed/schema";
 import el from "crelt";
 
+//#region src/x/media-click.ts
+const X_POST_MEDIA_CLICK = "meowdown-embed-media-click";
+/**
+* Returns false when a listener called `preventDefault()`: the host shows the
+* media itself, so the card must not run its own default.
+*/
+function dispatchMediaClick(target, detail) {
+	return target.dispatchEvent(new CustomEvent(X_POST_MEDIA_CLICK, {
+		detail,
+		bubbles: true,
+		cancelable: true,
+		composed: true
+	}));
+}
+
+//#endregion
 //#region src/x/render-author.ts
 function renderAuthor(author, protocols, date) {
 	if (!author.name && !author.handle) return;
@@ -22,103 +38,200 @@ function renderAuthor(author, protocols, date) {
 }
 
 //#endregion
-//#region src/x/render-media.ts
-function dimension(value) {
-	return Number.isFinite(value) && value > 0 ? Math.round(value) : void 0;
+//#region src/to-positive-number.ts
+/**
+* The value rounded to an integer, or nothing unless it is a finite number
+* above zero.
+*/
+function toPositiveNumber(value) {
+	if (typeof value === "number" && Number.isFinite(value) && value > 0) return Math.round(value);
+}
+
+//#endregion
+//#region src/x/sort-video-sources.ts
+/**
+* Orders the sources the way a `<video>` should try them: it plays the first
+* `<source>` it supports, so MP4 files come before HLS playlists (which only
+* Safari plays natively), and within a type the highest bitrate comes first.
+* A source without a bitrate counts as 0. Returns a new array.
+*/
+function sortVideoSources(sources) {
+	return [...sources].sort((a, b) => {
+		return Number(b.type === "video/mp4") - Number(a.type === "video/mp4") || (b.bitrate || 0) - (a.bitrate || 0);
+	});
 }
-function sizeAttrs(media) {
-	const width = dimension(media.width);
-	const height = dimension(media.height);
+
+//#endregion
+//#region src/x/render-media.ts
+function getSizeAttrs(media) {
 	return {
-		width,
-		height,
-		style: width && height ? `--_ratio: ${width} / ${height}` : void 0
+		width: toPositiveNumber(media.width),
+		height: toPositiveNumber(media.height)
 	};
 }
+function getRatioStyle(media) {
+	const { width, height } = getSizeAttrs(media);
+	return width && height ? `--_ratio: ${width} / ${height}` : void 0;
+}
 function getOrientation(media) {
-	const width = dimension(media.width);
-	const height = dimension(media.height);
+	const width = toPositiveNumber(media.width);
+	const height = toPositiveNumber(media.height);
 	if (!width || !height) return;
 	return height > width * 1.1 ? "portrait" : width > height * 1.1 ? "landscape" : "square";
 }
+function getSafeMediaUrl(value, protocols) {
+	const url = getSafeUrl(value, protocols);
+	if (!url) console.warn(`[meowdown] Ignored unsafe media URL: ${value}`);
+	return url;
+}
+/**
+* The item with only the URLs the card may load, or nothing when it has none
+* left to show.
+*/
+function getDisplayable(media, protocols) {
+	if (media.unavailable) return;
+	if (media.type === "photo") {
+		const url = getSafeMediaUrl(media.url, protocols);
+		return url ? {
+			...media,
+			url
+		} : void 0;
+	}
+	const sources = sortVideoSources(media.sources.flatMap((source) => {
+		const url = getSafeMediaUrl(source.url, protocols);
+		return url ? [{
+			...source,
+			url
+		}] : [];
+	}));
+	if (sources.length === 0) return;
+	const poster = media.poster && getSafeMediaUrl(media.poster, protocols);
+	return {
+		...media,
+		sources,
+		poster
+	};
+}
 function renderUnavailable(permalink) {
 	return el("div", { "data-media-unavailable": "" }, "Media unavailable. ", renderLink("View on X", permalink));
 }
-function renderItem(media, protocols, permalink) {
-	const error = el("div", {
+function renderError(permalink) {
+	return el("div", {
 		"data-media-error": "",
 		hidden: true
 	}, "Media could not be loaded. ", renderLink("View on X", permalink));
-	let content;
-	if (media.type === "photo") {
-		const url = getSafeUrl(media.url, protocols);
-		if (media.unavailable || !url) return renderUnavailable(permalink);
-		const image = el("img", {
-			src: url,
-			alt: media.alt || "Post image",
-			...sizeAttrs(media),
-			loading: "lazy",
-			decoding: "async",
-			referrerpolicy: "no-referrer"
-		});
-		const link = el("a", {
-			href: url,
-			target: "_blank",
-			rel: "noopener noreferrer"
-		}, image);
-		image.addEventListener("error", () => {
-			link.hidden = true;
-			error.hidden = false;
-		});
-		content = link;
-	} else {
-		const sources = media.sources.flatMap((source) => {
-			const url = getSafeUrl(source.url, protocols);
-			return url ? [{
-				...source,
-				url
-			}] : [];
-		}).sort((a, b) => {
-			return Number(b.type === "video/mp4") - Number(a.type === "video/mp4") || (b.bitrate || 0) - (a.bitrate || 0);
-		}).map((source) => el("source", {
+}
+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,
+		alt: media.alt || "Post image",
+		...getSizeAttrs(media),
+		loading: "lazy",
+		decoding: "async",
+		referrerpolicy: "no-referrer"
+	});
+	const link = el("a", {
+		href: media.url,
+		target: "_blank",
+		rel: "noopener noreferrer"
+	}, image);
+	image.addEventListener("error", () => {
+		link.hidden = true;
+		error.hidden = false;
+	});
+	link.addEventListener("click", (event) => {
+		if (isPlainClick(event) && !onClick(image)) event.preventDefault();
+	});
+	return link;
+}
+function renderPlayer(media, error, permalink) {
+	const gif = media.type === "gif";
+	const sources = media.sources.map((source) => {
+		return el("source", {
 			src: source.url,
 			type: source.type
-		}));
-		if (media.unavailable || sources.length === 0) return renderUnavailable(permalink);
-		const gif = media.type === "gif";
-		const video = el("video", {
-			controls: true,
-			playsInline: true,
-			preload: "none",
-			"aria-label": gif ? "Animated GIF" : "Post video",
-			poster: media.poster && getSafeUrl(media.poster, protocols),
-			...sizeAttrs(media),
-			loop: gif
-		}, sources, renderLink("Watch on X", permalink));
-		video.muted = gif;
-		const showError = () => {
-			video.hidden = true;
-			error.hidden = false;
-		};
-		video.addEventListener("error", showError);
-		let failedSources = 0;
-		for (const source of sources) source.addEventListener("error", () => {
-			failedSources++;
-			if (failedSources === sources.length) showError();
-		}, { once: true });
-		content = video;
-	}
-	return el("div", {
-		"data-media-item": "",
-		"data-orientation": getOrientation(media)
-	}, content, error);
+		});
+	});
+	const video = el("video", {
+		controls: true,
+		playsInline: true,
+		"aria-label": gif ? "Animated GIF" : "Post video",
+		poster: media.poster,
+		...getSizeAttrs(media),
+		loop: gif
+	}, sources, renderLink("Watch on X", permalink));
+	video.muted = gif;
+	const showError = () => {
+		video.hidden = true;
+		error.hidden = false;
+	};
+	video.addEventListener("error", showError);
+	let failedSources = 0;
+	for (const source of sources) source.addEventListener("error", () => {
+		failedSources++;
+		if (failedSources === sources.length) showError();
+	}, { once: true });
+	return video;
+}
+/**
+* A poster button. Its click plays the video in place, unless a
+* `meowdown-embed-media-click` listener takes over.
+*/
+function renderVideo(media, error, onClick, permalink) {
+	const gif = media.type === "gif";
+	const poster = media.poster ? el("img", {
+		src: media.poster,
+		alt: "",
+		...getSizeAttrs(media),
+		loading: "lazy",
+		decoding: "async",
+		referrerpolicy: "no-referrer"
+	}) : void 0;
+	const button = el("button", {
+		"data-poster": "",
+		type: "button",
+		"aria-label": gif ? "Play GIF" : "Play video"
+	}, poster, el("span", {
+		"data-play": "",
+		"aria-hidden": "true"
+	}));
+	button.addEventListener("click", () => {
+		if (!onClick(poster ?? button)) return;
+		const video = renderPlayer(media, error, permalink);
+		button.replaceWith(video);
+		video.focus();
+		video.play().catch(() => {});
+	});
+	return button;
 }
 function renderMedia(media, protocols, permalink) {
 	if (!media?.length) return;
+	const displayable = media.map((item) => getDisplayable(item, protocols));
+	const items = displayable.filter((item) => item != null);
 	return el("div", {
 		"data-media": "",
 		"data-count": String(media.length)
-	}, media.map((item) => renderItem(item, protocols, permalink)));
+	}, displayable.map((item) => {
+		if (!item) return renderUnavailable(permalink);
+		const error = renderError(permalink);
+		const onClick = (element) => {
+			return dispatchMediaClick(element, {
+				media: item,
+				items,
+				index: items.indexOf(item),
+				element
+			});
+		};
+		return el("div", {
+			"data-media-item": "",
+			"data-type": item.type,
+			"data-orientation": getOrientation(item),
+			style: getRatioStyle(item)
+		}, item.type === "photo" ? renderPhoto(item, error, onClick) : renderVideo(item, error, onClick, permalink), error);
+	}));
 }
 
 //#endregion
@@ -149,14 +262,14 @@ function renderDate(post) {
 
 //#endregion
 //#region src/x/render-post.ts
-function renderBody(post) {
+function renderBody(post, collapseBlankLines = false) {
 	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("\n").map((line, index) => {
+		return segment.type === "link" ? renderLink(segment.text, segment.url) : segment.text.split(collapseBlankLines ? /\n+/ : "\n").map((line, index) => {
 			return [index ? el("br", {}) : void 0, line];
 		});
 	})), post.truncated && permalink ? [" ", renderLink("Show more", permalink)] : void 0);
@@ -169,7 +282,7 @@ function renderQuoted(post, protocols) {
 	return el("article", {
 		"data-quoted": "",
 		"aria-label": "Quoted post"
-	}, renderAuthor(post.author, protocols, renderDate(post)), renderBody(post), renderMedia(post.media, protocols, getPermalink(post)), renderEdit(post));
+	}, renderAuthor(post.author, protocols, renderDate(post)), renderBody(post, true), renderMedia(post.media, protocols, getPermalink(post)), renderEdit(post));
 }
 function renderPost(post, protocols = null) {
 	const reply = post.replyTo;
@@ -230,4 +343,4 @@ function registerXPost(name = "meowdown-embed-x") {
 }
 
 //#endregion
-export { registerXPost, useXPost };
+export { X_POST_MEDIA_CLICK, registerXPost, useXPost };

package/dist/x/theme.css

@@ -57,6 +57,7 @@
   --_muted: var(--meowdown-embed-muted-color, color-mix(in srgb, currentColor 55%, transparent));
   --_link: var(--meowdown-embed-link-color, #1d9bf0);
   --_tint: color-mix(in srgb, currentColor 5%, transparent);
+  --_media-height: 7.5rem;
 
   display: block;
   /* As wide as the content, between 18rem and 28rem: a short text post stays
@@ -77,7 +78,7 @@
 [data-meowdown-embed='x'] [data-root]::before {
   content: '';
   display: block;
-  width: calc(18rem - 2 * var(--meowdown-embed-padding, 0.75rem));
+  width: calc(18rem - 2 * var(--meowdown-embed-padding, 1rem) - 2px);
   max-width: 100%;
   height: 0;
 }
@@ -86,9 +87,10 @@
   display: block;
   position: relative;
   color: var(--meowdown-embed-color, inherit);
-  background: var(--meowdown-embed-background, var(--_tint));
+  background: var(--meowdown-embed-background, transparent);
+  border: 1px solid var(--_hairline);
   border-radius: var(--meowdown-embed-radius, 0.75rem);
-  padding: var(--meowdown-embed-padding, 0.75rem);
+  padding: var(--meowdown-embed-padding, 1rem);
   font-size: 1em;
   font-weight: 400;
   font-style: normal;
@@ -130,14 +132,14 @@
   & [data-author] {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.625rem;
     min-width: 0;
   }
   & [data-avatar] {
     display: block;
     flex: none;
-    width: 2rem;
-    height: 2rem;
+    width: 2.5rem;
+    height: 2.5rem;
     object-fit: cover;
     border-radius: 50%;
     background: var(--_tint);
@@ -152,7 +154,7 @@
     display: block;
     min-width: 0;
     flex: 1;
-    line-height: 1.25;
+    line-height: 1.3;
   }
   & [data-author-name] {
     display: flex;
@@ -162,7 +164,7 @@
     font-weight: 600;
   }
   & [data-author-details] > bdi {
-    font-size: 0.875em;
+    font-size: 0.9375em;
     color: var(--_muted);
   }
   & [data-author-details] > bdi > a {
@@ -174,7 +176,7 @@
     align-self: flex-start;
     padding-inline-start: 0.25rem;
     font-size: 0.8125em;
-    line-height: 1.25rem;
+    line-height: 1.3rem;
     white-space: nowrap;
     color: var(--_muted);
   }
@@ -185,18 +187,18 @@
   /* Body */
   & [data-reply-to] {
     display: block;
-    margin-block-start: 0.375rem;
-    font-size: 0.8125em;
+    margin-block-start: 0.625rem;
+    font-size: 0.875em;
     color: var(--_muted);
   }
   & [data-body] {
     display: block;
-    margin-block: 0.625rem 0;
+    margin-block: 0.75rem 0;
     font-size: 1em;
     line-height: 1.5;
   }
   & [data-reply-to] + [data-body] {
-    margin-block-start: 0.25rem;
+    margin-block-start: 0.375rem;
   }
   & [data-text] {
     white-space: pre-wrap;
@@ -207,14 +209,13 @@
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 2px;
+    height: var(--_media-height);
+    max-width: calc(2 * var(--_media-height));
     margin-block-start: 0.75rem;
     border-radius: 0.5rem;
     overflow: hidden;
     background: var(--_hairline);
   }
-  & [data-media][data-count='1'] {
-    grid-template-columns: minmax(0, 1fr);
-  }
   & [data-media-item] {
     display: block;
     position: relative;
@@ -234,34 +235,79 @@
     display: block;
     height: 100%;
   }
-  /* A single photo or video fills the width at its own ratio, up to 20rem
-   * tall; taller media is cropped and the photo links to the original. */
+  & [data-media-item] > [data-poster] {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: var(--_tint);
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+  & [data-play] {
+    position: absolute;
+    inset: 50% auto auto 50%;
+    width: 2.25rem;
+    height: 2.25rem;
+    translate: -50% -50%;
+    border-radius: 50%;
+    background: rgb(0 0 0 / 60%);
+  }
+  & [data-play]::after {
+    content: '';
+    position: absolute;
+    inset: 50% auto auto 54%;
+    translate: -50% -50%;
+    border-block: 0.375rem solid transparent;
+    border-inline-start: 0.6rem solid #fff;
+  }
   & [data-media-item] img,
   & [data-media-item] video {
     display: block;
     width: 100%;
-    height: auto;
-    aspect-ratio: var(--_ratio, auto);
-    max-height: 20rem;
+    height: 100%;
     object-fit: cover;
     background: var(--_tint);
   }
   & [data-media-item][data-orientation='portrait'] :is(img, video) {
     object-position: center 30%;
   }
-  & [data-media]:not([data-count='1']) [data-media-item] :is(img, video) {
-    height: 100%;
-    aspect-ratio: 3 / 2;
-  }
   & [data-media][data-count='3'] [data-media-item]:first-child {
     grid-row: span 2;
   }
-  & [data-media][data-count='3'] [data-media-item]:first-child :is(img, video) {
+  /* A single photo or video is a thumbnail of fixed height and its own ratio,
+   * never cropped; media wider than the card shrinks to fit. A video playing
+   * in place grows, and turns a grid into a stack so its player has room. */
+  & [data-media]:is([data-count='1'], :has(video)) {
+    display: block;
+    height: auto;
+    max-width: none;
+    border-radius: 0;
+    overflow: visible;
+    background: none;
+  }
+  & [data-media]:is([data-count='1'], :has(video)) > [data-media-item] {
+    width: calc(var(--_media-height) * (var(--_ratio, 16 / 9)));
+    max-width: 100%;
+    aspect-ratio: var(--_ratio, 16 / 9);
+    border-radius: 0.5rem;
+  }
+  & [data-media]:has(video) > [data-media-item] + [data-media-item] {
+    margin-block-start: 0.375rem;
+  }
+  & [data-media-item]:has(> video) {
+    --_media-height: 20rem;
+  }
+  & [data-media-item]:has(> [data-media-error]:not([hidden])) {
+    width: auto;
     aspect-ratio: auto;
   }
   & [data-media-unavailable],
   & [data-media-error] {
     display: block;
+    border-radius: 0.5rem;
     padding: 0.75rem 1rem;
     color: var(--_muted);
     background: var(--_tint);
@@ -269,11 +315,13 @@
 
   /* Quoted post */
   & [data-quoted] {
+    --_media-height: 5rem;
+
     display: block;
     margin-block-start: 0.75rem;
     padding: 0.75rem;
+    border: 1px solid var(--_hairline);
     border-radius: 0.5rem;
-    background: var(--_tint);
   }
   & [data-quoted] [data-avatar] {
     width: 1.375rem;
@@ -317,12 +365,15 @@
     margin-block-start: 0.5rem;
     border-radius: 0.375rem;
   }
-  & [data-quoted] [data-media-item] :is(img, video) {
-    max-height: 10rem;
+  & [data-quoted] [data-play] {
+    scale: 0.75;
   }
   /* Quoted photos shrink to one thumbnail beside the text, with a count
    * badge; a quoted video or GIF stays below the text so its player works. */
-  & [data-quoted]:has(> [data-media]):not(:has(> [data-media] video)) {
+  &
+    [data-quoted]:has(> [data-media]):not(
+      :has(> [data-media] [data-poster], > [data-media] video)
+    ) {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     grid-template-areas:
@@ -355,11 +406,6 @@
     & > [data-media] > [data-media-item]:nth-child(n + 2) {
       display: none;
     }
-    & > [data-media] > [data-media-item] img {
-      height: 100%;
-      max-height: none;
-      aspect-ratio: auto;
-    }
     & > [data-media]:not([data-count='1'])::after {
       content: attr(data-count);
       position: absolute;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/embed",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -12,27 +12,24 @@
     "**/*.css"
   ],
   "exports": {
-    "./x": "./src/x/index.ts",
-    "./x/theme.css": "./src/x/theme.css",
-    "./youtube": "./src/youtube/index.ts",
-    "./youtube/theme.css": "./src/youtube/theme.css"
+    "./x": "./dist/x/index.js",
+    "./x/theme.css": "./dist/x/theme.css",
+    "./youtube": "./dist/youtube/index.js",
+    "./youtube/theme.css": "./dist/youtube/theme.css"
   },
   "files": [
     "./dist/**/*.js",
     "./dist/**/*.d.ts",
     "./dist/**/*.css"
   ],
-  "scripts": {
-    "build": "tsdown"
-  },
   "dependencies": {
     "@aria-ui/core": "^0.2.1",
-    "@post-embed/schema": "^0.5.0",
-    "@post-embed/types": "^0.4.0",
+    "@post-embed/schema": "^0.5.2",
+    "@post-embed/types": "^0.5.0",
     "crelt": "^1.0.7"
   },
   "devDependencies": {
-    "@meowdown/vitest": "workspace:*",
+    "@meowdown/vitest": "0.0.0",
     "@ocavue/tsconfig": "^0.7.1",
     "@ocavue/utils": "^1.8.0",
     "@vitest/browser-playwright": "^5.0.1",
@@ -40,12 +37,9 @@
     "vitest": "^5.0.1"
   },
   "publishConfig": {
-    "exports": {
-      "./x": "./dist/x/index.js",
-      "./x/theme.css": "./dist/x/theme.css",
-      "./youtube": "./dist/youtube/index.js",
-      "./youtube/theme.css": "./dist/youtube/theme.css"
-    },
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown"
   }
-}
+}