From 6ddf29e76908e8d7525f57bb52e711e4ebcce0b9 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Sat, 3 May 2025 17:41:38 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A8=A1=E6=9D=BFSD?=
 =?UTF-8?q?K=E5=8D=87=E7=BA=A7=E5=88=B0v1.0.1=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=B3=A8=E5=85=A5OBS=E4=B8=AD=E7=9A=84=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/blcsdk.js      | 50 +++++++++++++++++++++++++++++--------
 frontend/src/views/Room.vue | 44 ++++++++++++++++++++++++++++----
 2 files changed, 79 insertions(+), 15 deletions(-)

diff --git a/frontend/src/blcsdk.js b/frontend/src/blcsdk.js
index 4355f7e..3306c70 100644
--- a/frontend/src/blcsdk.js
+++ b/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)
     }
   }
 
diff --git a/frontend/src/views/Room.vue b/frontend/src/views/Room.vue
index bcd34e4..3b77ba5 100644
--- a/frontend/src/views/Room.vue
+++ b/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)
       }