From 46baa83458cc714b5f367e4003674ed790f77f13 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Sat, 22 Jun 2019 16:15:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0SC=E8=B4=B4=E7=BA=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blivedm                                       |   2 +-
 .../components/ChatRenderer/PaidMessage.vue   |  70 +----
 .../src/components/ChatRenderer/Ticker.vue    | 241 ++++++++++++++++++
 .../src/components/ChatRenderer/constants.js  | 101 ++++++++
 .../src/components/ChatRenderer/index.vue     |  27 +-
 frontend/src/views/Room.vue                   |  26 +-
 frontend/src/views/StyleGenerator/index.vue   |  22 +-
 7 files changed, 392 insertions(+), 97 deletions(-)
 create mode 100644 frontend/src/components/ChatRenderer/Ticker.vue

diff --git a/blivedm b/blivedm
index 0d63944..003d89e 160000
--- a/blivedm
+++ b/blivedm
@@ -1 +1 @@
-Subproject commit 0d63944da4558981cd55c1fdbfb11b97837780ff
+Subproject commit 003d89e9765d1deed8ccbe78755df837541e6295
diff --git a/frontend/src/components/ChatRenderer/PaidMessage.vue b/frontend/src/components/ChatRenderer/PaidMessage.vue
index ef75e6b..d03aeae 100644
--- a/frontend/src/components/ChatRenderer/PaidMessage.vue
+++ b/frontend/src/components/ChatRenderer/PaidMessage.vue
@@ -32,66 +32,7 @@
 
 <script>
 import ImgShadow from './ImgShadow.vue'
-
-const COLORS = [
-  { // $100红
-    price: 1245, // >= 1245，小电视飞船
-    contentBg: 'rgba(230,33,23,1)',
-    headerBg: 'rgba(208,0,0,1)',
-    header: 'rgba(255,255,255,1)',
-    authorName: 'rgba(255,255,255,0.701961)',
-    time: 'rgba(255,255,255,0.501961)',
-    content: 'rgba(255,255,255,1)'
-  }, { // $50品红
-    price: 450, // 450~1245，摩天大楼
-    contentBg: 'rgba(233,30,99,1)',
-    headerBg: 'rgba(194,24,91,1)',
-    header: 'rgba(255,255,255,1)',
-    authorName: 'rgba(255,255,255,0.701961)',
-    time: 'rgba(255,255,255,0.501961)',
-    content: 'rgba(255,255,255,1)'
-  }, { // $20橙
-    price: 100, // 100~450，节奏风暴、天空之翼
-    contentBg: 'rgba(245,124,0,1)',
-    headerBg: 'rgba(230,81,0,1)',
-    header: 'rgba(255,255,255,0.87451)',
-    authorName: 'rgba(255,255,255,0.701961)',
-    time: 'rgba(255,255,255,0.501961)',
-    content: 'rgba(255,255,255,0.87451)'
-  }, { // $10黄
-    price: 52, // 52~100，疯狂打call
-    contentBg: 'rgba(255,202,40,1)',
-    headerBg: 'rgba(255,179,0,1)',
-    header: 'rgba(0,0,0,0.87451)',
-    authorName: 'rgba(0,0,0,0.541176)',
-    time: 'rgba(0,0,0,0.501961)',
-    content: 'rgba(0,0,0,0.87451)'
-  }, { // $5绿
-    price: 28, // 28~52，礼花
-    contentBg: 'rgba(29,233,182,1)',
-    headerBg: 'rgba(0,191,165,1)',
-    header: 'rgba(0,0,0,1)',
-    authorName: 'rgba(0,0,0,0.541176)',
-    time: 'rgba(0,0,0,0.501961)',
-    content: 'rgba(0,0,0,1)'
-  }, { // $2浅蓝
-    price: 9.9, // 9.9~28，B坷垃
-    contentBg: 'rgba(0,229,255,1)',
-    headerBg: 'rgba(0,184,212,1)',
-    header: 'rgba(0,0,0,1)',
-    authorName: 'rgba(0,0,0,0.701961)',
-    time: 'rgba(0,0,0,0.501961)',
-    content: 'rgba(0,0,0,1)'
-  }, { // $1蓝
-    price: 0, // 0~9.9，丢人
-    contentBg: 'rgba(30,136,229,1)',
-    headerBg: 'rgba(21,101,192,1)',
-    header: 'rgba(255,255,255,1)',
-    authorName: 'rgba(255,255,255,0.701961)',
-    time: 'rgba(255,255,255,0.501961)',
-    content: 'rgba(255,255,255,1)'
-  }
-]
+import * as constants from './constants'
 
 export default {
   name: 'PaidMessage',
@@ -101,18 +42,13 @@ export default {
   props: {
     avatarUrl: String,
     authorName: String,
-    price: Number, // 价格，人民币,
+    price: Number, // 价格，人民币
     time: String,
     content: String
   },
   computed: {
     color() {
-      for (const color of COLORS) {
-        if (this.price >= color.price) {
-          return color
-        }
-      }
-      return COLORS[COLORS.length - 1]
+      return constants.getPriceConfig(this.price).colors
     }
   }
 }
diff --git a/frontend/src/components/ChatRenderer/Ticker.vue b/frontend/src/components/ChatRenderer/Ticker.vue
new file mode 100644
index 0000000..a7a81e9
--- /dev/null
+++ b/frontend/src/components/ChatRenderer/Ticker.vue
@@ -0,0 +1,241 @@
+<template>
+  <yt-live-chat-ticker-renderer>
+    <div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-renderer">
+      <div id="items" class="style-scope yt-live-chat-ticker-renderer">
+        <yt-live-chat-ticker-paid-message-item-renderer v-for="message in messages" :key="message.id"
+          tabindex="0" class="style-scope yt-live-chat-ticker-renderer" style="overflow: hidden;"
+        >
+          <div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
+            :style="{
+              background: getBgColor(message),
+            }"
+          >
+            <div id="content" class="style-scope yt-live-chat-ticker-paid-message-item-renderer" :style="{
+              color: getColor(message)
+            }">
+              <img-shadow id="author-photo" height="24" width="24" class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
+                :imgUrl="message.avatarUrl"
+              ></img-shadow>
+              <span id="text" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer">{{getText(message)}}</span>
+            </div>
+          </div>
+        </yt-live-chat-ticker-paid-message-item-renderer>
+      </div>
+    </div>
+  </yt-live-chat-ticker-renderer>
+</template>
+
+<script>
+import ImgShadow from './ImgShadow.vue'
+import * as constants from './constants'
+
+export default {
+  name: 'Ticker',
+  components: {
+    ImgShadow,
+  },
+  props: {
+    messages: Array
+  },
+  data() {
+    return {
+      updateTimerId: window.setInterval(this.updateProgress.bind(this), 1000)
+    }
+  },
+  beforeDestroy() {
+    window.clearInterval(this.updateTimerId)
+  },
+  methods: {
+    getBgColor(message) {
+      let config = constants.getPriceConfig(message.type === constants.MESSAGE_TYPE_MEMBER ? 28 : message.price)
+      let color1 = config.colors.contentBg
+      let color2 = config.colors.headerBg
+      let progress = (1 - (new Date() - message.addTime) / (60 * 1000) / config.pinTime) * 100
+      if (progress < 0) {
+        progress = 0
+      } else if (progress > 100) {
+        progress = 100
+      }
+      return `linear-gradient(90deg, ${color1}, ${color1} ${progress}%, ${color2} ${progress}%, ${color2})`
+    },
+    getColor(message) {
+      if (message.type === constants.MESSAGE_TYPE_MEMBER) {
+        return 'rgb(0, 0, 0)'
+      }
+      return constants.getPriceConfig(message.price).colors.header
+    },
+    getText(message) {
+      if (message.type === constants.MESSAGE_TYPE_MEMBER) {
+        return '会员'
+      }
+      return `CN¥${message.price}`
+    },
+    updateProgress() {
+      let curTime = new Date()
+      for (let i = 0; i < this.messages.length;) {
+        let config = constants.getPriceConfig(this.messages[i].type === constants.MESSAGE_TYPE_MEMBER ? 28 : this.messages[i].price)
+        if ((curTime - this.messages[i].addTime) / (60 * 1000) >= config.pinTime) {
+          this.messages.splice(i, 1)
+        } else {
+          i++
+        }
+      }
+
+      this.$forceUpdate()
+    }
+  }
+}
+</script>
+
+<!-- yt-live-chat-ticker-renderer -->
+<style>
+canvas.yt-live-chat-ticker-renderer, caption.yt-live-chat-ticker-renderer, center.yt-live-chat-ticker-renderer, cite.yt-live-chat-ticker-renderer, code.yt-live-chat-ticker-renderer, dd.yt-live-chat-ticker-renderer, del.yt-live-chat-ticker-renderer, dfn.yt-live-chat-ticker-renderer, div.yt-live-chat-ticker-renderer, dl.yt-live-chat-ticker-renderer, dt.yt-live-chat-ticker-renderer, em.yt-live-chat-ticker-renderer, embed.yt-live-chat-ticker-renderer, fieldset.yt-live-chat-ticker-renderer, font.yt-live-chat-ticker-renderer, form.yt-live-chat-ticker-renderer, h1.yt-live-chat-ticker-renderer, h2.yt-live-chat-ticker-renderer, h3.yt-live-chat-ticker-renderer, h4.yt-live-chat-ticker-renderer, h5.yt-live-chat-ticker-renderer, h6.yt-live-chat-ticker-renderer, hr.yt-live-chat-ticker-renderer, i.yt-live-chat-ticker-renderer, iframe.yt-live-chat-ticker-renderer, img.yt-live-chat-ticker-renderer, ins.yt-live-chat-ticker-renderer, kbd.yt-live-chat-ticker-renderer, label.yt-live-chat-ticker-renderer, legend.yt-live-chat-ticker-renderer, li.yt-live-chat-ticker-renderer, menu.yt-live-chat-ticker-renderer, object.yt-live-chat-ticker-renderer, ol.yt-live-chat-ticker-renderer, p.yt-live-chat-ticker-renderer, pre.yt-live-chat-ticker-renderer, q.yt-live-chat-ticker-renderer, s.yt-live-chat-ticker-renderer, samp.yt-live-chat-ticker-renderer, small.yt-live-chat-ticker-renderer, span.yt-live-chat-ticker-renderer, strike.yt-live-chat-ticker-renderer, strong.yt-live-chat-ticker-renderer, sub.yt-live-chat-ticker-renderer, sup.yt-live-chat-ticker-renderer, table.yt-live-chat-ticker-renderer, tbody.yt-live-chat-ticker-renderer, td.yt-live-chat-ticker-renderer, tfoot.yt-live-chat-ticker-renderer, th.yt-live-chat-ticker-renderer, thead.yt-live-chat-ticker-renderer, tr.yt-live-chat-ticker-renderer, tt.yt-live-chat-ticker-renderer, u.yt-live-chat-ticker-renderer, ul.yt-live-chat-ticker-renderer, var.yt-live-chat-ticker-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-ticker-renderer[hidden] {
+  display: none !important;
+}
+
+yt-live-chat-ticker-renderer {
+  display: block;
+  background-color: var(--yt-live-chat-header-background-color);
+}
+
+#container.yt-live-chat-ticker-renderer {
+  position: relative;
+}
+
+#items.yt-live-chat-ticker-renderer {
+  height: 32px;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0 24px 8px 24px;
+}
+
+#items.yt-live-chat-ticker-renderer>*.yt-live-chat-ticker-renderer {
+  margin-right: 8px;
+}
+
+#left-arrow-container.yt-live-chat-ticker-renderer {
+  background: linear-gradient(to right, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px);
+  left: 0;
+  padding: 0 16px 0 12px;
+}
+
+#right-arrow-container.yt-live-chat-ticker-renderer {
+  background: linear-gradient(to left, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px);
+  right: 0;
+  padding: 0 12px 0 16px;
+}
+
+#container.yt-live-chat-ticker-renderer:hover #left-arrow-container.yt-live-chat-ticker-renderer, #container.yt-live-chat-ticker-renderer:hover #right-arrow-container.yt-live-chat-ticker-renderer {
+  opacity: 1;
+}
+
+#left-arrow-container.yt-live-chat-ticker-renderer, #right-arrow-container.yt-live-chat-ticker-renderer {
+  height: 32px;
+  opacity: 0;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  transition: opacity 0.3s 0.1s;
+}
+
+yt-icon.yt-live-chat-ticker-renderer {
+  background-color: #2196f3;
+  border-radius: 999px;
+  color: #fff;
+  cursor: pointer;
+  height: 24px;
+  padding: 4px;
+  width: 24px;
+}
+</style>
+
+<!-- yt-live-chat-ticker-paid-message-item-renderer -->
+<style>
+canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-ticker-paid-message-item-renderer[hidden] {
+  display: none !important;
+}
+
+canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.yt-live-chat-ticker-paid-message-item-renderer[hidden] {
+  display: none !important;
+}
+
+yt-live-chat-ticker-paid-message-item-renderer {
+  display: inline-block;
+  font-size: 14px;
+  outline: none;
+  transition: width 0.2s;
+  vertical-align: top;
+  cursor: pointer;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+#container.yt-live-chat-ticker-paid-message-item-renderer {
+  border-radius: 999px;
+  padding: 4px;
+}
+
+yt-live-chat-ticker-paid-message-item-renderer.sliding-down #container.yt-live-chat-ticker-paid-message-item-renderer {
+  opacity: 0.5;
+  transform: translateY(44px);
+  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0.0, 1, 1);
+}
+
+yt-live-chat-ticker-paid-message-item-renderer.collapsing {
+  margin-right: 0;
+  transition: margin-right 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+yt-live-chat-ticker-paid-message-item-renderer[dimmed] {
+  opacity: 0.5;
+}
+
+yt-img-shadow.yt-live-chat-ticker-paid-message-item-renderer {
+  margin-right: -4px;
+  overflow: hidden;
+  border-radius: 50%;
+}
+
+#content.yt-live-chat-ticker-paid-message-item-renderer {
+  height: 24px;
+  display: flex;
+  -ms-flex-direction: row;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+#text.yt-live-chat-ticker-paid-message-item-renderer {
+  margin: 0 8px;
+  font-weight: 500;
+}
+
+yt-live-chat-ticker-paid-message-item-renderer[is-deleted] #author-photo.yt-live-chat-ticker-paid-message-item-renderer {
+  display: none;
+}
+</style>
diff --git a/frontend/src/components/ChatRenderer/constants.js b/frontend/src/components/ChatRenderer/constants.js
index bc04ca0..dce1769 100644
--- a/frontend/src/components/ChatRenderer/constants.js
+++ b/frontend/src/components/ChatRenderer/constants.js
@@ -1,3 +1,4 @@
+export const AUTHRO_TYPE_NORMAL = 0
 export const AUTHRO_TYPE_MEMBER = 1
 export const AUTHRO_TYPE_ADMIN = 2
 export const AUTHRO_TYPE_OWNER = 3
@@ -15,3 +16,103 @@ export const GUARD_LEVEL_TO_TEXT = [
   '提督',
   '舰长'
 ]
+
+export const MESSAGE_TYPE_TEXT = 0
+export const MESSAGE_TYPE_MEMBER = 1
+export const MESSAGE_TYPE_GIFT = 2
+
+export const PRICE_CONFIGS = [
+  { // $100红
+    price: 1245, // >= 1245，小电视飞船
+    colors: {
+      contentBg: 'rgba(230,33,23,1)',
+      headerBg: 'rgba(208,0,0,1)',
+      header: 'rgba(255,255,255,1)',
+      authorName: 'rgba(255,255,255,0.701961)',
+      time: 'rgba(255,255,255,0.501961)',
+      content: 'rgba(255,255,255,1)'
+    },
+    pinTime: 60
+  },
+  { // $50品红
+    price: 450, // 450~1245，摩天大楼
+    colors: {
+      contentBg: 'rgba(233,30,99,1)',
+      headerBg: 'rgba(194,24,91,1)',
+      header: 'rgba(255,255,255,1)',
+      authorName: 'rgba(255,255,255,0.701961)',
+      time: 'rgba(255,255,255,0.501961)',
+      content: 'rgba(255,255,255,1)'
+    },
+    pinTime: 30
+  },
+  { // $20橙
+    price: 100, // 100~450，节奏风暴、天空之翼
+    colors: {
+      contentBg: 'rgba(245,124,0,1)',
+      headerBg: 'rgba(230,81,0,1)',
+      header: 'rgba(255,255,255,0.87451)',
+      authorName: 'rgba(255,255,255,0.701961)',
+      time: 'rgba(255,255,255,0.501961)',
+      content: 'rgba(255,255,255,0.87451)'
+    },
+    pinTime: 10
+  },
+  { // $10黄
+    price: 52, // 52~100，疯狂打call
+    colors: {
+      contentBg: 'rgba(255,202,40,1)',
+      headerBg: 'rgba(255,179,0,1)',
+      header: 'rgba(0,0,0,0.87451)',
+      authorName: 'rgba(0,0,0,0.541176)',
+      time: 'rgba(0,0,0,0.501961)',
+      content: 'rgba(0,0,0,0.87451)'
+    },
+    pinTime: 5
+  },
+  { // $5绿
+    price: 28, // 28~52，礼花
+    colors: {
+      contentBg: 'rgba(29,233,182,1)',
+      headerBg: 'rgba(0,191,165,1)',
+      header: 'rgba(0,0,0,1)',
+      authorName: 'rgba(0,0,0,0.541176)',
+      time: 'rgba(0,0,0,0.501961)',
+      content: 'rgba(0,0,0,1)'
+    },
+    pinTime: 2
+  },
+  { // $2浅蓝
+    price: 9.9, // 9.9~28，B坷垃
+    colors: {
+      contentBg: 'rgba(0,229,255,1)',
+      headerBg: 'rgba(0,184,212,1)',
+      header: 'rgba(0,0,0,1)',
+      authorName: 'rgba(0,0,0,0.701961)',
+      time: 'rgba(0,0,0,0.501961)',
+      content: 'rgba(0,0,0,1)'
+    },
+    pinTime: 0
+  },
+  { // $1蓝
+    price: 0, // 0~9.9，丢人
+    colors: {
+      contentBg: 'rgba(30,136,229,1)',
+      headerBg: 'rgba(21,101,192,1)',
+      header: 'rgba(255,255,255,1)',
+      authorName: 'rgba(255,255,255,0.701961)',
+      time: 'rgba(255,255,255,0.501961)',
+      content: 'rgba(255,255,255,1)'
+    },
+    pinTime: 0
+  }
+]
+
+export function getPriceConfig (price) {
+  for (const config of PRICE_CONFIGS) {
+    if (price >= config.price) {
+      return config
+    }
+  }
+  return PRICE_CONFIGS[PRICE_CONFIGS.length - 1]
+}
diff --git a/frontend/src/components/ChatRenderer/index.vue b/frontend/src/components/ChatRenderer/index.vue
index ad9a519..a2b1c16 100644
--- a/frontend/src/components/ChatRenderer/index.vue
+++ b/frontend/src/components/ChatRenderer/index.vue
@@ -1,31 +1,18 @@
 <template>
   <yt-live-chat-renderer class="style-scope yt-live-chat-app" style="--scrollbar-width:11px;" hide-timestamps>
-    <!-- <yt-live-chat-ticker-renderer>
-      <yt-live-chat-ticker-paid-message-item-renderer style="background-color: rgba(0,184,212,1);">
-        <div id="content">
-          <span id="fake-avatar"></span>
-          <span>$5.00</span>
-        </div>
-      </yt-live-chat-ticker-paid-message-item-renderer>
-      <yt-live-chat-ticker-paid-message-item-renderer style="background-color: rgba(208,0,0,1);">
-        <div id="content">
-          <span id="fake-avatar"></span>
-          <span>$500.00</span>
-        </div>
-      </yt-live-chat-ticker-paid-message-item-renderer>
-    </yt-live-chat-ticker-renderer> -->
+    <ticker class="style-scope yt-live-chat-renderer" :messages="paidMessages"></ticker>
     <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" @scroll="onScroll">
         <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"
+              <text-message :key="message.id" v-if="message.type === MESSAGE_TYPE_TEXT"
                 class="style-scope yt-live-chat-item-list-renderer"
                 :avatarUrl="message.avatarUrl" :time="message.time" :authorName="message.authorName"
                 :authorType="message.authorType" :content="message.content" :privilegeType="message.privilegeType"
                 :repeated="message.repeated"
               ></text-message>
-              <legacy-paid-message :key="message.id" v-else-if="message.type == 1"
+              <legacy-paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_MEMBER"
                 class="style-scope yt-live-chat-item-list-renderer"
                 :avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
                 :time="message.time"
@@ -44,18 +31,22 @@
 </template>
 
 <script>
+import Ticker from './Ticker.vue'
 import TextMessage from './TextMessage.vue'
 import LegacyPaidMessage from './LegacyPaidMessage.vue'
 import PaidMessage from './PaidMessage.vue'
+import * as constants from './constants'
 
 export default {
   name: 'ChatRenderer',
   components: {
+    Ticker,
     TextMessage,
     LegacyPaidMessage,
     PaidMessage
   },
   props: {
+    paidMessages: Array,
     messages: Array,
     css: String
   },
@@ -63,6 +54,10 @@ export default {
     let styleElement = document.createElement('style')
     document.head.appendChild(styleElement)
     return {
+      MESSAGE_TYPE_TEXT: constants.MESSAGE_TYPE_TEXT,
+      MESSAGE_TYPE_MEMBER: constants.MESSAGE_TYPE_MEMBER,
+      MESSAGE_TYPE_GIFT: constants.MESSAGE_TYPE_GIFT,
+
       styleElement,
       canAutoScroll: true
     }
diff --git a/frontend/src/views/Room.vue b/frontend/src/views/Room.vue
index 51c7eee..424418e 100644
--- a/frontend/src/views/Room.vue
+++ b/frontend/src/views/Room.vue
@@ -1,10 +1,11 @@
 <template>
-  <chat-renderer :messages="messages" :css="config.css"></chat-renderer>
+  <chat-renderer :paidMessages="paidMessages" :messages="messages" :css="config.css"></chat-renderer>
 </template>
 
 <script>
 import config from '@/api/config'
 import ChatRenderer from '@/components/ChatRenderer'
+import * as constants from '@/components/ChatRenderer/constants'
 
 const COMMAND_JOIN_ROOM = 0
 const COMMAND_ADD_TEXT = 1
@@ -27,7 +28,8 @@ export default {
       messagesBufferTimerId: null,
       nextId: 0,
       messagesBuffer: [], // 暂时不显示的消息，可能会丢弃
-      messages: [] // 正在显示的消息
+      messages: [], // 正在显示的消息
+      paidMessages: []
     }
   },
   async created() {
@@ -84,7 +86,7 @@ export default {
           break
         }
         message = {
-          type: 0, // TextMessage
+          type: constants.MESSAGE_TYPE_TEXT,
           avatarUrl: data.avatarUrl,
           time: `${time.getMinutes()}:${time.getSeconds()}`,
           authorName: data.authorName,
@@ -102,7 +104,7 @@ export default {
         if (price < this.config.minGiftPrice) // 丢人
           break
         message = {
-          type: 2, // PaidMessage
+          type: constants.MESSAGE_TYPE_GIFT,
           avatarUrl: data.avatarUrl,
           authorName: data.authorName,
           price: price,
@@ -116,7 +118,7 @@ export default {
           break
         }
         message = {
-          type: 1, // LegacyPaidMessage
+          type: constants.MESSAGE_TYPE_MEMBER,
           avatarUrl: data.avatarUrl,
           time: `${time.getMinutes()}:${time.getSeconds()}`,
           authorName: data.authorName,
@@ -180,7 +182,11 @@ export default {
     },
     addMessageShow(message) {
       message.id = this.nextId++
+      message.addTime = new Date()
       this.messages.push(message)
+      if (message.type !== constants.MESSAGE_TYPE_TEXT) {
+        this.paidMessages.unshift(message)
+      }
       // 防止同时添加和删除项目时所有的项目重新渲染 https://github.com/vuejs/vue/issues/6857
       this.$nextTick(() => {
         if (this.messages.length > 50) {
@@ -190,9 +196,15 @@ export default {
     },
     handleMessagesBuffer() {
       // 3秒内未发出则丢弃
+      let i
       let curTime = new Date()
-      while (this.messagesBuffer.length > 0 && curTime - this.messagesBuffer[0].addTime > 3 * 1000) {
-        this.messagesBuffer.shift()
+      for (i = 0; i < this.messagesBuffer.length; i++) {
+        if (curTime - this.messagesBuffer[i].addTime <= 3 * 1000) {
+          break
+        }
+      }
+      if (i > 0) {
+        this.messages.splice(0, Math.min(i, this.messagesBuffer.length))
       }
       if (this.messagesBuffer.length <= 0) {
         return
diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue
index f3e9a84..ea07a52 100644
--- a/frontend/src/views/StyleGenerator/index.vue
+++ b/frontend/src/views/StyleGenerator/index.vue
@@ -190,7 +190,7 @@
     <el-col :span="12">
       <div id="example-container">
         <div id="fakebody">
-          <chat-renderer :messages="messages" :css="exampleCss"></chat-renderer>
+          <chat-renderer :paidMessages="examplePaidMessages" :messages="messages" :css="exampleCss"></chat-renderer>
         </div>
       </div>
     </el-col>
@@ -208,18 +208,20 @@ import * as constants from '@/components/ChatRenderer/constants'
 let time = new Date()
 let textMessageTemplate = {
   id: 0,
-  type: 0, // TextMessage
+  addTime: time,
+  type: constants.MESSAGE_TYPE_TEXT,
   avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
   time: `${time.getMinutes()}:${time.getSeconds()}`,
   authorName: '',
-  authorType: 0,
+  authorType: constants.AUTHRO_TYPE_NORMAL,
   content: '',
   privilegeType: 0,
   repeated: 1
 }
 let legacyPaidMessageTemplate = {
   id: 0,
-  type: 1, // LegacyPaidMessage
+  addTime: time,
+  type: constants.MESSAGE_TYPE_MEMBER,
   avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
   time: `${time.getMinutes()}:${time.getSeconds()}`,
   authorName: '',
@@ -228,7 +230,8 @@ let legacyPaidMessageTemplate = {
 }
 let paidMessageTemplate = {
   id: 0,
-  type: 2, // PaidMessage
+  addTime: time,
+  type: constants.MESSAGE_TYPE_GIFT,
   avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
   authorName: '',
   price: 0,
@@ -282,6 +285,12 @@ const EXAMPLE_MESSAGES = [
     content: 'Sent 礼花x1'
   }
 ]
+let examplePaidMessages = []
+for (let message of EXAMPLE_MESSAGES) {
+  if (message.type !== constants.MESSAGE_TYPE_TEXT) {
+    examplePaidMessages.push(message)
+  }
+}
 
 export default {
   name: 'StyleGenerator',
@@ -296,7 +305,8 @@ export default {
       form: {...config},
       result,
       exampleCss: result.replace(/^body\b/gm, '#fakebody'),
-      messages: EXAMPLE_MESSAGES
+      messages: EXAMPLE_MESSAGES,
+      examplePaidMessages
     }
   },
   computed: {