自定义模板SDK升级到v1.0.1，支持注入OBS中的自定义CSS

frontend/src/blcsdk.js

@@ -9,7 +9,7 @@
 }(typeof self !== 'undefined' ? self : this, function() {
   const exports = {}
 
-  const VERSION = '1.0.0'
+  const VERSION = '1.0.1'
   /**
    * 取SDK版本
    * @returns {string} "1.0.0"
@@ -38,8 +38,13 @@
   /**
    * @typedef InitOptions
    * @property {boolean} noMsgDelay 去掉消息延迟，但会导致消息不平滑
+   * @property {boolean} noCssInjection 不注入OBS的自定义CSS和blivechat服务器预设CSS
    */
 
+  let initOptions = {
+    noCssInjection: false,
+  }
+
   /**
    * 初始化SDK
    * 
@@ -47,7 +52,7 @@
    */
   async function init(
     /** @type {?InitOptions} */
-    {noMsgDelay = false} = {}
+    {noMsgDelay = false, noCssInjection = false} = {}
   ) {
     if (initPromise) {
       throw new Error('Cannot call init() again')
@@ -64,6 +69,8 @@
       return initPromise.promise
     }
 
+    initOptions.noCssInjection = noCssInjection
+
     msgHandler = noMsgDelay ? new SdkMsgHandler() : new SmoothedSdkMsgHandler()
     window.addEventListener('message', onWindowMessage)
 
@@ -73,7 +80,7 @@
 
     // 等待初始化消息
     initMsg = await initPromise.promise
-    console.debug('blcsdk initialized, init_msg=', initMsg)
+    console.debug('blcsdk initialized, initMsg=', initMsg)
   }
   exports.init = init
 
@@ -145,18 +152,41 @@
 
     let { type, data } = event.data
     switch (type) {
-    case 'blcInit':
-      initPromise.resolve(data)
-      break
     case 'blcAddMsg':
       msgHandler.addMsg(data)
       break
-    case 'blcDelMsgs':
-      msgHandler.delMsgs(data.ids)
-      break
     case 'blcUpdateMsg':
       msgHandler.updateMsg(data.id, data.newValuesObj)
       break
+    case 'blcDelMsgs':
+      msgHandler.delMsgs(data.ids)
+      break
+
+    case 'blcInit':
+      initPromise.resolve(data)
+      break
+    case 'blcInjectCss':
+      injectCss(data)
+      break
+    }
+  }
+
+  function injectCss({injectCssUrls = [], injectCss = ''}) {
+    if (initOptions.noCssInjection) {
+      return
+    }
+
+    for (let url of injectCssUrls) {
+      let el = document.createElement('link')
+      el.rel = 'stylesheet'
+      el.href = url
+      document.head.appendChild(el)
+    }
+
+    if (injectCss !== '') {
+      let el = document.createElement('style')
+      el.textContent = injectCss
+      document.head.appendChild(el)
     }
   }
 
@@ -307,7 +337,7 @@
         // 按最快速度发
         sleepTime = MSG_MIN_INTERVAL
       }
-      this._emitSmoothedMsgTimerId = window.setTimeout(this._boundEmitSmoothedMsgs, sleepTime)
+      this._emitSmoothedMsgTimerId = setTimeout(this._boundEmitSmoothedMsgs, sleepTime)
     }
   }
 

frontend/src/views/Room.vue

@@ -36,7 +36,10 @@ class DefaultRenderer {
   }
 }
 
-const BLC_SDK_VERSION = '1.0.0'
+const BLC_SDK_VERSION = '1.0.1'
+const PRESET_CSS_URL = '/custom_public/preset.css'
+// 有这个特征字符串的style元素则注入到模板里
+const OBS_CSS_SIGN = 'blc-inject-into-template'
 
 class CustomTemplateRenderer {
   constructor(templateIframe, config) {
@@ -91,8 +94,6 @@ class CustomTemplateRenderer {
     let { type } = event.data
     switch (type) {
     case 'blcTemplateConnect': {
-      this._sendMessageToTemplate = this._enabledSendMessageToTemplate
-
       // 发送初始化消息
       let initData = {
         blcVersion: process.env.APP_VERSION,
@@ -104,11 +105,44 @@ class CustomTemplateRenderer {
           maxNumber: this._config.maxNumber,
         }
       }
+      this._sendMessageToTemplate = this._enabledSendMessageToTemplate
       this._sendMessageToTemplate('blcInit', initData)
+
+      this._injectCss()
       break
     }
     }
   }
+
+  async _injectCss() {
+    if (document.readyState !== 'complete') {
+      // OBS的自定义CSS在load事件之后注入
+      await new Promise(resolve => {
+        window.addEventListener('load', () => {
+          window.setTimeout(resolve, 100)
+        })
+      })
+    }
+
+    let injectCssUrls = []
+    if (this._config.importPresetCss) {
+      injectCssUrls.push(window.location.origin + PRESET_CSS_URL)
+    }
+
+    let injectCssArr = []
+    for (let el of document.querySelectorAll('style')) {
+      if (el.textContent.indexOf(OBS_CSS_SIGN) !== -1) {
+        injectCssArr.push(el.textContent)
+      }
+    }
+
+    if (injectCssUrls.length !== 0 || injectCssArr.length !== 0) {
+      this._sendMessageToTemplate('blcInjectCss', {
+        injectCssUrls: injectCssUrls,
+        injectCss: injectCssArr.join('\n\n'),
+      })
+    }
+  }
 }
 
 export default {
@@ -238,10 +272,10 @@ export default {
         this.pronunciationConverter = new pronunciation.PronunciationConverter()
         this.pronunciationConverter.loadDict(this.config.giftUsernamePronunciation)
       }
-      if (this.config.importPresetCss) {
+      if (this.config.importPresetCss && !this.useCustomTemplate) {
         this.presetCssLinkElement = document.createElement('link')
         this.presetCssLinkElement.rel = 'stylesheet'
-        this.presetCssLinkElement.href = '/custom_public/preset.css'
+        this.presetCssLinkElement.href = PRESET_CSS_URL
         document.head.appendChild(this.presetCssLinkElement)
       }