android-emulator-webrtc 1.0.13 → 1.0.16

package/Makefile

@@ -43,12 +43,9 @@ endif
 
 MAKEFILE_PATH := $(abspath $(lastword $(MAKEFILE_LIST)))
 CURRENT_DIR :=  $(abspath $(MAKEFILE_PATH)/..)
-QEMU_ROOT := $(abspath $(AOSP)/external/qemu)
-GRPC_ROOT := $(QEMU_ROOT)/objs/distribution/emulator/lib
-
 # Protobuf settings. If you are running this in the AOSP tree you will want to run ninja install first.
 PROTODIR 	  := $(CURRENT_DIR)/src/proto/
-PROTOSRCDIR   := $(if $(wildcard $(GRPC_ROOT)/*.proto), $(GRPC_ROOT), $(ANDROID_SDK_ROOT)/emulator/lib)
+PROTOSRCDIR   := $(CURRENT_DIR)/proto
 PROTO_SRC     := $(wildcard $(PROTOSRCDIR)/*.proto)
 PROTO_OBJS    := $(addprefix $(PROTODIR)/, $(notdir $(PROTO_SRC:.proto=_pb.js)))
 PROXY_OBJS    := $(addprefix $(PROTODIR)/, $(notdir $(PROTO_SRC:.proto=_grpc_web_pb.js)))
@@ -61,12 +58,10 @@ LDFLAGS += -L$(PROTOLIB) -lprotoc -lprotobuf -lpthread -ldl
 
 .PHONY: build-release run-release develop stop
 
-all: build
+all: check
 
 clean:
-	rm -rf $(PROTODIR)
-	rm -rf emulator
-
+	rm -rf $(PROTODIR)/*pb.js
 
 $(PROTODIR):
 	@mkdir -p $(PROTODIR)
@@ -80,7 +75,7 @@ $(PROTODIR)/%_pb.js  : $(PROTOSRCDIR)/%.proto $(PROTODIR) protoc-gen-grpc-web
 	$(PROTOC) \
 	        -I/usr/local/include -I$(PROTODIR) -I$(PROTOSRCDIR) \
 			--plugin=protoc-gen-grpc-web=$(CURRENT_DIR)/protoc-gen-grpc-web \
-			--js_out=import_style=commonjs:$(PROTODIR) \
+			--js_out=import_style=commonjs,binary:$(PROTODIR) \
 			--grpc-web_out=import_style=commonjs,mode=grpcwebtext:$(PROTODIR) \
 			$<
 	$(PREFIX_ESLINT) $@
@@ -90,19 +85,19 @@ $(PROTODIR)/%_pb.js  : $(PROTOSRCDIR)/%.proto $(PROTODIR) protoc-gen-grpc-web
 $(PROTODIR)/%_grpc_web_pb.js : $(PROTODIR)/%_pb.js
 	@test -f $@  && $(PREFIX_ESLINT) $@ || true
 
-
-protoc: $(PROTO_OBJS) $(PROXY_OBJS) $(PROTODIR)/emulator_web_client.js
+protoc: $(PROTO_OBJS) $(PROXY_OBJS)
 
 protoc-gen-grpc-web: protoc-plugin/grpc_generator.o
 	$(CXX) $^ $(LDFLAGS) -o $@
 
-deps: protoc system-check
+deps: system-check protoc
 	@npm install
 
-
 build: deps
 	@npm run build
 
+check: build
+	@npm run test
 
 system-check:
 ifneq ($(HAS_VALID_PROTOC),true)

package/dist/components/emulator/emulator.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -39,9 +39,13 @@ var Proto = _interopRequireWildcard(require("../../proto/emulator_controller_pb"
 
 var _emulator_web_client = require("../../proto/emulator_web_client");
 
+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 _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-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; } }
 
 var PngView = (0, _event_handler["default"])(_simple_png_view["default"]);
 var RtcView = (0, _event_handler["default"])(_webrtc_view["default"]);

package/dist/components/emulator/net/jsep_protocol_driver.js

@@ -277,7 +277,7 @@ var JsepProtocol = /*#__PURE__*/function () {
           _this._handleSDP(_this.old_emu_patch.sdp);
         }
 
-        if (_this.haveOffer) {
+        if (_this.old_emu_patch.haveOffer) {
           // We have a remote peer, add the candidates in.
           while (_this.old_emu_patch.candidates.length > 0) {
             _this._handleCandidate(_this.old_emu_patch.candidates.shift());

package/dist/components/emulator/views/event_handler.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -31,9 +31,13 @@ var Proto = _interopRequireWildcard(require("../../../proto/emulator_controller_
 
 var _emulator_status = _interopRequireDefault(require("../net/emulator_status"));
 
+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 _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-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; } }
 
 /**
  * A handler that extends a view to send key/mouse events to the emulator.

package/dist/components/emulator/views/simple_png_view.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -31,9 +31,13 @@ var Proto = _interopRequireWildcard(require("../../../proto/emulator_controller_
 
 var _reactResizeObserver = _interopRequireDefault(require("react-resize-observer"));
 
+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 _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-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; } }
 
 /**
  * A view on the emulator that is generated by streaming a series of screenshots.
@@ -60,7 +64,7 @@ var EmulatorPngView = /*#__PURE__*/function (_Component) {
       png: "",
       width: null,
       height: null,
-      connect: "disconnected"
+      connect: "connecting"
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "preventDragHandler", function (e) {
       e.preventDefault();
@@ -104,7 +108,7 @@ var EmulatorPngView = /*#__PURE__*/function (_Component) {
       var _this$state = this.state,
           width = _this$state.width,
           height = _this$state.height,
-          connected = _this$state.connected;
+          connect = _this$state.connect;
 
       if (this.screen) {
         this.screen.cancel();
@@ -122,7 +126,7 @@ var EmulatorPngView = /*#__PURE__*/function (_Component) {
           emulator = _this$props.emulator,
           poll = _this$props.poll;
 
-      if (poll && state !== "disconnected") {
+      if (poll && connect !== "disconnected") {
         emulator.getScreenshot(request, {}, function (err, response) {
           _this2.setState({
             connect: "connected"
@@ -131,22 +135,34 @@ var EmulatorPngView = /*#__PURE__*/function (_Component) {
 
           self.setState({
             png: "data:image/jpeg;base64," + response.getImage_asB64()
-          });
-
-          _this2.startStream(width, height);
+          }, _this2.startStream);
         });
       } else {
         this.screen = emulator.streamScreenshot(request);
         this.screen.on("data", function (response) {
-          _this2.setState({
+          self.setState({
             connect: "connected"
           }, _this2.broadcastState); // Update the image with the one we just received.
 
-
           self.setState({
             png: "data:image/jpeg;base64," + response.getImage_asB64()
           });
         });
+        this.screen.on("error", function (e) {
+          console.warn("Screenshot stream broken", e);
+          var connect = _this2.state.connect;
+
+          if (connect === "connected") {
+            console.log("Reconnecting..");
+            self.setState({
+              connect: "connecting"
+            }, _this2.startStream);
+          } else {
+            self.setState({
+              connect: "disconnected"
+            }, _this2.broadcastState);
+          }
+        });
       }
     }
   }, {
@@ -165,7 +181,7 @@ var EmulatorPngView = /*#__PURE__*/function (_Component) {
         },
         onDragStart: this.preventDragHandler
       }, /*#__PURE__*/_react["default"].createElement(_reactResizeObserver["default"], {
-        onResize: function onResize(rect) {
+        onReflow: function onReflow(rect) {
           self.setState({
             width: rect.width,
             height: rect.height
@@ -174,7 +190,10 @@ var EmulatorPngView = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/_react["default"].createElement("img", {
         src: this.state.png,
         width: "100%",
-        draggable: "false"
+        draggable: "false",
+        style: {
+          pointerEvents: "none"
+        }
       }));
     }
   }]);

package/dist/components/emulator/views/webrtc_view.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,9 +27,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+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 _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-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; } }
 
 /**
  * A view on the emulator that is using WebRTC. It will use the Jsep protocol over gRPC to

package/dist/proto/emulator_web_client.js

@@ -29,13 +29,13 @@ var _grpcWeb = require("grpc-web");
 
 var _events = require("events");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-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; } }
 
 var NopAuthenticator = function NopAuthenticator() {
   (0, _classCallCheck2["default"])(this, NopAuthenticator);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "android-emulator-webrtc",
-  "version": "1.0.13",
+  "version": "1.0.16",
   "description": "Android Emulator WebRTC module",
   "scripts": {
     "build": "babel src -d dist",

package/src/components/emulator/net/jsep_protocol_driver.js

@@ -271,7 +271,7 @@ export default class JsepProtocol {
         this._handleSDP(this.old_emu_patch.sdp);
       }
 
-      if (this.haveOffer) {
+      if (this.old_emu_patch.haveOffer) {
         // We have a remote peer, add the candidates in.
         while (this.old_emu_patch.candidates.length > 0) {
           this._handleCandidate(this.old_emu_patch.candidates.shift());

package/src/components/emulator/views/simple_png_view.js

@@ -51,7 +51,7 @@ export default class EmulatorPngView extends Component {
     png: "",
     width: null,
     height: null,
-    connect: "disconnected",
+    connect: "connecting",
   };
 
   broadcastState() {
@@ -74,7 +74,7 @@ export default class EmulatorPngView extends Component {
   }
 
   startStream() {
-    const { width, height, connected } = this.state;
+    const { width, height, connect } = this.state;
     if (this.screen) {
       this.screen.cancel();
     }
@@ -87,30 +87,42 @@ export default class EmulatorPngView extends Component {
 
     var self = this;
     const { emulator, poll } = this.props;
-    if (poll && state !== "disconnected") {
+    if (poll && connect !== "disconnected") {
       emulator.getScreenshot(request, {}, (err, response) => {
         this.setState({ connect: "connected" }, this.broadcastState);
         // Update the image with the one we just received.
-        self.setState({
-          png: "data:image/jpeg;base64," + response.getImage_asB64(),
-        });
-        this.startStream(width, height);
+        self.setState(
+          {
+            png: "data:image/jpeg;base64," + response.getImage_asB64(),
+          },
+          this.startStream
+        );
       });
     } else {
       this.screen = emulator.streamScreenshot(request);
       this.screen.on("data", (response) => {
-        this.setState({ connect: "connected" }, this.broadcastState);
+        self.setState({ connect: "connected" }, this.broadcastState);
         // Update the image with the one we just received.
         self.setState({
           png: "data:image/jpeg;base64," + response.getImage_asB64(),
         });
       });
+      this.screen.on("error", (e) => {
+        console.warn("Screenshot stream broken", e)
+        const { connect } = this.state;
+        if (connect === "connected") {
+          console.log("Reconnecting..");
+          self.setState({ connect: "connecting" }, this.startStream);
+        } else {
+          self.setState({ connect: "disconnected" }, this.broadcastState);
+        }
+      });
     }
   }
 
   preventDragHandler = (e) => {
     e.preventDefault();
-  }
+  };
 
   render() {
     const { width } = this.props;
@@ -124,19 +136,23 @@ export default class EmulatorPngView extends Component {
           height: "100%",
           objectFit: "contain",
           objectPosition: "center",
-
         }}
         onDragStart={this.preventDragHandler}
       >
         <ResizeObserver
-          onResize={(rect) => {
+          onReflow={(rect) => {
             self.setState(
               { width: rect.width, height: rect.height },
               self.startStream
             );
           }}
         />
-        <img src={this.state.png} width="100%" draggable="false"/>
+        <img
+          src={this.state.png}
+          width="100%"
+          draggable="false"
+          style={{ pointerEvents: "none" }}
+        />
       </div>
     );
   }

package/test/event_handler.test.js

@@ -17,9 +17,8 @@ import "@testing-library/jest-dom";
 
 import React from "react";
 import { render, fireEvent, screen } from "@testing-library/react";
+import { fakeMouseEvent, fakeTouchEvent} from "./fake_events";
 import withMouseKeyHandler from "../src/components/emulator/views/event_handler";
-import * as Proto from "../src/proto/emulator_controller_pb";
-import * as Rtc from "../src/proto/rtc_service_pb";
 
 import JsepProtocol from "../src/components/emulator/net/jsep_protocol_driver";
 import {
@@ -43,33 +42,6 @@ class FakeEmulator extends React.Component {
   }
 }
 
-const fakeMouseEvent = (tp, x, y, props = {}) => {
-  const event = new MouseEvent(tp, {
-    bubbles: true,
-    cancelable: true,
-    ...props,
-  });
-
-  Object.defineProperty(event, "offsetX", { get: () => x });
-  Object.defineProperty(event, "offsetY", { get: () => y });
-  return event;
-};
-
-const fakeTouchEvent = (tp, x, y, force, props = {}) => {
-  const event = new TouchEvent(tp, {
-    bubbles: true,
-    cancelable: true,
-    ...props,
-  });
-
-  Object.defineProperty(event, "changedTouches", {
-    get: () => [
-      { clientX: x, clientY: y, radiusX: 4, radiusY: 4, force: force },
-    ],
-  });
-  return event;
-};
-
 const TestView = withMouseKeyHandler(FakeEmulator);
 describe("The event handler using a real jsep serializer", () => {
 

package/test/fake_events.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License")
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function fakeMouseEvent(tp, x, y, props = {}) {
+  const event = new MouseEvent(tp, {
+    bubbles: true,
+    cancelable: true,
+    ...props,
+  });
+
+  Object.defineProperty(event, "offsetX", { get: () => x });
+  Object.defineProperty(event, "offsetY", { get: () => y });
+  return event;
+}
+
+export function fakeTouchEvent(tp, x, y, force, props = {}) {
+  const event = new TouchEvent(tp, {
+    bubbles: true,
+    cancelable: true,
+    ...props,
+  });
+
+  Object.defineProperty(event, "changedTouches", {
+    get: () => [
+      { clientX: x, clientY: y, radiusX: 4, radiusY: 4, force: force },
+    ],
+  });
+  return event;
+}
+
+export function resize(width, height) {
+  const resizeEvent = document.createEvent("Event");
+  resizeEvent.initEvent("resize", true, true);
+
+  global.window.innerWidth = width || global.window.innerWidth;
+  global.window.innerHeight = height || global.window.innerHeight;
+  global.window.dispatchEvent(resizeEvent);
+}

package/test/jsep_protocol_driver.test.js

@@ -18,7 +18,6 @@ import "regenerator-runtime/runtime"; // Somehow needed for jest to be happy wit
 
 import * as Proto from "../src/proto/emulator_controller_pb";
 import * as Rtc from "../src/proto/rtc_service_pb";
-import { render, waitFor, screen } from "@testing-library/react";
 import JsepProtocol from "../src/components/emulator/net/jsep_protocol_driver.js";
 import {
   RtcService,

package/test/simple_png_view.test.js

@@ -0,0 +1,133 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License")
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { jest } from "@jest/globals";
+import "regenerator-runtime/runtime"; // Somehow needed for jest to be happy with ES6
+
+import * as Proto from "../src/proto/emulator_controller_pb";
+import React from "react";
+import EmulatorPngView from "../src/components/emulator/views/simple_png_view";
+import { resize } from "./fake_events";
+import { render, screen } from "@testing-library/react";
+import { EmulatorControllerService } from "../src/proto/emulator_web_client";
+import { EventEmitter } from "events";
+
+jest.mock("../src/proto/emulator_web_client");
+
+const googleLogo =
+  "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";
+const googleImage = new Proto.Image();
+googleImage.setImage(Uint8Array.from(atob(googleLogo), (c) => c.charCodeAt(0)));
+
+const stream = new EventEmitter();
+describe("A simple png view", () => {
+  EmulatorControllerService.mockImplementation(() => {
+    let count = 0;
+    return {
+      getScreenshot: jest.fn((a, b, response) => {
+        count++;
+        if (count < 2) response(null, googleImage);
+      }),
+      streamScreenshot: jest.fn((request) => {
+        stream.removeAllListeners();
+        return {
+          on: (name, fn) => {
+            stream.on(name, fn);
+          },
+          cancel: jest.fn(),
+        };
+      }),
+      getStatus: jest.fn(() => {}),
+    };
+  });
+
+  beforeEach(()=>{
+    stream.removeAllListeners();
+  })
+
+  it("Get screenshot renders an image.", () => {
+    const emulatorServiceInstance = new EmulatorControllerService("http://foo");
+    const { container } = render(
+      <EmulatorPngView emulator={emulatorServiceInstance} poll={true} />
+    );
+    const pngView = container.querySelector("img");
+    expect(pngView.src).toBe("data:image/jpeg;base64," + googleLogo);
+  });
+
+  it("A resize triggers a new stream request.", () => {
+    const emulatorServiceInstance = new EmulatorControllerService("http://foo");
+    render(
+      <div data-testid="pngdiv">
+        <EmulatorPngView emulator={emulatorServiceInstance} />
+      </div>
+    );
+
+    // Initial stream request + resize event after mount.
+    expect(emulatorServiceInstance.streamScreenshot).toHaveBeenCalledTimes(2);
+
+    let pngview = screen.getByTestId("pngdiv").childNodes[0];
+    pngview.getBoundingClientRect = jest.fn();
+    pngview.getBoundingClientRect.mockReturnValueOnce({
+      width: 120,
+      height: 120,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    });
+
+    // A resize triggers a new stream request.
+    resize(200, 300);
+    expect(emulatorServiceInstance.streamScreenshot).toHaveBeenCalledTimes(3);
+  });
+
+
+  it("Has a connected state after the first image arrives", () => {
+    const emulatorServiceInstance = new EmulatorControllerService("http://foo");
+    const changeState = jest.fn()
+    render(<EmulatorPngView emulator={emulatorServiceInstance} onStateChange={changeState}/>);
+    expect(changeState).toHaveBeenCalledWith("connecting");
+    stream.emit("data", googleImage);
+    expect(changeState).toHaveBeenCalledWith("connected");
+  });
+
+  it("Attempts to reconnect if the server disconnects", () => {
+    const emulatorServiceInstance = new EmulatorControllerService("http://foo");
+    render(<EmulatorPngView emulator={emulatorServiceInstance} />);
+    expect(emulatorServiceInstance.streamScreenshot).toHaveBeenCalledTimes(2);
+    stream.emit("data", googleImage);
+    stream.emit("error", "fda");
+    expect(emulatorServiceInstance.streamScreenshot).toHaveBeenCalledTimes(3);
+  });
+
+  it("Gives up on the second failure.", () => {
+    const emulatorServiceInstance = new EmulatorControllerService("http://foo");
+    const changeState = jest.fn()
+    render(<EmulatorPngView emulator={emulatorServiceInstance} onStateChange={changeState}/>);
+    expect(emulatorServiceInstance.streamScreenshot).toHaveBeenCalledTimes(2);
+
+    // Connect
+    stream.emit("data", googleImage);
+
+    // First break, we attempt a reconnect.
+    stream.emit("error", "fda");
+    expect(emulatorServiceInstance.streamScreenshot).toHaveBeenCalledTimes(3);
+    expect(changeState).not.toHaveBeenCalledWith("disconnected");
+
+    // We could not reconnect, so we fail.
+    stream.emit("error", "fda");
+    expect(changeState).toHaveBeenCalledWith("disconnected");
+  });
+});