From b5b9b2601a5535aecfdd84fe6c72a803f8a45476 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Tue, 22 Feb 2022 23:48:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8D=E7=9B=B4=E6=8E=A5=E5=9C=A8Ticker?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=88=B6=E7=BB=84=E4=BB=B6=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ChatRenderer/Ticker.vue    | 19 +++++++++++++------
 .../src/components/ChatRenderer/index.vue     |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ChatRenderer/Ticker.vue b/frontend/src/components/ChatRenderer/Ticker.vue
index c1456fc..ed8d257 100644
--- a/frontend/src/components/ChatRenderer/Ticker.vue
+++ b/frontend/src/components/ChatRenderer/Ticker.vue
@@ -169,18 +169,25 @@ export default {
       return constants.getPriceConfig(message.price).pinTime
     },
     updateProgress() {
+      // 更新进度
       this.curTime = new Date()
-      for (let i = 0; i < this.messages.length;) {
-        let message = this.messages[i]
+
+      // 删除过期的消息
+      let filteredMessages = []
+      let messagesChanged = false
+      for (let message of this.messages) {
         let pinTime = this.getPinTime(message)
         if ((this.curTime - message.addTime) / (60 * 1000) >= pinTime) {
-          if (this.pinnedMessage == message) {
+          messagesChanged = true
+          if (this.pinnedMessage === message) {
             this.pinnedMessage = null
           }
-          this.messages.splice(i, 1)
-        } else {
-          i++
+          continue
         }
+        filteredMessages.push(message)
+      }
+      if (messagesChanged) {
+        this.$emit('update:messages', filteredMessages)
       }
     },
     onItemClick(message) {
diff --git a/frontend/src/components/ChatRenderer/index.vue b/frontend/src/components/ChatRenderer/index.vue
index 367f5b9..6cc7d13 100644
--- a/frontend/src/components/ChatRenderer/index.vue
+++ b/frontend/src/components/ChatRenderer/index.vue
@@ -2,7 +2,7 @@
   <yt-live-chat-renderer class="style-scope yt-live-chat-app" style="--scrollbar-width:11px;" hide-timestamps
     @mousemove="refreshCantScrollStartTime"
   >
-    <ticker class="style-scope yt-live-chat-renderer" :messages="paidMessages" :showGiftName="showGiftName"></ticker>
+    <ticker class="style-scope yt-live-chat-renderer" :messages.sync="paidMessages" :showGiftName="showGiftName"></ticker>
     <yt-live-chat-item-list-renderer class="style-scope yt-live-chat-renderer" allow-scroll>
       <div ref="scroller" id="item-scroller" class="style-scope yt-live-chat-item-list-renderer animated" @scroll="onScroll">
         <div ref="itemOffset" id="item-offset" class="style-scope yt-live-chat-item-list-renderer" style="height: 0px;">