feat: support video tweets

src/tweetEmbed.ts

@@ -1,35 +1,57 @@
 // Create a screenshot of a tweet from its embed, using Playwright
-import { homedir } from "node:os";
+import { spawn } from "node:child_process";
+import { once } from "node:events";
+import { cpus, homedir } from "node:os";
 import { join, resolve } from "node:path";
 import { exit, stderr, stdin, stdout } from "node:process";
-import { createInterface } from "node:readline/promises";
-import {
-	chromium,
-	devices,
-	type Browser,
-	type Locator,
-	type Page,
-} from "playwright";
+import { chromium, devices, type Browser, type Page } from "playwright";
+import { ask } from "./utils/ask.ts";
+import { removeElement } from "./utils/removeElement.ts";
+import { parseHumanReadableSize } from "./utils/sizes.ts";
+import { watchElement } from "./utils/watchElement.ts";
 
-const removeElement = (element: Locator, timeout?: number) =>
-	element.evaluate(el => el.remove(), null, { timeout });
+type VideoInfo = {
+	duration_millis: number;
+	variants: {
+		bitrate?: number;
+		content_type: string;
+		url: string;
+	}[];
+};
+type Media = {
+	type: string;
+	video_info?: VideoInfo;
+	original_info: {
+		height: number;
+		width: number;
+	};
+};
+type Tweet = {
+	id_str: string;
+	created_at: string;
+	quoted_tweet?: Tweet;
+	parent?: Tweet;
+	mediaDetails?: Media[];
+};
+
+// Ask for a device scale factor between 1 and 8
+const deviceScaleFactor = Math.max(
+	Math.min(Number(await ask("Image resolution (1-8, default 4): ")) || 4, 8),
+	1
+);
 // Launch the browser in background
-let browser: Awaitable<Browser> = chromium.launch({ channel: "chrome" });
+let browser: Awaitable<Browser> = chromium.launch({ channel: "chromium" });
 // Create the browser page
 let page: Awaitable<Page> = browser.then(b =>
 	b.newPage({
 		baseURL: "https://platform.twitter.com/embed/",
 		...devices["Desktop Chrome HiDPI"],
 		// Use a high resolution for the screenshot
-		deviceScaleFactor: 8,
-		viewport: { width: 7680, height: 4320 },
-		screen: { width: 7680, height: 4320 },
+		deviceScaleFactor,
 	})
 );
-// Initialize the readline interface
-const rl = createInterface(stdin, stdout);
 // Prompt the user for the tweet ID or URL
-const tweetId = (await rl.question("Tweet ID or URL: ")).match(
+const tweetId = (await ask("Tweet ID or URL: ")).match(
 	/(?<=^|\/status\/)\d+/
 )?.[0];
 
@@ -42,60 +64,165 @@ if (!tweetId) {
 const search = new URLSearchParams({
 	dnt: "true",
 	id: tweetId,
-	lang: (await rl.question("Language (en): "))!,
-	theme: (await rl.question("Theme (dark): ")) || "dark",
-	hideThread: (await rl.question("Hide thread (false): "))!,
+	lang: (await ask("Language (en): ")) || "en",
+	theme: (await ask("Theme (dark): ")) || "dark",
+	hideThread: (await ask("Hide thread (false): ")) || "false",
 });
-// Open the page with the tweet embed
-browser = await browser;
-page = await page;
+// Wait for the browser and page to be created
+[browser, page] = await Promise.all([browser, page]);
 page.setDefaultTimeout(10_000);
-// Eventually remove the "Watch on X" buttons
-(async () => {
-	const element = page
-		.getByRole("link", { name: "Watch on X", exact: true })
-		.first();
-
-	while (true) await removeElement(element, 0);
-})().catch(() => {});
 // Open the page with the tweet embed
 let res: Promise<any> = page.goto(`Tweet.html?${search}`);
+// Eventually remove the "Watch on X" buttons
+watchElement(page.getByRole("link", { name: "Watch on X", exact: true }));
+// Get tweet details
+let tweetResult: Awaitable<Tweet> = page
+	.waitForRequest(/https:\/\/cdn\.syndication\.twimg\.com\/tweet-result/)
+	.then(req => req.response())
+	.then(res => res?.json());
+let video: Awaitable<VideoInfo | undefined> = tweetResult.then(
+	tweet =>
+		tweet.mediaDetails?.find(
+			(m): m is Media & { video_info: NonNullable<VideoInfo> } =>
+				m.type === "video" && m.video_info != null
+		)?.video_info
+);
+// Ask the user if the video should be included
+const includeVideo = (await ask("Include video (Y/n): ")).toLowerCase() !== "n";
 // Ask the user if the useless elements should be removed
-if ((await rl.question("Remove useless elements (Y/n): ")) !== "n")
+if ((await ask("Remove useless elements (Y/n): ")).toLowerCase() !== "n")
 	res = Promise.all([
 		res,
 		removeElement(page.getByText(/^[0-9.]*[A-Z]?ReplyCopy link to post$/)),
 		removeElement(
 			page
 				.locator("div", {
-					hasText: /^Read (\d+ repl(ies|y)|more on (X|Twitter))$/,
+					hasText: /^Read ([0-9.]*[A-Z]? repl(ies|y)|more on (X|Twitter))$/,
 				})
 				.nth(-2)
 		),
 	]);
+// Determine the file extension based on the video presence
+let ext = "png";
+let videoUrl: string | undefined;
+if (includeVideo) {
+	stdout.write(`\x1b[33mLoading tweet info...\x1b[0m\n`);
+	video = await video;
+	if (video) {
+		const [variant] = video.variants.sort(
+			(a, b) => (b.bitrate || 0) - (a.bitrate || 0)
+		);
+		if (variant) {
+			ext = "mp4";
+			videoUrl = variant.url;
+			stdout.write(
+				`\x1b[33mFound video long ${Math.round(
+					video.duration_millis / 1000
+				)}s: ${videoUrl}\x1b[0m\n`
+			);
+		}
+	}
+}
 // Prompt the user for the path
 // Save to the downloads folder by default
-const defaultPath = join(homedir(), "Downloads", `${tweetId}.png`);
-const path =
-	(await rl.question(`Output file name or path (${defaultPath}): `)) ||
-	defaultPath;
+const defaultPath = join(homedir(), "Downloads", `${tweetId}.${ext}`);
+let path =
+	(await ask(`Output file name or path (${defaultPath}): `)) || defaultPath;
 // Wait for the page to finish loading
 stdout.write(`\x1b[33mLoading ${page.url()}...\x1b[0m\n`);
+stdin.resume();
 await res;
-// Save the screenshot
-stdout.write("\x1b[33mSaving screenshot...\x1b[0m\n");
-await page
-	.getByRole("article")
-	.first()
-	// Force png format to increase quality and add transparency
-	.screenshot({
+if (videoUrl) {
+	// Take the screenshot
+	const screenshot = page.getByRole("article").first().screenshot({
 		omitBackground: true,
-		path: path.replace(/(\.[^.]*)?$/, ".png"),
-		style: "a[aria-label='X Ads info and privacy'] { visibility: hidden; }",
+		style:
+			"a[aria-label='X Ads info and privacy'] { visibility: hidden; } [data-testid='videoComponent'] { visibility: hidden; }",
+	});
+	// Get the bounding box of the video element
+	let boundingBox: Awaitable<{
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	} | null> = page.getByTestId("videoComponent").first().boundingBox();
+	// Ask the user if the video size should be limited to a specific size
+	const size =
+		parseHumanReadableSize(
+			(await ask("Optional max video size (ex. 10MB, 1GB, 800KB): ")) || "0"
+		) * 8000 || 0;
+	stdin.resume();
+	boundingBox = await boundingBox;
+	if (!boundingBox) {
+		stderr.write("\x1b[31mFailed to get video element!\x1b[0m\n");
+		exit(1);
+	}
+	// Run ffmpeg to overlay the video on the screenshot
+	const width = Math.round((boundingBox.width + 0.8) * deviceScaleFactor);
+	const height = Math.round((boundingBox.height + 0.8) * deviceScaleFactor);
+	const x = Math.round((boundingBox.x - 0.4) * deviceScaleFactor);
+	const y = Math.round((boundingBox.y - 0.4) * deviceScaleFactor);
+	const br = Math.floor(size / (video as VideoInfo).duration_millis);
+	const args: string[] = [
+		"-v",
+		"error",
+		"-stats",
+		"-threads",
+		cpus().length.toString(),
+		"-i",
+		"pipe:",
+		"-i",
+		videoUrl,
+		"-filter_complex",
+		`[1:v]scale=${width}:${height}:force_original_aspect_ratio=decrease[a]; [0:v][a]overlay=(${width}-overlay_w)/2+${x}:(${height}-overlay_h)/2+${y}`,
+		...(br
+			? [
+					"-maxrate",
+					br.toString(),
+					"-bufsize",
+					Math.min(1e6, Math.floor(br / 2)).toString(),
+			  ]
+			: ["-fps_mode", "passthrough", "-crf", "18"]),
+		"-preset",
+		"ultrafast",
+		"-c:a",
+		"copy",
+		"-y",
+		path,
+	];
+	const child = spawn("ffmpeg", args, {
+		stdio: ["overlapped", "ignore", "inherit"],
 	});
-// Log the success message
-stdout.write(`\x1b[32mScreenshot saved to ${resolve(path)}\x1b[0m\n`);
-// Exit gracefully
-rl.close();
-await page.close();
-await browser.close();
+	stdout.write(
+		`\x1b[33mSaving video...\x1b[0m\nffmpeg ${args.join(" ")}\n\x1b[?25l`
+	);
+	child.stdin.write(await screenshot);
+	child.stdin.end();
+	await Promise.all([
+		once(child, "close"),
+		page.close().then(browser.close.bind(browser, undefined)),
+	]);
+	stdout.write("\x1b[?25h");
+	if (child.exitCode === 0)
+		stdout.write(`\x1b[32mVideo saved to ${resolve(path)}\x1b[0m\n`);
+	else process.exitCode = child.exitCode ?? 1;
+} else {
+	// Save the screenshot
+	stdout.write("\x1b[33mSaving screenshot...\x1b[0m\n");
+	path = path.replace(/(\.[^.]*)?$/, ".png");
+	await page
+		.getByRole("article")
+		.first()
+		// Force png format to increase quality and add transparency
+		.screenshot({
+			omitBackground: true,
+			path,
+			style: `a[aria-label='X Ads info and privacy'] { visibility: hidden; }`,
+		});
+	// Log the success message
+	stdout.write(`\x1b[32mScreenshot saved to ${resolve(path)}\x1b[0m\n`);
+	// Exit gracefully
+	await page.close();
+	await browser.close();
+}
+exit();

src/utils/ask.ts

@@ -1,10 +1,12 @@
 import { once } from "node:events";
 import { stdin, stdout } from "node:process";
 
-export const ask = async (question: string) => {
+export const ask = async (question: string): Promise<string> => {
+	stdin.resume();
 	stdin.setRawMode(false);
 	stdout.write(question);
 	const [answer] = await once(stdin, "data");
 	stdin.setRawMode(true);
+	stdin.pause();
 	return answer.toString().trim();
 };

src/utils/removeElement.ts

@@ -0,0 +1,9 @@
+import type { Locator } from "playwright";
+
+/**
+ * Removes an element from the DOM.
+ * @param element - The element to remove
+ * @param timeout - Optional timeout in milliseconds
+ */
+export const removeElement = (element: Locator, timeout?: number) =>
+	element.evaluate(el => el.remove(), null, { timeout });

src/utils/sizes.ts

@@ -0,0 +1,47 @@
+const baseSizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+const searchSizes = ["BYTES", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+const bytesRegex = /^(\d*(?:\.\d+)?)\s*([a-zA-Z]+)?$/u;
+
+/**
+ * Formats a number of bytes into a human-readable string.
+ * @param bytes The number of bytes to format
+ * @param param1 Additional options for formatting
+ * @returns A string representing the formatted size
+ */
+export const formatBytes = (
+	bytes: number,
+	{
+		fractionDigits = 1,
+		sizes = baseSizes,
+		k = 1_000,
+	}: Partial<{ fractionDigits: number; sizes: string[]; k: number }> = {}
+): string => {
+	if (!bytes) return "0 Bytes";
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	return `${(bytes / k ** i).toFixed(fractionDigits)}${sizes[i]}`;
+};
+
+/**
+ * Parses a human-readable size string into bytes.
+ * @param sizeStr The size string to parse
+ * @param param1 Additional options for parsing
+ * @returns The size in bytes
+ */
+export const parseHumanReadableSize = (
+	sizeStr: string,
+	{
+		sizes = searchSizes,
+		k = 1_000,
+	}: Partial<{ sizes: string[]; k: number }> = {}
+): number => {
+	const match = bytesRegex.exec(sizeStr);
+
+	if (!match) throw new Error("Invalid size format");
+	const [, value, unit] = match;
+	const numericValue = parseFloat(value!);
+	const index = sizes.indexOf(unit?.toUpperCase() || "BYTES");
+
+	if (index === -1) throw new Error(`Unknown unit: ${unit}`);
+	return numericValue * k ** index;
+};

src/utils/watchElement.ts

@@ -0,0 +1,11 @@
+import type { Locator } from "playwright";
+import { removeElement } from "./removeElement.ts";
+
+/**
+ * Watch an element and remove it if it appears.
+ * @param element Locator to watch
+ */
+export const watchElement = async (element: Locator) => {
+	element = element.first();
+	while (true) await removeElement(element, 0).catch(() => {});
+};