From 086c00bd2cba62a4162583f4827cf9e81c07ce1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=90M=E6=B0=8F?= Date: Mon, 5 Aug 2024 20:14:44 +0800 Subject: [PATCH 1/3] support stickers display --- src/lib/telegram/index.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/lib/telegram/index.js b/src/lib/telegram/index.js index b5c1f46..e25be36 100644 --- a/src/lib/telegram/index.js +++ b/src/lib/telegram/index.js @@ -11,6 +11,32 @@ const cache = new LRUCache({ }, }) +function getVideoStickers($, item, { staticProxy, index, title }) { + return $(item).find('.js-videosticker_video')?.map((_index, video) => { + const url = $(video).attr('src') + const imgurl = $(video).find('img').attr('src') + return ` +
+ +
+ ` + })?.get()?.join('') +} + +function getImageStickers($, item, { staticProxy, index, title }) { + return $(item).find('.tgme_widget_message_sticker')?.map((_index, image) => { + // const bgurl = $(image).attr('style').match(/url\(["'](.*?)["']/)?.[1] + const url = $(image).attr('data-webp') + return ` +
+ ${title} +
+ ` + })?.get()?.join('') +} + function getImages($, item, { staticProxy, id, index, title }) { return $(item).find('.tgme_widget_message_photo_wrap')?.map((_index, photo) => { const url = $(photo).attr('style').match(/url\(["'](.*?)["']/)?.[1] @@ -78,6 +104,8 @@ function getPost($, item, { channel, staticProxy, index = 0 }) { text: content?.text(), content: [ $.html($(item).find('.tgme_widget_message_reply')?.wrapInner('')?.wrapInner('
')), + getImageStickers($, item, { staticProxy, index, title }), + getVideoStickers($, item, { staticProxy, index, title }), getImages($, item, { staticProxy, id, index, title }), getVideo($, item, { staticProxy, id, index, title }), content?.html(), From a08547ef9529074672c33decd912f382b61ed615 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=90M=E6=B0=8F?= Date: Mon, 5 Aug 2024 16:42:28 +0000 Subject: [PATCH 2/3] chore: fix style --- src/assets/style.css | 5 +++++ src/lib/telegram/index.js | 19 +++++++------------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/assets/style.css b/src/assets/style.css index 99b467b..75f0502 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -638,6 +638,11 @@ audio::-webkit-media-controls-panel { box-shadow: var(--shadows); } +.content .sticker { + box-shadow: none; + border: none; +} + .content a:link, .content a:visited { line-break: anywhere; diff --git a/src/lib/telegram/index.js b/src/lib/telegram/index.js index e25be36..cc605ab 100644 --- a/src/lib/telegram/index.js +++ b/src/lib/telegram/index.js @@ -11,29 +11,24 @@ const cache = new LRUCache({ }, }) -function getVideoStickers($, item, { staticProxy, index, title }) { +function getVideoStickers($, item, { staticProxy, index }) { return $(item).find('.js-videosticker_video')?.map((_index, video) => { const url = $(video).attr('src') const imgurl = $(video).find('img').attr('src') return `
-
` })?.get()?.join('') } -function getImageStickers($, item, { staticProxy, index, title }) { +function getImageStickers($, item, { staticProxy, index }) { return $(item).find('.tgme_widget_message_sticker')?.map((_index, image) => { - // const bgurl = $(image).attr('style').match(/url\(["'](.*?)["']/)?.[1] const url = $(image).attr('data-webp') - return ` -
- ${title} -
- ` + return `Sticker` })?.get()?.join('') } @@ -104,8 +99,8 @@ function getPost($, item, { channel, staticProxy, index = 0 }) { text: content?.text(), content: [ $.html($(item).find('.tgme_widget_message_reply')?.wrapInner('')?.wrapInner('
')), - getImageStickers($, item, { staticProxy, index, title }), - getVideoStickers($, item, { staticProxy, index, title }), + getImageStickers($, item, { staticProxy, index }), + getVideoStickers($, item, { staticProxy, index }), getImages($, item, { staticProxy, id, index, title }), getVideo($, item, { staticProxy, id, index, title }), content?.html(), From 06f81a2d141bf02def900acce877726f32817e97 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Tue, 6 Aug 2024 13:34:37 +0800 Subject: [PATCH 3/3] chore: improve sticker rendering and CSS specificity Enhanced sticker rendering by adding optional chaining for safer DOM traversal and reordered sticker rendering logic to ensure proper inclusion in post content. Improved CSS specificity for sticker styling to ensure consistent application across components. --- src/assets/style.css | 5 ----- src/components/item.astro | 5 +++++ src/lib/telegram/index.js | 10 +++++----- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/assets/style.css b/src/assets/style.css index 75f0502..99b467b 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -638,11 +638,6 @@ audio::-webkit-media-controls-panel { box-shadow: var(--shadows); } -.content .sticker { - box-shadow: none; - border: none; -} - .content a:link, .content a:visited { line-break: anywhere; diff --git a/src/components/item.astro b/src/components/item.astro index 64949c2..5a846ad 100644 --- a/src/components/item.astro +++ b/src/components/item.astro @@ -181,6 +181,11 @@ const timeago = datetime.isBefore(dayjs().subtract(1, 'w')) margin-right: 2px; } + .content :global(.sticker) { + box-shadow: none; + border: none; + } + .tag-box { flex-wrap: wrap; } diff --git a/src/lib/telegram/index.js b/src/lib/telegram/index.js index fc20391..87c0235 100644 --- a/src/lib/telegram/index.js +++ b/src/lib/telegram/index.js @@ -13,8 +13,8 @@ const cache = new LRUCache({ function getVideoStickers($, item, { staticProxy, index }) { return $(item).find('.js-videosticker_video')?.map((_index, video) => { - const url = $(video).attr('src') - const imgurl = $(video).find('img').attr('src') + const url = $(video)?.attr('src') + const imgurl = $(video).find('img')?.attr('src') return `