From 05180c3acb4f3fa18eabb391f16aaba09406e4a7 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Fri, 14 Jun 2019 09:09:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=A8=A1=E4=BB=BF?=
 =?UTF-8?q?=E3=80=81=E7=AE=80=E5=8C=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Room/PaidMessage.vue | 23 +++---
 frontend/src/views/Room/TextMessage.vue |  6 +-
 frontend/src/views/Room/index.vue       | 96 ++++++++++++++-----------
 views/chat.py                           | 77 +++++++-------------
 4 files changed, 97 insertions(+), 105 deletions(-)

diff --git a/frontend/src/views/Room/PaidMessage.vue b/frontend/src/views/Room/PaidMessage.vue
index 3e16b5b..c02a898 100644
--- a/frontend/src/views/Room/PaidMessage.vue
+++ b/frontend/src/views/Room/PaidMessage.vue
@@ -1,11 +1,11 @@
 <template>
   <yt-live-chat-paid-message-renderer class="style-scope yt-live-chat-item-list-renderer" allow-animations :style="{
-      '--yt-live-chat-paid-message-primary-color': getColor('contentBg'),
-      '--yt-live-chat-paid-message-secondary-color': getColor('headerBg'),
-      '--yt-live-chat-paid-message-header-color': getColor('header'),
-      '--yt-live-chat-paid-message-author-name-color': getColor('authorName'),
-      '--yt-live-chat-paid-message-timestamp-color': getColor('time'),
-      '--yt-live-chat-paid-message-color': getColor('content'),
+      '--yt-live-chat-paid-message-primary-color': color.contentBg,
+      '--yt-live-chat-paid-message-secondary-color': color.headerBg,
+      '--yt-live-chat-paid-message-header-color': color.header,
+      '--yt-live-chat-paid-message-author-name-color': color.authorName,
+      '--yt-live-chat-paid-message-timestamp-color': color.time,
+      '--yt-live-chat-paid-message-color': color.content
     }"
   >
     <div id="card" class="style-scope yt-live-chat-paid-message-renderer">
@@ -102,13 +102,14 @@ export default {
     time: String,
     content: String
   },
-  methods: {
-    getColor(name) {
+  computed: {
+    color() {
       for (const color of COLORS) {
-        if (this.price >= color.price)
-          return color[name]
+        if (this.price >= color.price) {
+          return color
+        }
       }
-      return COLORS[0][name]
+      return COLORS[COLORS.length - 1]
     }
   }
 }
diff --git a/frontend/src/views/Room/TextMessage.vue b/frontend/src/views/Room/TextMessage.vue
index 63ada71..4e095a5 100644
--- a/frontend/src/views/Room/TextMessage.vue
+++ b/frontend/src/views/Room/TextMessage.vue
@@ -29,8 +29,8 @@ const AUTHOR_TYPE_TO_TEXT = [
   'moderator', // 房管
   'owner' // 主播
 ]
-const REPEATED_MARK_COLOR_START = [0x21, 0x96, 0xF3]
-const REPEATED_MARK_COLOR_END = [0xFF, 0x57, 0x22]
+const REPEATED_MARK_COLOR_START = [64, 158, 255]
+const REPEATED_MARK_COLOR_END = [245, 108, 108]
 
 export default {
   name: 'TextMessage',
@@ -67,7 +67,7 @@ export default {
 
 <style>
 yt-live-chat-text-message-renderer>#content>.el-badge {
-  margin-left: 0.5em;
+  margin-left: 10px;
 }
 
 yt-live-chat-text-message-renderer>#content>.el-badge .el-badge__content {
diff --git a/frontend/src/views/Room/index.vue b/frontend/src/views/Room/index.vue
index e63686b..5b5506b 100644
--- a/frontend/src/views/Room/index.vue
+++ b/frontend/src/views/Room/index.vue
@@ -14,24 +14,30 @@
         </div>
       </yt-live-chat-ticker-paid-message-item-renderer>
     </yt-live-chat-ticker-renderer> -->
-    <yt-live-chat-item-list-renderer ref="list" class="style-scope yt-live-chat-renderer">
-      <template v-for="message in messages">
-        <text-message :key="message.id" v-if="message.type == 0"
-          class="style-scope yt-live-chat-item-list-renderer"
-          :avatarUrl="message.avatarUrl" :time="message.time" :authorName="message.authorName"
-          :authorType="message.authorType" :content="message.content" :repeated="message.repeated"
-        ></text-message>
-        <legacy-paid-message :key="message.id" v-else-if="message.type == 1"
-          class="style-scope yt-live-chat-item-list-renderer"
-          :avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
-          :time="message.time"
-        ></legacy-paid-message>
-        <paid-message :key="message.id" v-else
-          class="style-scope yt-live-chat-item-list-renderer"
-          :price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
-          :time="message.time" :content="message.content"
-        ></paid-message>
-      </template>
+    <yt-live-chat-item-list-renderer class="style-scope yt-live-chat-renderer" allow-scroll>
+      <div id="item-scroller" ref="scroller" class="style-scope yt-live-chat-item-list-renderer animated">
+        <div id="item-offset" class="style-scope yt-live-chat-item-list-renderer" style="height: 1800px;">
+          <div id="items" class="style-scope yt-live-chat-item-list-renderer" style="overflow: hidden; transform: translateY(0px);">
+            <template v-for="message in messages">
+              <text-message :key="message.id" v-if="message.type == 0"
+                class="style-scope yt-live-chat-item-list-renderer"
+                :avatarUrl="message.avatarUrl" :time="message.time" :authorName="message.authorName"
+                :authorType="message.authorType" :content="message.content" :repeated="message.repeated"
+              ></text-message>
+              <legacy-paid-message :key="message.id" v-else-if="message.type == 1"
+                class="style-scope yt-live-chat-item-list-renderer"
+                :avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
+                :time="message.time"
+              ></legacy-paid-message>
+              <paid-message :key="message.id" v-else
+                class="style-scope yt-live-chat-item-list-renderer"
+                :price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
+                :time="message.time" :content="message.content"
+              ></paid-message>
+            </template>
+          </div>
+        </div>
+      </div>
     </yt-live-chat-item-list-renderer>
   </yt-live-chat-renderer>
 </template>
@@ -93,7 +99,7 @@ export default {
     this.websocket.close()
   },
   updated() {
-    this.$refs.list.scrollTo(0, this.$refs.list.scrollHeight)
+    this.$refs.scroller.scrollTo(0, this.$refs.scroller.scrollHeight)
   },
   methods: {
     onWsOpen() {
@@ -105,51 +111,49 @@ export default {
       }))
     },
     onWsMessage(event) {
-      let body = JSON.parse(event.data)
+      let {cmd, data} = JSON.parse(event.data)
       let message = null
-      let time, price
-      switch(body.cmd) {
+      let time = data.timestamp ? new Date(data.timestamp * 1000) : new Date()
+      switch(cmd) {
       case COMMAND_ADD_TEXT:
-        if (!this.filterTextMessage(body.data) || this.mergeSimilar(body.data.content)) {
+        if (!this.filterTextMessage(data) || this.mergeSimilar(data.content)) {
           break
         }
-        time = new Date(body.data.timestamp * 1000)
         message = {
           id: this.nextId++,
           type: 0, // TextMessage
-          avatarUrl: body.data.avatarUrl,
+          avatarUrl: data.avatarUrl,
           time: `${time.getMinutes()}:${time.getSeconds()}`,
-          authorName: body.data.authorName,
-          authorType: body.data.authorType,
-          content: body.data.content,
+          authorName: data.authorName,
+          authorType: data.authorType,
+          content: data.content,
           repeated: 1
         }
         break
-      case COMMAND_ADD_GIFT:
-        price = body.data.totalCoin / 1000
+      case COMMAND_ADD_GIFT: {
+        let price = data.totalCoin / 1000
         if (price < this.config.minGiftPrice) // 丢人
           break
-        time = new Date(body.data.timestamp * 1000)
         message = {
           id: this.nextId++,
           type: 2, // PaidMessage
-          avatarUrl: body.data.avatarUrl,
-          authorName: body.data.authorName,
+          avatarUrl: data.avatarUrl,
+          authorName: data.authorName,
           price: price,
           time: `${time.getMinutes()}:${time.getSeconds()}`,
-          content: `Sent ${body.data.giftName}x${body.data.giftNum}`
+          content: `Sent ${data.giftName}x${data.giftNum}`
         }
         break
+      }
       case COMMAND_ADD_VIP:
-        time = new Date(body.data.timestamp * 1000)
         message = {
           id: this.nextId++,
           type: 1, // LegacyPaidMessage
-          avatarUrl: body.data.avatarUrl,
+          avatarUrl: data.avatarUrl,
           time: `${time.getMinutes()}:${time.getSeconds()}`,
-          authorName: body.data.authorName,
+          authorName: data.authorName,
           title: 'NEW MEMBER!',
-          content: `Welcome ${body.data.authorName}`
+          content: `Welcome ${data.authorName}`
         }
         break
       }
@@ -203,12 +207,22 @@ export default {
 </script>
 
 <style>
-yt-live-chat-renderer {
+yt-live-chat-renderer, yt-live-chat-item-list-renderer #item-scroller {
   height: 100%;
 }
 
-yt-live-chat-item-list-renderer {
-  overflow-y: scroll !important;
+yt-live-chat-renderer ::-webkit-scrollbar {
+  content: '';
+}
+
+yt-live-chat-renderer ::-webkit-scrollbar-thumb {
+  background-color: hsla(0, 0%, 53.3%, .2);
+  border: 2px solid #fcfcfc;
+  min-height: 30px;
+}
+
+yt-live-chat-renderer ::-webkit-scrollbar-track {
+  background-color: #fcfcfc;
 }
 </style>
 
diff --git a/views/chat.py b/views/chat.py
index cfa6a19..d86b46f 100644
--- a/views/chat.py
+++ b/views/chat.py
@@ -133,10 +133,13 @@ class RoomManager:
     # 测试用
     @staticmethod
     def __send_test_message(room):
-        room.send_message(Command.ADD_TEXT, {
-            'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
-            'timestamp': time.time(),
+        base_data = {
+            'avatarUrl':  'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
+            'timestamp':  time.time(),
             'authorName': 'xfgryujk',
+        }
+        text_data = {
+            **base_data,
             'authorType': 0,
             'content': '我能吞下玻璃而不伤身体',
             'privilegeType': 0,
@@ -144,56 +147,30 @@ class RoomManager:
             'authorLevel': 20,
             'isNewbie': False,
             'isMobileVerified': True
-        })
-        room.send_message(Command.ADD_TEXT, {
-            'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
-            'timestamp': time.time(),
-            'authorName': '主播',
-            'authorType': 3,
-            'content': "I can eat glass, it doesn't hurt me.",
-            'privilegeType': 0,
-            'isGiftDanmaku': False,
-            'authorLevel': 20,
-            'isNewbie': False,
-            'isMobileVerified': True
-        })
-        room.send_message(Command.ADD_VIP, {
-            'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
-            'timestamp': time.time(),
-            'authorName': 'xfgryujk',
-        })
-        room.send_message(Command.ADD_GIFT, {
-            'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
-            'timestamp': time.time(),
-            'authorName': 'xfgryujk',
+        }
+        vip_data = base_data
+        gift_data = {
+            **base_data,
             'giftName': '礼花',
             'giftNum': 1,
             'totalCoin': 28000
-        })
-        room.send_message(Command.ADD_GIFT, {
-            'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
-            'timestamp': time.time(),
-            'authorName': 'xfgryujk',
-            'giftName': '节奏风暴',
-            'giftNum': 1,
-            'totalCoin': 100000
-        })
-        room.send_message(Command.ADD_GIFT, {
-            'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
-            'timestamp': time.time(),
-            'authorName': 'xfgryujk',
-            'giftName': '摩天大楼',
-            'giftNum': 1,
-            'totalCoin': 450000
-        })
-        room.send_message(Command.ADD_GIFT, {
-            'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
-            'timestamp': time.time(),
-            'authorName': 'xfgryujk',
-            'giftName': '小电视飞船',
-            'giftNum': 1,
-            'totalCoin': 1245000
-        })
+        }
+        room.send_message(Command.ADD_TEXT, text_data)
+        text_data['authorName'] = '主播'
+        text_data['authorType'] = 3
+        text_data['content'] = "I can eat glass, it doesn't hurt me."
+        room.send_message(Command.ADD_TEXT, text_data)
+        room.send_message(Command.ADD_VIP, vip_data)
+        room.send_message(Command.ADD_GIFT, gift_data)
+        gift_data['giftName'] = '节奏风暴'
+        gift_data['totalCoin'] = 100000
+        room.send_message(Command.ADD_GIFT, gift_data)
+        gift_data['giftName'] = '摩天大楼'
+        gift_data['totalCoin'] = 450000
+        room.send_message(Command.ADD_GIFT, gift_data)
+        gift_data['giftName'] = '小电视飞船'
+        gift_data['totalCoin'] = 1245000
+        room.send_message(Command.ADD_GIFT, gift_data)
 
 
 room_manager = RoomManager()