b站vtuber直播同传评论转字幕

将vtuber直播时同传man的评论,以类似底部弹幕的形式展现在播放器窗口,免去在众多快速刷过的评论中找同传man的痛苦。

// ==UserScript==
// @name         b站vtuber直播同传评论转字幕
// @namespace    http://tampermonkey.net/
// @version      0.3.5
// @author       Manakanemu
// @include      https://live.bilibili.com/*
// @exclude      https://live.bilibili.com/p/*
// @grant        GM_xmlhttpRequest
// @require      https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js
// @require      https://cdn.staticfile.org/vue/2.6.11/vue.min.js
// @connect      youdao.com
// @description  将vtuber直播时同传man的评论,以类似底部弹幕的形式展现在播放器窗口,免去在众多快速刷过的评论中找同传man的痛苦。
// GM_xmlhttpRequest

// ==/UserScript==


(function () {
// 字幕样式配置

  const youdaoAPI = 'http://fanyi.youdao.com/translate_o?smartresult=dict&smartresult=rule'

  const removeBracket = true
  // 所有组件挂在attentionModul下,以App结尾的为绑定DOm的vue组件
  window.attentionModul = {}
  window.attentionModul.commentApp = {}  // 字幕组件
  window.attentionModul.consoleApp = {} // 控制面板组件
  window.attentionModul.transApp = {} // 翻译组件
  window.attentionModul.users = [] // 关注用户列表
  window.attentionModul.observe = {} // DOM突变时间监听器
  // 从localstorage读取配置
  window.attentionModul.config = JSON.parse(localStorage.getItem('config') || '{"color":"#ffffff","font-size":40}')
  window.attentionModul.md5 = md5

  // 测试用组件
  window.attentionModul.debug = {}
  window.attentionModul.debug.setComment = setComment
  window.attentionModul.debug.addAttentionUser = addAttentionUser
  window.attentionModul.debug.showDOM = showDOM
  window.attentionModul.debug.addComment = addComment
  window.attentionModul.test = function () {

    window.attentionModul.debug.setComment(0, '测试')
    window.attentionModul.debug.setComment(1, '测试测试')
  }

  // 添加关注用户
  function addAttentionUser(uid) {
    $('textarea:eq(0)').click()
    if (window.attentionModul.users.indexOf(uid) < 0) {
      window.attentionModul.users.push(uid)
      window.attentionModul.commentApp.comments.push(null)
    }
  }

  // 添加测试评论
  function addComment(uid = 'test', uname = '测试', comment = '测试评论') {
    const localComment = $('<div data-uid="' + uid + '" data-uname="' + uname + '" data-danmaku="' + comment + '">' + comment + '</div>')
    $('.chat-history-list ').append(localComment)
  }

  // 移除关注用户
  function removeAttentionUser() {

  }

  // 调试显示组件
  function showDOM() {
    return [document.getElementById('comment-container'), document.getElementById('console-container')]
  }

  // 移除括号
  function removeBreaket(comment) {
    let r = comment.match(/^[ 【]*(.*?)[ 】]*$/i)[1]
    return r
  }

  //将匹配评论添加到vue变量中对应的字幕DOM
  function setComment(index, comment, username = '同传man') {
    window.attentionModul.commentApp.comments.splice(index, 1, comment)
  }

  // 对象编码为url参数


  //匹配评论发出者与关注用户
  function chatFilter(nodeList) {
    for (let item of nodeList) {
      const uid = item.getAttribute('data-uid')
      const comment = item.getAttribute('data-danmaku')
      const username = item.getAttribute('data-uname')
      const index = window.attentionModul.users.indexOf(uid)
      if (index > -1) {
        if (removeBreaket) {
          setComment(index, removeBreaket(comment), username)
        } else {
          setComment(index, comment, username)
        }
      }
    }
  }

  // DOM突变事件回调函数
  function mutationListener(mutationList) {
    window.attentionModul.observe.message = mutationList

    if (window.attentionModul.observe.message[0].addedNodes.length > 0) {
      chatFilter(window.attentionModul.observe.message[0].addedNodes)
    }
  }

  //保存控制台配置
  function saveConfig() {
    const config = {
      "color": window.attentionModul.consoleApp.color,
      // "vertical": window.attentionModul.consoleApp.vertical,
      // "font-size": window.attentionModul.consoleApp.fontSize
    }
    localStorage.setItem('config', JSON.stringify(config))
  }

  // 注入控制台组件
  ;(function () {
    const consoleContainer = $('<div @mouseleave="consoleOut" @mouseover.stop="consoleIn" id="console-container" class="att-top"></div>')
    const widgetIcon = $('<div v-show="!isShowConsole"  class="att-icon-container att-top" ><div class="att-icon"></div></div>')
    const consoleWidget = $('<div v-show="isShowConsole" id="att-console" class="att-col"></div>')
    const verticalWidget = $('<div class="att-console-title" style="cursor:pointer;" @click="resetFontPosandSize">重置字幕位置/字号</div>')
    // const fontSizeWidget = $('<div class="att-console-title">恢复字幕默认设置</div><div class="att-row"><input @input="changeFontsize" class="att-input-range" type="range" v-model:value="fontSize" min="1" max="500"  step="5"><input class="att-input-value" v-model:value="fontSize" @change="changeFontsize"></div>')
    const colorWidget = $('<div class="att-console-title">字幕颜色</div><div class="att-row"><input class="att-input-range" placeholder="示例:#030303" v-model:value="color" @change="changeColor" style="padding: 2px;border-radius: 2px;border: 0;border-bottom: 1px solid gray"><div @click="defualtColor" style="cursor:pointer;">默认</div></div>')
    consoleWidget.append(verticalWidget)
    // consoleWidget.append(fontSizeWidget)
    consoleWidget.append(colorWidget)
    consoleContainer.append(widgetIcon)
    consoleContainer.append(consoleWidget)
    $('body').append(consoleContainer)

    const config = window.attentionModul.config
    window.attentionModul.consoleApp = new Vue({
      el: '#console-container',
      data() {
        return {
          isShowConsole: false,
          fontSize: config['font-size'] || 25,
          color: config['color'] || '#ffffff'
        }
      },
      methods: {
        consoleIn() {
          this.isShowConsole = true
        },
        consoleOut() {
          this.isShowConsole = false
        },
        changeFontsize(){
          $('#comment-container').css('font-size', this.fontSize.toString()+'px')
        },
        changeColor() {
          $('#comment-container').css('color', this.color.toString())
          saveConfig()
        },
        defualtColor() {
          this.color = '#ffffff'
          $('#comment-container').css('color', this.color.toString())
          saveConfig()
        },
        resetFontPosandSize(){
          window.attentionModul.commentApp.widgetStyle = ''
          $('#comment-container').css('font-size', '25px')

        }
      }
    })
  })();

  // 注入字幕组件
  ;(function insertCommentWidget() {
    const container = $('.bilibili-live-player-video-area')
    if (container.length > 0) {
      const commentWidget = $('<div id="comment-container" :style="widgetStyle" :class="{\'att-comment-fixed\':isFixed,\'att-comment-float\':!isFixed}"><div class="att-comment-box"><span v-show="htmlString" v-html="htmlString" class="att-comment-span" :style="commentStyle" @mousedown="mousedown" @wheel.stop.prevent="mousewheel" @mousemove="mousemove"></span></div></div>')
      container.append(commentWidget)
      window.attentionModul.commentApp = new Vue({
        el: '#comment-container',
        data() {
          return {
            widgetStyle: '',
            boxStyle: '',
            comments: new Array(window.attentionModul.users.length),
            commentStyle: '',
            dom: document.getElementById('comment-container'),
            htmlString: '',
            isFixed: true,
            spanLeft: 0,
            spanTop: 0,
            localLeft: 0,
            localTop: 0,
            isdrag: false,
            dragStartLeft: 0,
            dragStartTop: 0,
            dragEndLeft: 0,
            dragEndTop: 0,
            moveX: 0,
            moveY: 0
          }
        },
        watch: {
          comments(data) {
            let htmlString = ''
            const length = data.length
            for (let i = 0; i < length - 1; i++) {
              if (data[i]) {
                htmlString += data[i] + '<br>'
              }
            }
            if (data[length - 1]) {
              htmlString += data[length - 1]
            }
            this.htmlString = htmlString
          },
          immediate: true
        },
        methods: {
          mousedown() {
            this.isdrag = true
            const widget = $('#comment-container')
            const span = $('.att-comment-span')
            this.localLeft = widget.position().left
            this.localTop = widget.position().top
            if (this.isFixed) {
              this.isFixed = false
            }
            this.widgetStyle = 'transform:translate(' + this.localLeft.toString() + 'px,' + this.localTop.toString() + 'px)'
            this.spanLeft = span.offset().left
            this.spanTop = span.offset().top
          },
          mousemove(e) {
          },
          mousewheel(e){
            const widget = $('#comment-container')
            let fontSize = parseInt(widget.css('font-size'))
            if(e.wheelDeltaY){
              fontSize -= e.deltaY/25
            }else {
              fontSize -= e.deltaY

            }
            widget.css('font-size',fontSize.toString() + 'px')
          }
          ,
          transform() {
            this.isFixed = true
            const widget = $('#comment-container')
            const player = $('.bilibili-live-player-video-area')

            const widgetX = widget.position().left
            const widgetY = widget.position().top
            const widgetHeight = widget.outerHeight()
            const widgetWidth = widget.outerWidth()

            const heightLevel = widgetY + widgetHeight / 2
            const widthLevel = widgetX + widgetWidth / 2
            const playerHeight = player.innerHeight()
            const playerWidth = player.innerWidth()

            if (heightLevel > playerHeight / 2) {
              if (widthLevel > playerWidth / 2) {
                //右下
                this.widgetStyle = 'bottom:' + (playerHeight - widgetY - widgetHeight).toString() + 'px;right:' + (playerWidth - widgetX - widgetWidth).toString() + 'px'
              } else {
                // 左下
                this.widgetStyle = 'bottom:' + (playerHeight - widgetY - widgetHeight).toString() + 'px;left:' + (widgetX).toString() + 'px'
              }
            } else {
              if (widthLevel > playerWidth / 2) {
                // 右上
                this.widgetStyle = 'top:' + (widgetY).toString() + 'px;right:' + (playerWidth - widgetX - widgetWidth).toString() + 'px'

              } else {
                // 左上
                this.widgetStyle = 'top:' + (widgetY).toString() + 'px;left:' + (widgetX).toString() + 'px'

              }
            }
          }
          ,
          isInnerY(moveY) {
            const videoPlayer = $('.bilibili-live-player-video-area')
            const comment = $('.att-comment-span')
            const playerStartY = videoPlayer.offset().top + 1
            const playerEndY = playerStartY + videoPlayer.height() - 2
            const commentStartY = this.spanTop + moveY
            const commentEndY = commentStartY + comment.innerHeight()
            if (commentStartY <= playerStartY || commentEndY >= playerEndY) {
              return false
            } else {
              return true
            }
          },
          isInnerX(moveX) {
            const videoPlayer = $('.bilibili-live-player-video-area')
            const comment = $('.att-comment-span')
            const playerStartX = videoPlayer.offset().left + 1
            const playerEndX = playerStartX + videoPlayer.width() - 2
            const commentStartX = this.spanLeft + moveX
            const commentEndX = commentStartX + comment.innerWidth()
            if (commentStartX <= playerStartX || commentEndX >= playerEndX) {
              return false
            } else {
              return true
            }
          }
        }
      })
      // window.attentionModul.consoleApp.changeVertical()
      window.attentionModul.consoleApp.changeColor()
      window.attentionModul.consoleApp.changeFontsize()

      $('body').bind('mousemove', function (e) {
        if (window.attentionModul.commentApp.isdrag) {
          const moveX = e.screenX - window.attentionModul.commentApp.dragStartLeft
          const moveY = e.screenY - window.attentionModul.commentApp.dragStartTop
          const isInnerX = window.attentionModul.commentApp.isInnerX(moveX)
          const isInnerY = window.attentionModul.commentApp.isInnerY(moveY)
          if (isInnerX) {
            window.attentionModul.commentApp.moveX = moveX
          }
          if (isInnerY) {
            window.attentionModul.commentApp.moveY = moveY
          }
          window.attentionModul.commentApp.widgetStyle = 'transform:translate(' + (window.attentionModul.commentApp.localLeft + window.attentionModul.commentApp.moveX).toString() + 'px,' + (window.attentionModul.commentApp.localTop + window.attentionModul.commentApp.moveY).toString() + 'px)'

        } else {
          window.attentionModul.commentApp.dragStartLeft = e.screenX
          window.attentionModul.commentApp.dragStartTop = e.screenY
        }
      })
      $('body').bind('mouseup', function () {
        if (window.attentionModul.commentApp.isdrag) {
          window.attentionModul.commentApp.isdrag = false
          window.attentionModul.commentApp.transform()
        }
      })
    } else {
      requestAnimationFrame(function () {
        insertCommentWidget()
      })
    }
  })();

// 注入菜单组件
  ;(function insertMenuWidget() {
      const menu = $('.danmaku-menu')
      const menuItem = menu.find('.report-this-guy')
      if (menuItem.length > 0) {
        let a = $('<a href="javascript:;" class="bili-link pointer" style="display: block">添加字幕特别关注</a>')
        menuItem.append(a)
        // 添加点击函数,获取用户uid,调用add函数添加到关注用户列表
        a.click(function () {
          const uid = menu[0].__vue__.uid
          const username = menu[0].__vue__.username
          addAttentionUser(uid.toString())
        })
      } else {
        requestAnimationFrame(function () {
          insertMenuWidget()
        })
      }
    }
  )();

  // 注入翻译组件
  ;(function insertTranslateWidget() {
    let injectAnchor = $('.right-action')
    if (injectAnchor.length > 0) {
      const translateButton = $('<button id="att-translate" class="att-button" @click="translate" style="cursor: pointer;">翻译</button>')
      injectAnchor.prepend(translateButton)
      window.attentionModul.transApp = new Vue({
        el: '#att-translate',
        data() {
          return {commentVm: document.getElementsByClassName('control-panel-ctnr')[0].__vue__}
        },
        methods: {
          translate() {
            function encodeObject(obj) {
              let param = ''
              for (let key in obj) {
                param += key + '=' + encodeURIComponent(obj[key]) + '&'
              }
              return param.substring(0, param.length - 1)
            }

            function getParam(query) {
              const bv = md5(navigator.appVersion)
              const ts = "" + (new Date).getTime()
              const salt = ts + parseInt(10 * Math.random(), 10);
              const sign = md5("fanyideskweb" + query + salt + "Nw(nmmbP%A-r6U3EUn]Aj")
              return {
                i: query,
                from: "AUTO",
                to: 'ja',
                smartresult: 'dict',
                client: 'fanyideskweb',
                salt: salt,
                sign: sign,
                ts: ts,
                // bv: bv,
                doctype: "json",
                version: "2.1",
                keyfrom: "fanyi.web",
                action: "FY_BY_CLICKBUTTION"
              }
            }

            const query = this.commentVm.chatInput
            const url = youdaoAPI
            const param = getParam(query)
            GM_xmlhttpRequest({
              method: 'POST',
              url: url,
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
                "Referer": "http://fanyi.youdao.com/"
              },
              data: encodeObject(param),
              onload: function (r) {
                const res = JSON.parse(r.responseText)
                if (res.translateResult) {
                  window.attentionModul.transApp.commentVm.chatInput = res.translateResult[0][0].tgt
                }
              }
            })
          }
        }
      })
    } else {
      requestAnimationFrame((function () {
        insertTranslateWidget()
      }))
    }
  })();

  // 监听评论DOM突变事件
  window.attentionModul.observe.observer = new MutationObserver(mutationListener)

  window.attentionModul.observe.config = {childList: true,subtree: true}
  ;(function openObserver() {
    window.attentionModul.observe.anchor = document.getElementsByClassName('chat-history-list')[0]
    if (window.attentionModul.observe.anchor) {
      cancelAnimationFrame(window.attentionModul.index)
      window.attentionModul.observe.observer.observe(window.attentionModul.observe.anchor, window.attentionModul.observe.config)
    } else {
      window.attentionModul.index = requestAnimationFrame(function () {
          openObserver()
        }
      )
    }
  })();


  function md5(md5str) {
    var createMD5String = function (string) {
      var x = Array()
      var k, AA, BB, CC, DD, a, b, c, d
      var S11 = 7,
        S12 = 12,
        S13 = 17,
        S14 = 22
      var S21 = 5,
        S22 = 9,
        S23 = 14,
        S24 = 20
      var S31 = 4,
        S32 = 11,
        S33 = 16,
        S34 = 23
      var S41 = 6,
        S42 = 10,
        S43 = 15,
        S44 = 21
      string = uTF8Encode(string)
      x = convertToWordArray(string)
      a = 0x67452301
      b = 0xEFCDAB89
      c = 0x98BADCFE
      d = 0x10325476
      for (k = 0; k < x.length; k += 16) {
        AA = a
        BB = b
        CC = c
        DD = d
        a = FF(a, b, c, d, x[k + 0], S11, 0xD76AA478)
        d = FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756)
        c = FF(c, d, a, b, x[k + 2], S13, 0x242070DB)
        b = FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE)
        a = FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF)
        d = FF(d, a, b, c, x[k + 5], S12, 0x4787C62A)
        c = FF(c, d, a, b, x[k + 6], S13, 0xA8304613)
        b = FF(b, c, d, a, x[k + 7], S14, 0xFD469501)
        a = FF(a, b, c, d, x[k + 8], S11, 0x698098D8)
        d = FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF)
        c = FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1)
        b = FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE)
        a = FF(a, b, c, d, x[k + 12], S11, 0x6B901122)
        d = FF(d, a, b, c, x[k + 13], S12, 0xFD987193)
        c = FF(c, d, a, b, x[k + 14], S13, 0xA679438E)
        b = FF(b, c, d, a, x[k + 15], S14, 0x49B40821)
        a = GG(a, b, c, d, x[k + 1], S21, 0xF61E2562)
        d = GG(d, a, b, c, x[k + 6], S22, 0xC040B340)
        c = GG(c, d, a, b, x[k + 11], S23, 0x265E5A51)
        b = GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA)
        a = GG(a, b, c, d, x[k + 5], S21, 0xD62F105D)
        d = GG(d, a, b, c, x[k + 10], S22, 0x2441453)
        c = GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681)
        b = GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8)
        a = GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6)
        d = GG(d, a, b, c, x[k + 14], S22, 0xC33707D6)
        c = GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87)
        b = GG(b, c, d, a, x[k + 8], S24, 0x455A14ED)
        a = GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905)
        d = GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8)
        c = GG(c, d, a, b, x[k + 7], S23, 0x676F02D9)
        b = GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A)
        a = HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942)
        d = HH(d, a, b, c, x[k + 8], S32, 0x8771F681)
        c = HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122)
        b = HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C)
        a = HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44)
        d = HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9)
        c = HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60)
        b = HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70)
        a = HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6)
        d = HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA)
        c = HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085)
        b = HH(b, c, d, a, x[k + 6], S34, 0x4881D05)
        a = HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039)
        d = HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5)
        c = HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8)
        b = HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665)
        a = II(a, b, c, d, x[k + 0], S41, 0xF4292244)
        d = II(d, a, b, c, x[k + 7], S42, 0x432AFF97)
        c = II(c, d, a, b, x[k + 14], S43, 0xAB9423A7)
        b = II(b, c, d, a, x[k + 5], S44, 0xFC93A039)
        a = II(a, b, c, d, x[k + 12], S41, 0x655B59C3)
        d = II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92)
        c = II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D)
        b = II(b, c, d, a, x[k + 1], S44, 0x85845DD1)
        a = II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F)
        d = II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0)
        c = II(c, d, a, b, x[k + 6], S43, 0xA3014314)
        b = II(b, c, d, a, x[k + 13], S44, 0x4E0811A1)
        a = II(a, b, c, d, x[k + 4], S41, 0xF7537E82)
        d = II(d, a, b, c, x[k + 11], S42, 0xBD3AF235)
        c = II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB)
        b = II(b, c, d, a, x[k + 9], S44, 0xEB86D391)
        a = addUnsigned(a, AA)
        b = addUnsigned(b, BB)
        c = addUnsigned(c, CC)
        d = addUnsigned(d, DD)
      }
      var tempValue = wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d)
      return tempValue.toLowerCase()
    }
    var rotateLeft = function (lValue, iShiftBits) {
      return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits))
    }
    var addUnsigned = function (lX, lY) {
      var lX4, lY4, lX8, lY8, lResult
      lX8 = (lX & 0x80000000)
      lY8 = (lY & 0x80000000)
      lX4 = (lX & 0x40000000)
      lY4 = (lY & 0x40000000)
      lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF)
      if (lX4 & lY4) return (lResult ^ 0x80000000 ^ lX8 ^ lY8)
      if (lX4 | lY4) {
        if (lResult & 0x40000000) return (lResult ^ 0xC0000000 ^ lX8 ^ lY8)
        else return (lResult ^ 0x40000000 ^ lX8 ^ lY8)
      } else {
        return (lResult ^ lX8 ^ lY8)
      }
    }
    var F = function (x, y, z) {
      return (x & y) | ((~x) & z)
    }
    var G = function (x, y, z) {
      return (x & z) | (y & (~z))
    }
    var H = function (x, y, z) {
      return (x ^ y ^ z)
    }
    var I = function (x, y, z) {
      return (y ^ (x | (~z)))
    }
    var FF = function (a, b, c, d, x, s, ac) {
      a = addUnsigned(a, addUnsigned(addUnsigned(F(b, c, d), x), ac))
      return addUnsigned(rotateLeft(a, s), b)
    }
    var GG = function (a, b, c, d, x, s, ac) {
      a = addUnsigned(a, addUnsigned(addUnsigned(G(b, c, d), x), ac))
      return addUnsigned(rotateLeft(a, s), b)
    }
    var HH = function (a, b, c, d, x, s, ac) {
      a = addUnsigned(a, addUnsigned(addUnsigned(H(b, c, d), x), ac))
      return addUnsigned(rotateLeft(a, s), b)
    }
    var II = function (a, b, c, d, x, s, ac) {
      a = addUnsigned(a, addUnsigned(addUnsigned(I(b, c, d), x), ac))
      return addUnsigned(rotateLeft(a, s), b)
    }
    var convertToWordArray = function (string) {
      var lWordCount
      var lMessageLength = string.length
      var lNumberOfWordsTempOne = lMessageLength + 8
      var lNumberOfWordsTempTwo = (lNumberOfWordsTempOne - (lNumberOfWordsTempOne % 64)) / 64
      var lNumberOfWords = (lNumberOfWordsTempTwo + 1) * 16
      var lWordArray = Array(lNumberOfWords - 1)
      var lBytePosition = 0
      var lByteCount = 0
      while (lByteCount < lMessageLength) {
        lWordCount = (lByteCount - (lByteCount % 4)) / 4
        lBytePosition = (lByteCount % 4) * 8
        lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition))
        lByteCount++
      }
      lWordCount = (lByteCount - (lByteCount % 4)) / 4
      lBytePosition = (lByteCount % 4) * 8
      lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition)
      lWordArray[lNumberOfWords - 2] = lMessageLength << 3
      lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29
      return lWordArray
    }
    var wordToHex = function (lValue) {
      var WordToHexValue = '',
        WordToHexValueTemp = '',
        lByte, lCount
      for (lCount = 0; lCount <= 3; lCount++) {
        lByte = (lValue >>> (lCount * 8)) & 255
        WordToHexValueTemp = '0' + lByte.toString(16)
        WordToHexValue = WordToHexValue + WordToHexValueTemp.substr(WordToHexValueTemp.length - 2, 2)
      }
      return WordToHexValue
    }
    var uTF8Encode = function (string) {
      string = string.toString().replace(/\x0d\x0a/g, '\x0a')
      var output = ''
      for (var n = 0; n < string.length; n++) {
        var c = string.charCodeAt(n)
        if (c < 128) {
          output += String.fromCharCode(c)
        } else if ((c > 127) && (c < 2048)) {
          output += String.fromCharCode((c >> 6) | 192)
          output += String.fromCharCode((c & 63) | 128)
        } else {
          output += String.fromCharCode((c >> 12) | 224)
          output += String.fromCharCode(((c >> 6) & 63) | 128)
          output += String.fromCharCode((c & 63) | 128)
        }
      }
      return output
    }
    return createMD5String(md5str)
  }

  const consoleStyle = `



.att-col{
    display: flex;
    flex-flow: column nowrap;
    place-content: center start;
}
.att-row{
    display: flex;
    flex-flow: row nowrap;
    place-content: center start;
    margin:3px 0px 3px 0px;
}
.att-top{
    z-index: 999;
}
.att-input{
    outline: none;
}
#console-container{
    position: absolute;
    left: 50px;
    top: 300px;
    min-height: 48px;
    min-width: 48px;
}
.att-icon-container {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 48px;
    width: 48px;
    background-color: #fb7299;
    border-radius: 4px;
}
.att-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 32px;
    width: 32px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADFElEQVRYhe2XX2iPURjHP7+N0oYRWWObMZSUJjQKG/JnlCh/LkSaUG6URLlf8pNSciEX1AqzaEXKhdTMnVHmRogxtOZfG/m/r956Th3v791r7++nXPCt0znv8zznOd/3Oc95zvvyzyPlAiDpd7GYAywAioEioBd4BbQCd5MGMpVK/SoICAzQdku6p3i0S6qP8ZHRMhBhNN8c++iSdFVSk/UvQvo2SbP+BIGNIceNkhZKKgjZFUqqkXTOs/0maXUuBJZ4zh5KWjzIsC6T9NSbm5Y0NymBIknvzcEDSWOT7KukkhCJAGclTRwsgVM26Yuk8oSLu1Yp6WuIRI9tVSyBUm/CviwXd+2g+en3fP6QVB1HYK8ZvpGUnyOBYZJ6jUCDpFvmu9slskOex2GB9ZeAH5kUE+Ez0GKF7iOwxmTjgHSkI0mPjOX20NuMkTQlJJsRse/hhN1t/jrseZe3HSVRBD6ass5zEpyKZ5I+SJpnsrQl2RF7DuR9kp6bvZu71vy982TdLseitsCN/QwZBpQBhcAok00DhgJT7Xk0MBwoNXsHt40pz/dF62ujItBp7LaEQhkcn03ec7GkzXbmnSzQ14bm1XvFLGWybSZ7GkXgmimP5ngCXDtu/i57spUm+xS1BTetX5ck3WPg/LR5JvnW90cROG/9JGBDjotvASbY+IInL7e+K2OGhajFQtRlxy+b0Bd52d4U0rlbs3kgApV2bAIcypLADa/0loWIfTLdjoEIBO20GTUmXLhCUqtXbLaG9CddAkoaEUfghBmmvboefB1NHmDhCZL2S3odc5kt8nQH/LtgSEQCOdksoMESMig634ErQCfQZx+mlUCNFSpMvtNLaIcq698ChyPW/CUCZ5QcHXab+n7Ge+M15vGxk8VFoNcbtwPNViOCklwNzASWhuY8AV4C600/G1gO3AbOWLTcenl+HYiKQJC5eyRVxSRcUJ6vZxGp4HMtz49Akh+TKCwCVthPS4VdRj3AHeA+MB3YZBdWgA/AyGA592OSK4Ew8iM+ZgqAVUAd0AEcI+rP6D/+CoCf0HfCu9e1CkQAAAAASUVORK5CYII=');
}
#att-console{
    color: #23ade5;
    background-color: white;
    width: 250px;
    min-height: 48px;
    padding: 14px 8px 14px 8px;
    border-radius: 8px;
}
.att-console-title{
    margin:4px;
}
.att-input-range{
    width: 200px;
    margin-right: 10px;
    outline: none;
}
.att-input-value{
    width: 20px;
    text-align: center;
    border: 0px;
    border-bottom: 1px solid gray;
    outline: none;
}
.att-button{
    min-width: 80px;
    height: 24px;
    font-size: 12px;
    background-color: #23ade5;
    color: #fff;
    border-radius: 4px;
    border: 0px;
    margin-right: 2px;
}
.att-button:hover{
    background-color: #39b5e7;
}
.att-comment-span{
    background-color:rgba(0,0,0,0.4);
    position:relative;
    white-space: normal;
    border-radius: 3px;
    padding: 0 8px;
    text-align: center;
    line-height: normal;
    font-family: none;
    -webkit-box-decoration-break:clone;
    user-select: none;
    cursor: move;
    box-decoration-break: clone;
    vertical-align: middle;
}
#comment-container{
    z-index: 999;
    position:absolute;
    width:100%;
    text-align: center;
}
.att-comment-box{
    display: inline-block;
    vertical-align: middle;
    text-align: center;

}
.att-comment-fixed{
    bottom: 71px;
}
.att-comment-float{
    left: auto;
    top:0px;
}


    `
  $('body').append($('<style></style>').text(consoleStyle))
})();