From 06f81a2d141bf02def900acce877726f32817e97 Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Tue, 6 Aug 2024 13:34:37 +0800
Subject: [PATCH] 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 `
     <div style="background-image: none; width: 256px;">
       <video src="${staticProxy + url}" width="100%" height="100%" alt="Video Sticker" preload muted autoplay loop playsinline disablepictureinpicture >
@@ -27,7 +27,7 @@ function getVideoStickers($, item, { staticProxy, index }) {
 
 function getImageStickers($, item, { staticProxy, index }) {
   return $(item).find('.tgme_widget_message_sticker')?.map((_index, image) => {
-    const url = $(image).attr('data-webp')
+    const url = $(image)?.attr('data-webp')
     return `<img class="sticker" src="${staticProxy + url}" style="width: 256px;" alt="Sticker" loading="${index > 15 ? 'eager' : 'lazy'}" />`
   })?.get()?.join('')
 }
@@ -103,11 +103,11 @@ function getPost($, item, { channel, staticProxy, index = 0 }) {
     text: content?.text(),
     content: [
       $.html($(item).find('.tgme_widget_message_reply')?.wrapInner('<small></small>')?.wrapInner('<blockquote></blockquote>')),
-      getImageStickers($, item, { staticProxy, index }),
-      getVideoStickers($, item, { staticProxy, index }),
       getImages($, item, { staticProxy, id, index, title }),
       getVideo($, item, { staticProxy, id, index, title }),
       content?.html(),
+      getImageStickers($, item, { staticProxy, index }),
+      getVideoStickers($, item, { staticProxy, index }),
       // $(item).find('.tgme_widget_message_sticker_wrap')?.html(),
       $(item).find('.tgme_widget_message_poll')?.html(),
       $.html($(item).find('.tgme_widget_message_document_wrap')),