bfg-common 1.0.0

package/public/spice-console/application/clientgui.js

@@ -0,0 +1,842 @@
+/*
+    Copyright (c) 2016 eyeOS
+
+    This file is part of Open365.
+
+    Open365 is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as
+    published by the Free Software Foundation, either version 3 of the
+    License, or (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+wdi.SPICE_INPUT_MOTION_ACK_BUNCH = 8
+
+wdi.ClientGui = $.spcExtend(wdi.EventObject.prototype, {
+  width: null,
+  height: null,
+  canvas: null,
+  ack_wait: 0,
+  mouse_mode: 0,
+  mouse_status: 0,
+  eventLayer: null,
+  counter: 0,
+  mainCanvas: 0,
+  firstTime: true,
+  clientOffsetX: 0,
+  clientOffsetY: 0,
+  magnifier: null,
+  magnifierBackground: null,
+  firstMove: true,
+  isMagnified: true,
+  isMouseDown: false,
+  soundStarted: false,
+  canvasMarginY: 0,
+  canvasMarginX: 0,
+  stuckKeysHandler: null,
+  isKeyboardEnabled: false,
+
+  subCanvas: {},
+  inputManager: null,
+  clipboardEnabled: true,
+  layer: null,
+  freezeClass: 'freeze',
+  app: {},
+
+  init: function (c) {
+    this.time = Date.now()
+    this.canvas = {}
+    this.contexts = {}
+    this.superInit()
+    this.magnifier = window
+      .$('<canvas/>')
+      .attr({
+        width: 150,
+        height: 150,
+      })
+      .css({
+        position: 'absolute',
+        left: '0px',
+        top: '0px',
+      })
+    this.stuckKeysHandler = c.stuckKeysHandler || new wdi.StuckKeysHandler()
+    this.settings = c.settings || {}
+    this.stuckKeysHandler.addListener(
+      'inputStuck',
+      this._sendInput.bind(this),
+      this
+    )
+
+    //load magnifier background
+    this.magnifierBackground = window.$('<img/>')
+    this.magnifierBackground.attr(
+      'src',
+      '/spice-console/resources/magnifier.png'
+    )
+    this.initSound()
+    this.inputManager =
+      c.inputManager ||
+      new wdi.InputManager({
+        stuckKeysHandler: this.stuckKeysHandler,
+        window: $(window),
+      })
+    this.inputManager.setCurrentWindow(window)
+    this.clipBoardDataParser =
+      c.clipBoardDataParser || new wdi.ClipboardDataParser({})
+    this.localClipboard =
+      c.localClipboard || new wdi.LocalClipboard({ clientGui: this })
+    this.app = c.app
+
+    var self = this
+    this.eventHandlers = {
+      hide: function () {
+        self.stuckKeysHandler.releaseAllKeys()
+      },
+    }
+    window.$(document).on(this.eventHandlers)
+  },
+
+  dispose: function () {
+    wdi.Debug.log('Disposing ClientGui')
+    $(document).off(this.eventHandlers)
+    this.unbindDOM()
+    this.removeAllCanvases()
+    this.inputManager.dispose()
+    this.stuckKeysHandler.dispose()
+    this.localClipboard.dispose()
+
+    this.width = null
+    this.height = null
+    this.canvas = null
+    this.ack_wait = 0
+    this.mouse_mode = 0
+    this.mouse_status = 0
+    this.eventLayer = null
+    this.counter = 0
+    this.mainCanvas = 0
+    this.firstTime = true
+    this.clientOffsetX = 0
+    this.clientOffsetY = 0
+    this.magnifier = null
+    this.magnifierBackground = null
+    this.firstMove = true
+    this.isMagnified = true
+    this.isMouseDown = false
+    this.soundStarted = false
+    this.canvasMarginY = 0
+    this.canvasMarginX = 0
+    this.stuckKeysHandler = null
+    this.subCanvas = {}
+    this.inputManager = null
+    this.clipboardEnabled = true
+    this.layer = null
+    clearInterval(self.rightClickTimer) //cancel, this is not a right click
+    clearInterval(self.mouseDownTimer) //cancel
+  },
+
+  removeAllCanvases: function () {
+    var self = this
+    Object.keys(this.canvas).forEach(function (key) {
+      $(self.canvas[key]).remove()
+      delete self.canvas[key]
+      delete self.contexts[key]
+    })
+    $(this.eventLayer).remove()
+    this.eventLayer = null
+  },
+
+  unbindDOM: function () {
+    if (this.eventLayer) {
+      var events = [
+        'touchstart',
+        'touchmove',
+        'touchend',
+        'mouseup',
+        'mousedown',
+        'mousemove',
+        'contextmenu',
+        'mousewheel',
+      ]
+      events.forEach(function (event) {
+        $(this.eventLayer).unbind(event)
+      })
+    }
+  },
+
+  freeze: function () {
+    if (this.canvas[0]) {
+      var image = new Image()
+      var cnv = this.canvas[0]
+      var $cnv = $(cnv)
+      $(image).attr('style', $cnv.attr('style'))
+      $(image).attr('class', this.freezeClass)
+      image.src = cnv.toDataURL('image/png')
+      $cnv.parent().append($(image))
+    }
+  },
+
+  cancelFreeze: function () {
+    $('.' + this.freezeClass).remove()
+  },
+
+  setLayer: function (layer) {
+    this.layer = layer
+  },
+
+  disableClipboard: function () {
+    this.clipboardEnabled = false
+  },
+
+  _sendInput: function (params) {
+    var data = params
+    var type = data[0]
+    var event = data[1]
+    this.fire('input', [type, event])
+  },
+
+  releaseAllKeys: function () {
+    this.stuckKeysHandler.releaseAllKeys()
+  },
+
+  getContext: function (surface_id) {
+    return this.contexts[surface_id]
+  },
+
+  getCanvas: function (surface_id) {
+    return this.canvas[surface_id]
+  },
+
+  checkFeatures: function () {
+    if (!Modernizr.canvas || !Modernizr.websockets) {
+      alert(
+        'Your Browser is not compatible with WDI. Visit ... for a list of compatible browsers'
+      )
+      return false
+    }
+    return true
+  },
+
+  deleteSubCanvas: function (window) {
+    var obj = this.subCanvas[window['hwnd']]
+    this.subCanvas[window['hwnd']] = null
+    return obj
+  },
+
+  moveSubCanvas: function (window) {
+    var obj = this.subCanvas[window['hwnd']]
+    obj['info'] = window
+    this._fillSubCanvasFromWindow(window)
+    return obj
+  },
+
+  resizeSubCanvas: function (window) {
+    var obj = this.subCanvas[window['hwnd']]
+    $([obj['canvas'], obj['eventLayer']]).attr({
+      width: window['width'],
+      height: window['height'],
+    })
+    obj['info'] = window
+    this._fillSubCanvasFromWindow(window)
+    return obj
+  },
+
+  _fillSubCanvasFromWindow: function (window) {
+    var top = parseInt(window.top, 10)
+    var left = parseInt(window.left, 10)
+    var width = parseInt(window.width, 10)
+    var height = parseInt(window.height, 10)
+    this.fillSubCanvas({
+      top: top,
+      left: left,
+      right: left + width,
+      bottom: top + height,
+    })
+  },
+
+  createNewSubCanvas: function (window) {
+    var evtlayer = this.createEventLayer(
+      window['hwnd'] + '_event',
+      window['width'],
+      window['height']
+    )
+    this.subCanvas[window['hwnd']] = {
+      canvas: $('<canvas/>')
+        .attr({
+          width: window['width'],
+          height: window['height'],
+        })
+        .css({
+          display: window['iconic'] ? 'none' : 'block',
+        })[0],
+      eventLayer: evtlayer,
+      info: window,
+      position: 0,
+    }
+    //we have the main area drawn?
+    if (this.canvas[this.mainCanvas]) {
+      this._fillSubCanvasFromWindow(window)
+    }
+    return [this.subCanvas[window['hwnd']]]
+  },
+
+  fillSubCanvas: function (filterPosition) {
+    var canvas = this.canvas[this.mainCanvas]
+    var info = null
+    for (var i in this.subCanvas) {
+      if (
+        this.subCanvas[i] != null &&
+        this.subCanvas[i] !== undefined &&
+        this.subCanvas.hasOwnProperty(i)
+      ) {
+        info = this.subCanvas[i]['info']
+        if (filterPosition != null || filterPosition != undefined) {
+          var top = parseInt(info['top'], 10)
+          var left = parseInt(info['left'], 10)
+          var width = parseInt(info['width'], 10)
+          var height = parseInt(info['height'], 10)
+          var position = {
+            top: top,
+            left: left,
+            right: left + width,
+            bottom: top + height,
+          }
+          if (
+            wdi.CollisionDetector.thereIsBoxCollision(position, filterPosition)
+          ) {
+            this._doDrawSubCanvas(canvas, this.subCanvas[i], info)
+          }
+        } else {
+          this._doDrawSubCanvas(canvas, this.subCanvas[i], info)
+        }
+      }
+    }
+  },
+
+  _doDrawSubCanvas: function (canvas, subCanvas, info) {
+    if (
+      this.canvas[this.mainCanvas] == null ||
+      this.canvas[this.mainCanvas] == undefined
+    ) {
+      return
+    }
+    var destCtx = null
+    if (info['iconic'] === 0) {
+      var destCanvas = subCanvas['canvas']
+      destCtx = destCanvas.getContext('2d')
+
+      var x = 0
+      var y = 0
+      var width = +info.width
+      var height = +info.height
+      var left = +info['left']
+      var top = +info['top']
+
+      if (left < 0) {
+        width = width + left
+        x = -left
+        left = 0
+      }
+
+      if (top < 0) {
+        height = height + top
+        y = -top
+        top = 0
+      }
+
+      try {
+        // if width or height are less than 1 or a float
+        // drawImage fails in firefox (ERROR: IndexSizeError)
+        width = Math.max(1, Math.floor(width))
+        height = Math.max(1, Math.floor(height))
+        if (width > canvas.width) width = canvas.width
+        if (height > canvas.height) height = canvas.height
+        destCtx.drawImage(canvas, left, top, width, height, x, y, width, height)
+      } catch (err) {
+        wdi.Debug.error(err)
+      }
+    }
+  },
+
+  removeCanvas: function (spiceMessage) {
+    var surface = spiceMessage.args
+    if (surface.surface_id === this.mainCanvas) {
+      $(this.eventLayer).remove()
+      this.eventLayer = null
+    }
+
+    this.canvas[surface.surface_id].keepAlive = false
+    delete this.canvas[surface.surface_id]
+    delete this.contexts[surface.surface_id]
+  },
+
+  drawCanvas: function (spiceMessage) {
+    wdi.Debug.log('clientgui time: ', this.time)
+    var surface = spiceMessage.args
+
+    // Custom code
+    // Проверяем если ширина вм-а меньше ширины окна, вставляем по центру
+    if (surface.width < window.innerWidth) {
+      const x = (window.innerWidth - surface.width) / 2
+      this.setCanvasMargin({
+        x,
+        y: this.canvasMarginY,
+      })
+      this.setClientOffset(-x, this.canvasMarginY)
+    }
+    // Custom code End
+
+    var cnv = wdi.GlobalPool.create('Canvas')
+    cnv.keepAlive = true //prevent this canvas to return to the pool by packetfilter
+
+    cnv.id = 'canvas_' + surface.surface_id
+    cnv.width = surface.width * this.pixelRatio
+    cnv.height = surface.height * this.pixelRatio
+    cnv.style.position = 'absolute'
+    cnv.style.top = this.canvasMarginY + 'px'
+    cnv.style.left = this.canvasMarginX + 'px'
+    cnv.style.width = surface.width + 'px'
+    cnv.style.height = surface.height + 'px'
+
+    this.canvas[surface.surface_id] = cnv
+    this.contexts[surface.surface_id] = cnv.getContext('2d')
+
+    if (surface.flags && !wdi.SeamlessIntegration) {
+      this.mainCanvas = surface.surface_id
+
+      this.eventLayer = this.createEventLayer(
+        'eventLayer',
+        surface.width,
+        surface.height
+      )
+
+      var evLayer = $(this.eventLayer).css({
+        position: 'absolute',
+        top: this.canvasMarginY + 'px',
+        left: this.canvasMarginX + 'px',
+      })[0]
+
+      if (this.layer) {
+        this.layer.appendChild(cnv)
+        this.layer.appendChild(evLayer)
+      } else {
+        document.body.appendChild(cnv)
+        document.body.appendChild(evLayer)
+      }
+      !this.isKeyboardEnabled && this.enableKeyboard()
+    }
+
+    //this goes here?
+    if (this.firstTime && this.clipboardEnabled) {
+      var self = this
+      var PASTES_PER_SECOND = this.settings.PASTES_PER_SECOND || 5
+
+      var firePaste = _.throttle(function (data) {
+        self.fire('paste', data)
+      }, 1000 / PASTES_PER_SECOND)
+
+      $(document).bind('paste', function (event) {
+        self.clipBoardDataParser.parse(
+          event.originalEvent.clipboardData,
+          firePaste
+        )
+      })
+
+      $(document).bind('copy', function (e) {
+        self.app.sendShortcut(wdi.keyShortcutsHandled.CTRLC)
+      })
+
+      this.firstTime = false
+    }
+
+    //notify about resolution
+    if (surface.flags) {
+      this.fire('resolution', [
+        this.canvas[surface.surface_id].width,
+        this.canvas[surface.surface_id].height,
+      ])
+    }
+  },
+
+  disableKeyboard: function () {
+    var documentDOM = window.$(window.document)
+    documentDOM.unbind('keydown', this.handleKey)
+    documentDOM.unbind('keyup', this.handleKey)
+    documentDOM.unbind('keypress', this.handleKey)
+    this.inputManager.disable()
+  },
+
+  enableKeyboard: function () {
+    var self = this,
+      documentDOM = window.$(window.document)
+    documentDOM['keydown']([self], this.handleKey)
+    documentDOM['keypress']([self], this.handleKey)
+    documentDOM['keyup']([self], this.handleKey)
+    this.inputManager.enable()
+    !this.isKeyboardEnabled && (this.isKeyboardEnabled = true)
+  },
+
+  setCanvasMargin: function (canvasMargin) {
+    this.canvasMarginX = canvasMargin.x
+    this.canvasMarginY = canvasMargin.y
+  },
+
+  createEventLayer: function (event_id, width, height) {
+    var self = this
+
+    var eventLayer = $('<canvas/>')
+      .css({
+        cursor: 'default',
+        position: 'absolute',
+      })
+      .attr({
+        id: event_id,
+        // width: window.innerWidth,
+        // height: window.innerHeight
+        // Правильнее слой события делать с размером самого вм-а
+        width, // Custom code
+        height, // Custom code
+      })
+
+    if (window['bowser']['firefox']) {
+      eventLayer.attr('contentEditable', true)
+    }
+
+    eventLayer.bind('touchstart', function (event) {
+      event.preventDefault()
+      var touch =
+        event.originalEvent.touches[0] || event.originalEvent.changedTouches[0]
+      var x = touch.pageX
+      var y = touch.pageY
+      self.generateEvent.call(self, 'mousemove', [
+        x + self.clientOffsetX,
+        y + self.clientOffsetY,
+        self.mouse_status,
+      ])
+      if (event.originalEvent.touches.length === 1) {
+        self.enabledTouchMove = true
+        self.launchRightClick.call(self, x, y)
+      } else if (event.originalEvent.touches.length === 2) {
+        self.touchX = x
+        self.touchY = y
+        self.enabledTouchMove = false
+      } else if (event.originalEvent.touches.length === 3) {
+        self.touchY3 = y
+        self.enabledTouchMove = false
+      }
+    })
+
+    eventLayer.bind('touchmove', function (event) {
+      var touch =
+        event.originalEvent.touches[0] || event.originalEvent.changedTouches[0]
+      var x = touch.pageX
+      var y = touch.pageY
+      //TODO: ignore first move
+      if (event.originalEvent.touches.length === 1 && self.enabledTouchMove) {
+        self.isMagnified = true //magnified!
+        clearInterval(self.rightClickTimer) //cancel, this is not a right click
+
+        if (!self.isMouseDown) {
+          clearInterval(self.mouseDownTimer) //cancel, not enough time to send mousedown
+          self.launchMouseDown() //fire again
+        }
+
+        self.generateEvent.call(self, 'mousemove', [
+          x + self.clientOffsetX,
+          y + self.clientOffsetY - 80,
+          self.mouse_status,
+        ])
+        var pos = $(this).offset()
+        var myX = x - pos.left
+        var myY = y - pos.top
+
+        //draw magnifier
+        if (self.firstMove) {
+          $('body').append(self.magnifier) //TODO: append to body?
+          self.firstMove = false
+        }
+
+        var posX = myX - 75
+        var posY = myY - 160
+
+        self.magnifier.css({
+          left: posX,
+          top: posY,
+        })
+
+        //fill magnifier
+        var ctx = self.magnifier[0].getContext('2d')
+        ctx.clearRect(0, 0, 150, 150)
+        ctx.save()
+        ctx.beginPath()
+        ctx.arc(75, 75, 75, 0, 2 * Math.PI, false)
+        ctx.clip()
+        ctx.drawImage(
+          self.getCanvas(0),
+          myX - 50, //-50 because we are going to get
+          myY - 50 - 80, //100 px and we want the finder to be the center
+          //-80 becasue the magnifier is 160px up (160/2)
+          //we need to clean all this after the demo
+          //is working
+          100,
+          100,
+          0,
+          0,
+          150,
+          150
+        )
+        //				//draw the background
+        ctx.drawImage(self.magnifierBackground[0], 0, 0)
+        ctx.restore()
+        //empty magnifier
+      } else if (event.originalEvent.touches.length === 2) {
+        var delta = self.touchY - y
+        if (Math.abs(delta) > 10) {
+          var button = delta > 0 ? 4 : 3
+          self.touchX = x
+          self.touchY = y
+          self.generateEvent.call(self, 'mousedown', button)
+          self.generateEvent.call(self, 'mouseup', button)
+        }
+      } else if (event.originalEvent.touches.length === 3) {
+        var delta = self.touchY3 - y
+        if (delta > 100) {
+          document.getElementById('hiddeninput').select()
+        }
+      }
+      event.preventDefault()
+    })
+
+    eventLayer.bind('touchend', function (event) {
+      if (self.enabledTouchMove) {
+        var touch =
+          event.originalEvent.touches[0] ||
+          event.originalEvent.changedTouches[0]
+        var x = touch.pageX
+        var y = touch.pageY
+        if (!self.isMouseDown) {
+          self.generateEvent.call(self, 'mousedown', 0)
+        }
+        self.isMouseDown = false
+        self.generateEvent.call(self, 'mouseup', 0)
+        var pos = $(this).offset()
+
+        self.enabledTouchMove = false
+        self.firstMove = true
+        if (self.isMagnified) {
+          self.magnifier.remove()
+        }
+        self.isMagnified = false
+      }
+      clearInterval(self.rightClickTimer) //cancel, this is not a right click
+      clearInterval(self.mouseDownTimer) //cancel
+    })
+
+    //if (!Modernizr.touch) {
+    eventLayer['mouseup'](function (event) {
+      var button = event.button
+
+      self.generateEvent.call(self, 'mouseup', button)
+      self.mouse_status = 0
+      event.preventDefault()
+    })
+
+    eventLayer['mousedown'](function (event) {
+      var button = event.button
+
+      self.generateEvent.call(self, 'mousedown', button)
+      self.mouse_status = 1
+      event.preventDefault()
+    })
+
+    eventLayer['mousemove'](function (event) {
+      var x = event.pageX
+      var y = event.pageY
+      self.generateEvent.call(self, 'mousemove', [
+        (x + self.clientOffsetX) * self.pixelRatio,
+        (y + self.clientOffsetY) * self.pixelRatio,
+        self.mouse_status,
+      ])
+      event.preventDefault()
+    })
+
+    eventLayer.bind('contextmenu', function (event) {
+      event.preventDefault()
+      return false
+    })
+    //}
+
+    var mouseEventPause = false
+
+    var fireWheel = _.throttle(function (event, delta) {
+      var button = delta > 0 ? 3 : 4
+
+      self.generateEvent.call(self, 'mousedown', button)
+      self.generateEvent.call(self, 'mouseup', button)
+
+      return false
+    }, 60)
+
+    eventLayer.bind('mousewheel', fireWheel)
+
+    this.fire('eventLayerCreated', eventLayer[0])
+
+    wdi.VirtualMouse.setEventLayer(eventLayer[0], 0, 0, width, height, 1)
+    return eventLayer[0]
+  },
+
+  launchRightClick: function (x, y) {
+    var self = this
+    this.rightClickTimer = setTimeout(function () {
+      self.generateEvent.call(self, 'mousedown', 2)
+      self.generateEvent.call(self, 'mouseup', 2)
+      self.enabledTouchMove = false
+    }, 400)
+  },
+
+  launchMouseDown: function (x, y) {
+    var self = this
+    this.mouseDownTimer = setTimeout(function () {
+      self.isMouseDown = true
+      self.generateEvent.call(self, 'mousedown', 0)
+    }, 1500)
+  },
+
+  showError: function (message) {
+    wdi.Debug.warn(message)
+    $('<div/>', {
+      id: 'error',
+    })
+      .html(message)
+      .css({
+        'background-color': '#ff4141',
+      })
+      .appendTo('body')
+
+    setTimeout("$('#error').remove()", 2000)
+  },
+
+  generateEvent: function (event, params) {
+    if (event === 'mousemove' || event === 'joystick') {
+      if (this.ack_wait < wdi.SPICE_INPUT_MOTION_ACK_BUNCH) {
+        this.ack_wait++
+        this.fire('input', [event, params])
+      }
+    } else {
+      if (event.indexOf('key') > -1) {
+        // it's a keyEvent
+        this.stuckKeysHandler.checkSpecialKey(event, params[0]['keyCode'])
+        if (!this.shouldGenerateKeyEvents(params[0]['keyCode'])) {
+          // Special keys should not generate keyEvents
+          return
+        }
+        var val = event === 'keypress' ? this.inputManager.getValue() : ''
+
+        event === 'keypress' && $('#inputmanager').val('')
+
+        if (val) {
+          params = this.inputManager.manageChar(val, params)
+        }
+      }
+      this.fire('input', [event, params])
+    }
+  },
+
+  shouldGenerateKeyEvents: function (keyCode) {
+    return !this.inputManager.isSpecialKey(keyCode)
+  },
+
+  motion_ack: function () {
+    this.ack_wait = 0
+  },
+
+  setMouseMode: function (mode) {
+    this.mouse_mode = mode
+  },
+
+  handleKey: function (e) {
+    e.data[0].generateEvent.call(e.data[0], e.type, [e])
+
+    if (wdi.Keymap.isInKeymap(e.keyCode) && e.type !== 'keypress') {
+      e.preventDefault()
+    }
+  },
+
+  setClientOffset: function (x, y) {
+    this.clientOffsetX = x
+    this.clientOffsetY = y
+  },
+
+  setClipBoardData: function (data) {
+    //we have received new clipboard data
+    //show to the user
+    //TODO: create a new dialog with buttons to copy the data directly
+    //from the textbox
+    //prompt("New clipboard data available, press ctrl+c to copy it", data);
+    navigator.clipboard.writeText(data)
+  },
+
+  setToLocalClipboard: function (data) {
+    this.localClipboard.updateClipboardBuffer(data.value)
+  },
+
+  getStuckKeysHandler: function () {
+    return this.stuckKeysHandler
+  },
+
+  initSound: function () {
+    var self = this
+    if (!Modernizr.touch) {
+      this.soundStarted = true
+      window.setTimeout(function () {
+        self.fire('startAudio')
+      }, 100)
+    } else {
+      var $button = $('<button>Start</button>', { id: 'startAudio' })
+        .css({
+          padding: '10px 25px',
+          fontSize: '25px',
+          fontFamily: 'Verdana',
+          cursor: 'pointer',
+          margin: '0 auto',
+        })
+        .click(function () {
+          self.soundStarted = true
+          self.fire('startAudio')
+          $('#soundButtonContainer').remove()
+        })
+
+      var $messageContainer = $(
+        '<div id="messageContainer"><p>Click to start using your virtual session:</p></div>'
+      ).css({
+        color: 'white',
+        textAlign: 'center',
+        fontSize: '25px',
+        fontFamily: 'Verdana',
+        marginTop: '75px',
+      })
+
+      var $container = $('<div></div>', { id: 'soundButtonContainer' })
+
+      $button.appendTo($messageContainer)
+      $messageContainer.appendTo($container)
+      $container.appendTo('body')
+
+      $container.css({
+        position: 'absolute',
+        zIndex: 999999999,
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: document.height,
+        backgroundColor: 'black',
+      })
+    }
+  },
+})