样式生成器添加消息反向滚动的选项

frontend/src/lang/en.js

@@ -132,6 +132,7 @@ export default {
     messages: 'Messages',
     color: 'Color',
     onNewLine: 'On new line',
+    messageReverseScroll: 'Reverse scrolling',
 
     time: 'Timestamps',
     showTime: 'Show timestamps',

frontend/src/lang/ja.js

@@ -132,6 +132,7 @@ export default {
     messages: 'コメント',
     color: '色',
     onNewLine: '新しい行に表示する',
+    messageReverseScroll: '逆方向にスクロールする',
 
     time: '時間',
     showTime: '時間を表示する',

frontend/src/lang/zh.js

@@ -130,6 +130,7 @@ export default {
     messages: '消息',
     color: '颜色',
     onNewLine: '在新行显示',
+    messageReverseScroll: '反向滚动',
 
     time: '时间',
     showTime: '显示时间',

frontend/src/views/StyleGenerator/Legacy.vue

@@ -135,9 +135,18 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-form-item :label="$t('stylegen.onNewLine')">
-            <el-switch v-model="form.messageOnNewLine"></el-switch>
-          </el-form-item>
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.onNewLine')">
+                <el-switch v-model="form.messageOnNewLine"></el-switch>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.messageReverseScroll')">
+                <el-switch v-model="form.messageReverseScroll"></el-switch>
+              </el-form-item>
+            </el-col>
+          </el-row>
           <el-row :gutter="20">
             <el-col :xs="24" :sm="12">
               <el-form-item :label="$t('stylegen.emoticonSize')">
@@ -406,6 +415,7 @@ export const DEFAULT_CONFIG = {
   messageLineHeight: 0,
   messageColor: '#ffffff',
   messageOnNewLine: false,
+  messageReverseScroll: false,
   emoticonSize: 18,
   largeEmoticonSize: 36,
 
@@ -582,7 +592,13 @@ yt-live-chat-text-message-renderer #message .emoji {
 
 yt-live-chat-text-message-renderer #message .emoji.blc-large-emoji {
   height: ${this.form.largeEmoticonSize}px !important;
-}`
+}
+
+${!this.form.messageReverseScroll ? '' : `yt-live-chat-item-list-renderer,
+yt-live-chat-item-list-renderer #items > * {
+  rotate: 180deg;
+  backface-visibility: hidden;
+}`}`
     },
     timeStyle() {
       return common.getTimeStyle(this.form)

frontend/src/views/StyleGenerator/LineLike.vue

@@ -121,6 +121,13 @@
               </el-form-item>
             </el-col>
           </el-row>
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12">
+              <el-form-item :label="$t('stylegen.messageReverseScroll')">
+                <el-switch v-model="form.messageReverseScroll"></el-switch>
+              </el-form-item>
+            </el-col>
+          </el-row>
         </el-collapse-item>
 
         <el-collapse-item>
@@ -355,6 +362,7 @@ export const DEFAULT_CONFIG = {
   messageColor: '#000000',
   emoticonSize: 18,
   largeEmoticonSize: 36,
+  messageReverseScroll: false,
 
   showTime: false,
   timeFont: 'Noto Sans SC',
@@ -524,7 +532,13 @@ yt-live-chat-text-message-renderer #message::before {
 
 yt-live-chat-text-message-renderer #message:has(.emoji.blc-large-emoji)::before {
   ${this.form.showLargeEmoticonBg ? '' : 'content: none;'}
-}`
+}
+
+${!this.form.messageReverseScroll ? '' : `yt-live-chat-item-list-renderer,
+yt-live-chat-item-list-renderer #items > * {
+  rotate: 180deg;
+  backface-visibility: hidden;
+}`}`
     },
     timeStyle() {
       return common.getTimeStyle(this.form)

frontend/src/views/StyleGenerator/common.js

@@ -118,17 +118,17 @@ export function getAnimationStyle(config) {
   let curTime = 0
   if (config.animateIn) {
     keyframes.push(`  0% { opacity: 0;${!config.slide ? ''
-      : ` transform: translateX(${config.reverseSlide ? 16 : -16}px);`
+      : ` translate: ${config.reverseSlide ? 16 : -16}px;`
     } }`)
     curTime += config.fadeInTime
-    keyframes.push(`  ${curTime / totalTime * 100}% { opacity: 1; transform: none; }`)
+    keyframes.push(`  ${curTime / totalTime * 100}% { opacity: 1; translate: none; }`)
   }
   if (config.animateOut) {
     curTime += config.animateOutWaitTime * 1000
-    keyframes.push(`  ${curTime / totalTime * 100}% { opacity: 1; transform: none; }`)
+    keyframes.push(`  ${curTime / totalTime * 100}% { opacity: 1; translate: none; }`)
     curTime += config.fadeOutTime
     keyframes.push(`  ${curTime / totalTime * 100}% { opacity: 0;${!config.slide ? ''
-      : ` transform: translateX(${config.reverseSlide ? -16 : 16}px);`
+      : ` translate: ${config.reverseSlide ? -16 : 16}px;`
     } }`)
   }
   return `/* Animation */
@@ -136,9 +136,7 @@ export function getAnimationStyle(config) {
 ${keyframes.join('\n')}
 }
 
-yt-live-chat-text-message-renderer,
-yt-live-chat-membership-item-renderer,
-yt-live-chat-paid-message-renderer {
+yt-live-chat-item-list-renderer #items > * {
   animation: anim ${totalTime}ms;
   animation-fill-mode: both;
 }`