@novnc/novnc 1.2.0 → 1.3.0-g65d6357

package/lib/rfb.js

@@ -1,9 +1,11 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _int = require("./util/int.js");
 
@@ -41,8 +43,6 @@ var _xtscancodes = _interopRequireDefault(require("./input/xtscancodes.js"));
 
 var _encodings = require("./encodings.js");
 
-require("./util/polyfill.js");
-
 var _raw = _interopRequireDefault(require("./decoders/raw.js"));
 
 var _copyrect = _interopRequireDefault(require("./decoders/copyrect.js"));
@@ -55,13 +55,13 @@ var _tight = _interopRequireDefault(require("./decoders/tight.js"));
 
 var _tightpng = _interopRequireDefault(require("./decoders/tightpng.js"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _zrle = _interopRequireDefault(require("./decoders/zrle.js"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -75,11 +75,11 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -120,7 +120,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
 
   var _super = _createSuper(RFB);
 
-  function RFB(target, url, options) {
+  function RFB(target, urlOrChannel, options) {
     var _this;
 
     _classCallCheck(this, RFB);
@@ -129,13 +129,20 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
       throw new Error("Must specify target");
     }
 
-    if (!url) {
-      throw new Error("Must specify URL");
+    if (!urlOrChannel) {
+      throw new Error("Must specify URL, WebSocket or RTCDataChannel");
     }
 
     _this = _super.call(this);
     _this._target = target;
-    _this._url = url; // Connection details
+
+    if (typeof urlOrChannel === "string") {
+      _this._url = urlOrChannel;
+    } else {
+      _this._url = null;
+      _this._rawChannel = urlOrChannel;
+    } // Connection details
+
 
     options = options || {};
     _this._rfbCredentials = options.credentials || {};
@@ -179,6 +186,8 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
     _this._keyboard = null; // Keyboard input handler object
 
     _this._gestures = null; // Gesture input handler object
+
+    _this._resizeObserver = null; // Resize observer object
     // Timers
 
     _this._disconnTimer = null; // disconnection timer
@@ -213,7 +222,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
 
     _this._eventHandlers = {
       focusCanvas: _this._focusCanvas.bind(_assertThisInitialized(_this)),
-      windowResize: _this._windowResize.bind(_assertThisInitialized(_this)),
+      handleResize: _this._handleResize.bind(_assertThisInitialized(_this)),
       handleMouse: _this._handleMouse.bind(_assertThisInitialized(_this)),
       handleWheel: _this._handleWheel.bind(_assertThisInitialized(_this)),
       handleGesture: _this._handleGesture.bind(_assertThisInitialized(_this))
@@ -230,9 +239,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
     _this._canvas = document.createElement('canvas');
     _this._canvas.style.margin = 'auto'; // Some browsers add an outline on focus
 
-    _this._canvas.style.outline = 'none'; // IE miscalculates width without this :(
-
-    _this._canvas.style.flexShrink = '0';
+    _this._canvas.style.outline = 'none';
     _this._canvas.width = 0;
     _this._canvas.height = 0;
     _this._canvas.tabIndex = -1;
@@ -240,7 +247,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
     _this._screen.appendChild(_this._canvas); // Cursor
 
 
-    _this._cursor = new _cursor.default(); // XXX: TightVNC 2.8.11 sends no cursor at all until Windows changes
+    _this._cursor = new _cursor["default"](); // XXX: TightVNC 2.8.11 sends no cursor at all until Windows changes
     // it. Result: no cursor at all until a window border or an edit field
     // is hit blindly. But there are also VNC servers that draw the cursor
     // in the framebuffer and don't send the empty local cursor. There is
@@ -252,95 +259,40 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
 
     _this._cursorImage = RFB.cursors.none; // populate decoder array with objects
 
-    _this._decoders[_encodings.encodings.encodingRaw] = new _raw.default();
-    _this._decoders[_encodings.encodings.encodingCopyRect] = new _copyrect.default();
-    _this._decoders[_encodings.encodings.encodingRRE] = new _rre.default();
-    _this._decoders[_encodings.encodings.encodingHextile] = new _hextile.default();
-    _this._decoders[_encodings.encodings.encodingTight] = new _tight.default();
-    _this._decoders[_encodings.encodings.encodingTightPNG] = new _tightpng.default(); // NB: nothing that needs explicit teardown should be done
+    _this._decoders[_encodings.encodings.encodingRaw] = new _raw["default"]();
+    _this._decoders[_encodings.encodings.encodingCopyRect] = new _copyrect["default"]();
+    _this._decoders[_encodings.encodings.encodingRRE] = new _rre["default"]();
+    _this._decoders[_encodings.encodings.encodingHextile] = new _hextile["default"]();
+    _this._decoders[_encodings.encodings.encodingTight] = new _tight["default"]();
+    _this._decoders[_encodings.encodings.encodingTightPNG] = new _tightpng["default"]();
+    _this._decoders[_encodings.encodings.encodingZRLE] = new _zrle["default"](); // NB: nothing that needs explicit teardown should be done
     // before this point, since this can throw an exception
 
     try {
-      _this._display = new _display.default(_this._canvas);
+      _this._display = new _display["default"](_this._canvas);
     } catch (exc) {
       Log.Error("Display exception: " + exc);
       throw exc;
     }
 
     _this._display.onflush = _this._onFlush.bind(_assertThisInitialized(_this));
-    _this._keyboard = new _keyboard.default(_this._canvas);
+    _this._keyboard = new _keyboard["default"](_this._canvas);
     _this._keyboard.onkeyevent = _this._handleKeyEvent.bind(_assertThisInitialized(_this));
-    _this._gestures = new _gesturehandler.default();
-    _this._sock = new _websock.default();
-
-    _this._sock.on('message', function () {
-      _this._handleMessage();
-    });
-
-    _this._sock.on('open', function () {
-      if (_this._rfbConnectionState === 'connecting' && _this._rfbInitState === '') {
-        _this._rfbInitState = 'ProtocolVersion';
-        Log.Debug("Starting VNC handshake");
-      } else {
-        _this._fail("Unexpected server connection while " + _this._rfbConnectionState);
-      }
-    });
-
-    _this._sock.on('close', function (e) {
-      Log.Debug("WebSocket on-close event");
-      var msg = "";
-
-      if (e.code) {
-        msg = "(code: " + e.code;
-
-        if (e.reason) {
-          msg += ", reason: " + e.reason;
-        }
-
-        msg += ")";
-      }
-
-      switch (_this._rfbConnectionState) {
-        case 'connecting':
-          _this._fail("Connection closed " + msg);
-
-          break;
-
-        case 'connected':
-          // Handle disconnects that were initiated server-side
-          _this._updateConnectionState('disconnecting');
+    _this._gestures = new _gesturehandler["default"]();
+    _this._sock = new _websock["default"]();
 
-          _this._updateConnectionState('disconnected');
+    _this._sock.on('open', _this._socketOpen.bind(_assertThisInitialized(_this)));
 
-          break;
-
-        case 'disconnecting':
-          // Normal disconnection path
-          _this._updateConnectionState('disconnected');
-
-          break;
-
-        case 'disconnected':
-          _this._fail("Unexpected server disconnect " + "when already disconnected " + msg);
-
-          break;
-
-        default:
-          _this._fail("Unexpected server disconnect before connecting " + msg);
+    _this._sock.on('close', _this._socketClose.bind(_assertThisInitialized(_this)));
 
-          break;
-      }
+    _this._sock.on('message', _this._handleMessage.bind(_assertThisInitialized(_this)));
 
-      _this._sock.off('close');
-    });
+    _this._sock.on('error', _this._socketError.bind(_assertThisInitialized(_this)));
 
-    _this._sock.on('error', function (e) {
-      return Log.Warn("WebSocket on-error event");
-    }); // Slight delay of the actual connection so that the caller has
-    // time to set up callbacks
+    _this._resizeObserver = new ResizeObserver(_this._eventHandlers.handleResize); // All prepared, kick off the connection
 
+    _this._updateConnectionState('connecting');
 
-    setTimeout(_this._updateConnectionState.bind(_assertThisInitialized(_this), 'connecting'));
     Log.Debug("<< RFB.constructor"); // ===== PROPERTIES =====
 
     _this.dragViewport = false;
@@ -363,8 +315,138 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
 
 
   _createClass(RFB, [{
+    key: "viewOnly",
+    get: function get() {
+      return this._viewOnly;
+    },
+    set: function set(viewOnly) {
+      this._viewOnly = viewOnly;
+
+      if (this._rfbConnectionState === "connecting" || this._rfbConnectionState === "connected") {
+        if (viewOnly) {
+          this._keyboard.ungrab();
+        } else {
+          this._keyboard.grab();
+        }
+      }
+    }
+  }, {
+    key: "capabilities",
+    get: function get() {
+      return this._capabilities;
+    }
+  }, {
+    key: "touchButton",
+    get: function get() {
+      return 0;
+    },
+    set: function set(button) {
+      Log.Warn("Using old API!");
+    }
+  }, {
+    key: "clipViewport",
+    get: function get() {
+      return this._clipViewport;
+    },
+    set: function set(viewport) {
+      this._clipViewport = viewport;
+
+      this._updateClip();
+    }
+  }, {
+    key: "scaleViewport",
+    get: function get() {
+      return this._scaleViewport;
+    },
+    set: function set(scale) {
+      this._scaleViewport = scale; // Scaling trumps clipping, so we may need to adjust
+      // clipping when enabling or disabling scaling
+
+      if (scale && this._clipViewport) {
+        this._updateClip();
+      }
+
+      this._updateScale();
+
+      if (!scale && this._clipViewport) {
+        this._updateClip();
+      }
+    }
+  }, {
+    key: "resizeSession",
+    get: function get() {
+      return this._resizeSession;
+    },
+    set: function set(resize) {
+      this._resizeSession = resize;
+
+      if (resize) {
+        this._requestRemoteResize();
+      }
+    }
+  }, {
+    key: "showDotCursor",
+    get: function get() {
+      return this._showDotCursor;
+    },
+    set: function set(show) {
+      this._showDotCursor = show;
+
+      this._refreshCursor();
+    }
+  }, {
+    key: "background",
+    get: function get() {
+      return this._screen.style.background;
+    },
+    set: function set(cssValue) {
+      this._screen.style.background = cssValue;
+    }
+  }, {
+    key: "qualityLevel",
+    get: function get() {
+      return this._qualityLevel;
+    },
+    set: function set(qualityLevel) {
+      if (!Number.isInteger(qualityLevel) || qualityLevel < 0 || qualityLevel > 9) {
+        Log.Error("qualityLevel must be an integer between 0 and 9");
+        return;
+      }
+
+      if (this._qualityLevel === qualityLevel) {
+        return;
+      }
+
+      this._qualityLevel = qualityLevel;
+
+      if (this._rfbConnectionState === 'connected') {
+        this._sendEncodings();
+      }
+    }
+  }, {
+    key: "compressionLevel",
+    get: function get() {
+      return this._compressionLevel;
+    },
+    set: function set(compressionLevel) {
+      if (!Number.isInteger(compressionLevel) || compressionLevel < 0 || compressionLevel > 9) {
+        Log.Error("compressionLevel must be an integer between 0 and 9");
+        return;
+      }
+
+      if (this._compressionLevel === compressionLevel) {
+        return;
+      }
+
+      this._compressionLevel = compressionLevel;
+
+      if (this._rfbConnectionState === 'connected') {
+        this._sendEncodings();
+      }
+    } // ===== PUBLIC METHODS =====
+
+  }, {
     key: "disconnect",
-    // ===== PUBLIC METHODS =====
     value: function disconnect() {
       this._updateConnectionState('disconnecting');
 
@@ -388,12 +470,12 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
       }
 
       Log.Info("Sending Ctrl-Alt-Del");
-      this.sendKey(_keysym.default.XK_Control_L, "ControlLeft", true);
-      this.sendKey(_keysym.default.XK_Alt_L, "AltLeft", true);
-      this.sendKey(_keysym.default.XK_Delete, "Delete", true);
-      this.sendKey(_keysym.default.XK_Delete, "Delete", false);
-      this.sendKey(_keysym.default.XK_Alt_L, "AltLeft", false);
-      this.sendKey(_keysym.default.XK_Control_L, "ControlLeft", false);
+      this.sendKey(_keysym["default"].XK_Control_L, "ControlLeft", true);
+      this.sendKey(_keysym["default"].XK_Alt_L, "AltLeft", true);
+      this.sendKey(_keysym["default"].XK_Delete, "Delete", true);
+      this.sendKey(_keysym["default"].XK_Delete, "Delete", false);
+      this.sendKey(_keysym["default"].XK_Alt_L, "AltLeft", false);
+      this.sendKey(_keysym["default"].XK_Control_L, "ControlLeft", false);
     }
   }, {
     key: "machineShutdown",
@@ -425,7 +507,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
         return;
       }
 
-      var scancode = _xtscancodes.default[code];
+      var scancode = _xtscancodes["default"][code];
 
       if (this._qemuExtKeyEventSupported && scancode) {
         // 0 is NoSymbol
@@ -443,8 +525,8 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
     }
   }, {
     key: "focus",
-    value: function focus() {
-      this._canvas.focus();
+    value: function focus(options) {
+      this._canvas.focus(options);
     }
   }, {
     key: "blur",
@@ -477,16 +559,25 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
     key: "_connect",
     value: function _connect() {
       Log.Debug(">> RFB.connect");
-      Log.Info("connecting to " + this._url);
 
-      try {
-        // WebSocket.onopen transitions to the RFB init states
+      if (this._url) {
+        Log.Info("connecting to ".concat(this._url));
+
         this._sock.open(this._url, this._wsProtocols);
-      } catch (e) {
-        if (e.name === 'SyntaxError') {
-          this._fail("Invalid host or port (" + e + ")");
-        } else {
-          this._fail("Error when opening socket (" + e + ")");
+      } else {
+        Log.Info("attaching ".concat(this._rawChannel, " to Websock"));
+
+        this._sock.attach(this._rawChannel);
+
+        if (this._sock.readyState === 'closed') {
+          throw Error("Cannot use already closed WebSocket/RTCDataChannel");
+        }
+
+        if (this._sock.readyState === 'open') {
+          // FIXME: _socketOpen() can in theory call _fail(), which
+          //        isn't allowed this early, but I'm not sure that can
+          //        happen without a bug messing up our state variables
+          this._socketOpen();
         }
       } // Make our elements part of the page
 
@@ -497,11 +588,11 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
 
       this._cursor.attach(this._canvas);
 
-      this._refreshCursor(); // Monitor size changes of the screen
-      // FIXME: Use ResizeObserver, or hidden overflow
+      this._refreshCursor(); // Monitor size changes of the screen element
+
 
+      this._resizeObserver.observe(this._screen); // Always grab focus on some kind of click event
 
-      window.addEventListener('resize', this._eventHandlers.windowResize); // Always grab focus on some kind of click event
 
       this._canvas.addEventListener("mousedown", this._eventHandlers.focusCanvas);
 
@@ -562,7 +653,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
 
       this._canvas.removeEventListener("touchstart", this._eventHandlers.focusCanvas);
 
-      window.removeEventListener('resize', this._eventHandlers.windowResize);
+      this._resizeObserver.disconnect();
 
       this._keyboard.ungrab();
 
@@ -584,6 +675,73 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
       clearTimeout(this._mouseMoveTimer);
       Log.Debug("<< RFB.disconnect");
     }
+  }, {
+    key: "_socketOpen",
+    value: function _socketOpen() {
+      if (this._rfbConnectionState === 'connecting' && this._rfbInitState === '') {
+        this._rfbInitState = 'ProtocolVersion';
+        Log.Debug("Starting VNC handshake");
+      } else {
+        this._fail("Unexpected server connection while " + this._rfbConnectionState);
+      }
+    }
+  }, {
+    key: "_socketClose",
+    value: function _socketClose(e) {
+      Log.Debug("WebSocket on-close event");
+      var msg = "";
+
+      if (e.code) {
+        msg = "(code: " + e.code;
+
+        if (e.reason) {
+          msg += ", reason: " + e.reason;
+        }
+
+        msg += ")";
+      }
+
+      switch (this._rfbConnectionState) {
+        case 'connecting':
+          this._fail("Connection closed " + msg);
+
+          break;
+
+        case 'connected':
+          // Handle disconnects that were initiated server-side
+          this._updateConnectionState('disconnecting');
+
+          this._updateConnectionState('disconnected');
+
+          break;
+
+        case 'disconnecting':
+          // Normal disconnection path
+          this._updateConnectionState('disconnected');
+
+          break;
+
+        case 'disconnected':
+          this._fail("Unexpected server disconnect " + "when already disconnected " + msg);
+
+          break;
+
+        default:
+          this._fail("Unexpected server disconnect before connecting " + msg);
+
+          break;
+      }
+
+      this._sock.off('close'); // Delete reference to raw channel to allow cleanup.
+
+
+      this._rawChannel = null;
+    }
+  }, {
+    key: "_socketError",
+    value: function _socketError(e) {
+      Log.Warn("WebSocket on-error event");
+    }
   }, {
     key: "_focusCanvas",
     value: function _focusCanvas(event) {
@@ -591,7 +749,9 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
         return;
       }
 
-      this.focus();
+      this.focus({
+        preventScroll: true
+      });
     }
   }, {
     key: "_setDesktopName",
@@ -604,8 +764,8 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
       }));
     }
   }, {
-    key: "_windowResize",
-    value: function _windowResize(event) {
+    key: "_handleResize",
+    value: function _handleResize() {
       var _this2 = this;
 
       // If the window resized then our screen element might have
@@ -1275,7 +1435,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
               magnitude = Math.hypot(ev.detail.magnitudeX, ev.detail.magnitudeY);
 
               if (Math.abs(magnitude - this._gestureLastMagnitudeX) > GESTURE_ZOOMSENS) {
-                this._handleKeyEvent(_keysym.default.XK_Control_L, "ControlLeft", true);
+                this._handleKeyEvent(_keysym["default"].XK_Control_L, "ControlLeft", true);
 
                 while (magnitude - this._gestureLastMagnitudeX > GESTURE_ZOOMSENS) {
                   this._handleMouseButton(pos.x, pos.y, true, 0x8);
@@ -1294,7 +1454,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
                 }
               }
 
-              this._handleKeyEvent(_keysym.default.XK_Control_L, "ControlLeft", false);
+              this._handleKeyEvent(_keysym["default"].XK_Control_L, "ControlLeft", false);
 
               break;
           }
@@ -1399,18 +1559,6 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
   }, {
     key: "_negotiateSecurity",
     value: function _negotiateSecurity() {
-      // Polyfill since IE and PhantomJS doesn't have
-      // TypedArray.includes()
-      function includes(item, array) {
-        for (var i = 0; i < array.length; i++) {
-          if (array[i] === item) {
-            return true;
-          }
-        }
-
-        return false;
-      }
-
       if (this._rfbVersion >= 3.7) {
         // Server sends supported list, client decides
         var numTypes = this._sock.rQshift8();
@@ -1430,15 +1578,15 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
 
         Log.Debug("Server security types: " + types); // Look for each auth in preferred order
 
-        if (includes(1, types)) {
+        if (types.includes(1)) {
           this._rfbAuthScheme = 1; // None
-        } else if (includes(22, types)) {
+        } else if (types.includes(22)) {
           this._rfbAuthScheme = 22; // XVP
-        } else if (includes(16, types)) {
+        } else if (types.includes(16)) {
           this._rfbAuthScheme = 16; // Tight
-        } else if (includes(2, types)) {
+        } else if (types.includes(2)) {
           this._rfbAuthScheme = 2; // VNC Auth
-        } else if (includes(19, types)) {
+        } else if (types.includes(19)) {
           this._rfbAuthScheme = 19; // VeNCrypt Auth
         } else {
           return this._fail("Unsupported security types (types: " + types + ")");
@@ -1602,7 +1750,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
 
 
       if (this._rfbVeNCryptState == 4) {
-        if (!this._rfbCredentials.username || !this._rfbCredentials.password) {
+        if (this._rfbCredentials.username === undefined || this._rfbCredentials.password === undefined) {
           this.dispatchEvent(new CustomEvent("credentialsrequired", {
             detail: {
               types: ["username", "password"]
@@ -1612,11 +1760,11 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
         }
 
         var user = (0, _strings.encodeUTF8)(this._rfbCredentials.username);
-        var pass = (0, _strings.encodeUTF8)(this._rfbCredentials.password); // XXX we assume lengths are <= 255 (should not be an issue in the real world)
+        var pass = (0, _strings.encodeUTF8)(this._rfbCredentials.password);
 
-        this._sock.send([0, 0, 0, user.length]);
+        this._sock.send([user.length >> 24 & 0xFF, user.length >> 16 & 0xFF, user.length >> 8 & 0xFF, user.length & 0xFF]);
 
-        this._sock.send([0, 0, 0, pass.length]);
+        this._sock.send([pass.length >> 24 & 0xFF, pass.length >> 16 & 0xFF, pass.length >> 8 & 0xFF, pass.length & 0xFF]);
 
         this._sock.sendString(user);
 
@@ -2007,6 +2155,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
       if (this._fbDepth == 24) {
         encs.push(_encodings.encodings.encodingTight);
         encs.push(_encodings.encodings.encodingTightPNG);
+        encs.push(_encodings.encodings.encodingZRLE);
         encs.push(_encodings.encodings.encodingHextile);
         encs.push(_encodings.encodings.encodingRRE);
       }
@@ -2199,7 +2348,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
 
           var zlibStream = this._sock.rQshiftBytes(length - 4);
 
-          var streamInflator = new _inflator.default();
+          var streamInflator = new _inflator["default"]();
           var textData = null;
           streamInflator.setInput(zlibStream);
 
@@ -2486,16 +2635,7 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
           return this._handleCursor();
 
         case _encodings.encodings.pseudoEncodingQEMUExtendedKeyEvent:
-          // Old Safari doesn't support creating keyboard events
-          try {
-            var keyboardEvent = document.createEvent("keyboardEvent");
-
-            if (keyboardEvent.code !== undefined) {
-              this._qemuExtKeyEventSupported = true;
-            }
-          } catch (err) {// Do nothing
-          }
-
+          this._qemuExtKeyEventSupported = true;
           return true;
 
         case _encodings.encodings.pseudoEncodingDesktopName:
@@ -2882,151 +3022,21 @@ var RFB = /*#__PURE__*/function (_EventTargetMixin) {
 
       this._cursor.change(image.rgbaPixels, image.hotx, image.hoty, image.w, image.h);
     }
-  }, {
-    key: "viewOnly",
-    get: function get() {
-      return this._viewOnly;
-    },
-    set: function set(viewOnly) {
-      this._viewOnly = viewOnly;
-
-      if (this._rfbConnectionState === "connecting" || this._rfbConnectionState === "connected") {
-        if (viewOnly) {
-          this._keyboard.ungrab();
-        } else {
-          this._keyboard.grab();
-        }
-      }
-    }
-  }, {
-    key: "capabilities",
-    get: function get() {
-      return this._capabilities;
-    }
-  }, {
-    key: "touchButton",
-    get: function get() {
-      return 0;
-    },
-    set: function set(button) {
-      Log.Warn("Using old API!");
-    }
-  }, {
-    key: "clipViewport",
-    get: function get() {
-      return this._clipViewport;
-    },
-    set: function set(viewport) {
-      this._clipViewport = viewport;
-
-      this._updateClip();
-    }
-  }, {
-    key: "scaleViewport",
-    get: function get() {
-      return this._scaleViewport;
-    },
-    set: function set(scale) {
-      this._scaleViewport = scale; // Scaling trumps clipping, so we may need to adjust
-      // clipping when enabling or disabling scaling
-
-      if (scale && this._clipViewport) {
-        this._updateClip();
-      }
-
-      this._updateScale();
-
-      if (!scale && this._clipViewport) {
-        this._updateClip();
-      }
-    }
-  }, {
-    key: "resizeSession",
-    get: function get() {
-      return this._resizeSession;
-    },
-    set: function set(resize) {
-      this._resizeSession = resize;
-
-      if (resize) {
-        this._requestRemoteResize();
-      }
-    }
-  }, {
-    key: "showDotCursor",
-    get: function get() {
-      return this._showDotCursor;
-    },
-    set: function set(show) {
-      this._showDotCursor = show;
-
-      this._refreshCursor();
-    }
-  }, {
-    key: "background",
-    get: function get() {
-      return this._screen.style.background;
-    },
-    set: function set(cssValue) {
-      this._screen.style.background = cssValue;
-    }
-  }, {
-    key: "qualityLevel",
-    get: function get() {
-      return this._qualityLevel;
-    },
-    set: function set(qualityLevel) {
-      if (!Number.isInteger(qualityLevel) || qualityLevel < 0 || qualityLevel > 9) {
-        Log.Error("qualityLevel must be an integer between 0 and 9");
-        return;
-      }
-
-      if (this._qualityLevel === qualityLevel) {
-        return;
-      }
-
-      this._qualityLevel = qualityLevel;
-
-      if (this._rfbConnectionState === 'connected') {
-        this._sendEncodings();
-      }
-    }
-  }, {
-    key: "compressionLevel",
-    get: function get() {
-      return this._compressionLevel;
-    },
-    set: function set(compressionLevel) {
-      if (!Number.isInteger(compressionLevel) || compressionLevel < 0 || compressionLevel > 9) {
-        Log.Error("compressionLevel must be an integer between 0 and 9");
-        return;
-      }
-
-      if (this._compressionLevel === compressionLevel) {
-        return;
-      }
-
-      this._compressionLevel = compressionLevel;
-
-      if (this._rfbConnectionState === 'connected') {
-        this._sendEncodings();
-      }
-    }
   }], [{
     key: "genDES",
     value: function genDES(password, challenge) {
       var passwordChars = password.split('').map(function (c) {
         return c.charCodeAt(0);
       });
-      return new _des.default(passwordChars).encrypt(challenge);
+      return new _des["default"](passwordChars).encrypt(challenge);
     }
   }]);
 
   return RFB;
-}(_eventtarget.default); // Class Methods
+}(_eventtarget["default"]); // Class Methods
 
 
-exports.default = RFB;
+exports["default"] = RFB;
 RFB.messages = {
   keyEvent: function keyEvent(sock, keysym, down) {
     var buff = sock._sQ;
@@ -3114,7 +3124,7 @@ RFB.messages = {
   },
   extendedClipboardProvide: function extendedClipboardProvide(sock, formats, inData) {
     // Deflate incomming data and their sizes
-    var deflator = new _deflator.default();
+    var deflator = new _deflator["default"]();
     var dataToDeflate = [];
 
     for (var i = 0; i < formats.length; i++) {
@@ -3350,11 +3360,11 @@ RFB.messages = {
 
     buff[offset + 13] = (1 << bits) - 1; // blue-max
 
-    buff[offset + 14] = bits * 2; // red-shift
+    buff[offset + 14] = bits * 0; // red-shift
 
     buff[offset + 15] = bits * 1; // green-shift
 
-    buff[offset + 16] = bits * 0; // blue-shift
+    buff[offset + 16] = bits * 2; // blue-shift
 
     buff[offset + 17] = 0; // padding