样式生成器支持设置生成消息速度、类型

frontend/src/api/chat/ChatClientTest.js

@@ -130,6 +130,7 @@ const SC_PRICES = [
 const MESSAGE_GENERATORS = [
   // 文字
   {
+    filterType: 'text',  // 取值和样式生成器中的消息类型设置相同
     weight: 20,
     value() {
       return {
@@ -150,6 +151,7 @@ const MESSAGE_GENERATORS = [
   },
   // 表情
   {
+    filterType: 'emoticon',
     weight: 5,
     value() {
       return {
@@ -168,6 +170,7 @@ const MESSAGE_GENERATORS = [
   },
   // 礼物
   {
+    filterType: 'gift',
     weight: 1,
     value() {
       return {
@@ -183,6 +186,7 @@ const MESSAGE_GENERATORS = [
   },
   // SC
   {
+    filterType: 'superChat',
     weight: 3,
     value() {
       return {
@@ -200,6 +204,7 @@ const MESSAGE_GENERATORS = [
   },
   // 新舰长
   {
+    filterType: 'member',
     weight: 1,
     value() {
       let privilegeType = randInt(1, 3)
@@ -252,6 +257,12 @@ export default class ChatClientTest {
   constructor() {
     this.msgHandler = chat.getDefaultMsgHandler()
 
+    this.msgConfig = {
+      speed: null,
+      types: {},
+    }
+    this.msgRandomNodes = MESSAGE_GENERATORS
+
     this.timerId = null
   }
 
@@ -266,13 +277,36 @@ export default class ChatClientTest {
     }
   }
 
+  setMsgConfig(msgConfig) {
+    if (this.msgConfig === msgConfig) {
+      return
+    }
+    let oldMsgConfig = this.msgConfig
+
+    if (msgConfig.speed < 0.1) {
+      msgConfig.speed = 0.1
+    }
+    this.msgConfig = msgConfig
+
+    if (msgConfig.speed !== oldMsgConfig.speed && this.timerId) {
+      this.refreshTimer()
+    }
+    this.msgRandomNodes = MESSAGE_GENERATORS.filter(node => msgConfig.types[node.filterType])
+  }
+
   refreshTimer() {
-    // 模仿B站的消息间隔模式
     let sleepTime
-    if (randInt(0, 4) == 0) {
-      sleepTime = randInt(1000, 2000)
+    if (this.msgConfig.speed !== null) {
+      let avgTime = 1000 / this.msgConfig.speed
+      sleepTime = randInt(avgTime - 100, avgTime + 100)
+      sleepTime = Math.max(sleepTime, 0)
     } else {
-      sleepTime = randInt(0, 400)
+      // 模仿B站的消息间隔模式
+      if (randInt(0, 4) == 0) {
+        sleepTime = randInt(1000, 2000)
+      } else {
+        sleepTime = randInt(0, 400)
+      }
     }
     if (this.timerId) {
       window.clearTimeout(this.timerId)
@@ -283,7 +317,10 @@ export default class ChatClientTest {
   onTimeout() {
     this.refreshTimer()
 
-    let { type, message } = randomChoose(MESSAGE_GENERATORS)()
+    if (this.msgRandomNodes.length === 0) {
+      return
+    }
+    let { type, message } = randomChoose(this.msgRandomNodes)()
     switch (type) {
     case constants.MESSAGE_TYPE_TEXT:
       this.msgHandler.onAddText(message)

frontend/src/lang/en.js

@@ -27,7 +27,7 @@ export default {
     authCode: 'Identity code',
     howToGetAuthCode: 'How to get identity code',
     showDanmaku: 'Show messages',
-    showGift: 'Show Super Chats',
+    showGift: 'Show Super Chats and memberships',
     showGiftName: 'Show gift name',
     mergeSimilarDanmaku: 'Merge similar messages',
     mergeGift: 'Merge gifts',
@@ -99,6 +99,15 @@ export default {
     legacy: 'Classic',
     lineLike: 'LINE-like',
 
+    playAnimation: 'Generate messages',
+    messageSpeed: 'Messages per second',
+    messageTypes: 'Message types',
+    typeText: 'Text',
+    typeEmoticon: 'Emote',
+    typeGift: 'Gift',
+    typeSuperChat: 'Super Chat',
+    typeMember: 'Membership',
+
     light: 'light',
     dark: 'dark',
 
@@ -166,7 +175,6 @@ export default {
     scContentLineFontSize: 'Super Chat content font size',
     scContentWeight: 'Super Chat content font weight',
     scContentLineColor: 'Super Chat content color',
-    showNewMemberBg: 'Show new member background',
     showScTicker: 'Show Super Chat ticker',
     showOtherThings: 'Show everything other than Super Chat ticker',
 
@@ -178,7 +186,6 @@ export default {
     fadeOutTime: 'Fade out time (miliseconds)',
     slide: 'Slide',
     reverseSlide: 'Reverse slide',
-    playAnimation: 'Play animation',
 
     result: 'Result CSS',
     copy: 'Copy',

frontend/src/lang/ja.js

@@ -27,7 +27,7 @@ export default {
     authCode: 'アイデンティティコード',
     howToGetAuthCode: 'アイデンティティコードの取得方法',
     showDanmaku: 'コメントを表示する',
-    showGift: 'スーパーチャットと新メンバーを表示する',
+    showGift: 'スーパーチャットと新規メンバーを表示する',
     showGiftName: 'ギフト名を表示する',
     mergeSimilarDanmaku: '同じコメントを合併する',
     mergeGift: 'ギフトを合併する',
@@ -99,6 +99,15 @@ export default {
     legacy: '古典',
     lineLike: 'LINE風',
 
+    playAnimation: 'メッセージを生成する',
+    messageSpeed: 'メッセージ/秒',
+    messageTypes: 'メッセージタイプ',
+    typeText: 'テキスト',
+    typeEmoticon: 'スタンプ',
+    typeGift: 'ギフト',
+    typeSuperChat: 'スーパーチャット',
+    typeMember: '新規メンバー',
+
     light: 'ライト',
     dark: 'ダーク',
 
@@ -153,7 +162,7 @@ export default {
     moderatorMessageBgColor: '管理者コメント背景色',
     memberMessageBgColor: 'メンバーコメント背景色',
 
-    scAndNewMember: 'スーパーチャット、新メンバー',
+    scAndNewMember: 'スーパーチャット、新規メンバー',
     firstLineFont: '1行目のフォント',
     firstLineFontSize: '1行目のフォントサイズ',
     firstLineWeight: '1行目のフォントの太さ',
@@ -166,7 +175,6 @@ export default {
     scContentLineFontSize: 'スーパーチャットコンテンツフォントサイズ',
     scContentWeight: 'スーパーチャットコンテンツフォントの太さ',
     scContentLineColor: 'スーパーチャットコンテンツライン色',
-    showNewMemberBg: '新メンバーの背景を表示する',
     showScTicker: 'スーパーチャットチカーの表示',
     showOtherThings: 'スーパーチャットチカー以外のコンテンツを表示します',
 
@@ -178,7 +186,6 @@ export default {
     fadeOutTime: 'フェードアウト時間（ミリ秒）',
     slide: '滑る',
     reverseSlide: '逆の滑る',
-    playAnimation: 'アニメーションを再生する',
 
     result: '結果CSS',
     copy: 'コピー',

frontend/src/lang/zh.js

@@ -97,6 +97,15 @@ export default {
     legacy: '经典',
     lineLike: '仿微信',
 
+    playAnimation: '生成消息',
+    messageSpeed: '每秒消息数',
+    messageTypes: '消息类型',
+    typeText: '文字',
+    typeEmoticon: '表情',
+    typeGift: '礼物',
+    typeSuperChat: '醒目留言',
+    typeMember: '新舰长',
+
     light: '浅色',
     dark: '深色',
 
@@ -164,7 +173,6 @@ export default {
     scContentLineFontSize: 'Super Chat内容字体尺寸',
     scContentWeight: 'Super Chat内容字体粗细',
     scContentLineColor: 'Super Chat内容颜色',
-    showNewMemberBg: '显示新舰长背景',
     showScTicker: '显示Super Chat固定栏',
     showOtherThings: '显示Super Chat固定栏之外的内容',
 
@@ -176,7 +184,6 @@ export default {
     fadeOutTime: '淡出时间（毫秒）',
     slide: '滑动',
     reverseSlide: '反向滑动',
-    playAnimation: '生成消息',
 
     result: '结果CSS',
     copy: '复制',

frontend/src/views/Room.vue

@@ -434,6 +434,11 @@ export default {
       case 'roomSetCustomStyle':
         this.customStyleElement.textContent = data.css
         break
+      case 'roomSetMessageConfig':
+        if (this.chatClient && this.chatClient.setMsgConfig) {
+          this.chatClient.setMsgConfig(data)
+        }
+        break
       case 'roomStartClient':
         if (this.chatClient) {
           this.chatClient.start()

frontend/src/views/StyleGenerator/index.vue

@@ -30,10 +30,32 @@
     <el-col :sm="24" :md="8">
       <div id="example-panel">
         <el-form inline style="line-height: 40px">
-          <el-form-item :label="$t('stylegen.playAnimation')" style="margin: 0">
+          <el-form-item :label="$t('stylegen.playAnimation')" class="example-form-item">
             <el-switch v-model="playAnimation" @change="setExampleRoomClientStart"></el-switch>
           </el-form-item>
-          <el-form-item :label="$t('stylegen.backgrounds')" style="margin: 0 0 0 30px">
+
+          <el-form-item class="example-form-item">
+            <el-popover trigger="click" width="300">
+              <el-button slot="reference" type="text" icon="el-icon-setting"></el-button>
+
+              <el-form label-position="top" size="small">
+                <el-form-item :label="$t('stylegen.messageSpeed')">
+                  <el-slider v-model="messageConfig.speed" :min="0.2" :max="11" :step="0.1"
+                    :marks="{1: '1', 3: '3', 5: '5', 10: '10'}"
+                  ></el-slider>
+                </el-form-item>
+                <el-form-item :label="$t('stylegen.messageTypes')">
+                  <el-checkbox v-model="messageConfig.types.text">{{ $t('stylegen.typeText') }}</el-checkbox>
+                  <el-checkbox v-model="messageConfig.types.emoticon">{{ $t('stylegen.typeEmoticon') }}</el-checkbox>
+                  <el-checkbox v-model="messageConfig.types.gift">{{ $t('stylegen.typeGift') }}</el-checkbox>
+                  <el-checkbox v-model="messageConfig.types.superChat">{{ $t('stylegen.typeSuperChat') }}</el-checkbox>
+                  <el-checkbox v-model="messageConfig.types.member">{{ $t('stylegen.typeMember') }}</el-checkbox>
+                </el-form-item>
+              </el-form>
+            </el-popover>
+          </el-form-item>
+
+          <el-form-item class="example-form-item">
             <el-switch v-model="exampleBgLight" :active-text="$t('stylegen.light')" :inactive-text="$t('stylegen.dark')"></el-switch>
           </el-form-item>
         </el-form>
@@ -71,6 +93,18 @@ export default {
       debounceResult: '',
 
       playAnimation: true,
+      messageConfig: {
+        // 平均每秒消息数
+        speed: 1,
+        types: {
+          // 类型见ChatClientTest MESSAGE_GENERATORS
+          text: true,
+          emoticon: true,
+          gift: true,
+          superChat: true,
+          member: true,
+        },
+      },
       exampleBgLight: true,
     }
   },
@@ -90,7 +124,13 @@ export default {
     inputResult: _.debounce(function(val) {
       this.debounceResult = val
     }, 500),
-    debounceResult: 'setExampleRoomCustomCss'
+    debounceResult: 'setExampleRoomCustomCss',
+    messageConfig: {
+      deep: true,
+      handler: _.debounce(function(val) {
+        this.setExampleRoomMessageConfig(val)
+      }, 500)
+    },
   },
   mounted() {
     this.debounceResult = this.inputResult = this.subComponentResult
@@ -119,6 +159,7 @@ export default {
       switch (type) {
       case 'stylegenExampleRoomLoad':
         this.setExampleRoomCustomCss(this.debounceResult)
+        this.setExampleRoomMessageConfig(this.messageConfig)
         this.setExampleRoomClientStart(this.playAnimation)
         break
       }
@@ -127,6 +168,9 @@ export default {
     setExampleRoomCustomCss(css) {
       this.sendMessageToExampleRoom('roomSetCustomStyle', { css })
     },
+    setExampleRoomMessageConfig(messageConfig) {
+      this.sendMessageToExampleRoom('roomSetMessageConfig', messageConfig)
+    },
     setExampleRoomClientStart(isStart) {
       this.sendMessageToExampleRoom(isStart ? 'roomStartClient' : 'roomStopClient')
     },
@@ -151,6 +195,11 @@ export default {
   }
 }
 
+.example-form-item {
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
 #example-container {
   height: calc(100vh - 150px);