From f8f674123f6144d0182aa7d55ec00385aa7748ad Mon Sep 17 00:00:00 2001 From: John Smith Date: Sat, 10 May 2025 00:14:48 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=94=9F=E6=88=90=E5=99=A8?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B6=88=E6=81=AF=E5=8F=8D=E5=90=91=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E7=9A=84=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 + frontend/src/views/StyleGenerator/Legacy.vue | 24 +++++++++++++++---- .../src/views/StyleGenerator/LineLike.vue | 16 ++++++++++++- frontend/src/views/StyleGenerator/common.js | 12 ++++------ 6 files changed, 43 insertions(+), 12 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 6d84590..f59ce85 100644 --- a/frontend/src/lang/en.js +++ b/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', diff --git a/frontend/src/lang/ja.js b/frontend/src/lang/ja.js index 7271cba..6d96d20 100644 --- a/frontend/src/lang/ja.js +++ b/frontend/src/lang/ja.js @@ -132,6 +132,7 @@ export default { messages: 'コメント', color: '色', onNewLine: '新しい行に表示する', + messageReverseScroll: '逆方向にスクロールする', time: '時間', showTime: '時間を表示する', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 88ab5c2..e92e70e 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -130,6 +130,7 @@ export default { messages: '消息', color: '颜色', onNewLine: '在新行显示', + messageReverseScroll: '反向滚动', time: '时间', showTime: '显示时间', diff --git a/frontend/src/views/StyleGenerator/Legacy.vue b/frontend/src/views/StyleGenerator/Legacy.vue index 52e25a1..6fb3f52 100644 --- a/frontend/src/views/StyleGenerator/Legacy.vue +++ b/frontend/src/views/StyleGenerator/Legacy.vue @@ -135,9 +135,18 @@ - - - + + + + + + + + + + + + @@ -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) diff --git a/frontend/src/views/StyleGenerator/LineLike.vue b/frontend/src/views/StyleGenerator/LineLike.vue index c821db1..6676c1c 100644 --- a/frontend/src/views/StyleGenerator/LineLike.vue +++ b/frontend/src/views/StyleGenerator/LineLike.vue @@ -121,6 +121,13 @@ + + + + + + + @@ -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) diff --git a/frontend/src/views/StyleGenerator/common.js b/frontend/src/views/StyleGenerator/common.js index 4ef6e1d..1fe42b4 100644 --- a/frontend/src/views/StyleGenerator/common.js +++ b/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; }`