From b24beaa2b675d78adf41608d8b1a61bf4b2cdcef Mon Sep 17 00:00:00 2001
From: Rongrong <i@rong.moe>
Date: Sat, 24 Aug 2024 20:08:22 +0800
Subject: [PATCH] fix(route/telegram/channel): invisible images in albums and
 Link Preview (#16523)

Some have reported that a recent upgrade of RSSHub broke the
/telegram/channel route, resulting in images from Link Preview (Instant
View) or albums not being displayed, even when showLinkPreview
explicitly or implicitly (by default) enabled.

This is a REGRESSION introduced in
edfaed1b7da1a2599dbbdcda861397b9f08101ec.

The patch fixes it.

Signed-off-by: Rongrong <i@rong.moe>
---
 lib/routes/telegram/channel.ts | 37 +++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/lib/routes/telegram/channel.ts b/lib/routes/telegram/channel.ts
index e5e83a60319c7..d8fd9efcb542f 100644
--- a/lib/routes/telegram/channel.ts
+++ b/lib/routes/telegram/channel.ts
@@ -428,9 +428,40 @@ async function handler(ctx) {
                                 const background = $node.css('background-image');
                                 const backgroundUrl = background && background.match(/url\('(.*)'\)/);
                                 const backgroundUrlSrc = backgroundUrl && backgroundUrl[1];
-                                const width = Number.parseFloat($node.css('width') || '0');
-                                const height = ((Number.parseFloat($node.find('.tgme_widget_message_photo').css('padding-top') || '0') / 100) * width).toFixed(2);
-                                tag_media += backgroundUrlSrc ? `<img width="${width}" height="${height}" src="${backgroundUrlSrc}">` : '';
+                                const attrs = [`src="${backgroundUrlSrc}"`];
+                                /*
+                                 * If the width is not in px, it is either a percentage (Link Preview/Instant view)
+                                 * or absent (ditto).
+                                 * Only accept px to prevent images from being invisible or too small.
+                                 */
+                                let width = 0;
+                                const widthStr = $node.css('width');
+                                if (widthStr && widthStr.endsWith('px')) {
+                                    width = Number.parseFloat(widthStr);
+                                }
+                                /*
+                                 * Height is present when the message is an album but does not exist in other cases.
+                                 * Ditto, only accept px.
+                                 * !!!NOTE: images in albums may have smaller width and height.
+                                 */
+                                let height = 0;
+                                const heightStr = $node.css('height');
+                                if (heightStr && heightStr.endsWith('px')) {
+                                    height = Number.parseFloat(heightStr);
+                                }
+                                /*
+                                 * Only calculate height when needed.
+                                 * The aspect ratio is either a percentage (single image) or absent (Link Preview).
+                                 * Only accept percentage to prevent images from being invisible or distorted.
+                                 */
+                                const aspectRatioStr = $node.find('.tgme_widget_message_photo').css('padding-top');
+                                if (height <= 0 && width > 0 && aspectRatioStr && aspectRatioStr.endsWith('%')) {
+                                    height = (Number.parseFloat(aspectRatioStr) / 100) * width;
+                                }
+                                // Only set width/height when >32 to avoid invisible images.
+                                width > 32 && attrs.push(`width="${width}"`);
+                                height > 32 && attrs.push(`height="${height.toFixed(2).replace('.00', '')}"`);
+                                tag_media += backgroundUrlSrc ? `<img ${attrs.join(' ')}>` : '';
                             }
                             if (tag_media) {
                                 tag_media_all += tag_media;