From 086c00bd2cba62a4162583f4827cf9e81c07ce1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9F=90M=E6=B0=8F?= <kasumi@bangdream.moe>
Date: Mon, 5 Aug 2024 20:14:44 +0800
Subject: [PATCH 1/2] 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 `
+    <div style="background-image: none; width: 256px;">
+      <video src="${staticProxy + url}" width="100%" height="100%" alt="${title}" preload muted autoplay loop playsinline disablepictureinpicture >
+        <img src="${staticProxy + imgurl}" alt="${title}" loading="${index > 15 ? 'eager' : 'lazy'}" />
+      </video>
+    </div>
+    `
+  })?.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 `
+      <div class="image-preview-button image-preview-wrap">
+        <img src="${staticProxy + url}" style="width: 256px;" alt="${title}" loading="${index > 15 ? 'eager' : 'lazy'}" />
+      </div>
+    `
+  })?.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('<small></small>')?.wrapInner('<blockquote></blockquote>')),
+      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?= <kasumi@bangdream.moe>
Date: Mon, 5 Aug 2024 16:42:28 +0000
Subject: [PATCH 2/2] 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 `
     <div style="background-image: none; width: 256px;">
-      <video src="${staticProxy + url}" width="100%" height="100%" alt="${title}" preload muted autoplay loop playsinline disablepictureinpicture >
-        <img src="${staticProxy + imgurl}" alt="${title}" loading="${index > 15 ? 'eager' : 'lazy'}" />
+      <video src="${staticProxy + url}" width="100%" height="100%" alt="Video Sticker" preload muted autoplay loop playsinline disablepictureinpicture >
+        <img class="sticker" src="${staticProxy + imgurl}" alt="Video Sticker" loading="${index > 15 ? 'eager' : 'lazy'}" />
       </video>
     </div>
     `
   })?.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 `
-      <div class="image-preview-button image-preview-wrap">
-        <img src="${staticProxy + url}" style="width: 256px;" alt="${title}" loading="${index > 15 ? 'eager' : 'lazy'}" />
-      </div>
-    `
+    return `<img class="sticker" src="${staticProxy + url}" style="width: 256px;" alt="Sticker" loading="${index > 15 ? 'eager' : 'lazy'}" />`
   })?.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('<small></small>')?.wrapInner('<blockquote></blockquote>')),
-      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(),