Improve video embed formatting

d2m/converters/message-to-event.embeds.test.js

@@ -187,3 +187,98 @@ test("message2event embeds: author url without name", async t => {
 		"m.mentions": {}
 	}])
 })
+
+test("message2event embeds: vx image", async t => {
+	const events = await messageToEvent(data.message_with_embeds.vx_image, data.guild.general)
+	t.deepEqual(events, [{
+		$type: "m.room.message",
+		msgtype: "m.text",
+		body: "https://vxtwitter.com/TomorrowCorp/status/1760330671074287875 we got a release date!!!",
+		format: "org.matrix.custom.html",
+		formatted_body: '<a href="https://vxtwitter.com/TomorrowCorp/status/1760330671074287875">https://vxtwitter.com/TomorrowCorp/status/1760330671074287875</a> we got a release date!!!',
+		"m.mentions": {}
+	}, {
+		$type: "m.room.message",
+		msgtype: "m.notice",
+		body: "| via vxTwitter / fixvx https://github.com/dylanpdx/BetterTwitFix"
+			+ "\n| "
+			+ "\n| ## Twitter https://twitter.com/tomorrowcorp/status/1760330671074287875"
+			+ "\n| "
+			+ "\n| ## Tomorrow Corporation (@TomorrowCorp) https://vxtwitter.com/TomorrowCorp/status/1760330671074287875"
+			+ "\n| "
+			+ "\n| Mark your calendar with a wet black stain! World of Goo 2 releases on May 23, 2024 on Nintendo Switch, Epic Games Store (Win/Mac), and http://WorldOfGoo2.com (Win/Mac/Linux)."
+			+ "\n| "
+			+ "\n| https://tomorrowcorporation.com/posts/world-of-goo-2-now-with-100-more-release-dates-and-platforms"
+			+ "\n| "
+			+ "\n| 💖 123 🔁 36"
+			+ "\n| "
+			+ "\n| 📸 https://pbs.twimg.com/media/GG3zUMGbIAAxs3h.jpg",
+		format: "org.matrix.custom.html",
+		formatted_body: `<blockquote><p><sub><a href="https://github.com/dylanpdx/BetterTwitFix">vxTwitter / fixvx</a></sub>`
+			+ `</p><p><strong><a href="https://twitter.com/tomorrowcorp/status/1760330671074287875">Twitter</a></strong>`
+			+ `</p><p><strong><a href="https://vxtwitter.com/TomorrowCorp/status/1760330671074287875">Tomorrow Corporation (@TomorrowCorp)</a></strong>`
+			+ `</p><p>Mark your calendar with a wet black stain! World of Goo 2 releases on May 23, 2024 on Nintendo Switch, Epic Games Store (Win/Mac), and <a href="http://WorldOfGoo2.com">http://WorldOfGoo2.com</a> (Win/Mac/Linux).`
+			+ `<br><br><a href="https://tomorrowcorporation.com/posts/world-of-goo-2-now-with-100-more-release-dates-and-platforms">https://tomorrowcorporation.com/posts/world-of-goo-2-now-with-100-more-release-dates-and-platforms</a>`
+			+ `<br><br>💖 123 🔁 36`
+			+ `</p><p>📸 https://pbs.twimg.com/media/GG3zUMGbIAAxs3h.jpg</p></blockquote>`,
+		"m.mentions": {}
+	}])
+})
+
+test("message2event embeds: vx video", async t => {
+	const events = await messageToEvent(data.message_with_embeds.vx_video, data.guild.general)
+	t.deepEqual(events, [{
+		$type: "m.room.message",
+		msgtype: "m.text",
+		body: "https://vxtwitter.com/McDonalds/status/1759971752254341417",
+		format: "org.matrix.custom.html",
+		formatted_body: '<a href="https://vxtwitter.com/McDonalds/status/1759971752254341417">https://vxtwitter.com/McDonalds/status/1759971752254341417</a>',
+		"m.mentions": {}
+	}, {
+		$type: "m.room.message",
+		msgtype: "m.notice",
+		body: "| via vxTwitter / fixvx https://github.com/dylanpdx/BetterTwitFix"
+			+ "\n| \n| ## McDonald’s🤝@studiopierrot"
+			+ "\n| \n| 💖 89 🔁 21 https://twitter.com/McDonalds/status/1759971752254341417"
+			+ "\n| \n| ## McDonald's (@McDonalds) https://vxtwitter.com/McDonalds/status/1759971752254341417"
+			+ "\n| \n| 🎞️ https://video.twimg.com/ext_tw_video/1759967449548541952/pu/vid/avc1/1280x720/XN1LFIJqAFBdtaoh.mp4?tag=12",
+		format: "org.matrix.custom.html",
+		formatted_body: `<blockquote><p><sub><a href="https://github.com/dylanpdx/BetterTwitFix">vxTwitter / fixvx</a></sub>`
+			+ `</p><p><strong><a href="https://twitter.com/McDonalds/status/1759971752254341417">McDonald’s🤝@studiopierrot\n\n💖 89 🔁 21</a></strong>`
+			+ `</p><p><strong><a href="https://vxtwitter.com/McDonalds/status/1759971752254341417">McDonald's (@McDonalds)</a></strong>`
+			+ `</p><p>🎞️ https://video.twimg.com/ext_tw_video/1759967449548541952/pu/vid/avc1/1280x720/XN1LFIJqAFBdtaoh.mp4?tag=12</p></blockquote>`,
+		"m.mentions": {}
+	}])
+})
+
+test("message2event embeds: youtube video", async t => {
+	const events = await messageToEvent(data.message_with_embeds.youtube_video, data.guild.general)
+	t.deepEqual(events, [{
+		$type: "m.room.message",
+		msgtype: "m.text",
+		body: "https://youtu.be/kDMHHw8JqLE?si=NaqNjVTtXugHeG_E\n\n\nJutomi I'm gonna make these sounds in your walls tonight",
+		format: "org.matrix.custom.html",
+		formatted_body: `<a href="https://youtu.be/kDMHHw8JqLE?si=NaqNjVTtXugHeG_E">https://youtu.be/kDMHHw8JqLE?si=NaqNjVTtXugHeG_E</a><br><br><br>Jutomi I'm gonna make these sounds in your walls tonight`,
+		"m.mentions": {}
+	}, {
+		$type: "m.room.message",
+		msgtype: "m.notice",
+		body: "| via YouTube https://www.youtube.com"
+			+ "\n| \n| ## Happy O Funny https://www.youtube.com/channel/UCEpQ9aEb1NafpvWp5Aoizrg"
+      	+ "\n| \n| ## Shoebill stork clattering sounds like machine guun~!! (Japan Matsue... https://www.youtube.com/watch?v=kDMHHw8JqLE"
+			+ "\n| \n| twitter"
+			+ "\n| https://twitter.com/matsuevogelpark"
+			+ "\n| \n| The shoebill (Balaeniceps rex) also known as whalehead, whale-headed stork, or shoe-billed stork, is a very large stork-like bird. It derives its name from its enormous shoe-shaped bill"
+			+ "\n| some people also called them the living dinosaur~~"
+			+ "\n| \n| #shoebill #livingdinosaur #happyofunny #weirdcreature #weirdsoun..."
+			+ "\n| \n| 🎞️ https://www.youtube.com/embed/kDMHHw8JqLE",
+		format: "org.matrix.custom.html",
+		formatted_body: `<blockquote><p><sub><a href="https://www.youtube.com">YouTube</a></sub></p>`
+			+ `<p><strong><a href="https://www.youtube.com/channel/UCEpQ9aEb1NafpvWp5Aoizrg">Happy O Funny</a></strong>`
+			+ `</p><p><strong><a href="https://www.youtube.com/watch?v=kDMHHw8JqLE">Shoebill stork clattering sounds like machine guun~!! (Japan Matsue...</a></strong>`
+			+ `</p><p>twitter<br><a href="https://twitter.com/matsuevogelpark">https://twitter.com/matsuevogelpark</a><br><br>The shoebill (Balaeniceps rex) also known as whalehead, whale-headed stork, or shoe-billed stork, is a very large stork-like bird. It derives its name from its enormous shoe-shaped bill<br>some people also called them the living dinosaur~~<br><br>#shoebill #livingdinosaur #happyofunny #weirdcreature #weirdsoun...`
+			+ `</p><p>🎞️ https://www.youtube.com/embed/kDMHHw8JqLE`
+			+ `</p></blockquote>`,
+		"m.mentions": {}
+	}])
+})

d2m/converters/message-to-event.js

@@ -514,6 +514,15 @@ async function messageToEvent(message, guild, options = {}, di) {
 		// Start building up a replica ("rep") of the embed in Discord-markdown format, which we will convert into both plaintext and formatted body at once
 		const rep = new mxUtils.MatrixStringBuilder()
 
+		// Provider
+		if (embed.provider?.name) {
+			if (embed.provider.url) {
+				rep.addParagraph(`via ${embed.provider.name} ${embed.provider.url}`, tag`<sub><a href="${embed.provider.url}">${embed.provider.name}</a></sub>`)
+			} else {
+				rep.addParagraph(`via ${embed.provider.name}`, tag`<sub>${embed.provider.name}</sub>`)
+			}
+		}
+
 		// Author and URL into a paragraph
 		let authorNameText = embed.author?.name || ""
 		if (authorNameText && embed.author?.icon_url) authorNameText = `⏺️ ${authorNameText}` // using the emoji instead of an image
@@ -536,7 +545,9 @@ async function messageToEvent(message, guild, options = {}, di) {
 			}
 		}
 
-		if (embed.description) {
+		let embedTypeShouldShowDescription = embed.type !== "video" // Discord doesn't display descriptions for videos
+		if (embed.provider?.name === "YouTube") embedTypeShouldShowDescription = true // But I personally like showing the descriptions for YouTube videos specifically
+		if (embed.description && embedTypeShouldShowDescription) {
 			const {body, html} = await transformContent(embed.description)
 			rep.addParagraph(body, html)
 		}
@@ -550,7 +561,11 @@ async function messageToEvent(message, guild, options = {}, di) {
 			rep.addParagraph(fieldRep.get().body, fieldRep.get().formatted_body)
 		}
 
-		if (embed.image?.url) rep.addParagraph(`📸 ${embed.image.url}`)
+		let chosenImage = embed.image?.url
+		// the thumbnail seems to be used for "article" type but displayed big at the bottom by discord
+		if (embed.type === "article" && embed.thumbnail?.url && !chosenImage) chosenImage = embed.thumbnail.url
+		if (chosenImage) rep.addParagraph(`📸 ${chosenImage}`)
+
 		if (embed.video?.url) rep.addParagraph(`🎞️ ${embed.video.url}`)
 
 		if (embed.footer?.text) rep.addLine(`— ${embed.footer.text}`, tag`— ${embed.footer.text}`)

test/data.js

@@ -2123,6 +2123,185 @@ module.exports = {
 			attachments: [],
 			guild_id: "1150201337112449045"
 		},
+		vx_image: {
+			id: "1209926442981269544",
+			type: 0,
+			content: "https://vxtwitter.com/TomorrowCorp/status/1760330671074287875 we got a release date!!!",
+			channel_id: "288058913985789953",
+			author: {
+				id: "113340068197859328",
+				username: "kumaccino",
+				avatar: "b48302623a12bc7c59a71328f72ccb39",
+				discriminator: "0",
+				public_flags: 128,
+				premium_type: 0,
+				flags: 128,
+				banner: null,
+				accent_color: null,
+				global_name: "kumaccino",
+				avatar_decoration_data: null,
+				banner_color: null
+			},
+			attachments: [],
+			embeds: [
+				{
+					type: "article",
+					url: "https://vxtwitter.com/TomorrowCorp/status/1760330671074287875",
+					title: "Tomorrow Corporation (@TomorrowCorp)",
+					description: "Mark your calendar with a wet black stain! World of Goo 2 releases on May 23, 2024 on Nintendo Switch, Epic Games Store (Win/Mac), and http://WorldOfGoo2.com (Win/Mac/Linux).\n" +
+						"\n" +
+						"https://tomorrowcorporation.com/posts/world-of-goo-2-now-with-100-more-release-dates-and-platforms\n" +
+						"\n" +
+						"💖 123 🔁 36",
+					color: 8388564,
+					author: {
+						name: "Twitter",
+						url: "https://twitter.com/tomorrowcorp/status/1760330671074287875"
+					},
+					provider: {
+						name: "vxTwitter / fixvx",
+						url: "https://github.com/dylanpdx/BetterTwitFix"
+					},
+					thumbnail: {
+						url: "https://pbs.twimg.com/media/GG3zUMGbIAAxs3h.jpg",
+						proxy_url: "https://images-ext-2.discordapp.net/external/eqA-NKoXzJ0Y_l-MlwN6shFDJibC0TbPxMNWSU5IpKY/https/pbs.twimg.com/media/GG3zUMGbIAAxs3h.jpg",
+						width: 1200,
+						height: 1200,
+						placeholder: "5SgKDwTIlqiPjIhzlspniIiNaN8It3AD",
+						placeholder_version: 1
+					}
+				}
+			],
+			mentions: [],
+			mention_roles: [],
+			pinned: false,
+			mention_everyone: false,
+			tts: false,
+			timestamp: "2024-02-21T18:15:43.353000+00:00",
+			edited_timestamp: null,
+			flags: 0,
+			components: []
+		},
+		vx_video: {
+			id: "1209804622206599190",
+			type: 0,
+			content: "https://vxtwitter.com/McDonalds/status/1759971752254341417",
+			channel_id: "112760669178241024",
+			author: {
+				id: "113340068197859328",
+				username: "kumaccino",
+				avatar: "b48302623a12bc7c59a71328f72ccb39",
+				discriminator: "0",
+				public_flags: 128,
+				premium_type: 0,
+				flags: 128,
+				banner: null,
+				accent_color: null,
+				global_name: "kumaccino",
+				avatar_decoration_data: null,
+				banner_color: null
+			},
+			attachments: [],
+			embeds: [
+				{
+					type: "video",
+					url: "https://vxtwitter.com/McDonalds/status/1759971752254341417",
+					title: "McDonald's (@McDonalds)",
+					description: "McDonald’s🤝@studiopierrot\n\n💖 89 🔁 21",
+					color: 8388564,
+					author: {
+						name: "McDonald’s🤝@studiopierrot\n\n💖 89 🔁 21",
+						url: "https://twitter.com/McDonalds/status/1759971752254341417"
+					},
+					provider: {
+						name: "vxTwitter / fixvx",
+						url: "https://github.com/dylanpdx/BetterTwitFix"
+					},
+					video: {
+						url: "https://video.twimg.com/ext_tw_video/1759967449548541952/pu/vid/avc1/1280x720/XN1LFIJqAFBdtaoh.mp4?tag=12",
+						proxy_url: "https://images-ext-1.discordapp.net/external/TInoGDskHFBRSQR0ErWEmvmzi75EO28aSyiEXs3SB8E/%3Ftag%3D12/https/video.twimg.com/ext_tw_video/1759967449548541952/pu/vid/avc1/1280x720/XN1LFIJqAFBdtaoh.mp4",
+						width: 1280,
+						height: 720,
+						placeholder: "AggGBIAIp4iGeYdxjHgAAAAAAA==",
+						placeholder_version: 1
+					}
+				}
+			],
+			mentions: [],
+			mention_roles: [],
+			pinned: false,
+			mention_everyone: false,
+			tts: false,
+			timestamp: "2024-02-21T10:11:39.017000+00:00",
+			edited_timestamp: null,
+			flags: 0,
+			components: []
+		},
+		youtube_video: {
+			id: "1214383754479534100",
+			type: 0,
+			content: "https://youtu.be/kDMHHw8JqLE?si=NaqNjVTtXugHeG_E\n\n\nJutomi I'm gonna make these sounds in your walls tonight",
+			channel_id: "112760669178241024",
+			author: {
+				id: "1060361805152669766",
+				username: "occimyy",
+				avatar: "3bf268de3eab1c5441da9585534d8aa5",
+				discriminator: "0",
+				public_flags: 0,
+				premium_type: 0,
+				flags: 0,
+				banner: null,
+				accent_color: null,
+				global_name: "Occimyy",
+				avatar_decoration_data: null,
+				banner_color: null
+			},
+			attachments: [],
+			embeds: [
+				{
+					type: "video",
+					url: "https://www.youtube.com/watch?v=kDMHHw8JqLE",
+					title: "Shoebill stork clattering sounds like machine guun~!! (Japan Matsue...",
+					description: "twitter\n" +
+						"https://twitter.com/matsuevogelpark\n" +
+						"\n" +
+						"The shoebill (Balaeniceps rex) also known as whalehead, whale-headed stork, or shoe-billed stork, is a very large stork-like bird. It derives its name from its enormous shoe-shaped bill\n" +
+						"some people also called them the living dinosaur~~\n" +
+						"\n" +
+						"#shoebill #livingdinosaur #happyofunny #weirdcreature #weirdsoun...",
+					color: 16711680,
+					author: {
+						name: "Happy O Funny",
+						url: "https://www.youtube.com/channel/UCEpQ9aEb1NafpvWp5Aoizrg"
+					},
+					provider: { name: "YouTube", url: "https://www.youtube.com" },
+					thumbnail: {
+						url: "https://i.ytimg.com/vi/kDMHHw8JqLE/maxresdefault.jpg",
+						proxy_url: "https://images-ext-1.discordapp.net/external/eEPOxZQXfTHqvPQJBWqsgG3wxTQN20b8LXqw3jSqyRM/https/i.ytimg.com/vi/kDMHHw8JqLE/maxresdefault.jpg",
+						width: 1280,
+						height: 720,
+						placeholder: "WAgSDIIIdIprl4h4h4dNoEoEaQ==",
+						placeholder_version: 1
+					},
+					video: {
+						url: "https://www.youtube.com/embed/kDMHHw8JqLE",
+						width: 1280,
+						height: 720,
+						placeholder: "WAgSDIIIdIprl4h4h4dNoEoEaQ==",
+						placeholder_version: 1
+					}
+				}
+			],
+			mentions: [],
+			mention_roles: [],
+			pinned: false,
+			mention_everyone: false,
+			tts: false,
+			timestamp: "2024-03-05T01:27:29.227000+00:00",
+			edited_timestamp: null,
+			flags: 0,
+			components: []
+		},
 		image_embed_and_attachment: {
 			id: "1157854642810654821",
 			type: 0,