缓解房间URL太长，被直播姬截断的问题

frontend/src/lang/en.js

@@ -51,6 +51,7 @@ export default {
     addEmoticon: 'Add emote',
     emoticonFileTooLarge: 'File size is too large. Max size is 1MB',
 
+    urlTooLong: 'The room URL is too long, and will be truncated by Livehime (but not by OBS)',
     roomUrl: 'Room URL',
     enterRoom: 'Enter room',
     enterTestRoom: 'Enter test room',

frontend/src/lang/ja.js

@@ -51,6 +51,7 @@ export default {
     addEmoticon: 'スタンプを追加',
     emoticonFileTooLarge: 'ファイルサイズが大きすぎます。最大サイズは1MBです',
 
+    urlTooLong: 'ルームのURLが長すぎて、直播姬によって切り詰められます（ただし、OBSでは切り詰められません）',
     roomUrl: 'ルームのURL',
     enterRoom: 'ルームに入る',
     enterTestRoom: 'テストルームに入る',

frontend/src/lang/zh.js

@@ -51,6 +51,7 @@ export default {
     addEmoticon: '添加表情',
     emoticonFileTooLarge: '文件尺寸太大，最大1MB',
 
+    urlTooLong: '房间URL太长了，会被直播姬截断（OBS不会）',
     roomUrl: '房间URL',
     enterRoom: '进入房间',
     enterTestRoom: '进入测试房间',

frontend/src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import {
-  Aside, Autocomplete, Badge, Button, ButtonGroup, Card, Col, ColorPicker, Container, Divider, Form, FormItem, Image,
+  Alert, Aside, Autocomplete, Badge, Button, ButtonGroup, Card, Col, ColorPicker, Container, Divider, Form, FormItem, Image,
   Input, Link, Main, Menu, MenuItem, Message, Option, OptionGroup, Radio, RadioGroup, Row, Select, Scrollbar,
   Slider, Submenu, Switch, Table, TableColumn, TabPane, Tabs, Tooltip
 } from 'element-ui'
@@ -20,6 +20,7 @@ axios.defaults.timeout = 10 * 1000
 
 Vue.use(VueRouter)
 // 初始化element
+Vue.use(Alert)
 Vue.use(Aside)
 Vue.use(Autocomplete)
 Vue.use(Badge)

frontend/src/views/Home.vue

@@ -4,37 +4,36 @@
       <el-form :model="form" ref="form" label-width="150px">
         <el-tabs type="border-card">
           <el-tab-pane :label="$t('home.general')">
-            <el-form-item v-if="form.roomKeyType === 1"
+            <template v-if="form.roomKeyType === 1">
-              :label="$t('home.room')" prop="roomId" :rules="[
+              <p>
-                { required: true, message: $t('home.roomIdEmpty') },
+                <el-alert :title="$t('home.useAuthCodeWarning')" type="warning" show-icon :closable="false"></el-alert>
-                { type: 'integer', min: 1, message: $t('home.roomIdInteger') }
+              </p>
-              ]"
+              <el-form-item
-            >
+                :label="$t('home.room')" prop="roomId" :rules="[
-              <el-row>
+                  { required: true, message: $t('home.roomIdEmpty') },
-                <el-col :span="6">
+                  { type: 'integer', min: 1, message: $t('home.roomIdInteger') }
-                  <el-select v-model="form.roomKeyType" style="width: 100%">
+                ]"
-                    <el-option :label="$t('home.authCode')" :value="2"></el-option>
+              >
-                    <el-option :label="$t('home.roomId')" :value="1"></el-option>
+                <el-row>
-                  </el-select>
+                  <el-col :span="6">
-                </el-col>
+                    <el-select v-model="form.roomKeyType" style="width: 100%">
-                <el-col :span="18">
+                      <el-option :label="$t('home.authCode')" :value="2"></el-option>
-                  <el-input v-model.number="form.roomId" type="number" min="1"></el-input>
+                      <el-option :label="$t('home.roomId')" :value="1"></el-option>
-                </el-col>
+                    </el-select>
-              </el-row>
+                  </el-col>
-              <el-row style="color: red">{{ $t('home.useAuthCodeWarning') }}</el-row>
+                  <el-col :span="18">
-            </el-form-item>
+                    <el-input v-model.number="form.roomId" type="number" min="1"></el-input>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </template>
 
             <el-form-item v-else-if="form.roomKeyType === 2"
               :label="$t('home.room')" prop="authCode" :rules="[
                 { required: true, message: $t('home.authCodeEmpty') },
-                { pattern: AUTH_CODE_REG, message: $t('home.authCodeFormatError') }
+                { pattern: /^[0-9A-Z]{12,14}$/, message: $t('home.authCodeFormatError') }
               ]"
             >
-              <template slot="label">{{ $t('home.room') }}
-                <router-link :to="{ name: 'help' }">
-                  <i class="el-icon-question"></i>
-                </router-link>
-              </template>
               <el-row>
                 <el-col :span="6">
                   <el-select v-model="form.roomKeyType" style="width: 100%">
@@ -193,6 +192,9 @@
     <p>
       <el-card>
         <el-form :model="form" label-width="150px">
+          <p v-if="obsRoomUrl.length > 1024">
+            <el-alert :title="$t('home.urlTooLong')" type="warning" show-icon :closable="false"></el-alert>
+          </p>
           <el-form-item :label="$t('home.roomUrl')">
             <el-input ref="roomUrlInput" readonly :value="obsRoomUrl" style="width: calc(100% - 8em); margin-right: 1em;"></el-input>
             <el-button type="primary" icon="el-icon-copy-document" @click="copyUrl"></el-button>
@@ -221,8 +223,6 @@ export default {
   name: 'Home',
   data() {
     return {
-      AUTH_CODE_REG: /^[0-9A-Z]{12,14}$/,
-
       serverConfig: {
         enableTranslate: true,
         enableUploadFile: true,
@@ -233,7 +233,10 @@ export default {
         roomKeyType: parseInt(window.localStorage.roomKeyType || '2'),
         roomId: parseInt(window.localStorage.roomId || '1'),
         authCode: window.localStorage.authCode || '',
-      }
+      },
+      // 因为$refs.form.validate是异步的所以不能直接用计算属性
+      // getUnvalidatedRoomUrl -> unvalidatedRoomUrl -> updateRoomUrl -> roomUrl
+      roomUrl: '',
     }
   },
   computed: {
@@ -244,8 +247,8 @@ export default {
         return this.form.authCode
       }
     },
-    roomUrl() {
+    unvalidatedRoomUrl() {
-      return this.getRoomUrl(false)
+      return this.getUnvalidatedRoomUrl(false)
     },
     obsRoomUrl() {
       if (this.roomUrl === '') {
@@ -260,6 +263,7 @@ export default {
     }
   },
   watch: {
+    unvalidatedRoomUrl: 'updateRoomUrl',
     roomUrl: _.debounce(function() {
       window.localStorage.roomKeyType = this.form.roomKeyType
       window.localStorage.roomId = this.form.roomId
@@ -269,6 +273,7 @@ export default {
   },
   mounted() {
     this.updateServerConfig()
+    this.updateRoomUrl()
   },
   methods: {
     async updateServerConfig() {
@@ -279,6 +284,18 @@ export default {
         throw e
       }
     },
+    async updateRoomUrl() {
+      // 防止切换roomKeyType时校验的还是老规则
+      await this.$nextTick()
+      try {
+        await this.$refs.form.validate()
+      } catch {
+        this.roomUrl = ''
+        return
+      }
+      // 没有异步的校验规则，应该不需要考虑竞争条件
+      this.roomUrl = this.unvalidatedRoomUrl
+    },
 
     addEmoticon() {
       this.form.emoticons.push({
@@ -316,20 +333,38 @@ export default {
       window.open(this.roomUrl, `room ${this.roomKeyValue}`, 'menubar=0,location=0,scrollbars=0,toolbar=0,width=600,height=600')
     },
     enterTestRoom() {
-      window.open(this.getRoomUrl(true), 'test room', 'menubar=0,location=0,scrollbars=0,toolbar=0,width=600,height=600')
+      window.open(this.getUnvalidatedRoomUrl(true), 'test room', 'menubar=0,location=0,scrollbars=0,toolbar=0,width=600,height=600')
     },
-    getRoomUrl(isTestRoom) {
+    getUnvalidatedRoomUrl(isTestRoom) {
-      if (!isTestRoom && !this.validateForm()) {
+      // 重要的字段放在前面，因为如果被截断就连接不了房间了
-        return ''
+      let frontFields = {
+        roomKeyType: this.form.roomKeyType
       }
-
+      let backFields = {
-      let query = {
+        emoticons: JSON.stringify(this.form.emoticons)
-        ...this.form,
+      }
-        emoticons: JSON.stringify(this.form.emoticons),
+      let ignoredNames = new Set(['roomId', 'authCode'])
-        lang: this.$i18n.locale
+      let query = { ...frontFields }
+      for (let name in this.form) {
+        if (!(name in frontFields || name in backFields || ignoredNames.has(name))) {
+          query[name] = this.form[name]
+        }
       }
-      delete query.roomId
+      Object.assign(query, backFields)
-      delete query.authCode
+
+      // 去掉和默认值相同的字段，缩短URL长度
+      query = Object.fromEntries(Object.entries(query).filter(
+        ([name, value]) => {
+          let defaultValue = chatConfig.DEFAULT_CONFIG[name]
+          if (defaultValue === undefined) {
+            return true
+          }
+          if (typeof defaultValue === 'object') {
+            defaultValue = JSON.stringify(defaultValue)
+          }
+          return value !== defaultValue
+        }
+      ))
 
       let resolved
       if (isTestRoom) {
@@ -339,19 +374,11 @@ export default {
       }
       return `${window.location.protocol}//${window.location.host}${resolved.href}`
     },
-    // 因为要用在计算属性里，所以不能用this.$refs.form.validate
-    validateForm() {
-      if (this.form.roomKeyType === 1) {
-        return this.roomKeyValue > 0
-      } else if (this.form.roomKeyType === 2) {
-        return this.AUTH_CODE_REG.test(this.roomKeyValue)
-      }
-      return true
-    },
     copyUrl() {
       this.$refs.roomUrlInput.select()
       document.execCommand('Copy')
     },
+
     exportConfig() {
       let cfg = mergeConfig(this.form, chatConfig.DEFAULT_CONFIG)
       download(JSON.stringify(cfg, null, 2), 'blivechat.json', 'application/json')