时间补齐2位

frontend/src/components/ChatRenderer/LegacyPaidMessage.vue

@@ -10,7 +10,7 @@
           <div id="event-text" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{title}}</div>
           <div id="detail-text" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{content}}</div>
         </div>
-        <div id="timestamp" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{time}}</div>
+        <div id="timestamp" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{timeText}}</div>
       </div>
     </div>
     <div id="inline-action-button-container" class="style-scope yt-live-chat-legacy-paid-message-renderer" aria-hidden="true">
@@ -21,6 +21,7 @@
 
 <script>
 import ImgShadow from './ImgShadow.vue'
+import utils from '@/utils'
 
 export default {
   name: 'LegacyPaidMessage',
@@ -32,7 +33,12 @@ export default {
     authorName: String,
     title: String,
     content: String,
-    time: String
+    time: Date
+  },
+  computed: {
+    timeText() {
+      return utils.getTimeTextMinSec(this.time)
+    }
   }
 }
 </script>

frontend/src/components/ChatRenderer/PaidMessage.vue

@@ -18,7 +18,7 @@
             <div id="author-name" class="style-scope yt-live-chat-paid-message-renderer">{{authorName}}</div>
             <div id="purchase-amount" class="style-scope yt-live-chat-paid-message-renderer">{{priceText}}</div>
           </div>
-          <span id="timestamp" class="style-scope yt-live-chat-paid-message-renderer">{{time}}</span>
+          <span id="timestamp" class="style-scope yt-live-chat-paid-message-renderer">{{timeText}}</span>
         </div>
       </div>
       <div id="content" class="style-scope yt-live-chat-paid-message-renderer">
@@ -33,7 +33,7 @@
 <script>
 import ImgShadow from './ImgShadow.vue'
 import * as constants from './constants'
-import {formatCurrency} from '@/utils'
+import utils from '@/utils'
 
 export default {
   name: 'PaidMessage',
@@ -44,7 +44,7 @@ export default {
     avatarUrl: String,
     authorName: String,
     price: Number, // 价格，人民币
-    time: String,
+    time: Date,
     content: String
   },
   computed: {
@@ -52,7 +52,10 @@ export default {
       return constants.getPriceConfig(this.price).colors
     },
     priceText() {
-      return 'CN¥' + formatCurrency(this.price)
+      return 'CN¥' + utils.formatCurrency(this.price)
+    },
+    timeText() {
+      return utils.getTimeTextMinSec(this.time)
     }
   }
 }

frontend/src/components/ChatRenderer/TextMessage.vue

@@ -4,7 +4,7 @@
       :imgUrl="avatarUrl"
     ></img-shadow>
     <div id="content" class="style-scope yt-live-chat-text-message-renderer">
-      <span id="timestamp" class="style-scope yt-live-chat-text-message-renderer">{{time}}</span>
+      <span id="timestamp" class="style-scope yt-live-chat-text-message-renderer">{{timeText}}</span>
       <yt-live-chat-author-chip class="style-scope yt-live-chat-text-message-renderer">
         <span id="author-name" dir="auto" class="style-scope yt-live-chat-author-chip" :type="authorTypeText">
           {{authorName}}
@@ -29,6 +29,7 @@
 import ImgShadow from './ImgShadow.vue'
 import AuthorBadge from './AuthorBadge.vue'
 import * as constants from './constants'
+import utils from '@/utils'
 
 const REPEATED_MARK_COLOR_START = [64, 158, 255]
 const REPEATED_MARK_COLOR_END = [245, 108, 108]
@@ -41,7 +42,7 @@ export default {
   },
   props: {
     avatarUrl: String,
-    time: String,
+    time: Date,
     authorName: String,
     authorType: Number,
     content: String,
@@ -49,6 +50,9 @@ export default {
     repeated: Number
   },
   computed: {
+    timeText() {
+      return utils.getTimeTextMinSec(this.time)
+    },
     authorTypeText() {
       return constants.AUTHOR_TYPE_TO_TEXT[this.authorType]
     },

frontend/src/utils.js

@@ -12,7 +12,14 @@ export function formatCurrency (price) {
   }).format(price)
 }
 
+export function getTimeTextMinSec (date) {
+  let min = ('00' + date.getMinutes()).slice(-2)
+  let sec = ('00' + date.getSeconds()).slice(-2)
+  return `${min}:${sec}`
+}
+
 export default {
   mergeConfig,
-  formatCurrency
+  formatCurrency,
+  getTimeTextMinSec
 }

frontend/src/views/Room.vue

@@ -36,8 +36,8 @@ export default {
     // 开发时使用localhost:12450
     const url = process.env.NODE_ENV === 'development' ? 'ws://localhost:12450/chat' : `ws://${window.location.host}/chat`
     this.websocket = new WebSocket(url)
-    this.websocket.onopen = this.onWsOpen.bind(this)
-    this.websocket.onmessage = this.onWsMessage.bind(this)
+    this.websocket.onopen = this.onWsOpen
+    this.websocket.onmessage = this.onWsMessage
 
     if (this.$route.query.config_id) {
       try {
@@ -88,7 +88,7 @@ export default {
         message = {
           type: constants.MESSAGE_TYPE_TEXT,
           avatarUrl: data.avatarUrl,
-          time: `${time.getMinutes()}:${time.getSeconds()}`,
+          time: time,
           authorName: data.authorName,
           authorType: data.authorType,
           content: data.content,
@@ -108,7 +108,7 @@ export default {
           avatarUrl: data.avatarUrl,
           authorName: data.authorName,
           price: price,
-          time: `${time.getMinutes()}:${time.getSeconds()}`,
+          time: time,
           content: `Sent ${data.giftName}x${data.giftNum}`
         }
         break
@@ -120,7 +120,7 @@ export default {
         message = {
           type: constants.MESSAGE_TYPE_MEMBER,
           avatarUrl: data.avatarUrl,
-          time: `${time.getMinutes()}:${time.getSeconds()}`,
+          time: time,
           authorName: data.authorName,
           title: 'NEW MEMBER!',
           content: `Welcome ${data.authorName}!`

frontend/src/views/StyleGenerator/index.vue

@@ -211,7 +211,7 @@ let textMessageTemplate = {
   addTime: time,
   type: constants.MESSAGE_TYPE_TEXT,
   avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
-  time: `${time.getMinutes()}:${time.getSeconds()}`,
+  time: time,
   authorName: '',
   authorType: constants.AUTHRO_TYPE_NORMAL,
   content: '',
@@ -223,7 +223,7 @@ let legacyPaidMessageTemplate = {
   addTime: time,
   type: constants.MESSAGE_TYPE_MEMBER,
   avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
-  time: `${time.getMinutes()}:${time.getSeconds()}`,
+  time: time,
   authorName: '',
   title: 'NEW MEMBER!',
   content: ''
@@ -235,7 +235,7 @@ let paidMessageTemplate = {
   avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
   authorName: '',
   price: 0,
-  time: `${time.getMinutes()}:${time.getSeconds()}`,
+  time: time,
   content: ''
 }
 let nextId = 0