样式生成器预览内容自动生成

frontend/src/components/ChatRenderer/index.vue

@@ -73,7 +73,6 @@ export default {
     PaidMessage
   },
   props: {
-    css: String,
     maxNumber: {
       type: Number,
       default: chatConfig.DEFAULT_CONFIG.maxNumber
@@ -84,15 +83,12 @@ export default {
     }
   },
   data() {
-    let styleElement = document.createElement('style')
-    document.head.appendChild(styleElement)
     return {
       MESSAGE_TYPE_TEXT: constants.MESSAGE_TYPE_TEXT,
       MESSAGE_TYPE_GIFT: constants.MESSAGE_TYPE_GIFT,
       MESSAGE_TYPE_MEMBER: constants.MESSAGE_TYPE_MEMBER,
       MESSAGE_TYPE_SUPER_CHAT: constants.MESSAGE_TYPE_SUPER_CHAT,
 
-      styleElement,
       messages: [],                        // 显示的消息
       paidMessages: [],                    // 固定在上方的消息
 
@@ -122,19 +118,14 @@ export default {
     }
   },
   watch: {
-    css(val) {
-      this.styleElement.innerText = val
-    },
     canScrollToBottom(val) {
       this.cantScrollStartTime = val ? null : new Date()
     }
   },
   mounted() {
-    this.styleElement.innerText = this.css
     this.scrollToBottom()
   },
   beforeDestroy() {
-    document.head.removeChild(this.styleElement)
     if (this.emitSmoothedMessageTimerId) {
       window.clearTimeout(this.emitSmoothedMessageTimerId)
       this.emitSmoothedMessageTimerId = null

frontend/src/main.js

@@ -76,7 +76,7 @@ const router = new VueRouter({
         {path: 'help', name: 'help', component: Help}
       ]
     },
-    {path: '/room/test', name: 'test_room', component: Room, props: {roomId: null}},
+    {path: '/room/test', name: 'test_room', component: Room},
     {
       path: '/room/:roomId',
       name: 'room',
@@ -86,7 +86,7 @@ const router = new VueRouter({
         if (isNaN(roomId)) {
           roomId = null
         }
-        return {roomId}
+        return {roomId, strConfig: route.query}
       }
     },
     {path: '*', component: NotFound}

frontend/src/views/Room.vue

@@ -18,7 +18,14 @@ export default {
     ChatRenderer
   },
   props: {
-    roomId: Number
+    roomId: {
+      type: Number,
+      default: null
+    },
+    strConfig: {
+      type: Object,
+      default: () => ({})
+    }
   },
   data() {
     return {
@@ -58,9 +65,9 @@ export default {
     initConfig() {
       let cfg = {}
       // 留空的使用默认值
-      for (let i in this.$route.query) {
+      for (let i in this.strConfig) {
-        if (this.$route.query[i] !== '') {
+        if (this.strConfig[i] !== '') {
-          cfg[i] = this.$route.query[i]
+          cfg[i] = this.strConfig[i]
         }
       }
       cfg = mergeConfig(cfg, chatConfig.DEFAULT_CONFIG)
@@ -101,6 +108,13 @@ export default {
       this.chatClient.start()
     },
 
+    start() {
+      this.chatClient.start()
+    },
+    stop() {
+      this.chatClient.stop()
+    },
+
     onAddText(data) {
       if (!this.config.showDanmaku || !this.filterTextMessage(data) || this.mergeSimilarText(data.content)) {
         return

frontend/src/views/StyleGenerator/Legacy.vue

@@ -340,9 +340,6 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-form-item>
-          <el-button type="primary" @click="$emit('playAnimation')">{{$t('stylegen.playAnimation')}}</el-button>
-        </el-form-item>
       </el-card>
     </el-form>
   </div>

frontend/src/views/StyleGenerator/LineLike.vue

@@ -290,9 +290,6 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-form-item>
-          <el-button type="primary" @click="$emit('playAnimation')">{{$t('stylegen.playAnimation')}}</el-button>
-        </el-form-item>
       </el-card>
     </el-form>
   </div>

frontend/src/views/StyleGenerator/index.vue

@@ -3,10 +3,10 @@
     <el-col :sm="24" :md="16">
       <el-tabs v-model="activeTab">
         <el-tab-pane :label="$t('stylegen.legacy')" name="legacy">
-          <legacy ref="legacy" v-model="subComponentResults.legacy" @playAnimation="playAnimation"></legacy>
+          <legacy ref="legacy" v-model="subComponentResults.legacy"></legacy>
         </el-tab-pane>
         <el-tab-pane :label="$t('stylegen.lineLike')" name="lineLike">
-          <line-like ref="lineLike" v-model="subComponentResults.lineLike" @playAnimation="playAnimation"></line-like>
+          <line-like ref="lineLike" v-model="subComponentResults.lineLike"></line-like>
         </el-tab-pane>
       </el-tabs>
 
@@ -26,12 +26,17 @@
 
     <el-col :sm="24" :md="8">
       <div :style="{position: 'relative', top: `${exampleTop}px`}">
-        <p>
+        <el-form inline style="height: 40px">
+          <el-form-item :label="$t('stylegen.playAnimation')">
+            <el-switch v-model="playAnimation" @change="onPlayAnimationChange"></el-switch>
+          </el-form-item>
+          <el-form-item :label="$t('stylegen.backgrounds')" style="margin-left: 20px">
             <el-switch v-model="exampleBgLight" :active-text="$t('stylegen.light')" :inactive-text="$t('stylegen.dark')"></el-switch>
-        </p>
+          </el-form-item>
+        </el-form>
         <div id="example-container" :class="{light: exampleBgLight}">
           <div id="fakebody">
-            <chat-renderer ref="renderer" :css="exampleCss"></chat-renderer>
+            <room ref="room"></room>
           </div>
         </div>
       </div>
@@ -44,103 +49,16 @@ import _ from 'lodash'
 
 import Legacy from './Legacy'
 import LineLike from './LineLike'
-import ChatRenderer from '@/components/ChatRenderer'
+import Room from '@/views/Room'
-import * as constants from '@/components/ChatRenderer/constants'
-
-let time = new Date()
-let textMessageTemplate = {
-  id: 0,
-  addTime: time,
-  type: constants.MESSAGE_TYPE_TEXT,
-  avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
-  time: time,
-  authorName: '',
-  authorType: constants.AUTHRO_TYPE_NORMAL,
-  content: '',
-  privilegeType: 0,
-  repeated: 1,
-  translation: ''
-}
-let membershipItemTemplate = {
-  id: 0,
-  addTime: time,
-  type: constants.MESSAGE_TYPE_MEMBER,
-  avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
-  time: time,
-  authorName: '',
-  privilegeType: 3,
-  title: 'New member'
-}
-let paidMessageTemplate = {
-  id: 0,
-  addTime: time,
-  type: constants.MESSAGE_TYPE_SUPER_CHAT,
-  avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
-  authorName: '',
-  price: 0,
-  time: time,
-  content: '',
-  translation: ''
-}
-let nextId = 0
-const EXAMPLE_MESSAGES = [
-  {
-    ...textMessageTemplate,
-    id: (nextId++).toString(),
-    authorName: 'mob路人',
-    content: '8888888888',
-    repeated: 12
-  },
-  {
-    ...textMessageTemplate,
-    id: (nextId++).toString(),
-    authorName: 'member舰长',
-    authorType:  constants.AUTHRO_TYPE_MEMBER,
-    content: '草',
-    privilegeType: 3,
-    repeated: 3
-  },
-  {
-    ...textMessageTemplate,
-    id: (nextId++).toString(),
-    authorName: 'admin房管',
-    authorType: constants.AUTHRO_TYPE_ADMIN,
-    content: 'kksk'
-  },
-  {
-    ...membershipItemTemplate,
-    id: (nextId++).toString(),
-    authorName: 'xfgryujk'
-  },
-  {
-    ...paidMessageTemplate,
-    id: (nextId++).toString(),
-    authorName: '小陈',
-    price: 66600,
-    content: 'Sent 小电视飞船x100'
-  },
-  {
-    ...textMessageTemplate,
-    id: (nextId++).toString(),
-    authorName: 'streamer主播',
-    authorType: constants.AUTHRO_TYPE_OWNER,
-    content: '老板大气，老板身体健康'
-  },
-  {
-    ...paidMessageTemplate,
-    id: (nextId++).toString(),
-    authorName: '叔叔 / おじさん',
-    price: 30,
-    content: '言いたいことがあるんだよ！'
-  }
-]
 
 export default {
   name: 'StyleGenerator',
   components: {
-    Legacy, LineLike, ChatRenderer
+    Legacy, LineLike, Room
   },
   data() {
+    let styleElement = document.createElement('style')
+    document.head.appendChild(styleElement)
     // 数据流：
     //                                                   输入框 --\
     // 子组件 -> subComponentResults -> subComponentResult -> inputResult -> 防抖延迟0.5s后 -> debounceResult -> exampleCss
@@ -156,7 +74,9 @@ export default {
       // 防抖后延迟变化的结果
       debounceResult: '',
 
+      styleElement,
       exampleTop: 0,
+      playAnimation: true,
       exampleBgLight: false
     }
   },
@@ -176,17 +96,20 @@ export default {
     },
     inputResult: _.debounce(function(val) {
       this.debounceResult = val
-    }, 500)
+    }, 500),
+    exampleCss(val) {
+      this.styleElement.innerText = val
+    }
   },
   mounted() {
     this.debounceResult = this.inputResult = this.subComponentResult
 
-    this.$refs.renderer.addMessages(EXAMPLE_MESSAGES)
-
     this.$parent.$el.addEventListener('scroll', this.onParentScroll)
   },
   beforeDestroy() {
     this.$parent.$el.removeEventListener('scroll', this.onParentScroll)
+
+    document.head.removeChild(this.styleElement)
   },
   methods: {
     onParentScroll(event) {
@@ -196,10 +119,12 @@ export default {
         this.exampleTop = event.target.scrollTop
       }
     },
-    async playAnimation() {
+    onPlayAnimationChange(value) {
-      this.$refs.renderer.clearMessages()
+      if (value) {
-      await this.$nextTick()
+        this.$refs.room.start()
-      this.$refs.renderer.addMessages(EXAMPLE_MESSAGES)
+      } else {
+        this.$refs.room.stop()
+      }
     },
     copyResult() {
       this.$refs.result.select()