feat: support video tweets

src/tweetEmbed.ts

@@ -1,101 +1,229 @@
 // Create a screenshot of a tweet from its embed, using Playwright
+import { ok } from "node:assert";
+import { spawn } from "node:child_process";
+import { once } from "node:events";
 import { 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 { exit, stdin, stdout } from "node:process";
+import { chromium, devices } 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";
+
+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[];
+};
 
-const removeElement = (element: Locator, timeout?: number) =>
-	element.evaluate(el => el.remove(), null, { timeout });
-// Launch the browser in background
-let browser: Awaitable<Browser> = chromium.launch({ channel: "chrome" });
-// 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 },
-	})
-);
-// 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];
+/**
+ * Get the output path from the user.
+ * @param ext - The file extension to use
+ * @returns The output path
+ */
+const getOutputPath = async (ext: string) => {
+	const defaultPath = join(homedir(), "Downloads", `${tweetId}.${ext}`);
 
-// Check if the tweet ID is valid
-if (!tweetId) {
-	stderr.write("\x1b[31mInvalid tweet ID or URL\x1b[0m\n");
-	exit(1);
-}
+	return resolve(
+		(await ask(`Output file name or path (${defaultPath}): `)) || defaultPath
+	);
+};
+ok(tweetId, "\x1b[31mInvalid tweet ID or URL\x1b[0m");
+// Ask for a device scale factor between 1 and 8
+let deviceScaleFactor = Number(
+	(await ask("Image resolution (1-8, default 2): ")) || "2"
+);
+ok(deviceScaleFactor, "\x1b[31mInvalid device scale factor\x1b[0m");
+deviceScaleFactor = Math.max(1, Math.min(deviceScaleFactor, 8));
 // Create query parameters for the URL
 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;
-page.setDefaultTimeout(10_000);
-// Eventually remove the "Watch on X" buttons
-(async () => {
-	const element = page
-		.getByRole("link", { name: "Watch on X", exact: true })
-		.first();
+// 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
+const removeElements =
+	(await ask("Remove useless elements (Y/n): ")).toLowerCase() !== "n";
+const baseURL = "https://platform.twitter.com/embed/";
+const url = `Tweet.html?${search}`;
 
-	while (true) await removeElement(element, 0);
-})().catch(() => {});
+// Launch the browser
+stdout.write("\x1b[33mStarting...\x1b[0m\n");
+const browser = await chromium.launch({
+	channel: includeVideo ? "chromium" : "chrome",
+});
+// Create the browser page
+const page = await browser.newPage({
+	...devices["Desktop Chrome HiDPI"],
+	baseURL,
+	deviceScaleFactor,
+});
+page.setDefaultTimeout(10_000);
 // Open the page with the tweet embed
-let res: Promise<any> = page.goto(`Tweet.html?${search}`);
-// Ask the user if the useless elements should be removed
-if ((await rl.question("Remove useless elements (Y/n): ")) !== "n")
+let res: Promise<any> = page.goto(url);
+// Get tweet details
+let tweetResult: Awaitable<Tweet> = page
+	.waitForRequest(/^https:\/\/cdn\.syndication\.twimg\.com\/tweet-result/)
+	.then(req => req.response())
+	.then(res => res?.json());
+// Eventually remove the "Watch on X" buttons
+if (removeElements) {
+	watchElement(
+		page.getByRole("link", { name: "Watch on X", exact: true }),
+		removeElement
+	);
 	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)
 		),
 	]);
-// 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;
+}
 // Wait for the page to finish loading
-stdout.write(`\x1b[33mLoading ${page.url()}...\x1b[0m\n`);
+stdout.write(`\x1b[33mLoading ${new URL(url, baseURL).href}...\x1b[0m\n`);
 await res;
+if (includeVideo) {
+	tweetResult = await tweetResult;
+	const video = tweetResult.mediaDetails?.find(
+		(m): m is Media & { video_info: NonNullable<VideoInfo> } =>
+			m.type === "video" && m.video_info != null
+	)?.video_info;
+	if (video && video.variants.length) {
+		stdout.write(
+			`\x1b[33mFound video long ${Math.round(
+				video.duration_millis / 1000
+			)}s\x1b[0m\n`
+		);
+		const path = await getOutputPath("mp4");
+		// 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;
+		const br =
+			((video as VideoInfo).duration_millis &&
+				Math.floor(size / (video as VideoInfo).duration_millis)) ||
+			null;
+		video.variants.sort((a, b) => (b.bitrate || 0) - (a.bitrate || 0));
+		const videoURL = (
+			(br &&
+				(video.variants.find(({ bitrate }) => bitrate && bitrate <= br) ??
+					video.variants.findLast(({ bitrate }) => bitrate))) ||
+			video.variants[0]!
+		).url;
+		// Take the screenshot
+		const screenshot = page.getByRole("article").first().screenshot({
+			omitBackground: true,
+			style:
+				"a[aria-label='X Ads info and privacy'] { visibility: hidden; } [data-testid='videoComponent'] { visibility: hidden; }",
+		});
+		// Get the bounding box of the video element
+		const boundingBox = await page
+			.getByTestId("videoComponent")
+			.first()
+			.boundingBox();
+		ok(boundingBox, "\x1b[31mFailed to get video element!\x1b[0m");
+		// 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 args: string[] = [
+			"-v",
+			"error",
+			"-stats",
+			"-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}`,
+			"-c:v",
+			(await ask("Video codec (libx264): ")) || "libx264",
+			...(br
+				? [
+						"-maxrate",
+						br.toString(),
+						"-bufsize",
+						Math.min(1e6, Math.floor(br / 2)).toString(),
+				  ]
+				: [
+						"-fps_mode",
+						"passthrough",
+						"-crf",
+						(await ask("CRF (18): ")) || "18",
+				  ]),
+			"-preset",
+			(await ask("ffmpeg preset (ultrafast): ")) || "ultrafast",
+			"-c:a",
+			"copy",
+			"-y",
+			path,
+		];
+		stdin.resume();
+		const child = spawn("ffmpeg", args, {
+			stdio: ["overlapped", "ignore", "inherit"],
+		});
+		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 ${path}\x1b[0m\n`);
+		else process.exitCode = child.exitCode ?? 1;
+		exit();
+	}
+}
+const path = (await getOutputPath("png")).replace(/(\.[^.]*)?$/, ".png");
+stdin.resume();
 // 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({
-		omitBackground: true,
-		path: path.replace(/(\.[^.]*)?$/, ".png"),
-		style: "a[aria-label='X Ads info and privacy'] { visibility: hidden; }",
-	});
+await page.getByRole("article").first().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`);
+stdout.write(`\x1b[32mScreenshot saved to ${path}\x1b[0m\n`);
 // Exit gracefully
-rl.close();
 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,50 @@
+import { ok } from "node:assert";
+
+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);
+
+	ok(match, "Invalid size format");
+	const [, value, unit] = match;
+	ok(value);
+	const numericValue = parseFloat(value);
+	const index = sizes.indexOf(unit?.toUpperCase() || "BYTES");
+
+	ok(index !== -1, `Invalid size unit: ${unit}`);
+	return numericValue * k ** index;
+};

src/utils/watchElement.ts

@@ -0,0 +1,25 @@
+import type { Locator } from "playwright";
+
+/**
+ * Watch an element.
+ * @param element Locator to watch
+ * @param fn Function to call when the element is found
+ * @param state State to wait for (default: "visible")
+ */
+export const watchElement = (
+	element: Locator,
+	fn: (element: Locator) => Awaitable<void>,
+	state?: "attached" | "detached" | "visible" | "hidden"
+) => {
+	const loop = async () => {
+		try {
+			while (true) {
+				await element.waitFor({ timeout: 0, state });
+				await fn(element);
+			}
+		} catch (_) {}
+	};
+
+	element = element.first();
+	loop();
+};