nullable width

src/general.ts

@@ -64,13 +64,21 @@ async function getOEmbedPlayer($: cheerio.CheerioAPI, pageUrl: string): Promise<
 		return null;
 	}
 
-	if (
+	// Height is the most important, width is okay to be null. The implementer
-		typeof body.width !== 'number' ||
+	// should choose fixed height instead of fixed aspect ratio if width is null.
-		body.width <= 0 ||
+	//
-		typeof body.height !== 'number' ||
+	// For example, Spotify's embed page does not strictly follow aspect ratio
-		body.height <= 0
+	// and thus keeping the height is better than keeping the aspect ratio.
-	) {
+	//
-		// No proper size info
+	// Spotify gives `width: 100%, height: 152px` for iframe while `width: 456,
+	// height: 152` for oEmbed data, and we treat any percentages as null here.
+	let width: number | null = Number(iframe.attr('width') ?? body.width);
+	if (Number.isNaN(width)) {
+		width = null;
+	}
+	const height = Math.min(Number(iframe.attr('height') ?? body.height), 1024);
+	if (Number.isNaN(height)) {
+		// No proper height info
 		return null;
 	}
 
@@ -91,8 +99,8 @@ async function getOEmbedPlayer($: cheerio.CheerioAPI, pageUrl: string): Promise<
 
 	return {
 		url,
-		width: body.width,
+		width,
-		height: body.height,
+		height,
 		allow: allowedFeatures
 	}
 }

test/index.ts

@@ -332,4 +332,11 @@ describe("oEmbed", () => {
 		expect(summary.player.url).toBe('https://example.com/');
 		expect(summary.player.allow).toStrictEqual([]);
 	});
+
+	test('width: 100%', async () => {
+		await setUpFastify('oembed-percentage-width.json');
+		const summary = await summaly(host);
+		expect(summary.player.width).toBe(null);
+		expect(summary.player.height).toBe(300);
+	});
 });

test/oembed/invalid/oembed-invalid-width.json

@@ -1,7 +0,0 @@
-{
-  "version": "1.0",
-  "type": "rich",
-  "html": "<iframe src='https://example.com/'></iframe>",
-  "width": "blobcat",
-  "height": 300
-}

test/oembed/oembed-percentage-width.json

@@ -2,5 +2,6 @@
   "version": "1.0",
   "type": "rich",
   "html": "<iframe src='https://example.com/'></iframe>",
+  "width": "100%",
   "height": 300
 }