Merge branch 'dev'

README.md

@@ -14,6 +14,7 @@
 * 支持屏蔽弹幕、合并相似弹幕等设置
 * 自带样式生成器
 * 支持自动翻译弹幕、醒目留言到日语
+* 支持标注打赏用户名的读音（拼音和日文假名）
 
 ## 使用方法
 ### 一、本地使用
@@ -28,11 +29,11 @@
 
 **注意事项：**
 
-* 本地使用时不要关闭blivechat.exe那个黑框，否则不能继续获取弹幕
+* 本地使用时不要关闭blivechat.exe那个黑框，否则不能继续获取头像或弹幕
 * 样式生成器没有列出所有本地字体，但是可以手动输入本地字体
 
 ### 二、公共服务器
-请优先在本地使用，使用公共服务器会有更大的弹幕延迟，而且服务器故障时可能发生直播事故
+请优先在本地使用，使用公共服务器会有更大的延迟，而且服务器故障时可能发生直播事故
 
 * [公共服务器](http://chat.bilisc.com/)
 * [仅样式生成器](https://style.vtbs.moe/)
@@ -73,8 +74,14 @@
    ```
 2. 用浏览器打开[http://localhost:12450](http://localhost:12450)，以下略
 
-### nginx配置（可选）
-自建服务器时使用，`sudo vim /etc/nginx/sites-enabled/blivechat.conf`
+## 自建服务器相关补充
+### 服务器配置
+服务器配置在`data/config.ini`，可以配置数据库和允许自动翻译等，编辑后要重启生效
+
+**自建服务器时强烈建议不使用加载器**，否则可能因为混合HTTP和HTTPS等原因加载不出来
+
+### 参考nginx配置
+`sudo vim /etc/nginx/sites-enabled/blivechat.conf`
 
 ```conf
 upstream blivechat {

api/chat.py

@@ -406,7 +406,7 @@ def on_message(self, message):
                 self._close_on_timeout_future = None
             else:
                 logger.warning('Unknown cmd, client: %s, cmd: %d, body: %s', self.request.remote_ip, cmd, body)
-        except:
+        except Exception:
             logger.exception('on_message error, client: %s, message: %s', self.request.remote_ip, message)
 
     def on_close(self):

config.py

@@ -44,7 +44,7 @@ def __init__(self):
     def load(self, path):
         try:
             config = configparser.ConfigParser()
-            config.read(path)
+            config.read(path, 'utf-8')
 
             app_section = config['app']
             self.database_url = app_section['database_url']

data/config.ini

@@ -1,25 +1,22 @@
 [app]
+# 数据库配置，见https://docs.sqlalchemy.org/en/13/core/engines.html#database-urls
 # See https://docs.sqlalchemy.org/en/13/core/engines.html#database-urls
 database_url = sqlite:///data/database.db
 
+# 允许自动翻译到日语
 # Enable auto translate to Japanese
 enable_translate = true
 
+# 允许翻译的房间ID，以逗号分隔。如果为空，允许所有房间
 # Comma separated room IDs in which translation are not allowed. If empty, all are allowed
 # Example: allow_translate_rooms = 4895312,22347054,21693691
 allow_translate_rooms =
 
+# 如果使用了nginx之类的反向代理服务器，设置为true
 # Set to true if you are using a reverse proxy server such as nginx
 tornado_xheaders = false
 
+# 加载器URL，本地使用时加载器可以让你先运行OBS再运行blivechat。如果为空，不使用加载器
+# **自建服务器时强烈建议不使用加载器**，否则可能因为混合HTTP和HTTPS等原因加载不出来
 # Use a loader so that you can run OBS before blivechat. If empty, no loader is used
 loader_url = https://xfgryujk.sinacloud.net/blivechat/loader.html
-
-
-# DON'T modify this section
-[DEFAULT]
-database_url = sqlite:///data/database.db
-enable_translate = true
-allow_translate_rooms =
-tornado_xheaders = false
-loader_url =

frontend/src/api/chat/ChatClientDirect.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import {inflate} from 'pako'
+import * as pako from 'pako'
 
 import {getUuid4Hex} from '@/utils'
 import * as avatar from './avatar'
@@ -172,7 +172,7 @@ export default class ChatClientDirect {
       case OP_SEND_MSG_REPLY: {
         let body = new Uint8Array(data.buffer, offset + HEADER_SIZE, packLen - HEADER_SIZE)
         if (ver == WS_BODY_PROTOCOL_VERSION_DEFLATE) {
-          body = inflate(body)
+          body = pako.inflate(body)
           this.handlerMessage(body)
         } else {
           try {

frontend/src/api/chatConfig.js

@@ -18,7 +18,8 @@ export const DEFAULT_CONFIG = {
   blockMedalLevel: 0,
 
   relayMessagesByServer: false,
-  autoTranslate: false
+  autoTranslate: false,
+  giftUsernamePronunciation: ''
 }
 
 export function setLocalConfig (config) {

frontend/src/components/ChatRenderer/ImgShadow.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import {DEFAULT_AVATAR_URL} from '@/api/chat/avatar'
+import * as avatar from '@/api/chat/avatar'
 
 export default {
   name: 'ImgShadow',
@@ -26,8 +26,8 @@ export default {
   },
   methods: {
     onLoadError() {
-      if (this.showImgUrl !== DEFAULT_AVATAR_URL) {
-        this.showImgUrl = DEFAULT_AVATAR_URL
+      if (this.showImgUrl !== avatar.DEFAULT_AVATAR_URL) {
+        this.showImgUrl = avatar.DEFAULT_AVATAR_URL
       }
     }
   }

frontend/src/components/ChatRenderer/Ticker.vue

@@ -24,12 +24,12 @@
     <template v-if="pinnedMessage">
       <membership-item :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
         class="style-scope yt-live-chat-ticker-renderer"
-        :avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName" :privilegeType="pinnedMessage.privilegeType"
+        :avatarUrl="pinnedMessage.avatarUrl" :authorName="getShowAuthorName(pinnedMessage)" :privilegeType="pinnedMessage.privilegeType"
         :title="pinnedMessage.title" :time="pinnedMessage.time"
       ></membership-item>
       <paid-message :key="pinnedMessage.id" v-else
         class="style-scope yt-live-chat-ticker-renderer"
-        :price="pinnedMessage.price" :avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName"
+        :price="pinnedMessage.price" :avatarUrl="pinnedMessage.avatarUrl" :authorName="getShowAuthorName(pinnedMessage)"
         :time="pinnedMessage.time" :content="pinnedMessageShowContent"
       ></paid-message>
     </template>
@@ -98,6 +98,7 @@ export default {
     window.clearInterval(this.updateTimerId)
   },
   methods: {
+    getShowAuthorName: constants.getShowAuthorName,
     needToShow(message) {
       let pinTime = this.getPinTime(message)
       return (new Date() - message.addTime) / (60 * 1000) < pinTime

frontend/src/components/ChatRenderer/constants.js

@@ -122,16 +122,23 @@ export function getPriceConfig (price) {
   return PRICE_CONFIGS[PRICE_CONFIGS.length - 1]
 }
 
-export function getShowContent(message) {
+export function getShowContent (message) {
   if (message.translation) {
     return `${message.content}（${message.translation}）`
   }
   return message.content
 }
 
-export function getGiftShowContent(message, showGiftName) {
+export function getGiftShowContent (message, showGiftName) {
   if (!showGiftName) {
     return ''
   }
   return `Sent ${message.giftName}x${message.num}`
 }
+
+export function getShowAuthorName (message) {
+  if (message.authorNamePronunciation) {
+    return `${message.authorName}(${message.authorNamePronunciation})`
+  }
+  return message.authorName
+}

frontend/src/components/ChatRenderer/index.vue

@@ -18,17 +18,17 @@
               ></text-message>
               <paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_GIFT"
                 class="style-scope yt-live-chat-item-list-renderer"
-                :price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
+                :price="message.price" :avatarUrl="message.avatarUrl" :authorName="getShowAuthorName(message)"
                 :time="message.time" :content="getGiftShowContent(message)"
               ></paid-message>
               <membership-item :key="message.id" v-else-if="message.type === MESSAGE_TYPE_MEMBER"
                 class="style-scope yt-live-chat-item-list-renderer"
-                :avatarUrl="message.avatarUrl" :authorName="message.authorName" :privilegeType="message.privilegeType"
+                :avatarUrl="message.avatarUrl" :authorName="getShowAuthorName(message)" :privilegeType="message.privilegeType"
                 :title="message.title" :time="message.time"
               ></membership-item>
               <paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_SUPER_CHAT"
                 class="style-scope yt-live-chat-item-list-renderer"
-                :price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
+                :price="message.price" :avatarUrl="message.avatarUrl" :authorName="getShowAuthorName(message)"
                 :time="message.time" :content="getShowContent(message)"
               ></paid-message>
             </template>
@@ -132,6 +132,7 @@ export default {
       return constants.getGiftShowContent(message, this.showGiftName)
     },
     getShowContent: constants.getShowContent,
+    getShowAuthorName: constants.getShowAuthorName,
 
     addMessage(message) {
       this.addMessages([message])

frontend/src/lang/en.js

@@ -33,6 +33,10 @@ export default {
     advanced: 'Advanced',
     relayMessagesByServer: 'Relay messages by server',
     autoTranslate: 'Auto translate messages to Japanese (requires relay messages by server)',
+    giftUsernamePronunciation: 'Pronunciation of gift username',
+    dontShow: 'None',
+    pinyin: 'Pinyin',
+    kana: 'Kana',
 
     roomUrl: 'Room URL',
     copy: 'Copy',

frontend/src/lang/ja.js

@@ -33,6 +33,10 @@ export default {
     advanced: 'アドバンスド',
     relayMessagesByServer: 'サーバを介してメッセージを転送する',
     autoTranslate: 'コメントを日本語に翻訳する（サーバを介してメッセージを転送する必要）',
+    giftUsernamePronunciation: 'スーパーチャットのユーザー名の発音',
+    dontShow: '非表示',
+    pinyin: 'ピンイン',
+    kana: '仮名',
 
     roomUrl: 'ルームのURL',
     copy: 'コピー',

frontend/src/lang/zh.js

@@ -33,6 +33,10 @@ export default {
     advanced: '高级',
     relayMessagesByServer: '通过服务器转发消息',
     autoTranslate: '自动翻译弹幕到日语（需要通过服务器转发消息）',
+    giftUsernamePronunciation: '标注打赏用户名读音',
+    dontShow: '不显示',
+    pinyin: '拼音',
+    kana: '日文假名',
 
     roomUrl: '房间URL',
     copy: '复制',

frontend/src/layout/index.vue

@@ -9,7 +9,7 @@
         </router-link>
       </div>
       <div class="version">
-        v1.5.0
+        v1.5.1
       </div>
       <sidebar></sidebar>
     </el-aside>
@@ -36,7 +36,7 @@ export default {
       hideSidebar: true
     }
   },
-  created() {
+  mounted() {
     window.addEventListener('resize', this.onResize)
     this.onResize()
   },

frontend/src/main.js

@@ -3,7 +3,8 @@ import VueRouter from 'vue-router'
 import VueI18n from 'vue-i18n'
 import {
   Aside, Autocomplete, Badge, Button, Col, ColorPicker, Container, Divider, Form, FormItem, Image,
-  Input, Main, Menu, MenuItem, Message, Row, Scrollbar, Slider, Submenu, Switch, TabPane, Tabs, Tooltip
+  Input, Main, Menu, MenuItem, Message, Radio, RadioGroup, Row, Scrollbar, Slider, Submenu, Switch,
+  TabPane, Tabs, Tooltip
 } from 'element-ui'
 import axios from 'axios'
 
@@ -42,6 +43,8 @@ Vue.use(Input)
 Vue.use(Main)
 Vue.use(Menu)
 Vue.use(MenuItem)
+Vue.use(Radio)
+Vue.use(RadioGroup)
 Vue.use(Row)
 Vue.use(Scrollbar)
 Vue.use(Slider)