[FIX] Image preview for image URLs on messages (#19734)

app/oembed/server/server.js

@@ -281,7 +281,9 @@ OEmbed.rocketUrlParser = function(message) {
 				}
 				if (data.meta != null) {
 					item.meta = getRelevantMetaTags(data.meta);
-					item.meta.oembedHtml = insertMaxWidthInOembedHtml(item.meta.oembedHtml);
+					if (item.meta && item.meta.oembedHtml) {
+						item.meta.oembedHtml = insertMaxWidthInOembedHtml(item.meta.oembedHtml);
+					}
 				}
 				if (data.headers != null) {
 					item.headers = getRelevantHeaders(data.headers);

tests/end-to-end/api/05-chat.js

@@ -699,6 +699,82 @@ describe('[Chat]', function() {
 				.end(done);
 		});
 
+		describe('oembed', () => {
+			let ytEmbedMsgId;
+			let imgUrlMsgId;
+
+			before(async () => {
+				const ytEmbedMsgPayload = {
+					_id: `id-${ Date.now() }`,
+					rid: 'GENERAL',
+					msg: 'https://www.youtube.com/watch?v=T2v29gK8fP4',
+					alias: 'Gruggy',
+					emoji: ':smirk:',
+					avatar: 'http://res.guggy.com/logo_128.png',
+				};
+
+				const imgUrlMsgPayload = {
+					_id: `id-${ Date.now() }1`,
+					rid: 'GENERAL',
+					msg: 'https://i.picsum.photos/id/671/200/200.jpg?hmac=F8KUqkSzkLxagDZW5rOEHLjzFVxRZWnkrFPvq2BlnhE',
+					alias: 'Gruggy',
+					emoji: ':smirk:',
+					avatar: 'http://res.guggy.com/logo_128.png',
+				};
+
+				const ytPostResponse = await request.post(api('chat.sendMessage'))
+					.set(credentials)
+					.send({ message: ytEmbedMsgPayload });
+
+
+				const imgUrlResponse = await request.post(api('chat.sendMessage'))
+					.set(credentials)
+					.send({ message: imgUrlMsgPayload });
+
+				ytEmbedMsgId = ytPostResponse.body.message._id;
+				imgUrlMsgId = imgUrlResponse.body.message._id;
+			});
+
+			it('should embed an youtube preview if message has a youtube url', (done) => {
+				setTimeout(() => {
+					request.get(api('chat.getMessage'))
+						.set(credentials)
+						.query({
+							msgId: ytEmbedMsgId,
+						})
+						.expect('Content-Type', 'application/json')
+						.expect(200)
+						.expect((res) => {
+							const msgMetadataUrl = res.body.message.urls[0].meta;
+							const expectedOembedHtml = '<iframe style="max-width: 100%" width="267" height="200" src="https://www.youtube.com/embed/T2v29gK8fP4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
+
+							expect(msgMetadataUrl).to.have.property('oembedHtml', expectedOembedHtml);
+						})
+						.end(done);
+				}, 200);
+			});
+
+			it('should embed an image preview if message has an image url', (done) => {
+				setTimeout(() => {
+					request.get(api('chat.getMessage'))
+						.set(credentials)
+						.query({
+							msgId: imgUrlMsgId,
+						})
+						.expect('Content-Type', 'application/json')
+						.expect(200)
+						.expect((res) => {
+							const msgHeaders = res.body.message.urls[0].headers;
+							console.log('msg urls object: ');
+							const expectedContentType = 'image/jpeg';
+
+							expect(msgHeaders).to.have.property('contentType', expectedContentType);
+						})
+						.end(done);
+				}, 200);
+			});
+		});
+
 		describe('Read only channel', () => {
 			let readOnlyChannel;