remote-screen.html

<template id="remote-screen-template">
  <style>
    @import "css/cursors.css";

    #remote-screen-img {
      max-width: 100%;
      max-height: 1080px;
      object-fit: contain;
    }

    @media screen and (min-width: 800px) {
      #remote-screen-img {
        max-width: 99%;
      }
    }

    @media screen and (min-width: 1000px) {
      #remote-screen-img {
        max-width: 97%;
      }
    }

    @media screen and (min-width: 1200px) {
      #remote-screen-img {
        max-width: 96%;
      }
    }

    @media screen and (min-width: 1300px) {
      #remote-screen-img {
        max-width: 93%;
      }
    }

    @media screen and (min-width: 1400px) {
      #remote-screen-img {
        max-width: 90%;
      }
    }

    :host([fullscreen="true"]) .screen-wrapper {
      display: grid;
      overflow: auto;
    }

    :host([fullscreen="true"]) #remote-screen-img {
      margin: auto;
      max-width: 100vw;
      max-height: 100vh;
    }

    :host([fullscreen="true"]) #remote-screen-img.full-width {
      width: 100%;
    }

    :host([fullscreen="true"]) #remote-screen-img.full-height {
      height: 100%;
    }

    #mobile-keyboard-input {
      position: fixed;
      top: -1000px;
    }
  </style>
  <div class="screen-wrapper">
    <input id="mobile-keyboard-input" autocapitalize="off" type="text" />
    <img id="remote-screen-img" src="/stream?advance_headers=1" />
  </div>
  <script
    id="underscore-library"
    src="/third-party/underscore.js/1.11.0/underscore-min.js"
  ></script>
</template>

<script>
  (function () {
    const doc = (document._currentScript || document.currentScript)
      .ownerDocument;
    const template = doc.querySelector("#remote-screen-template");

    // Different browsers produce wildly different values for wheel scroll
    // delta, so just reduce it to -1, 0, or 1.
    function normalizeWheelDelta(delta) {
      if (!delta) {
        return 0;
      }
      return Math.sign(delta);
    }

    customElements.define(
      "remote-screen",
      class extends HTMLElement {
        constructor() {
          super();
          this.onWindowResize = this.onWindowResize.bind(this);
          this.isUnderscoreLibraryLoaded = false;
          this.throttledSendMouseEvent = undefined;

          // Prevent drag on screen for Firefox.
          this.addEventListener("dragstart", function (evt) {
            evt.preventDefault();
          });
          // Prevent drop on screen for Firefox.
          this.addEventListener("drop", function (evt) {
            evt.preventDefault();
          });
          this.addEventListener("fullscreenchange", () => {
            if (!document.fullscreenElement) {
              this.fullscreen = false;
            }
          });
        }

        connectedCallback() {
          super.connectedCallback && super.connectedCallback();
          this.attachShadow({ mode: "open" });
          this.shadowRoot.appendChild(template.content.cloneNode(true));

          this.shadowRoot
            .getElementById("underscore-library")
            .addEventListener("load", () => {
              this.isUnderscoreLibraryLoaded = true;
              this.throttledSendMouseEvent = this.makeThrottledSendMouseEvent(
                this.millisecondsBetweenMouseEvents
              );
            });

          // Forward all mouse activity that occurs over the image of the remote screen.
          const screenImg = this.shadowRoot.getElementById("remote-screen-img");
          screenImg.addEventListener("mousemove", (evt) => {
            // Ensure that mouse drags don't attempt to drag the image on the screen.
            evt.preventDefault();

            this.throttledSendMouseEvent(evt);
          });
          screenImg.addEventListener("mousedown", this.sendMouseEvent);
          screenImg.addEventListener("mouseup", this.sendMouseEvent);
          screenImg.addEventListener("wheel", (evt) => {
            evt.preventDefault();
            this.sendMouseEvent(evt);
          });

          // Ignore the context menu so that it doesn't block the screen when the user
          // right-clicks.
          screenImg.addEventListener("contextmenu", (evt) => {
            evt.preventDefault();
          });

          window.addEventListener("resize", this.onWindowResize);

          // Detect whether this is a touchscreen device.
          let isTouchScreen = false;
          this.shadowRoot.addEventListener("touchend", () => {
            isTouchScreen = true;
          });
          this.shadowRoot.addEventListener("click", () => {
            if (isTouchScreen) {
              this.shadowRoot.getElementById("mobile-keyboard-input").focus();
            }
          });

          // On mobile, the keydown events function differently due to the OS
          // attempting to autocomplete text. Instead of listening for keydown
          // events, we listen for input events.
          const mobileKeyboard = this.shadowRoot.getElementById(
            "mobile-keyboard-input"
          );
          mobileKeyboard.addEventListener("input", (evt) => {
            // Handle insertCompositionText, which mean typing in autocomplete
            // mode. The global keydown event handler processes all other key
            // input events.
            if (
              evt.inputType === "insertText" ||
              evt.inputType === "insertCompositionText"
            ) {
              sendTextInput(evt.data);
            }

            // Force the autocomplete sequence to restart.
            mobileKeyboard.blur();
            mobileKeyboard.value = "";
            mobileKeyboard.focus();
          });
        }

        disconnectedCallback() {
          window.removeEventListener("resize", this.onWindowResize);
          super.disconnectedCallback && super.disconnectedCallback();
        }

        get fullscreen() {
          return this.getAttribute("fullscreen") === "true";
        }

        set fullscreen(newValue) {
          this.setAttribute("fullscreen", newValue);
        }

        get millisecondsBetweenMouseEvents() {
          return parseInt(
            this.getAttribute("milliseconds-between-mouse-events")
          );
        }

        set millisecondsBetweenMouseEvents(newValue) {
          this.setAttribute("milliseconds-between-mouse-events", newValue);
        }

        get cursor() {
          return this.shadowRoot
            .querySelector(".screen-wrapper")
            .getAttribute("cursor");
        }

        set cursor(newValue) {
          this.shadowRoot
            .querySelector(".screen-wrapper")
            .setAttribute("cursor", newValue);
        }

        static get observedAttributes() {
          return ["fullscreen", "milliseconds-between-mouse-events"];
        }

        attributeChangedCallback(name, oldValue, newValue) {
          if (name === "fullscreen" && newValue === "true") {
            this.shadowRoot
              .querySelector(".screen-wrapper")
              .requestFullscreen();
          } else if (
            name === "milliseconds-between-mouse-events" &&
            oldValue !== newValue
          ) {
            // Note: This is a bit of a hack. When we replace the throttled
            // event, it resets the throttle. To *sort of* preserve the
            // throttle, wait to replace it until 90% of the last throttle time
            // elapsed.
            const newThrottle = parseInt(newValue);
            const oldThrottle = parseInt(oldValue) || newThrottle;
            setTimeout(() => {
              this.throttledSendMouseEvent = this.makeThrottledSendMouseEvent(
                newThrottle
              );
            }, Math.min(oldThrottle, newThrottle) * 0.9);
          }
        }

        onWindowResize() {
          if (this.fullscreen) {
            this.fillSpace();
          }
        }

        // Adjust style so that the screen is either full-width or full-height,
        // depending on which better maximizes space for the remote screen's
        // aspect ratio.
        fillSpace() {
          const screenImg = this.shadowRoot.getElementById("remote-screen-img");
          screenImg.classList.remove("full-width");
          screenImg.classList.remove("full-height");
          const windowRatio = window.innerWidth / window.innerHeight;
          const screenRatio = screenImg.width / screenImg.height;
          if (screenRatio > windowRatio) {
            screenImg.classList.add("full-width");
          } else {
            screenImg.classList.add("full-height");
          }
        }

        makeThrottledSendMouseEvent(waitInMilliseconds) {
          if (!this.isUnderscoreLibraryLoaded) {
            return this.sendMouseEvent;
          }
          return _.throttle(
            function (evt) {
              this.sendMouseEvent(evt);
            },
            waitInMilliseconds,
            { trailing: false }
          );
        }

        sendMouseEvent(evt) {
          const boundingRect = evt.target.getBoundingClientRect();
          const cursorX = Math.max(0, evt.clientX - boundingRect.left);
          const cursorY = Math.max(0, evt.clientY - boundingRect.top);
          const width = boundingRect.right - boundingRect.left;
          const height = boundingRect.bottom - boundingRect.top;
          const relativeX = Math.min(1.0, Math.max(0.0, cursorX / width));
          const relativeY = Math.min(1.0, Math.max(0.0, cursorY / height));
          // Negate y-delta so that negative number means scroll down.
          const verticalWheelDelta = normalizeWheelDelta(evt.deltaY) * -1;
          const horizontalWheelDelta = normalizeWheelDelta(evt.deltaX);
          this.dispatchEvent(
            new CustomEvent("mouse-event", {
              detail: {
                buttons: evt.buttons,
                relativeX,
                relativeY,
                verticalWheelDelta,
                horizontalWheelDelta,
              },
              bubbles: true,
              composed: true,
            })
          );
        }
      }
    );
  })();
</script>