From 690f6aa35c178e61d320c07622b2548a7cab0a60 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Sat, 6 Apr 2024 15:56:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=BF=E5=BE=AE=E4=BF=A1=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E5=99=A8=E6=B7=BB=E5=8A=A0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=A4=A7=E8=A1=A8=E6=83=85=E8=83=8C=E6=99=AF=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                       |  1 +
 frontend/src/lang/ja.js                       |  1 +
 frontend/src/lang/zh.js                       |  1 +
 .../src/views/StyleGenerator/LineLike.vue     | 20 ++++++++++++++++++-
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 2780d4d..232ffd6 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -116,6 +116,7 @@ export default {
     backgrounds: 'Backgrounds',
     bgColor: 'Background color',
     useBarsInsteadOfBg: 'Use bars instead of backgrounds',
+    showLargeEmoticonBg: 'Show large emoticon background',
     messageBgColor: 'Message background color',
     ownerMessageBgColor: 'Owner background color',
     moderatorMessageBgColor: 'Moderator background color',
diff --git a/frontend/src/lang/ja.js b/frontend/src/lang/ja.js
index a1523e6..6548c3e 100644
--- a/frontend/src/lang/ja.js
+++ b/frontend/src/lang/ja.js
@@ -116,6 +116,7 @@ export default {
     backgrounds: '背景',
     bgColor: '背景色',
     useBarsInsteadOfBg: '背景に代わります',
+    showLargeEmoticonBg: '大きなスタンプの背景を表示する',
     messageBgColor: 'コメント背景色',
     ownerMessageBgColor: 'オーナーコメント背景色',
     moderatorMessageBgColor: '管理者コメント背景色',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 4d6c608..231a298 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -116,6 +116,7 @@ export default {
     backgrounds: '背景',
     bgColor: '背景色',
     useBarsInsteadOfBg: '用条代替消息背景',
+    showLargeEmoticonBg: '显示大表情背景',
     messageBgColor: '消息背景色',
     ownerMessageBgColor: '主播消息背景色',
     moderatorMessageBgColor: '房管消息背景色',
diff --git a/frontend/src/views/StyleGenerator/LineLike.vue b/frontend/src/views/StyleGenerator/LineLike.vue
index 7f4a049..9e768d4 100644
--- a/frontend/src/views/StyleGenerator/LineLike.vue
+++ b/frontend/src/views/StyleGenerator/LineLike.vue
@@ -155,6 +155,11 @@
               <el-color-picker v-model="form.bgColor" show-alpha></el-color-picker>
             </el-form-item>
           </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.showLargeEmoticonBg')">
+              <el-switch v-model="form.showLargeEmoticonBg"></el-switch>
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12">
@@ -346,6 +351,7 @@ export const DEFAULT_CONFIG = {
   ownerMessageBgColor: 'rgba(231, 199, 30, 1)',
   moderatorMessageBgColor: 'rgba(41, 95, 251, 1)',
   memberMessageBgColor: 'rgba(43, 234, 43, 1)',
+  showLargeEmoticonBg: true,
 
   firstLineFont: 'Noto Sans SC',
   firstLineFontSize: 20,
@@ -475,6 +481,10 @@ yt-live-chat-text-message-renderer #message {
   border-radius: 24px;
 }
 
+yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
+  ${this.form.showLargeEmoticonBg ? '' : 'padding: 0;'}
+}
+
 yt-live-chat-text-message-renderer #message .emoji {
   width: auto !important;
   height: ${this.form.emoticonSize}px !important;
@@ -494,6 +504,10 @@ yt-live-chat-text-message-renderer #message::before {
   border: 8px solid transparent;
   border-right: 18px solid;
   transform: rotate(35deg);
+}
+
+yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji)::before {
+  ${this.form.showLargeEmoticonBg ? '' : 'content: none;'}
 }`
     },
     timeStyle() {
@@ -512,7 +526,11 @@ ${this.getBgStyleForAuthorType('owner', this.form.ownerMessageBgColor)}
 
 ${this.getBgStyleForAuthorType('moderator', this.form.moderatorMessageBgColor)}
 
-${this.getBgStyleForAuthorType('member', this.form.memberMessageBgColor)}`
+${this.getBgStyleForAuthorType('member', this.form.memberMessageBgColor)}
+
+yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji) {
+  ${this.form.showLargeEmoticonBg ? '' : 'background-color: transparent !important;'}
+}`
     },
     scAndNewMemberStyle() {
       return `/* SuperChat/Fan Funding Messages */