// Copyright Epic Games, Inc. All Rights Reserved.

/**
 * Class definitions
 * TODO: Move these to seperate files once we introduce a bundler
 */
class TwoWayMap {
  constructor(map = {}) {
    this.map = map;
    this.reverseMap = new Map();
    for (const key in map) {
      const value = map[key];
      this.reverseMap[value] = key;
    }
  }

  getFromKey(key) {
    return this.map[key];
  }
  getFromValue(value) {
    return this.reverseMap[value];
  }

  add(key, value) {
    this.map[key] = value;
    this.reverseMap[value] = key;
  }

  remove(key, value) {
    delete this.map[key];
    delete this.reverseMap[value];
  }
}

/**
 * Frontend logic
 */
// Window events for a gamepad connecting
let haveEvents = "GamepadEvent" in window;
let haveWebkitEvents = "WebKitGamepadEvent" in window;
let controllers = {};
let rAF =
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.requestAnimationFrame;

let webRtcPlayerObj = null;
let print_stats = false;
let print_inputs = false;
let connect_on_load = false;
let ws;
const WS_OPEN_STATE = 1;

let inputController = null;
let autoPlayAudio = true;
let qualityController = false;
let qualityControlOwnershipCheckBox;
let matchViewportResolution;
let VideoEncoderQP = "N/A";
// TODO: Remove this - workaround because of bug causing UE to crash when switching resolutions too quickly
let lastTimeResized = new Date().getTime();
let resizeTimeout;

let responseEventListeners = new Map();

let freezeFrameOverlay = null;
let shouldShowPlayOverlay = true;

let isFullscreen = false;
let isMuted = false;
// A freeze frame is a still JPEG image shown instead of the video.
let freezeFrame = {
  receiving: false,
  size: 0,
  jpeg: undefined,
  height: 0,
  width: 0,
  valid: false,
};

let file = {
  mimetype: "",
  extension: "",
  receiving: false,
  size: 0,
  data: [],
  valid: false,
  timestampStart: undefined,
};

// Optionally detect if the user is not interacting (AFK) and disconnect them.
let afk = {
  enabled: false, // Set to true to enable the AFK system.
  warnTimeout: 120, // The time to elapse before warning the user they are inactive.
  closeTimeout: 10, // The time after the warning when we disconnect the user.

  active: false, // Whether the AFK system is currently looking for inactivity.
  overlay: undefined, // The UI overlay warning the user that they are inactive.
  warnTimer: undefined, // The timer which waits to show the inactivity warning overlay.
  countdown: 0, // The inactivity warning overlay has a countdown to show time until disconnect.
  countdownTimer: undefined, // The timer used to tick the seconds shown on the inactivity warning overlay.
};

// If the user focuses on a UE input widget then we show them a button to open
// the on-screen keyboard. JavaScript security means we can only show the
// on-screen keyboard in response to a user interaction.
let editTextButton = undefined;

// A hidden input text box which is used only for focusing and opening the
// on-screen keyboard.
let hiddenInput = undefined;

let MaxByteValue = 255;
// The delay between the showing/unshowing of a freeze frame and when the stream will stop/start
// eg showing freeze frame -> delay -> stop stream OR show stream -> delay -> unshow freeze frame
freezeFrameDelay = 50; // ms

let activeKeys = [];

let toStreamerMessages = new TwoWayMap();
let fromStreamerMessages = new TwoWayMap();

const MessageDirection = {
  // A message sent to the streamer. eg Key presses
  // ie player -> streamer
  ToStreamer: 0,

  // A message recevied from the streamer. eg Freeze frames
  // ie streamer -> player
  FromStreamer: 1,
};

let toStreamerHandlers = new Map(); // toStreamerHandlers[message](args..)
let fromStreamerHandlers = new Map(); // fromStreamerHandlers[message](args..)
function populateDefaultProtocol() {
  /*
   * Control Messages. Range = 0..49.
   */
  toStreamerMessages.add("IFrameRequest", {
    id: 0,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("RequestQualityControl", {
    id: 1,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("FpsRequest", {
    id: 2,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("AverageBitrateRequest", {
    id: 3,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("StartStreaming", {
    id: 4,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("StopStreaming", {
    id: 5,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("LatencyTest", {
    id: 6,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("RequestInitialSettings", {
    id: 7,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("TestEcho", {
    id: 8,
    byteLength: 0,
    structure: [],
  });
  /*
   * Input Messages. Range = 50..89.
   */
  // Generic Input Messages. Range = 50..59.
  toStreamerMessages.add("UIInteraction", {
    id: 50,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("Command", {
    id: 51,
    byteLength: 0,
    structure: [],
  });
  // Keyboard Input Message. Range = 60..69.
  toStreamerMessages.add("KeyDown", {
    id: 60,
    byteLength: 2,
    //            keyCode  isRepeat
    structure: ["uint8", "uint8"],
  });
  toStreamerMessages.add("KeyUp", {
    id: 61,
    byteLength: 1,
    //            keyCode
    structure: ["uint8"],
  });
  toStreamerMessages.add("KeyPress", {
    id: 62,
    byteLength: 2,
    //            charcode
    structure: ["uint16"],
  });
  // Mouse Input Messages. Range = 70..79.
  toStreamerMessages.add("MouseEnter", {
    id: 70,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("MouseLeave", {
    id: 71,
    byteLength: 0,
    structure: [],
  });
  toStreamerMessages.add("MouseDown", {
    id: 72,
    byteLength: 5,
    //              button     x         y
    structure: ["uint8", "uint16", "uint16"],
  });
  toStreamerMessages.add("MouseUp", {
    id: 73,
    byteLength: 5,
    //              button     x         y
    structure: ["uint8", "uint16", "uint16"],
  });
  toStreamerMessages.add("MouseMove", {
    id: 74,
    byteLength: 8,
    //              x           y      deltaX    deltaY
    structure: ["uint16", "uint16", "int16", "int16"],
  });
  toStreamerMessages.add("MouseWheel", {
    id: 75,
    byteLength: 6,
    //              delta       x        y
    structure: ["int16", "uint16", "uint16"],
  });
  toStreamerMessages.add("MouseDouble", {
    id: 76,
    byteLength: 5,
    //              button     x         y
    structure: ["uint8", "uint16", "uint16"],
  });
  // Touch Input Messages. Range = 80..89.
  toStreamerMessages.add("TouchStart", {
    id: 80,
    byteLength: 8,
    //          numtouches(1)   x       y        idx     force     valid
    structure: ["uint8", "uint16", "uint16", "uint8", "uint8", "uint8"],
  });
  toStreamerMessages.add("TouchEnd", {
    id: 81,
    byteLength: 8,
    //          numtouches(1)   x       y        idx     force     valid
    structure: ["uint8", "uint16", "uint16", "uint8", "uint8", "uint8"],
  });
  toStreamerMessages.add("TouchMove", {
    id: 82,
    byteLength: 8,
    //          numtouches(1)   x       y       idx      force     valid
    structure: ["uint8", "uint16", "uint16", "uint8", "uint8", "uint8"],
  });
  // Gamepad Input Messages. Range = 90..99
  toStreamerMessages.add("GamepadButtonPressed", {
    id: 90,
    byteLength: 3,
    //            ctrlerId   button  isRepeat
    structure: ["uint8", "uint8", "uint8"],
  });
  toStreamerMessages.add("GamepadButtonReleased", {
    id: 91,
    byteLength: 3,
    //            ctrlerId   button  isRepeat(0)
    structure: ["uint8", "uint8", "uint8"],
  });
  toStreamerMessages.add("GamepadAnalog", {
    id: 92,
    byteLength: 10,
    //            ctrlerId   button  analogValue
    structure: ["uint8", "uint8", "double"],
  });

  fromStreamerMessages.add("QualityControlOwnership", 0);
  fromStreamerMessages.add("Response", 1);
  fromStreamerMessages.add("Command", 2);
  fromStreamerMessages.add("FreezeFrame", 3);
  fromStreamerMessages.add("UnfreezeFrame", 4);
  fromStreamerMessages.add("VideoEncoderAvgQP", 5);
  fromStreamerMessages.add("LatencyTest", 6);
  fromStreamerMessages.add("InitialSettings", 7);
  fromStreamerMessages.add("FileExtension", 8);
  fromStreamerMessages.add("FileMimeType", 9);
  fromStreamerMessages.add("FileContents", 10);
  fromStreamerMessages.add("TestEcho", 11);
  fromStreamerMessages.add("InputControlOwnership", 12);
  fromStreamerMessages.add("Protocol", 255);
}

function registerMessageHandlers() {
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "QualityControlOwnership",
    onQualityControlOwnership
  );
  registerMessageHandler(MessageDirection.FromStreamer, "Response", onResponse);
  registerMessageHandler(MessageDirection.FromStreamer, "Command", onCommand);
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "FreezeFrame",
    onFreezeFrameMessage
  );
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "UnfreezeFrame",
    invalidateFreezeFrameOverlay
  );
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "VideoEncoderAvgQP",
    onVideoEncoderAvgQP
  );
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "LatencyTest",
    onLatencyTestMessage
  );
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "InitialSettings",
    onInitialSettings
  );
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "FileExtension",
    onFileExtension
  );
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "FileMimeType",
    onFileMimeType
  );
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "FileContents",
    onFileContents
  );
  registerMessageHandler(MessageDirection.FromStreamer, "TestEcho", () => {
    /* Do nothing */
  });
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "InputControlOwnership",
    onInputControlOwnership
  );
  registerMessageHandler(
    MessageDirection.FromStreamer,
    "Protocol",
    onProtocolMessage
  );

  registerMessageHandler(
    MessageDirection.ToStreamer,
    "IFrameRequest",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "RequestQualityControl",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "FpsRequest",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "AverageBitrateRequest",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "StartStreaming",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "StopStreaming",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "LatencyTest",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "RequestInitialSettings",
    sendMessageToStreamer
  );
  registerMessageHandler(MessageDirection.ToStreamer, "TestEcho", () => {
    /* Do nothing */
  });
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "UIInteraction",
    emitUIInteraction
  );
  registerMessageHandler(MessageDirection.ToStreamer, "Command", emitCommand);
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "KeyDown",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "KeyUp",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "KeyPress",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "MouseEnter",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "MouseLeave",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "MouseDown",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "MouseUp",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "MouseMove",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "MouseWheel",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "MouseDouble",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "TouchStart",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "TouchEnd",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "TouchMove",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "GamepadButtonPressed",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "GamepadButtonReleased",
    sendMessageToStreamer
  );
  registerMessageHandler(
    MessageDirection.ToStreamer,
    "GamepadAnalog",
    sendMessageToStreamer
  );
}

function registerMessageHandler(messageDirection, messageType, messageHandler) {
  switch (messageDirection) {
    case MessageDirection.ToStreamer:
      toStreamerHandlers[messageType] = messageHandler;
      break;
    case MessageDirection.FromStreamer:
      fromStreamerHandlers[messageType] = messageHandler;
      break;
    default:
      console.log(`Unknown message direction ${messageDirection}`);
  }
}

function onQualityControlOwnership(data) {
  let view = new Uint8Array(data);
  let ownership = view[1] === 0 ? false : true;
  console.log(
    "Received quality controller message, will control quality: " + ownership
  );
  qualityController = ownership;
  // If we own the quality control, we can't relinquish it. We only lose
  // quality control when another peer asks for it
  if (qualityControlOwnershipCheckBox !== null) {
    qualityControlOwnershipCheckBox.disabled = ownership;
    qualityControlOwnershipCheckBox.checked = ownership;
  }
}

function onResponse(data) {
  let response = new TextDecoder("utf-16").decode(data.slice(1));
  for (let listener of responseEventListeners.values()) {
    listener(response);
  }
}

function onCommand(data) {
  let commandAsString = new TextDecoder("utf-16").decode(data.slice(1));
  console.log(commandAsString);
  let command = JSON.parse(commandAsString);
  if (command.command === "onScreenKeyboard") {
    showOnScreenKeyboard(command);
  }
}

function onFreezeFrameMessage(data) {
  let view = new Uint8Array(data);
  processFreezeFrameMessage(view);
}

function onVideoEncoderAvgQP(data) {
  VideoEncoderQP = new TextDecoder("utf-16").decode(data.slice(1));
}

function onLatencyTestMessage(data) {
  let latencyTimingsAsString = new TextDecoder("utf-16").decode(data.slice(1));
  console.log("Got latency timings from UE.");
  console.log(latencyTimingsAsString);
  let latencyTimingsFromUE = JSON.parse(latencyTimingsAsString);
  if (webRtcPlayerObj) {
    webRtcPlayerObj.latencyTestTimings.SetUETimings(latencyTimingsFromUE);
  }
}

function onInitialSettings(data) {
  let settingsString = new TextDecoder("utf-16").decode(data.slice(1));
  let settingsJSON = JSON.parse(settingsString);

  if (settingsJSON.PixelStreaming) {
    let allowConsoleCommands =
      settingsJSON.PixelStreaming.AllowPixelStreamingCommands;
    if (allowConsoleCommands === false) {
      console.warn(
        "-AllowPixelStreamingCommands=false, sending arbitray console commands from browser to UE is disabled."
      );
    }
    let disableLatencyTest = settingsJSON.PixelStreaming.DisableLatencyTest;
    if (disableLatencyTest) {
      document.getElementById("test-latency-button").disabled = true;
      document.getElementById("test-latency-button").title =
        "Disabled by -PixelStreamingDisableLatencyTester=true";
      console.warn(
        "-PixelStreamingDisableLatencyTester=true, requesting latency report from the the browser to UE is disabled."
      );
    }
  }
  if (settingsJSON.Encoder) {
    document.getElementById("encoder-min-qp-text").value =
      settingsJSON.Encoder.MinQP;
    document.getElementById("encoder-max-qp-text").value =
      settingsJSON.Encoder.MaxQP;
  }
  if (settingsJSON.WebRTC) {
    document.getElementById("webrtc-fps-text").value = settingsJSON.WebRTC.FPS;
    // reminder bitrates are sent in bps but displayed in kbps
    document.getElementById("webrtc-min-bitrate-text").value =
      settingsJSON.WebRTC.MinBitrate / 1000;
    document.getElementById("webrtc-max-bitrate-text").value =
      settingsJSON.WebRTC.MaxBitrate / 1000;
  }
}

function onFileExtension(data) {
  let view = new Uint8Array(data);
  processFileExtension(view);
}

function onFileMimeType(data) {
  let view = new Uint8Array(data);
  processFileMimeType(view);
}

function onFileContents(data) {
  let view = new Uint8Array(data);
  processFileContents(view);
}

function onInputControlOwnership(data) {
  let view = new Uint8Array(data);
  let ownership = view[1] === 0 ? false : true;
  console.log(
    "Received input controller message - will your input control the stream: " +
      ownership
  );
  inputController = ownership;
}

function onProtocolMessage(data) {
  try {
    let protocolString = new TextDecoder("utf-16").decode(data.slice(1));
    let protocolJSON = JSON.parse(protocolString);
    if (!protocolJSON.hasOwnProperty("Direction")) {
      throw new Error(
        "Malformed protocol received. Ensure the protocol message contains a direction"
      );
    }
    let direction = protocolJSON.Direction;
    delete protocolJSON.Direction;
    console.log(
      `Received new ${
        direction == MessageDirection.FromStreamer
          ? "FromStreamer"
          : "ToStreamer"
      } protocol. Updating existing protocol...`
    );
    Object.keys(protocolJSON).forEach((messageType) => {
      let message = protocolJSON[messageType];
      switch (direction) {
        case MessageDirection.ToStreamer:
          // Check that the message contains all the relevant params
          if (
            !message.hasOwnProperty("id") ||
            !message.hasOwnProperty("byteLength")
          ) {
            console.error(`ToStreamer->${messageType} protocol definition was malformed as it didn't contain at least an id and a byteLength\n
                                       Definition was: ${JSON.stringify(
                                         message,
                                         null,
                                         2
                                       )}`);
            // return in a forEach is equivalent to a continue in a normal for loop
            return;
          }
          if (message.byteLength > 0 && !message.hasOwnProperty("structure")) {
            // If we specify a bytelength, will must have a corresponding structure
            console.error(
              `ToStreamer->${messageType} protocol definition was malformed as it specified a byteLength but no accompanying structure`
            );
            // return in a forEach is equivalent to a continue in a normal for loop
            return;
          }

          if (toStreamerHandlers[messageType]) {
            // If we've registered a handler for this message type we can add it to our supported messages. ie registerMessageHandler(...)
            toStreamerMessages.add(messageType, message);
          } else {
            console.error(
              `There was no registered handler for "${messageType}" - try adding one using registerMessageHandler(MessageDirection.ToStreamer, "${messageType}", myHandler)`
            );
          }
          break;
        case MessageDirection.FromStreamer:
          // Check that the message contains all the relevant params
          if (!message.hasOwnProperty("id")) {
            console.error(`FromStreamer->${messageType} protocol definition was malformed as it didn't contain at least an id\n
                        Definition was: ${JSON.stringify(message, null, 2)}`);
            // return in a forEach is equivalent to a continue in a normal for loop
            return;
          }
          if (fromStreamerHandlers[messageType]) {
            // If we've registered a handler for this message type. ie registerMessageHandler(...)
            fromStreamerMessages.add(messageType, message.id);
          } else {
            console.error(
              `There was no registered handler for "${message}" - try adding one using registerMessageHandler(MessageDirection.FromStreamer, "${messageType}", myHandler)`
            );
          }
          break;
        default:
          throw new Error(`Unknown direction: ${direction}`);
      }
    });

    // Once the protocol has been received, we can send our control messages
    requestInitialSettings();
    requestQualityControl();
  } catch (e) {
    console.log(e);
  }
}

// https://w3c.github.io/gamepad/#remapping
const gamepadLayout = {
  // Buttons
  RightClusterBottomButton: 0,
  RightClusterRightButton: 1,
  RightClusterLeftButton: 2,
  RightClusterTopButton: 3,
  LeftShoulder: 4,
  RightShoulder: 5,
  LeftTrigger: 6,
  RightTrigger: 7,
  SelectOrBack: 8,
  StartOrForward: 9,
  LeftAnalogPress: 10,
  RightAnalogPress: 11,
  LeftClusterTopButton: 12,
  LeftClusterBottomButton: 13,
  LeftClusterLeftButton: 14,
  LeftClusterRightButton: 15,
  CentreButton: 16,
  // Axes
  LeftStickHorizontal: 0,
  LeftStickVertical: 1,
  RightStickHorizontal: 2,
  RightStickVertical: 3,
};

function scanGamepads() {
  let gamepads = navigator.getGamepads
    ? navigator.getGamepads()
    : navigator.webkitGetGamepads
    ? navigator.webkitGetGamepads()
    : [];
  for (let i = 0; i < gamepads.length; i++) {
    if (gamepads[i] && gamepads[i].index in controllers) {
      controllers[gamepads[i].index].currentState = gamepads[i];
    }
  }
}

function updateStatus() {
  scanGamepads();
  // Iterate over multiple controllers in the case the mutiple gamepads are connected
  for (let j in controllers) {
    let controller = controllers[j];
    let currentState = controller.currentState;
    let prevState = controller.prevState;
    // Iterate over buttons
    for (let i = 0; i < currentState.buttons.length; i++) {
      let currButton = currentState.buttons[i];
      let prevButton = prevState.buttons[i];
      if (currButton.pressed) {
        // press
        if (i == gamepadLayout.LeftTrigger) {
          //                       UEs left analog has a button index of 5
          toStreamerHandlers.GamepadAnalog("GamepadAnalog", [
            j,
            5,
            currButton.value,
          ]);
        } else if (i == gamepadLayout.RightTrigger) {
          //                       UEs right analog has a button index of 6
          toStreamerHandlers.GamepadAnalog("GamepadAnalog", [
            j,
            6,
            currButton.value,
          ]);
        } else {
          toStreamerHandlers.GamepadButtonPressed("GamepadButtonPressed", [
            j,
            i,
            prevButton.pressed,
          ]);
        }
      } else if (!currButton.pressed && prevButton.pressed) {
        // release
        if (i == gamepadLayout.LeftTrigger) {
          //                       UEs left analog has a button index of 5
          toStreamerHandlers.GamepadAnalog("GamepadAnalog", [j, 5, 0]);
        } else if (i == gamepadLayout.RightTrigger) {
          //                       UEs right analog has a button index of 6
          toStreamerHandlers.GamepadAnalog("GamepadAnalog", [j, 6, 0]);
        } else {
          toStreamerHandlers.GamepadButtonReleased("GamepadButtonReleased", [
            j,
            i,
          ]);
        }
      }
    }
    // Iterate over gamepad axes (we will increment in lots of 2 as there is 2 axes per stick)
    for (let i = 0; i < currentState.axes.length; i += 2) {
      // Horizontal axes are even numbered
      let x = parseFloat(currentState.axes[i].toFixed(4));

      // Vertical axes are odd numbered
      // https://w3c.github.io/gamepad/#remapping Gamepad browser side standard mapping has positive down, negative up. This is downright disgusting. So we fix it.
      let y = -parseFloat(currentState.axes[i + 1].toFixed(4));

      // UE's analog axes follow the same order as the browsers, but start at index 1 so we will offset as such
      toStreamerHandlers.GamepadAnalog("GamepadAnalog", [j, i + 1, x]); // Horizontal axes, only offset by 1
      toStreamerHandlers.GamepadAnalog("GamepadAnalog", [j, i + 2, y]); // Vertical axes, offset by two (1 to match UEs axes convention and then another 1 for the vertical axes)
    }
    controllers[j].prevState = currentState;
  }
  rAF(updateStatus);
}

function gamepadConnectHandler(e) {
  console.log("Gamepad connect handler");
  gamepad = e.gamepad;
  controllers[gamepad.index] = {};
  controllers[gamepad.index].currentState = gamepad;
  controllers[gamepad.index].prevState = gamepad;
  console.log("Gamepad: " + gamepad.id + " connected");
  rAF(updateStatus);
}

function gamepadDisconnectHandler(e) {
  console.log("Gamepad disconnect handler");
  console.log("Gamepad: " + e.gamepad.id + " disconnected");
  delete controllers[e.gamepad.index];
}

function fullscreen() {
  // if already full screen; exit
  // else go fullscreen
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    let element;
    //HTML elements controls
    if (!(document.fullscreenEnabled || document.webkitFullscreenEnabled)) {
      // Chrome and FireFox on iOS can only fullscreen a <video>
      element = document.getElementById("streamingVideo");
    } else {
      // Everywhere else can fullscreen a <div>
      element = document.getElementById("playerUI");
    }
    if (!element) {
      return;
    }
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.webkitEnterFullscreen) {
      element.webkitEnterFullscreen(); //for iphone this code worked
    }
  }
  onFullscreenChange();
}

function onFullscreenChange() {
  isFullscreen =
    document.webkitIsFullScreen ||
    document.mozFullScreen ||
    (document.msFullscreenElement && document.msFullscreenElement !== null) ||
    (document.fullscreenElement && document.fullscreenElement !== null);

  let minimize = document.getElementById("minimize");
  let maximize = document.getElementById("maximize");
  if (minimize && maximize) {
    if (isFullscreen) {
      minimize.style.display = "inline";
      maximize.style.display = "none";
    } else {
      minimize.style.display = "none";
      maximize.style.display = "inline";
    }
  }
}

function parseURLParams() {
  let urlParams = new URLSearchParams(window.location.search);
  inputOptions.controlScheme = urlParams.has("hoveringMouse")
    ? ControlSchemeType.HoveringMouse
    : ControlSchemeType.HoveringMouse; ///now control scheme is always in Hovering state
  let schemeToggle = document.getElementById("control-scheme-text");
  switch (inputOptions.controlScheme) {
    case ControlSchemeType.HoveringMouse:
      schemeToggle.innerHTML = "Control Scheme: Hovering Mouse";
      break;
    case ControlSchemeType.LockedMouse:
      schemeToggle.innerHTML = "Control Scheme: Locked Mouse";
      break;
    default:
      schemeToggle.innerHTML = "Control Scheme: Locked Mouse";
      console.log(
        `ERROR: Unknown control scheme ${inputOptions.controlScheme}, defaulting to Locked Mouse`
      );
      break;
  }

  let controls = document.getElementById("controls"); //hide default overlay
  controls.style.display = "none";

  let connection = document.getElementById("connection");
  connection.style.display = "none";

  let watermark = document.getElementById("unrealengine");
  watermark.style.display = "none";

  inputOptions.hideBrowserCursor = urlParams.has("hideBrowserCursor")
    ? true
    : false;
}

function setupHtmlEvents() {
  //Window events
  window.addEventListener("resize", resizePlayerStyle, true);
  window.addEventListener("orientationchange", onOrientationChange);

  //Gamepad events
  if (haveEvents) {
    window.addEventListener("gamepadconnected", gamepadConnectHandler);
    window.addEventListener("gamepaddisconnected", gamepadDisconnectHandler);
  } else if (haveWebkitEvents) {
    window.addEventListener("webkitgamepadconnected", gamepadConnectHandler);
    window.addEventListener(
      "webkitgamepaddisconnected",
      gamepadDisconnectHandler
    );
  }

  document.addEventListener(
    "webkitfullscreenchange",
    onFullscreenChange,
    false
  );
  document.addEventListener("mozfullscreenchange", onFullscreenChange, false);
  document.addEventListener("fullscreenchange", onFullscreenChange, false);
  document.addEventListener("MSFullscreenChange", onFullscreenChange, false);

  let settingsBtn = document.getElementById("settingsBtn");
  settingsBtn.addEventListener("click", settingsClicked);

  let statsBtn = document.getElementById("statsBtn");
  statsBtn.addEventListener("click", statsClicked);

  let controlBtn = document.getElementById("control-tgl");
  controlBtn.addEventListener("change", toggleControlScheme);

  let cursorBtn = document.getElementById("cursor-tgl");
  cursorBtn.addEventListener("change", toggleBrowserCursorVisibility);

  let resizeCheckBox = document.getElementById(
    "enlarge-display-to-fill-window-tgl"
  );
  if (resizeCheckBox !== null) {
    resizeCheckBox.onchange = function (event) {
      resizePlayerStyle();
    };
  }

  qualityControlOwnershipCheckBox = document.getElementById(
    "quality-control-ownership-tgl"
  );
  if (qualityControlOwnershipCheckBox !== null) {
    qualityControlOwnershipCheckBox.onchange = function (event) {
      requestQualityControl();
    };
  }

  let encoderParamsSubmit = document.getElementById("encoder-params-submit");
  if (encoderParamsSubmit !== null) {
    encoderParamsSubmit.onclick = function (event) {
      let minQP = document.getElementById("encoder-min-qp-text").value;
      let maxQP = document.getElementById("encoder-max-qp-text").value;

      emitCommand({ "Encoder.MinQP": minQP });
      emitCommand({ "Encoder.MaxQP": maxQP });
    };
  }

  let webrtcParamsSubmit = document.getElementById("webrtc-params-submit");
  if (webrtcParamsSubmit !== null) {
    webrtcParamsSubmit.onclick = function (event) {
      let FPS = document.getElementById("webrtc-fps-text").value;
      let minBitrate =
        document.getElementById("webrtc-min-bitrate-text").value * 1000;
      let maxBitrate =
        document.getElementById("webrtc-max-bitrate-text").value * 1000;

      emitCommand({ "WebRTC.Fps": FPS });
      emitCommand({ "WebRTC.MinBitrate": minBitrate });
      emitCommand({ "WebRTC.MaxBitrate": maxBitrate });
    };
  }

  let showFPSButton = document.getElementById("show-fps-button");
  if (showFPSButton !== null) {
    showFPSButton.onclick = function (event) {
      emitCommand({ "Stat.FPS": "" });
    };
  }

  let requestKeyframeButton = document.getElementById(
    "request-keyframe-button"
  );
  if (requestKeyframeButton !== null) {
    requestKeyframeButton.onclick = function (event) {
      toStreamerHandlers.IFrameRequest("IFrameRequest");
    };
  }

  let restartStreamButton = document.getElementById("restart-stream-button");
  if (restartStreamButton !== null) {
    restartStreamButton.onmousedown = function (event) {
      restartStream();
    };
  }

  let matchViewportResolutionCheckBox = document.getElementById(
    "match-viewport-res-tgl"
  );
  if (matchViewportResolutionCheckBox !== null) {
    matchViewportResolutionCheckBox.onchange = function (event) {
      matchViewportResolution = matchViewportResolutionCheckBox.checked;
      updateVideoStreamSize();
    };
  }

  let statsCheckBox = document.getElementById("show-stats-tgl");
  if (statsCheckBox !== null) {
    statsCheckBox.onchange = function (event) {
      let stats = document.getElementById("statsContainer");
      stats.style.display = event.target.checked ? "block" : "none";
    };
  }

  let latencyButton = document.getElementById("test-latency-button");
  if (latencyButton) {
    latencyButton.onclick = () => {
      sendStartLatencyTest();
    };
  }

  // Setup toggle and pair with some URL query string param.
  setupToggleWithUrlParams("prefer-sfu-tgl", "preferSFU");
  setupToggleWithUrlParams("use-mic-tgl", "useMic");
  setupToggleWithUrlParams("force-turn-tgl", "ForceTURN");
  setupToggleWithUrlParams("force-mono-tgl", "ForceMonoAudio");
  setupToggleWithUrlParams("control-tgl", "hoveringMouse");
  setupToggleWithUrlParams("cursor-tgl", "hideBrowserCursor");
  setupToggleWithUrlParams("offer-receive-tgl", "offerToReceive");

  var streamSelector = document.getElementById("stream-select");
  var trackSelector = document.getElementById("track-select");
  if (streamSelector) {
    streamSelector.onchange = function (event) {
      const stream = webRtcPlayerObj.availableVideoStreams.get(
        streamSelector.value
      );
      webRtcPlayerObj.video.srcObject = stream;
      streamTrackSource = stream;
      webRtcPlayerObj.video.play();
      updateTrackList();
    };

    if (trackSelector) {
      trackSelector.onchange = function (event) {
        if (!streamTrackSource) {
          streamTrackSource = webRtcPlayerObj.availableVideoStreams.get(
            streamSelector.value
          );
        }
        if (streamTrackSource) {
          for (const track of streamTrackSource.getVideoTracks()) {
            if (track.id == trackSelector.value) {
              webRtcPlayerObj.video.srcObject = new MediaStream([track]);
              webRtcPlayerObj.video.play();
              streamSelector.value = "";
              break;
            }
          }
        }
      };
    }
  }
}

function setupToggleWithUrlParams(toggleId, urlParameterKey) {
  let toggleElem = document.getElementById(toggleId);
  if (toggleElem) {
    toggleElem.checked = new URLSearchParams(window.location.search).has(
      urlParameterKey
    );
    toggleElem.addEventListener("change", (event) => {
      const urlParams = new URLSearchParams(window.location.search);
      if (event.currentTarget.checked) {
        urlParams.set(urlParameterKey, "true");
      } else {
        urlParams.delete(urlParameterKey);
      }
      window.history.replaceState(
        {},
        "",
        urlParams.toString() !== ""
          ? `${location.pathname}?${urlParams}`
          : `${location.pathname}`
      );
    });
  }
}

function UrlParamsCheck(urlParameterKey) {
  return new URLSearchParams(window.location.search).has(urlParameterKey);
}

var streamTrackSource = null;

function updateStreamList() {
  const streamSelector = document.getElementById("stream-select");
  for (let i = streamSelector.options.length - 1; i >= 0; i--) {
    streamSelector.remove(i);
  }
  streamSelector.value = null;
  for (const [streamId, stream] of webRtcPlayerObj.availableVideoStreams) {
    var opt = document.createElement("option");
    opt.value = streamId;
    opt.innerHTML = streamId;
    streamSelector.appendChild(opt);
    if (streamSelector.value == null) {
      streamSelector.value = streamId;
    }
  }

  updateTrackList();
}

function updateTrackList() {
  const streamSelector = document.getElementById("stream-select");
  const trackSelector = document.getElementById("track-select");
  const stream = webRtcPlayerObj.availableVideoStreams.get(
    streamSelector.value
  );
  for (let i = trackSelector.options.length - 1; i >= 0; i--) {
    trackSelector.remove(i);
  }
  trackSelector.value = null;
  for (const track of stream.getVideoTracks()) {
    var opt = document.createElement("option");
    opt.value = track.id;
    opt.innerHTML = track.label;
    trackSelector.appendChild(opt);
    if (track.selected) {
      trackSelector.value = track.id;
    }
  }
}

function sendStartLatencyTest() {
  // We need WebRTC to be active to do a latency test.
  if (!webRtcPlayerObj) {
    return;
  }

  let onTestStarted = function (StartTimeMs) {
    let descriptor = {
      StartTime: StartTimeMs,
    };
    emitDescriptor("LatencyTest", descriptor);
  };

  webRtcPlayerObj.startLatencyTest(onTestStarted);
}

function setOverlay(htmlClass, htmlElement, onClickFunction) {
  let videoPlayOverlay = document.getElementById("videoPlayOverlay");
  if (!videoPlayOverlay) {
    let playerDiv = document.getElementById("player");
    videoPlayOverlay = document.createElement("div");
    videoPlayOverlay.id = "videoPlayOverlay";
    playerDiv.appendChild(videoPlayOverlay);
  }

  // Remove existing html child elements so we can add the new one
  while (videoPlayOverlay.lastChild) {
    videoPlayOverlay.removeChild(videoPlayOverlay.lastChild);
  }

  if (htmlElement) videoPlayOverlay.appendChild(htmlElement);

  if (onClickFunction) {
    videoPlayOverlay.addEventListener("click", function onOverlayClick(event) {
      onClickFunction(event);
      videoPlayOverlay.removeEventListener("click", onOverlayClick);
    });
  }

  // Remove existing html classes so we can set the new one
  let cl = videoPlayOverlay.classList;
  for (let i = cl.length - 1; i >= 0; i--) {
    cl.remove(cl[i]);
  }

  videoPlayOverlay.classList.add(htmlClass);
}

function showConnectOverlay() {
  let startText = document.createElement("div");
  startText.id = "playButton";
  startText.innerHTML =
    '<p class="caption"> Демонстрация запущена <p class="caption1"> Нажмите, чтобы начать </p> <button class="play-btn"><img src="./Play.svg"></img</button>';

  setOverlay("clickableState", startText, (event) => {
    connect();
    startAfkWarningTimer();
  });
}

function showTextOverlay(text) {
  let textOverlay = document.createElement("div");
  textOverlay.id = "messageOverlay";
  textOverlay.innerHTML = text ? text : "";
  setOverlay("textDisplayState", textOverlay);
}

function playStream() {
  if (webRtcPlayerObj && webRtcPlayerObj.video) {
    if (webRtcPlayerObj.audio.srcObject && autoPlayAudio) {
      // Video and Audio are seperate tracks
      webRtcPlayerObj.audio
        .play()
        .then(() => {
          // audio play has succeeded, start playing video
          playVideo();
        })
        .catch((onRejectedReason) => {
          console.error(onRejectedReason);
          console.log(
            "Browser does not support autoplaying audio without interaction - to resolve this we are going to show the play button overlay."
          );
          showPlayOverlay();
        });
    } else {
      // Video and audio are combined in the video element
      playVideo();
    }
    showFreezeFrameOverlay();
    hideOverlay();
  }
}

function playVideo() {
  webRtcPlayerObj.video.play().catch((onRejectedReason) => {
    if (webRtcPlayerObj.audio.srcObject) {
      webRtcPlayerObj.audio.stop();
    }
    console.error(onRejectedReason);
    console.log(
      "Browser does not support autoplaying video without interaction - to resolve this we are going to show the play button overlay."
    );
    showPlayOverlay();
  });
}

function showPlayOverlay() {
  let element = document.createElement("div");
  setOverlay("clickableState", element, (event) => {
    playStream();
  });
  shouldShowPlayOverlay = false;
}

function updateAfkOverlayText() {
  afk.overlay.innerHTML =
    "<center>No activity detected<br>Disconnecting in " +
    afk.countdown +
    " seconds<br>Click to continue<br></center>";
}

function showAfkOverlay() {
  // Pause the timer while the user is looking at the inactivity warning overlay.
  stopAfkWarningTimer();

  // Show the inactivity warning overlay.
  afk.overlay = document.createElement("div");
  afk.overlay.id = "afkOverlay";
  setOverlay("clickableState", afk.overlay, (event) => {
    // The user clicked so start the timer again and carry on.
    hideOverlay();
    clearInterval(afk.countdownTimer);
    startAfkWarningTimer();
  });

  afk.countdown = afk.closeTimeout;
  updateAfkOverlayText();

  if (
    inputOptions.controlScheme == ControlSchemeType.LockedMouse &&
    document.exitPointerLock
  ) {
    document.exitPointerLock();
  }

  afk.countdownTimer = setInterval(function () {
    afk.countdown--;
    if (afk.countdown == 0) {
      // The user failed to click so disconnect them.
      hideOverlay();
      ws.close();
    } else {
      // Update the countdown message.
      updateAfkOverlayText();
    }
  }, 1000);
}

function hideOverlay() {
  setOverlay("hiddenState");
}

// Start a timer which when elapsed will warn the user they are inactive.
function startAfkWarningTimer() {
  afk.active = afk.enabled;
  resetAfkWarningTimer();
}

// Stop the timer which when elapsed will warn the user they are inactive.
function stopAfkWarningTimer() {
  afk.active = false;
}

// If the user interacts then reset the warning timer.
function resetAfkWarningTimer() {
  if (afk.active) {
    clearTimeout(afk.warnTimer);
    afk.warnTimer = setTimeout(function () {
      showAfkOverlay();
    }, afk.warnTimeout * 1000);
  }
}

function createWebRtcOffer() {
  if (webRtcPlayerObj) {
    console.log("Creating offer");
    showTextOverlay("Starting connection to server, please wait");
    webRtcPlayerObj.createOffer();
  } else {
    console.log("WebRTC player not setup, cannot create offer");
    showTextOverlay("Unable to setup video");
  }
}

function sendInputData(data) {
  if (webRtcPlayerObj) {
    resetAfkWarningTimer();
    webRtcPlayerObj.send(data);
  }
}

function addResponseEventListener(name, listener) {
  responseEventListeners.set(name, listener);
}

function removeResponseEventListener(name) {
  responseEventListeners.delete(name);
}

function showFreezeFrame() {
  let base64 = btoa(
    freezeFrame.jpeg.reduce(
      (data, byte) => data + String.fromCharCode(byte),
      ""
    )
  );
  let freezeFrameImage =
    document.getElementById("freezeFrameOverlay").childNodes[0];
  freezeFrameImage.src = "data:image/jpeg;base64," + base64;
  freezeFrameImage.onload = function () {
    freezeFrame.height = freezeFrameImage.naturalHeight;
    freezeFrame.width = freezeFrameImage.naturalWidth;
    resizeFreezeFrameOverlay();
    if (shouldShowPlayOverlay) {
      showPlayOverlay();
      resizePlayerStyle();
    } else {
      showFreezeFrameOverlay();
    }
    setTimeout(() => {
      webRtcPlayerObj.setVideoEnabled(false);
    }, freezeFrameDelay);
  };
}

function processFileExtension(view) {
  // Reset file if we got a file message and we are not "receiving" it yet
  if (!file.receiving) {
    file.mimetype = "";
    file.extension = "";
    file.receiving = true;
    file.valid = false;
    file.size = 0;
    file.data = [];
    file.timestampStart = new Date().getTime();
    console.log("Received first chunk of file");
  }

  let extensionAsString = new TextDecoder("utf-16").decode(view.slice(1));
  console.log(extensionAsString);
  file.extension = extensionAsString;
}

function processFileMimeType(view) {
  // Reset file if we got a file message and we are not "receiving" it yet
  if (!file.receiving) {
    file.mimetype = "";
    file.extension = "";
    file.receiving = true;
    file.valid = false;
    file.size = 0;
    file.data = [];
    file.timestampStart = new Date().getTime();
    console.log("Received first chunk of file");
  }

  let mimeAsString = new TextDecoder("utf-16").decode(view.slice(1));
  console.log(mimeAsString);
  file.mimetype = mimeAsString;
}

function processFileContents(view) {
  // If we haven't received the intial setup instructions, return
  if (!file.receiving) return;

  // Extract the toal size of the file (across all chunks)
  file.size = Math.ceil(
    new DataView(view.slice(1, 5).buffer).getInt32(0, true) /
      16379 /* The maximum number of payload bits per message*/
  );

  // Get the file part of the payload
  let fileBytes = view.slice(1 + 4);

  // Append to existing data that holds the file
  file.data.push(fileBytes);

  // Uncomment for debug
  console.log(`Received file chunk: ${file.data.length}/${file.size}`);

  if (file.data.length === file.size) {
    file.receiving = false;
    file.valid = true;
    console.log("Received complete file");
    const transferDuration = new Date().getTime() - file.timestampStart;
    const transferBitrate = Math.round(
      (file.size * 16 * 1024) / transferDuration
    );
    console.log(
      `Average transfer bitrate: ${transferBitrate}kb/s over ${
        transferDuration / 1000
      } seconds`
    );

    // File reconstruction
    /**
     * Example code to reconstruct the file
     *
     * This code reconstructs the received data into the original file based on the mime type and extension provided and then downloads the reconstructed file
     */
    var received = new Blob(file.data, { type: file.mimetype });
    var a = document.createElement("a");
    a.setAttribute("href", URL.createObjectURL(received));
    a.setAttribute("download", `transfer.${file.extension}`);
    document.body.append(a);
    // if you are so inclined to make it auto-download, do something like: a.click();
    a.remove();
  } else if (file.data.length > file.size) {
    file.receiving = false;
    console.error(
      `Received bigger file than advertised: ${file.data.length}/${file.size}`
    );
  }
}

function processFreezeFrameMessage(view) {
  // Reset freeze frame if we got a freeze frame message and we are not "receiving" yet.
  if (!freezeFrame.receiving) {
    freezeFrame.receiving = true;
    freezeFrame.valid = false;
    freezeFrame.size = 0;
    freezeFrame.jpeg = undefined;
  }

  // Extract total size of freeze frame (across all chunks)
  freezeFrame.size = new DataView(view.slice(1, 5).buffer).getInt32(0, true);

  // Get the jpeg part of the payload
  let jpegBytes = view.slice(1 + 4);

  // Append to existing jpeg that holds the freeze frame
  if (freezeFrame.jpeg) {
    let jpeg = new Uint8Array(freezeFrame.jpeg.length + jpegBytes.length);
    jpeg.set(freezeFrame.jpeg, 0);
    jpeg.set(jpegBytes, freezeFrame.jpeg.length);
    freezeFrame.jpeg = jpeg;
  }
  // No existing freeze frame jpeg, make one
  else {
    freezeFrame.jpeg = jpegBytes;
    freezeFrame.receiving = true;
    console.log(
      `received first chunk of freeze frame: ${freezeFrame.jpeg.length}/${freezeFrame.size}`
    );
  }

  // Uncomment for debug
  //console.log(`Received freeze frame chunk: ${freezeFrame.jpeg.length}/${freezeFrame.size}`);

  // Finished receiving freeze frame, we can show it now
  if (freezeFrame.jpeg.length === freezeFrame.size) {
    freezeFrame.receiving = false;
    freezeFrame.valid = true;
    console.log(`received complete freeze frame ${freezeFrame.size}`);
    showFreezeFrame();
  }
  // We received more data than the freeze frame payload message indicate (this is an error)
  else if (freezeFrame.jpeg.length > freezeFrame.size) {
    console.error(
      `received bigger freeze frame than advertised: ${freezeFrame.jpeg.length}/${freezeFrame.size}`
    );
    freezeFrame.jpeg = undefined;
    freezeFrame.receiving = false;
  }
}

function setupWebRtcPlayer(htmlElement, config) {
  webRtcPlayerObj = new webRtcPlayer(config);
  autoPlayAudio =
    typeof config.autoPlayAudio !== "undefined" ? config.autoPlayAudio : true;
  htmlElement.appendChild(webRtcPlayerObj.video);
  htmlElement.appendChild(webRtcPlayerObj.audio);
  htmlElement.appendChild(freezeFrameOverlay);

  webRtcPlayerObj.onWebRtcOffer = function (offer) {
    if (ws && ws.readyState === WS_OPEN_STATE) {
      let offerStr = JSON.stringify(offer);
      console.log(
        "%c[Outbound SS message (offer)]",
        "background: lightgreen; color: black",
        offer
      );
      ws.send(offerStr);
    }
  };

  webRtcPlayerObj.onWebRtcCandidate = function (candidate) {
    if (ws && ws.readyState === WS_OPEN_STATE) {
      ws.send(
        JSON.stringify({
          type: "iceCandidate",
          candidate: candidate,
        })
      );
    }
  };

  webRtcPlayerObj.onWebRtcAnswer = function (answer) {
    if (ws && ws.readyState === WS_OPEN_STATE) {
      let answerStr = JSON.stringify(answer);
      console.log(
        "%c[Outbound SS message (answer)]",
        "background: lightgreen; color: black",
        answer
      );
      ws.send(answerStr);

      if (webRtcPlayerObj.sfu) {
        // Send data channel setup request to the SFU
        const requestMsg = { type: "dataChannelRequest" };
        console.log(
          "%c[Outbound SS message (dataChannelRequest)]",
          "background: lightgreen; color: black",
          requestMsg
        );
        ws.send(JSON.stringify(requestMsg));
      }
    }
  };

  webRtcPlayerObj.onSFURecvDataChannelReady = function () {
    if (webRtcPlayerObj.sfu) {
      // Send SFU a message to let it know browser data channels are ready
      const requestMsg = { type: "peerDataChannelsReady" };
      console.log(
        "%c[Outbound SS message (peerDataChannelsReady)]",
        "background: lightgreen; color: black",
        requestMsg
      );
      ws.send(JSON.stringify(requestMsg));
    }
  };

  webRtcPlayerObj.onVideoInitialised = function () {
    if (ws && ws.readyState === WS_OPEN_STATE) {
      if (shouldShowPlayOverlay) {
        showPlayOverlay();
        resizePlayerStyle();
      } else {
        resizePlayerStyle();
        playStream();
      }
    }
  };

  webRtcPlayerObj.onNewVideoTrack = function (streams) {
    if (
      webRtcPlayerObj.video &&
      webRtcPlayerObj.video.srcObject &&
      webRtcPlayerObj.onVideoInitialised
    ) {
      webRtcPlayerObj.onVideoInitialised();
    }
    updateStreamList();
  };

  webRtcPlayerObj.onDataChannelMessage = function (data) {
    let view = new Uint8Array(data);
    try {
      let messageType = fromStreamerMessages.getFromValue(view[0]);
      fromStreamerHandlers[messageType](data);
    } catch (e) {
      console.error(
        `Custom data channel message with message type that is unknown to the Pixel Streaming protocol. Does your PixelStreamingProtocol need updating? The message type was: ${view[0]}`
      );
    }
  };

  registerInputs(webRtcPlayerObj.video);

  // On a touch device we will need special ways to show the on-screen keyboard.
  if ("ontouchstart" in document.documentElement) {
    createOnScreenKeyboardHelpers(htmlElement);
  }

  if (UrlParamsCheck("offerToReceive")) {
    createWebRtcOffer();
  }

  return webRtcPlayerObj.video;
}

function setupStats() {
  webRtcPlayerObj.aggregateStats(1 * 1000 /*Check every 1 second*/);

  let printInterval = 5 * 60 * 1000; /*Print every 5 minutes*/
  let nextPrintDuration = printInterval;

  webRtcPlayerObj.onAggregatedStats = (aggregatedStats) => {
    let numberFormat = new Intl.NumberFormat(window.navigator.language, {
      maximumFractionDigits: 0,
    });
    let timeFormat = new Intl.NumberFormat(window.navigator.language, {
      maximumFractionDigits: 0,
      minimumIntegerDigits: 2,
    });

    // Calculate duration of run
    let runTime =
      (aggregatedStats.timestamp - aggregatedStats.timestampStart) / 1000;
    let timeValues = [];
    let timeDurations = [60, 60];
    for (let timeIndex = 0; timeIndex < timeDurations.length; timeIndex++) {
      timeValues.push(runTime % timeDurations[timeIndex]);
      runTime = runTime / timeDurations[timeIndex];
    }
    timeValues.push(runTime);

    let runTimeSeconds = timeValues[0];
    let runTimeMinutes = Math.floor(timeValues[1]);
    let runTimeHours = Math.floor([timeValues[2]]);

    receivedBytesMeasurement = "B";
    receivedBytes = aggregatedStats.hasOwnProperty("bytesReceived")
      ? aggregatedStats.bytesReceived
      : 0;
    let dataMeasurements = ["kB", "MB", "GB"];
    for (let index = 0; index < dataMeasurements.length; index++) {
      if (receivedBytes < 100 * 1000) break;
      receivedBytes = receivedBytes / 1000;
      receivedBytesMeasurement = dataMeasurements[index];
    }

    let qualityStatus = document.getElementById("connectionStrength");
    // "blinks" quality status element for 1 sec by making it transparent, speed = number of blinks
    let blinkQualityStatus = function (speed) {
      let iter = speed;
      let opacity = 1; // [0..1]
      let tickId = setInterval(
        function () {
          opacity -= 0.1;
          // map `opacity` to [-0.5..0.5] range, decrement by 0.2 per step and take `abs` to make it blink: 1 -> 0 -> 1
          qualityStatus.style.opacity = `${Math.abs((opacity - 0.5) * 2)}`;
          if (opacity <= 0.1) {
            if (--iter == 0) {
              clearInterval(tickId);
            } else {
              // next blink
              opacity = 1;
            }
          }
        },
        100 / speed // msecs
      );
    };

    const orangeQP = 26;
    const redQP = 35;

    let statsText = "";
    let qualityTip = document.getElementById("qualityText");
    let color;

    // Wifi strength elements
    let outer = document.getElementById("outer");
    let middle = document.getElementById("middle");
    let inner = document.getElementById("inner");
    let dot = document.getElementById("dot");

    if (VideoEncoderQP > redQP) {
      color = "red";
      blinkQualityStatus(2);
      statsText += `<div style="color: ${color}">Poor encoding quality</div>`;
      outer.style.fill = "#3c3b40";
      middle.style.fill = "#3c3b40";
      inner.style.fill = color;
      dot.style.fill = color;
    } else if (VideoEncoderQP > orangeQP) {
      color = "orange";
      blinkQualityStatus(1);
      statsText += `<div style="color: ${color}">Blocky encoding quality</div>`;
      outer.style.fill = "#3c3b40";
      middle.style.fill = color;
      inner.style.fill = color;
      dot.style.fill = color;
    } else {
      color = "lime";
      qualityStatus.style.opacity = "1";
      statsText += `<div style="color: ${color}">Clear encoding quality</div>`;
      outer.style.fill = color;
      middle.style.fill = color;
      inner.style.fill = color;
      dot.style.fill = color;
    }
    qualityTip.innerHTML = statsText;

    statsText += `<div>Duration: ${timeFormat.format(
      runTimeHours
    )}:${timeFormat.format(runTimeMinutes)}:${timeFormat.format(
      runTimeSeconds
    )}</div>`;
    statsText += `<div>Controls stream input: ${
      inputController === null
        ? "Not sent yet"
        : inputController
        ? "true"
        : "false"
    }</div>`;
    statsText += `<div>Audio codec: ${
      aggregatedStats.hasOwnProperty("audioCodec")
        ? aggregatedStats.audioCodec
        : "Not set"
    }</div>`;
    statsText += `<div>Video codec: ${
      aggregatedStats.hasOwnProperty("videoCodec")
        ? aggregatedStats.videoCodec
        : "Not set"
    }</div>`;
    statsText += `<div>Video Resolution: ${
      aggregatedStats.hasOwnProperty("frameWidth") &&
      aggregatedStats.frameWidth &&
      aggregatedStats.hasOwnProperty("frameHeight") &&
      aggregatedStats.frameHeight
        ? aggregatedStats.frameWidth + "x" + aggregatedStats.frameHeight
        : "Chrome only"
    }</div>`;
    statsText += `<div>Received (${receivedBytesMeasurement}): ${numberFormat.format(
      receivedBytes
    )}</div>`;
    statsText += `<div>Frames Decoded: ${
      aggregatedStats.hasOwnProperty("framesDecoded")
        ? numberFormat.format(aggregatedStats.framesDecoded)
        : "Chrome only"
    }</div>`;
    statsText += `<div>Packets Lost: ${
      aggregatedStats.hasOwnProperty("packetsLost")
        ? numberFormat.format(aggregatedStats.packetsLost)
        : "Chrome only"
    }</div>`;
    statsText += `<div>Framerate: ${
      aggregatedStats.hasOwnProperty("framerate")
        ? numberFormat.format(aggregatedStats.framerate)
        : "Chrome only"
    }</div>`;
    statsText += `<div>Frames dropped: ${
      aggregatedStats.hasOwnProperty("framesDropped")
        ? numberFormat.format(aggregatedStats.framesDropped)
        : "Chrome only"
    }</div>`;
    statsText += `<div>Net RTT (ms): ${
      aggregatedStats.hasOwnProperty("currentRoundTripTime")
        ? numberFormat.format(aggregatedStats.currentRoundTripTime * 1000)
        : "Can't calculate"
    }</div>`;
    statsText += `<div>Browser receive to composite (ms): ${
      aggregatedStats.hasOwnProperty("receiveToCompositeMs")
        ? numberFormat.format(aggregatedStats.receiveToCompositeMs)
        : "Chrome only"
    }</div>`;
    statsText += `<div style="color: ${color}">Audio Bitrate (kbps): ${
      aggregatedStats.hasOwnProperty("audioBitrate")
        ? numberFormat.format(aggregatedStats.audioBitrate)
        : "Chrome only"
    }</div>`;
    statsText += `<div style="color: ${color}">Video Bitrate (kbps): ${
      aggregatedStats.hasOwnProperty("bitrate")
        ? numberFormat.format(aggregatedStats.bitrate)
        : "Chrome only"
    }</div>`;
    statsText += `<div style="color: ${color}">Video Quantization Parameter: ${VideoEncoderQP}</div>`;

    let statsDiv = document.getElementById("stats");
    statsDiv.innerHTML = statsText;

    if (print_stats) {
      if (aggregatedStats.timestampStart) {
        if (
          aggregatedStats.timestamp - aggregatedStats.timestampStart >
          nextPrintDuration
        ) {
          if (ws && ws.readyState === WS_OPEN_STATE) {
            console.log(`-> SS: stats\n${JSON.stringify(aggregatedStats)}`);
            ws.send(
              JSON.stringify({
                type: "stats",
                data: aggregatedStats,
              })
            );
          }
          nextPrintDuration += printInterval;
        }
      }
    }
  };

  webRtcPlayerObj.latencyTestTimings.OnAllLatencyTimingsReady = function (
    timings
  ) {
    if (!timings.BrowserReceiptTimeMs) {
      return;
    }

    let latencyExcludingDecode =
      timings.BrowserReceiptTimeMs - timings.TestStartTimeMs;
    let encodeLatency = timings.UEEncodeMs;
    let uePixelStreamLatency = timings.UECaptureToSendMs;
    let ueTestDuration = timings.UETransmissionTimeMs - timings.UEReceiptTimeMs;
    let networkLatency = latencyExcludingDecode - ueTestDuration;

    //these ones depend on FrameDisplayDeltaTimeMs
    let endToEndLatency = null;
    let browserSideLatency = null;

    if (timings.FrameDisplayDeltaTimeMs && timings.BrowserReceiptTimeMs) {
      endToEndLatency =
        timings.FrameDisplayDeltaTimeMs +
        networkLatency +
        (typeof uePixelStreamLatency === "string" ? 0 : uePixelStreamLatency);
      browserSideLatency =
        timings.FrameDisplayDeltaTimeMs +
        (latencyExcludingDecode - networkLatency - ueTestDuration);
    }

    let latencyStatsInnerHTML = "";
    latencyStatsInnerHTML += `<div>Net latency RTT (ms): ${networkLatency.toFixed(
      2
    )}</div>`;
    latencyStatsInnerHTML += `<div>UE Encode (ms): ${
      typeof encodeLatency === "string"
        ? encodeLatency
        : encodeLatency.toFixed(2)
    }</div>`;
    latencyStatsInnerHTML += `<div>UE Send to capture (ms): ${
      typeof uePixelStreamLatency === "string"
        ? uePixelStreamLatency
        : uePixelStreamLatency.toFixed(2)
    }</div>`;
    latencyStatsInnerHTML += `<div>UE probe duration (ms): ${ueTestDuration.toFixed(
      2
    )}</div>`;
    latencyStatsInnerHTML +=
      timings.FrameDisplayDeltaTimeMs && timings.BrowserReceiptTimeMs
        ? `<div>Browser composite latency (ms): ${timings.FrameDisplayDeltaTimeMs.toFixed(
            2
          )}</div>`
        : "";
    latencyStatsInnerHTML += browserSideLatency
      ? `<div>Total browser latency (ms): ${browserSideLatency.toFixed(
          2
        )}</div>`
      : "";
    latencyStatsInnerHTML += endToEndLatency
      ? `<div>Total latency (ms): ${endToEndLatency.toFixed(2)}</div>`
      : "";
    document.getElementById("LatencyStats").innerHTML = latencyStatsInnerHTML;
  };
}

function onWebRtcOffer(webRTCData) {
  webRtcPlayerObj.receiveOffer(webRTCData);
  setupStats();
}

function onWebRtcAnswer(webRTCData) {
  webRtcPlayerObj.receiveAnswer(webRTCData);
  setupStats();
}

function onWebRtcSFUPeerDatachannels(webRTCData) {
  webRtcPlayerObj.receiveSFUPeerDataChannelRequest(webRTCData);
}

function onWebRtcIce(iceCandidate) {
  if (webRtcPlayerObj) {
    webRtcPlayerObj.handleCandidateFromServer(iceCandidate);
  }
}

let styleWidth;
let styleHeight;
let styleTop;
let styleLeft;
let styleCursor = "default";
let styleAdditional;

const ControlSchemeType = {
  // A mouse can lock inside the WebRTC player so the user can simply move the
  // mouse to control the orientation of the camera. The user presses the
  // Escape key to unlock the mouse.
  LockedMouse: 0,

  // A mouse can hover over the WebRTC player so the user needs to click and
  // drag to control the orientation of the camera.
  HoveringMouse: 1,
};

let inputOptions = {
  // The control scheme controls the behaviour of the mouse when it interacts
  // with the WebRTC player.
  controlScheme: ControlSchemeType.LockedMouse,

  // Browser keys are those which are typically used by the browser UI. We
  // usually want to suppress these to allow, for example, UE to show shader
  // complexity with the F5 key without the web page refreshing.
  suppressBrowserKeys: true,

  // UE has a faketouches option which fakes a single finger touch when the
  // user drags with their mouse. We may perform the reverse; a single finger
  // touch may be converted into a mouse drag UE side. This allows a
  // non-touch application to be controlled partially via a touch device.
  fakeMouseWithTouches: false,

  // Hiding the browser cursor enables the use of UE's inbuilt software cursor,
  // without having the browser cursor display on top
  hideBrowserCursor: false,
};

function resizePlayerStyleToFillWindow(playerElement) {
  let videoElement = playerElement.getElementsByTagName("VIDEO");

  // Fill the player display in window, keeping picture's aspect ratio.
  let windowAspectRatio = window.innerHeight / window.innerWidth;
  let playerAspectRatio =
    playerElement.clientHeight / playerElement.clientWidth;
  // We want to keep the video ratio correct for the video stream
  let videoAspectRatio = videoElement.videoHeight / videoElement.videoWidth;
  if (isNaN(videoAspectRatio)) {
    //Video is not initialised yet so set playerElement to size of window
    styleWidth = window.innerWidth;
    styleHeight = window.innerHeight;
    styleTop = 0;
    styleLeft = 0;
    playerElement.style =
      "top: " +
      styleTop +
      "px; left: " +
      styleLeft +
      "px; width: " +
      styleWidth +
      "px; height: " +
      styleHeight +
      "px; cursor: " +
      styleCursor +
      "; " +
      styleAdditional;
  } else if (windowAspectRatio < playerAspectRatio) {
    // Window height is the constraining factor so to keep aspect ratio change width appropriately
    styleWidth = Math.floor(window.innerHeight / videoAspectRatio);
    styleHeight = window.innerHeight;
    styleTop = 0;
    styleLeft = Math.floor((window.innerWidth - styleWidth) * 0.5);
    //Video is now 100% of the playerElement, so set the playerElement style
    playerElement.style =
      "top: " +
      styleTop +
      "px; left: " +
      styleLeft +
      "px; width: " +
      styleWidth +
      "px; height: " +
      styleHeight +
      "px; cursor: " +
      styleCursor +
      "; " +
      styleAdditional;
  } else {
    // Window width is the constraining factor so to keep aspect ratio change height appropriately
    styleWidth = window.innerWidth;
    styleHeight = Math.floor(window.innerWidth * videoAspectRatio);
    styleTop = Math.floor((window.innerHeight - styleHeight) * 0.5);
    styleLeft = 0;
    //Video is now 100% of the playerElement, so set the playerElement style
    playerElement.style =
      "top: " +
      styleTop +
      "px; left: " +
      styleLeft +
      "px; width: " +
      styleWidth +
      "px; height: " +
      styleHeight +
      "px; cursor: " +
      styleCursor +
      "; " +
      styleAdditional;
  }
}

function resizePlayerStyleToActualSize(playerElement) {
  let videoElement = playerElement.getElementsByTagName("VIDEO");

  if (videoElement.length > 0) {
    // Display image in its actual size
    styleWidth = videoElement[0].videoWidth;
    styleHeight = videoElement[0].videoHeight;
    let Top = Math.floor((window.innerHeight - styleHeight) * 0.5);
    let Left = Math.floor((window.innerWidth - styleWidth) * 0.5);
    styleTop = Top > 0 ? Top : 0;
    styleLeft = Left > 0 ? Left : 0;
    //Video is now 100% of the playerElement, so set the playerElement style
    playerElement.style =
      "top: " +
      styleTop +
      "px; left: " +
      styleLeft +
      "px; width: " +
      styleWidth +
      "px; height: " +
      styleHeight +
      "px; cursor: " +
      styleCursor +
      "; " +
      styleAdditional;
  }
}

function resizePlayerStyleToArbitrarySize(playerElement) {
  let videoElement = playerElement.getElementsByTagName("VIDEO");
  //Video is now 100% of the playerElement, so set the playerElement style
  playerElement.style =
    "top: 0px; left: 0px; width: " +
    styleWidth +
    "px; height: " +
    styleHeight +
    "px; cursor: " +
    styleCursor +
    "; " +
    styleAdditional;
}

function setupFreezeFrameOverlay() {
  freezeFrameOverlay = document.createElement("div");
  freezeFrameOverlay.id = "freezeFrameOverlay";
  freezeFrameOverlay.style.display = "none";
  freezeFrameOverlay.style.pointerEvents = "none";
  freezeFrameOverlay.style.position = "absolute";
  freezeFrameOverlay.style.zIndex = "20";

  let freezeFrameImage = document.createElement("img");
  freezeFrameImage.style.position = "absolute";
  freezeFrameOverlay.appendChild(freezeFrameImage);
}

function showFreezeFrameOverlay() {
  if (freezeFrame.valid) {
    freezeFrameOverlay.classList.add("freezeframeBackground");
    freezeFrameOverlay.style.display = "block";
  }
}

function invalidateFreezeFrameOverlay() {
  setTimeout(() => {
    freezeFrameOverlay.style.display = "none";
    freezeFrame.valid = false;
    freezeFrameOverlay.classList.remove("freezeframeBackground");
  }, freezeFrameDelay);

  if (webRtcPlayerObj) {
    webRtcPlayerObj.setVideoEnabled(true);
  }
}

function resizeFreezeFrameOverlay() {
  if (freezeFrame.width !== 0 && freezeFrame.height !== 0) {
    let displayWidth = 0;
    let displayHeight = 0;
    let displayTop = 0;
    let displayLeft = 0;
    let checkBox = document.getElementById(
      "enlarge-display-to-fill-window-tgl"
    );
    let playerElement = document.getElementById("player");
    if (checkBox !== null && checkBox.checked) {
      // We are fitting video to screen, we care about the screen (window) size
      let windowAspectRatio = window.innerWidth / window.innerHeight;
      let videoAspectRatio = freezeFrame.width / freezeFrame.height;
      if (windowAspectRatio < videoAspectRatio) {
        displayWidth = window.innerWidth;
        displayHeight = Math.floor(window.innerWidth / videoAspectRatio);
        displayTop = Math.floor((window.innerHeight - displayHeight) * 0.5);
        displayLeft = 0;
      } else {
        displayWidth = Math.floor(window.innerHeight * videoAspectRatio);
        displayHeight = window.innerHeight;
        displayTop = 0;
        displayLeft = Math.floor((window.innerWidth - displayWidth) * 0.5);
      }
    } else {
      // Video is coming in at native resolution, we care more about the player size
      let playerAspectRatio =
        playerElement.offsetWidth / playerElement.offsetHeight;
      let videoAspectRatio = freezeFrame.width / freezeFrame.height;
      if (playerAspectRatio < videoAspectRatio) {
        displayWidth = playerElement.offsetWidth;
        displayHeight = Math.floor(
          playerElement.offsetWidth / videoAspectRatio
        );
        displayTop = Math.floor(
          (playerElement.offsetHeight - displayHeight) * 0.5
        );
        displayLeft = 0;
      } else {
        displayWidth = Math.floor(
          playerElement.offsetHeight * videoAspectRatio
        );
        displayHeight = playerElement.offsetHeight;
        displayTop = 0;
        displayLeft = Math.floor(
          (playerElement.offsetWidth - displayWidth) * 0.5
        );
      }
    }
    let freezeFrameImage =
      document.getElementById("freezeFrameOverlay").childNodes[0];
    freezeFrameOverlay.style.width = playerElement.offsetWidth + "px";
    freezeFrameOverlay.style.height = playerElement.offsetHeight + "px";
    freezeFrameOverlay.style.left = 0 + "px";
    freezeFrameOverlay.style.top = 0 + "px";

    freezeFrameImage.style.width = displayWidth + "px";
    freezeFrameImage.style.height = displayHeight + "px";
    freezeFrameImage.style.left = displayLeft + "px";
    freezeFrameImage.style.top = displayTop + "px";
  }
}

function resizePlayerStyle(event) {
  let playerElement = document.getElementById("player");

  if (!playerElement) return;

  updateVideoStreamSize();

  if (playerElement.classList.contains("fixed-size")) {
    setupMouseAndFreezeFrame(playerElement);
    return;
  }

  let checkBox = document.getElementById("enlarge-display-to-fill-window-tgl");
  let windowSmallerThanPlayer =
    window.innerWidth < playerElement.videoWidth ||
    window.innerHeight < playerElement.videoHeight;
  if (checkBox !== null) {
    if (checkBox.checked || windowSmallerThanPlayer) {
      resizePlayerStyleToFillWindow(playerElement);
    } else {
      resizePlayerStyleToActualSize(playerElement);
    }
  } else {
    resizePlayerStyleToArbitrarySize(playerElement);
  }

  setupMouseAndFreezeFrame(playerElement);
}

function setupMouseAndFreezeFrame(playerElement) {
  // Calculating and normalizing positions depends on the width and height of
  // the player.
  playerElementClientRect = playerElement.getBoundingClientRect();
  setupNormalizeAndQuantize();
  resizeFreezeFrameOverlay();
}

function updateVideoStreamSize() {
  if (!matchViewportResolution) {
    return;
  }

  let now = new Date().getTime();
  if (now - lastTimeResized > 1000) {
    let playerElement = document.getElementById("player");
    if (!playerElement) return;

    let descriptor = {
      "Resolution.Width": playerElement.clientWidth,
      "Resolution.Height": playerElement.clientHeight,
    };
    emitCommand(descriptor);
    console.log(descriptor);
    lastTimeResized = new Date().getTime();
  } else {
    console.log("Resizing too often - skipping");
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(updateVideoStreamSize, 1000);
  }
}

// Fix for bug in iOS where windowsize is not correct at instance or orientation change
// https://github.com/dimsemenov/PhotoSwipe/issues/1315
let _orientationChangeTimeout;

function onOrientationChange(event) {
  clearTimeout(_orientationChangeTimeout);
  _orientationChangeTimeout = setTimeout(function () {
    resizePlayerStyle();
  }, 500);
}

function sendMessageToStreamer(messageType, indata = []) {
  messageFormat = toStreamerMessages.getFromKey(messageType);
  if (messageFormat === undefined) {
    console.error(
      `Attempted to send a message to the streamer with message type: ${messageType}, but the frontend hasn't been configured to send such a message. Check you've added the message type in your cpp`
    );
    return;
  }
  // console.log(`Calculate size: ${new Blob(JSON.stringify(indata)).size}, Specified size: ${messageFormat.byteLength}`);
  data = new DataView(new ArrayBuffer(messageFormat.byteLength + 1));

  data.setUint8(0, messageFormat.id);
  byteOffset = 1;

  indata.forEach((element, idx) => {
    type = messageFormat.structure[idx];
    switch (type) {
      case "uint8":
        data.setUint8(byteOffset, element);
        byteOffset += 1;
        break;

      case "uint16":
        data.setUint16(byteOffset, element, true);
        byteOffset += 2;
        break;

      case "int16":
        data.setInt16(byteOffset, element, true);
        byteOffset += 2;
        break;

      case "double":
        data.setFloat64(byteOffset, element, true);
        byteOffset += 8;
        break;
    }
  });
  sendInputData(data.buffer);
}

// A generic message has a type and a descriptor.
function emitDescriptor(messageType, descriptor) {
  // Convert the descriptor object into a JSON string.
  let descriptorAsString = JSON.stringify(descriptor);
  let messageFormat = toStreamerMessages.getFromKey(messageType);
  if (messageFormat === undefined) {
    console.error(
      `Attempted to emit descriptor with message type: ${messageType}, but the frontend hasn't been configured to send such a message. Check you've added the message type in your cpp`
    );
  }
  // Add the UTF-16 JSON string to the array byte buffer, going two bytes at
  // a time.
  let data = new DataView(
    new ArrayBuffer(1 + 2 + 2 * descriptorAsString.length)
  );
  let byteIdx = 0;
  data.setUint8(byteIdx, messageFormat.id);
  byteIdx++;
  data.setUint16(byteIdx, descriptorAsString.length, true);
  byteIdx += 2;
  for (let i = 0; i < descriptorAsString.length; i++) {
    data.setUint16(byteIdx, descriptorAsString.charCodeAt(i), true);
    byteIdx += 2;
  }
  sendInputData(data.buffer);
}

// A built-in command can be sent to UE client. The commands are defined by a
// JSON descriptor and will be executed automatically.
// The currently supported commands are:
//
// 1. A command to run any console command:
//    "{ ConsoleCommand: <string> }"
//
// 2. A command to change the resolution to the given width and height.
//    "{ Resolution.Width: <value>, Resolution.Height: <value> } }"
//
function emitCommand(descriptor) {
  emitDescriptor("Command", descriptor);
}

// A UI interation will occur when the user presses a button powered by
// JavaScript as opposed to pressing a button which is part of the pixel
// streamed UI from the UE client.
function emitUIInteraction(descriptor) {
  emitDescriptor("UIInteraction", descriptor);
}

function requestInitialSettings() {
  sendMessageToStreamer("RequestInitialSettings");
}

function requestQualityControl() {
  if (!qualityController) {
    sendMessageToStreamer("RequestQualityControl");
  }
}

let playerElementClientRect = undefined;
let normalizeAndQuantizeUnsigned = undefined;
let normalizeAndQuantizeSigned = undefined;
let unquantizeAndDenormalizeUnsigned = undefined;

function setupNormalizeAndQuantize() {
  let playerElement = document.getElementById("player");
  let videoElement = playerElement.getElementsByTagName("video");

  if (playerElement && videoElement.length > 0) {
    let playerAspectRatio =
      playerElement.clientHeight / playerElement.clientWidth;
    let videoAspectRatio =
      videoElement[0].videoHeight / videoElement[0].videoWidth;

    // Unsigned XY positions are the ratio (0.0..1.0) along a viewport axis,
    // quantized into an uint16 (0..65536).
    // Signed XY deltas are the ratio (-1.0..1.0) along a viewport axis,
    // quantized into an int16 (-32767..32767).
    // This allows the browser viewport and client viewport to have a different
    // size.
    // Hack: Currently we set an out-of-range position to an extreme (65535)
    // as we can't yet accurately detect mouse enter and leave events
    // precisely inside a video with an aspect ratio which causes mattes.
    if (playerAspectRatio > videoAspectRatio) {
      if (print_inputs) {
        console.log(
          "Setup Normalize and Quantize for playerAspectRatio > videoAspectRatio"
        );
      }
      let ratio = playerAspectRatio / videoAspectRatio;
      // Unsigned.
      normalizeAndQuantizeUnsigned = (x, y) => {
        let normalizedX = x / playerElement.clientWidth;
        let normalizedY = ratio * (y / playerElement.clientHeight - 0.5) + 0.5;
        if (
          normalizedX < 0.0 ||
          normalizedX > 1.0 ||
          normalizedY < 0.0 ||
          normalizedY > 1.0
        ) {
          return {
            inRange: false,
            x: 65535,
            y: 65535,
          };
        } else {
          return {
            inRange: true,
            x: normalizedX * 65536,
            y: normalizedY * 65536,
          };
        }
      };
      unquantizeAndDenormalizeUnsigned = (x, y) => {
        let normalizedX = x / 65536;
        let normalizedY = (y / 65536 - 0.5) / ratio + 0.5;
        return {
          x: normalizedX * playerElement.clientWidth,
          y: normalizedY * playerElement.clientHeight,
        };
      };
      // Signed.
      normalizeAndQuantizeSigned = (x, y) => {
        let normalizedX = x / (0.5 * playerElement.clientWidth);
        let normalizedY = (ratio * y) / (0.5 * playerElement.clientHeight);
        return {
          x: normalizedX * 32767,
          y: normalizedY * 32767,
        };
      };
    } else {
      if (print_inputs) {
        console.log(
          "Setup Normalize and Quantize for playerAspectRatio <= videoAspectRatio"
        );
      }
      let ratio = videoAspectRatio / playerAspectRatio;
      // Unsigned.
      normalizeAndQuantizeUnsigned = (x, y) => {
        let normalizedX = ratio * (x / playerElement.clientWidth - 0.5) + 0.5;
        let normalizedY = y / playerElement.clientHeight;
        if (
          normalizedX < 0.0 ||
          normalizedX > 1.0 ||
          normalizedY < 0.0 ||
          normalizedY > 1.0
        ) {
          return {
            inRange: false,
            x: 65535,
            y: 65535,
          };
        } else {
          return {
            inRange: true,
            x: normalizedX * 65536,
            y: normalizedY * 65536,
          };
        }
      };
      unquantizeAndDenormalizeUnsigned = (x, y) => {
        let normalizedX = (x / 65536 - 0.5) / ratio + 0.5;
        let normalizedY = y / 65536;
        return {
          x: normalizedX * playerElement.clientWidth,
          y: normalizedY * playerElement.clientHeight,
        };
      };
      // Signed.
      normalizeAndQuantizeSigned = (x, y) => {
        let normalizedX = (ratio * x) / (0.5 * playerElement.clientWidth);
        let normalizedY = y / (0.5 * playerElement.clientHeight);
        return {
          x: normalizedX * 32767,
          y: normalizedY * 32767,
        };
      };
    }
  }
}

// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
const MouseButton = {
  MainButton: 0, // Left button.
  AuxiliaryButton: 1, // Wheel button.
  SecondaryButton: 2, // Right button.
  FourthButton: 3, // Browser Back button.
  FifthButton: 4, // Browser Forward button.
};

// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
const MouseButtonsMask = {
  PrimaryButton: 1, // Left button.
  SecondaryButton: 2, // Right button.
  AuxiliaryButton: 4, // Wheel button.
  FourthButton: 8, // Browser Back button.
  FifthButton: 16, // Browser Forward button.
};

// If the user has any mouse buttons pressed then release them.
function releaseMouseButtons(buttons, x, y) {
  let coord = normalizeAndQuantizeUnsigned(x, y);
  if (buttons & MouseButtonsMask.PrimaryButton) {
    toStreamerHandlers.MouseUp("MouseUp", [
      MouseButton.MainButton,
      coord.x,
      coord.y,
    ]);
  }
  if (buttons & MouseButtonsMask.SecondaryButton) {
    toStreamerHandlers.MouseUp("MouseUp", [
      MouseButton.SecondaryButton,
      coord.x,
      coord.y,
    ]);
  }
  if (buttons & MouseButtonsMask.AuxiliaryButton) {
    toStreamerHandlers.MouseUp("MouseUp", [
      MouseButton.AuxiliaryButton,
      coord.x,
      coord.y,
    ]);
  }
  if (buttons & MouseButtonsMask.FourthButton) {
    toStreamerHandlers.MouseUp("MouseUp", [
      MouseButton.FourthButton,
      coord.x,
      coord.y,
    ]);
  }
  if (buttons & MouseButtonsMask.FifthButton) {
    toStreamerHandlers.MouseUp("MouseUp", [
      MouseButton.FifthButton,
      coord.x,
      coord.y,
    ]);
  }
}

// If the user has any Mouse buttons pressed then press them again.
function pressMouseButtons(buttons, x, y) {
  let coord = normalizeAndQuantizeUnsigned(x, y);
  if (buttons & MouseButtonsMask.PrimaryButton) {
    toStreamerHandlers.MouseDown("MouseDown", [
      MouseButton.MainButton,
      coord.x,
      coord.y,
    ]);
  }
  if (buttons & MouseButtonsMask.SecondaryButton) {
    toStreamerHandlers.MouseDown("MouseDown", [
      MouseButton.SecondaryButton,
      coord.x,
      coord.y,
    ]);
  }
  if (buttons & MouseButtonsMask.AuxiliaryButton) {
    toStreamerHandlers.MouseDown("MouseDown", [
      MouseButton.AuxiliaryButton,
      coord.x,
      coord.y,
    ]);
  }
  if (buttons & MouseButtonsMask.FourthButton) {
    toStreamerHandlers.MouseDown("MouseDown", [
      MouseButton.FourthButton,
      coord.x,
      coord.y,
    ]);
  }
  if (buttons & MouseButtonsMask.FifthButton) {
    toStreamerHandlers.MouseDown("MouseDown", [
      MouseButton.FifthButton,
      coord.x,
      coord.y,
    ]);
  }
}

function registerInputs(playerElement) {
  if (!playerElement) return;

  registerMouseEnterAndLeaveEvents(playerElement);
  registerTouchEvents(playerElement);
}

function createOnScreenKeyboardHelpers(htmlElement) {
  if (document.getElementById("hiddenInput") === null) {
    hiddenInput = document.createElement("input");
    hiddenInput.id = "hiddenInput";
    hiddenInput.maxLength = 0;
    htmlElement.appendChild(hiddenInput);
  }

  if (document.getElementById("editTextButton") === null) {
    editTextButton = document.createElement("button");
    editTextButton.id = "editTextButton";
    editTextButton.innerHTML = "edit text";
    htmlElement.appendChild(editTextButton);

    // Hide the 'edit text' button.
    editTextButton.classList.add("hiddenState");

    editTextButton.addEventListener("click", function () {
      // Show the on-screen keyboard.
      hiddenInput.focus();
    });
  }
}

function showOnScreenKeyboard(command) {
  if (command.showOnScreenKeyboard) {
    // Show the 'edit text' button.
    editTextButton.classList.remove("hiddenState");
    // Place the 'edit text' button near the UE input widget.
    let pos = unquantizeAndDenormalizeUnsigned(command.x, command.y);
    editTextButton.style.top = pos.y.toString() + "px";
    editTextButton.style.left = (pos.x - 40).toString() + "px";
  } else {
    // Hide the 'edit text' button.
    editTextButton.classList.add("hiddenState");
    // Hide the on-screen keyboard.
    hiddenInput.blur();
  }
}

function registerMouseEnterAndLeaveEvents(playerElement) {
  playerElement.onmouseenter = function (e) {
    if (print_inputs) {
      console.log("mouse enter");
    }
    toStreamerHandlers.MouseEnter("MouseEnter");
    playerElement.pressMouseButtons(e);
  };

  playerElement.onmouseleave = function (e) {
    if (print_inputs) {
      console.log("mouse leave");
    }
    toStreamerHandlers.MouseLeave("MouseLeave");
    playerElement.releaseMouseButtons(e);
  };
}

// A locked mouse works by the user clicking in the browser player and the
// cursor disappears and is locked. The user moves the cursor and the camera
// moves, for example. The user presses escape to free the mouse.
function registerLockedMouseEvents(playerElement) {
  styleCursor = inputOptions.hideBrowserCursor ? "none" : "default";
  let x = playerElement.width / 2;
  let y = playerElement.height / 2;
  let coord = normalizeAndQuantizeUnsigned(x, y);

  playerElement.requestPointerLock =
    playerElement.requestPointerLock || playerElement.mozRequestPointerLock;
  document.exitPointerLock =
    document.exitPointerLock || document.mozExitPointerLock;

  playerElement.onclick = function () {
    playerElement.requestPointerLock();
  };

  // Respond to lock state change events
  document.addEventListener("pointerlockchange", lockStateChange, false);
  document.addEventListener("mozpointerlockchange", lockStateChange, false);

  function lockStateChange() {
    if (
      document.pointerLockElement === playerElement ||
      document.mozPointerLockElement === playerElement
    ) {
      console.log("Pointer locked");
      document.addEventListener("mousemove", updatePosition, false);
    } else {
      console.log("The pointer lock status is now unlocked");
      document.removeEventListener("mousemove", updatePosition, false);

      // If mouse loses focus, send a key up for all of the currently held-down keys
      // This is necessary as when the mouse loses focus, the windows stops listening for events and as such
      // the keyup listener won't get fired
      [...new Set(activeKeys)].forEach((uniqueKeycode) => {
        toStreamerHandlers.KeyUp("KeyUp", [uniqueKeycode]);
      });
      // Reset the active keys back to nothing
      activeKeys = [];
    }
  }

  function updatePosition(e) {
    x += e.movementX;
    y += e.movementY;
    if (x > styleWidth) {
      x -= styleWidth;
    }
    if (y > styleHeight) {
      y -= styleHeight;
    }
    if (x < 0) {
      x = styleWidth + x;
    }
    if (y < 0) {
      y = styleHeight - y;
    }

    let coord = normalizeAndQuantizeUnsigned(x, y);
    let delta = normalizeAndQuantizeSigned(e.movementX, e.movementY);
    toStreamerHandlers.MouseMove("MouseMove", [
      coord.x,
      coord.y,
      delta.x,
      delta.y,
    ]);
  }

  playerElement.onmousedown = function (e) {
    toStreamerHandlers.MouseDown("MouseDown", [e.button, coord.x, coord.y]);
  };

  playerElement.onmouseup = function (e) {
    toStreamerHandlers.MouseUp("MouseUp", [e.button, coord.x, coord.y]);
  };

  playerElement.onwheel = function (e) {
    toStreamerHandlers.MouseWheel("MouseWheel", [
      e.wheelDelta,
      coord.x,
      coord.y,
    ]);
  };

  playerElement.ondblclick = function (e) {
    toStreamerHandlers.MouseDown("MouseDouble", [e.button, coord.x, coord.y]);
  };

  playerElement.pressMouseButtons = function (e) {
    pressMouseButtons(e.buttons, x, y);
  };

  playerElement.releaseMouseButtons = function (e) {
    releaseMouseButtons(e.buttons, x, y);
  };
}

// A hovering mouse works by the user clicking the mouse button when they want
// the cursor to have an effect over the video. Otherwise the cursor just
// passes over the browser.
function registerHoveringMouseEvents(playerElement) {
  styleCursor = inputOptions.hideBrowserCursor ? "none" : "default";

  playerElement.onmousemove = function (e) {
    let coord = normalizeAndQuantizeUnsigned(e.offsetX, e.offsetY);
    let delta = normalizeAndQuantizeSigned(e.movementX, e.movementY);
    toStreamerHandlers.MouseMove("MouseMove", [
      coord.x,
      coord.y,
      delta.x,
      delta.y,
    ]);
    e.preventDefault();
  };

  playerElement.onmousedown = function (e) {
    let coord = normalizeAndQuantizeUnsigned(e.offsetX, e.offsetY);
    toStreamerHandlers.MouseDown("MouseDown", [e.button, coord.x, coord.y]);
    e.preventDefault();
  };

  playerElement.onmouseup = function (e) {
    let coord = normalizeAndQuantizeUnsigned(e.offsetX, e.offsetY);
    toStreamerHandlers.MouseUp("MouseUp", [e.button, coord.x, coord.y]);
    e.preventDefault();
  };

  // When the context menu is shown then it is safest to release the button
  // which was pressed when the event happened. This will guarantee we will
  // get at least one mouse up corresponding to a mouse down event. Otherwise
  // the mouse can get stuck.
  // https://github.com/facebook/react/issues/5531
  playerElement.oncontextmenu = function (e) {
    let coord = normalizeAndQuantizeUnsigned(e.offsetX, e.offsetY);
    toStreamerHandlers.MouseUp("MouseUp", [e.button, coord.x, coord.y]);
    e.preventDefault();
  };

  playerElement.onwheel = function (e) {
    let coord = normalizeAndQuantizeUnsigned(e.offsetX, e.offsetY);
    toStreamerHandlers.MouseWheel("MouseWheel", [
      e.wheelDelta,
      coord.x,
      coord.y,
    ]);
    e.preventDefault();
  };

  playerElement.ondblclick = function (e) {
    let coord = normalizeAndQuantizeUnsigned(e.offsetX, e.offsetY);
    toStreamerHandlers.MouseDown("MouseDouble", [e.button, coord.x, coord.y]);
  };

  playerElement.pressMouseButtons = function (e) {
    pressMouseButtons(e.buttons, e.offsetX, e.offsetY);
  };

  playerElement.releaseMouseButtons = function (e) {
    releaseMouseButtons(e.buttons, e.offsetX, e.offsetY);
  };
}

function registerTouchEvents(playerElement) {
  // We need to assign a unique identifier to each finger.
  // We do this by mapping each Touch object to the identifier.
  let fingers = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
  let fingerIds = {};

  function rememberTouch(touch) {
    let finger = fingers.pop();
    if (finger === undefined) {
      console.log("exhausted touch indentifiers");
    }
    fingerIds[touch.identifier] = finger;
  }

  function forgetTouch(touch) {
    fingers.push(fingerIds[touch.identifier]);
    // Sort array back into descending order. This means if finger '1' were to lift after finger '0', we would ensure that 0 will be the first index to pop
    fingers.sort(function (a, b) {
      return b - a;
    });
    delete fingerIds[touch.identifier];
  }

  function emitTouchData(type, touches) {
    for (let t = 0; t < touches.length; t++) {
      let numTouches = 1; // the number of touches to be sent this message
      let touch = touches[t];
      let x = touch.clientX - playerElement.offsetLeft;
      let y = touch.clientY - playerElement.offsetTop;
      if (print_inputs) {
        console.log(`F${fingerIds[touch.identifier]}=(${x}, ${y})`);
      }
      let coord = normalizeAndQuantizeUnsigned(x, y);

      switch (type) {
        case "TouchStart":
          toStreamerHandlers.TouchStart("TouchStart", [
            numTouches,
            coord.x,
            coord.y,
            fingerIds[touch.identifier],
            MaxByteValue * touch.force,
            coord.inRange ? 1 : 0,
          ]);
          break;
        case "TouchEnd":
          toStreamerHandlers.TouchStart("TouchEnd", [
            numTouches,
            coord.x,
            coord.y,
            fingerIds[touch.identifier],
            MaxByteValue * touch.force,
            coord.inRange ? 1 : 0,
          ]);
          break;
        case "TouchMove":
          toStreamerHandlers.TouchStart("TouchMove", [
            numTouches,
            coord.x,
            coord.y,
            fingerIds[touch.identifier],
            MaxByteValue * touch.force,
            coord.inRange ? 1 : 0,
          ]);
          break;
      }
    }
  }

  if (inputOptions.fakeMouseWithTouches) {
    let finger = undefined;

    playerElement.ontouchstart = function (e) {
      if (finger === undefined) {
        let firstTouch = e.changedTouches[0];
        finger = {
          id: firstTouch.identifier,
          x: firstTouch.clientX - playerElementClientRect.left,
          y: firstTouch.clientY - playerElementClientRect.top,
        };
        // Hack: Mouse events require an enter and leave so we just
        // enter and leave manually with each touch as this event
        // is not fired with a touch device.
        playerElement.onmouseenter(e);
        let coord = normalizeAndQuantizeUnsigned(finger.x, finger.y);
        toStreamerHandlers.MouseDown("MouseDown", [
          MouseButton.MainButton,
          coord.x,
          coord.y,
        ]);
      }
      e.preventDefault();
    };

    playerElement.ontouchend = function (e) {
      for (let t = 0; t < e.changedTouches.length; t++) {
        let touch = e.changedTouches[t];
        if (touch.identifier === finger.id) {
          let x = touch.clientX - playerElementClientRect.left;
          let y = touch.clientY - playerElementClientRect.top;
          let coord = normalizeAndQuantizeUnsigned(x, y);
          toStreamerHandlers.MouseUp("MouseUp", [
            MouseButton.MainButton,
            coord.x,
            coord.y,
          ]);
          // Hack: Manual mouse leave event.
          playerElement.onmouseleave(e);
          finger = undefined;
          break;
        }
      }
      e.preventDefault();
    };

    playerElement.ontouchmove = function (e) {
      for (let t = 0; t < e.touches.length; t++) {
        let touch = e.touches[t];
        if (touch.identifier === finger.id) {
          let x = touch.clientX - playerElementClientRect.left;
          let y = touch.clientY - playerElementClientRect.top;
          let coord = normalizeAndQuantizeUnsigned(x, y);
          let delta = normalizeAndQuantizeSigned(x - finger.x, y - finger.y);
          toStreamerHandlers.MouseMove("MouseMove", [
            coord.x,
            coord.y,
            delta.x,
            delta.y,
          ]);
          finger.x = x;
          finger.y = y;
          break;
        }
      }
      e.preventDefault();
    };
  } else {
    playerElement.ontouchstart = function (e) {
      // Assign a unique identifier to each touch.
      for (let t = 0; t < e.changedTouches.length; t++) {
        rememberTouch(e.changedTouches[t]);
      }

      if (print_inputs) {
        console.log("touch start");
      }
      emitTouchData("TouchStart", e.changedTouches);
      e.preventDefault();
    };

    playerElement.ontouchend = function (e) {
      if (print_inputs) {
        console.log("touch end");
      }
      emitTouchData("TouchEnd", e.changedTouches);

      // Re-cycle unique identifiers previously assigned to each touch.
      for (let t = 0; t < e.changedTouches.length; t++) {
        forgetTouch(e.changedTouches[t]);
      }
      e.preventDefault();
    };

    playerElement.ontouchmove = function (e) {
      if (print_inputs) {
        console.log("touch move");
      }
      emitTouchData("TouchMove", e.touches);
      e.preventDefault();
    };
  }
}

// Browser keys do not have a charCode so we only need to test keyCode.
function isKeyCodeBrowserKey(keyCode) {
  // Function keys or tab key.
  return (keyCode >= 112 && keyCode <= 123) || keyCode === 9;
}

// Must be kept in sync with JavaScriptKeyCodeToFKey C++ array. The index of the
// entry in the array is the special key code given below.
const SpecialKeyCodes = {
  BackSpace: 8,
  Shift: 16,
  Control: 17,
  Alt: 18,
  RightShift: 253,
  RightControl: 254,
  RightAlt: 255,
};

/*
 * New browser APIs have moved away from KeyboarddEvent.keyCode to KeyboardEvent.Code.
 * For details see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#constants_for_keycode_value
 * We still use old KeyboardEvent.keyCode integers in the UE C++ side, so we need a way to map the new
 * string-based KeyboardEvenet.Code to the old integers.
 */
const CodeToKeyCode = {
  Escape: 27,
  Digit0: 48,
  Digit1: 49,
  Digit2: 50,
  Digit3: 51,
  Digit4: 52,
  Digit5: 53,
  Digit6: 54,
  Digit7: 55,
  Digit8: 56,
  Digit9: 57,
  Minus: 173,
  Equal: 187,
  Backspace: 8,
  Tab: 9,
  KeyQ: 81,
  KeyW: 87,
  KeyE: 69,
  KeyR: 82,
  KeyT: 84,
  KeyY: 89,
  KeyU: 85,
  KeyI: 73,
  KeyO: 79,
  KeyP: 80,
  BracketLeft: 219,
  BracketRight: 221,
  Enter: 13,
  ControlLeft: 17,
  KeyA: 65,
  KeyS: 83,
  KeyD: 68,
  KeyF: 70,
  KeyG: 71,
  KeyH: 72,
  KeyJ: 74,
  KeyK: 75,
  KeyL: 76,
  Semicolon: 186,
  Quote: 222,
  Backquote: 192,
  ShiftLeft: 16,
  Backslash: 220,
  KeyZ: 90,
  KeyX: 88,
  KeyC: 67,
  KeyV: 86,
  KeyB: 66,
  KeyN: 78,
  KeyM: 77,
  Comma: 188,
  Period: 190,
  Slash: 191,
  ShiftRight: 253,
  AltLeft: 18,
  Space: 32,
  CapsLock: 20,
  F1: 112,
  F2: 113,
  F3: 114,
  F4: 115,
  F5: 116,
  F6: 117,
  F7: 118,
  F8: 119,
  F9: 120,
  F10: 121,
  F11: 122,
  F12: 123,
  Pause: 19,
  ScrollLock: 145,
  NumpadDivide: 111,
  NumpadMultiply: 106,
  NumpadSubtract: 109,
  NumpadAdd: 107,
  NumpadDecimal: 110,
  Numpad9: 105,
  Numpad8: 104,
  Numpad7: 103,
  Numpad6: 102,
  Numpad5: 101,
  Numpad4: 100,
  Numpad3: 99,
  Numpad2: 98,
  Numpad1: 97,
  Numpad0: 96,
  NumLock: 144,
  ControlRight: 254,
  AltRight: 255,
  Home: 36,
  End: 35,
  ArrowUp: 38,
  ArrowLeft: 37,
  ArrowRight: 39,
  ArrowDown: 40,
  PageUp: 33,
  PageDown: 34,
  Insert: 45,
  Delete: 46,
  ContextMenu: 93,
};

function getKeyCode(e) {
  // If we don't have keyCode property because browser API is deprecated then use KeyboardEvent.code instead.
  // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#constants_for_keycode_value
  if (!("keyCode" in e)) {
    // Convert KeyboardEvent.code string into integer-based key code for backwards compatibility reasons.
    if (e.code in CodeToKeyCode) {
      return CodeToKeyCode[e.code];
    } else {
      console.warn(
        `Keyboard code of ${e.code} is not supported in our mapping, ignoring this key.`
      );
      return null;
    }
  }

  // If we made it here KeyboardEvent.keyCode is still supported so we can safely use it.

  // Below logic is so we can detect and differentiate between left and right versions of some keys.
  if (e.keyCode === SpecialKeyCodes.Shift && e.code === "ShiftRight")
    return SpecialKeyCodes.RightShift;
  else if (e.keyCode === SpecialKeyCodes.Control && e.code === "ControlRight")
    return SpecialKeyCodes.RightControl;
  else if (e.keyCode === SpecialKeyCodes.Alt && e.code === "AltRight")
    return SpecialKeyCodes.RightAlt;
  else return e.keyCode;
}

function registerKeyboardEvents() {
  document.onkeydown = function (e) {
    const keyCode = getKeyCode(e);
    if (!keyCode) {
      return;
    }

    if (print_inputs) {
      console.log(`key down ${keyCode}, repeat = ${e.repeat}`);
    }

    toStreamerHandlers.KeyDown("KeyDown", [keyCode, e.repeat]);
    activeKeys.push(keyCode);

    // Backspace is not considered a keypress in JavaScript but we need it
    // to be so characters may be deleted in a UE text entry field.
    if (keyCode === SpecialKeyCodes.BackSpace) {
      document.onkeypress({
        charCode: SpecialKeyCodes.BackSpace,
      });
    }
    if (inputOptions.suppressBrowserKeys && isKeyCodeBrowserKey(e.keyCode)) {
      e.preventDefault();
    }
  };

  document.onkeyup = function (e) {
    const keyCode = getKeyCode(e);
    if (!keyCode) {
      return;
    }

    if (print_inputs) {
      console.log(`key up ${keyCode}`);
    }
    toStreamerHandlers.KeyUp("KeyUp", [keyCode, e.repeat]);

    // if we are suppressing browser keys and this key is a browser key then cancel it from being used in browser
    if (inputOptions.suppressBrowserKeys && isKeyCodeBrowserKey(keyCode)) {
      e.preventDefault();
    }
  };

  document.onkeypress = function (e) {
    if (!("charCode" in e)) {
      console.warn(
        "KeyboardEvent.charCode is deprecated in this browser, cannot send key press."
      );
      return;
    }
    // @ts-ignore: deprecation is being used safely
    const charCode = e.charCode;
    if (print_inputs) {
      console.log(`key press ${e.charCode}`);
    }
    toStreamerHandlers.KeyPress("KeyPress", [e.charCode]);
  };
}

function settingsClicked(/* e */) {
  /**
   * Toggle settings panel. If stats panel is already open, close it and then open settings
   */
  let settings = document.getElementById("settings-panel");
  let stats = document.getElementById("stats-panel");

  if (stats.classList.contains("panel-wrap-visible")) {
    stats.classList.toggle("panel-wrap-visible");
  }

  settings.classList.toggle("panel-wrap-visible");
}

function statsClicked(/* e */) {
  /**
   * Toggle stats panel. If settings panel is already open, close it and then open stats
   */
  let settings = document.getElementById("settings-panel");
  let stats = document.getElementById("stats-panel");

  if (settings.classList.contains("panel-wrap-visible")) {
    settings.classList.toggle("panel-wrap-visible");
  }

  stats.classList.toggle("panel-wrap-visible");
}

function start(isReconnection) {
  // update "quality status" to "disconnected" state
  let qualityStatus = document.getElementById("qualityStatus");
  if (qualityStatus) {
    qualityStatus.className = "grey-status";
  }

  let statsDiv = document.getElementById("stats");
  if (statsDiv) {
    statsDiv.innerHTML = "Not connected";
  }

  if (!connect_on_load || isReconnection) {
    showConnectOverlay();
    invalidateFreezeFrameOverlay();
    shouldShowPlayOverlay = true;
    resizePlayerStyle();
  } else {
    connect();
  }
}

function connect() {
  "use strict";

  window.WebSocket = window.WebSocket || window.MozWebSocket;

  if (!window.WebSocket) {
    alert("Your browser doesn't support WebSocket");
    return;
  }

  // Make a new websocket connection
  let connectionUrl = window.location.href
    .replace("http://", "ws://")
    .replace("https://", "wss://");
  console.log(`Creating a websocket connection to: ${connectionUrl}`);
  ws = new WebSocket(connectionUrl);
  ws.attemptStreamReconnection = true;

  ws.onmessagebinary = function (event) {
    if (!event || !event.data) {
      return;
    }

    event.data
      .text()
      .then(function (messageString) {
        // send the new stringified event back into `onmessage`
        ws.onmessage({ data: messageString });
      })
      .catch(function (error) {
        console.error(
          `Failed to parse binary blob from websocket, reason: ${error}`
        );
      });
  };

  ws.onmessage = function (event) {
    // Check if websocket message is binary, if so, stringify it.
    if (event.data && event.data instanceof Blob) {
      ws.onmessagebinary(event);
      return;
    }

    let msg = JSON.parse(event.data);
    if (msg.type === "config") {
      console.log(
        "%c[Inbound SS (config)]",
        "background: lightblue; color: black",
        msg
      );
      onConfig(msg);
    } else if (msg.type === "playerCount") {
      console.log(
        "%c[Inbound SS (playerCount)]",
        "background: lightblue; color: black",
        msg
      );
    } else if (msg.type === "offer") {
      console.log(
        "%c[Inbound SS (offer)]",
        "background: lightblue; color: black",
        msg
      );
      if (!UrlParamsCheck("offerToReceive")) {
        onWebRtcOffer(msg);
      }
    } else if (msg.type === "answer") {
      console.log(
        "%c[Inbound SS (answer)]",
        "background: lightblue; color: black",
        msg
      );
      onWebRtcAnswer(msg);
    } else if (msg.type === "iceCandidate") {
      onWebRtcIce(msg.candidate);
    } else if (msg.type === "warning" && msg.warning) {
      console.warn(msg.warning);
    } else if (msg.type === "peerDataChannels") {
      onWebRtcSFUPeerDatachannels(msg);
    } else {
      console.error("Invalid SS message type", msg.type);
    }
  };

  ws.onerror = function (event) {
    console.log(`WS error: ${JSON.stringify(event)}`);
  };

  ws.onclose = function (event) {
    closeStream();

    if (ws.attemptStreamReconnection === true) {
      console.log(`WS closed: ${JSON.stringify(event.code)} - ${event.reason}`);
      if (event.reason !== "") {
        showTextOverlay(`DISCONNECTED: ${event.reason.toUpperCase()}`);
      } else {
        showTextOverlay(`DISCONNECTED`);
      }

      let reclickToStart = setTimeout(function () {
        start(true);
      }, 4000);
    }

    ws = undefined;
  };
}

// Config data received from WebRTC sender via the Cirrus web server
function onConfig(config) {
  let playerDiv = document.getElementById("player");
  let playerElement = setupWebRtcPlayer(playerDiv, config);
  resizePlayerStyle();
  registerMouse(playerElement);
}

function registerMouse(playerElement) {
  clearMouseEvents(playerElement);

  switch (inputOptions.controlScheme) {
    case ControlSchemeType.HoveringMouse:
      registerHoveringMouseEvents(playerElement);
      break;
    case ControlSchemeType.LockedMouse:
      registerLockedMouseEvents(playerElement);
      break;
    default:
      registerLockedMouseEvents(playerElement);
      break;
  }

  let player = document.getElementById("player");
  player.style.cursor = styleCursor;
}

function clearMouseEvents(playerElement) {
  playerElement.onclick = null;
  playerElement.onmousedown = null;
  playerElement.onmouseup = null;
  playerElement.onwheel = null;
  playerElement.onmousemove = null;
  playerElement.oncontextmenu = null;
}

function toggleControlScheme() {
  let schemeToggle = document.getElementById("control-scheme-text");

  switch (inputOptions.controlScheme) {
    case ControlSchemeType.HoveringMouse:
      inputOptions.controlScheme = ControlSchemeType.LockedMouse;
      schemeToggle.innerHTML = "Control Scheme: Locked Mouse";
      break;
    case ControlSchemeType.LockedMouse:
      inputOptions.controlScheme = ControlSchemeType.HoveringMouse;
      schemeToggle.innerHTML = "Control Scheme: Hovering Mouse";
      break;
    default:
      inputOptions.controlScheme = ControlSchemeType.LockedMouse;
      schemeToggle.innerHTML = "Control Scheme: Locked Mouse";
      console.log(
        `ERROR: Unknown control scheme ${inputOptions.controlScheme}, defaulting to Locked Mouse`
      );
      break;
  }

  console.log(
    `Updating control scheme to: ${
      inputOptions.controlScheme ? "Hovering Mouse" : "Locked Mouse"
    }`
  );
  if (webRtcPlayerObj && webRtcPlayerObj.video) {
    registerMouse(webRtcPlayerObj.video);
  }
}

function toggleBrowserCursorVisibility() {
  inputOptions.hideBrowserCursor = !inputOptions.hideBrowserCursor;
  styleCursor = inputOptions.hideBrowserCursor ? "none" : "default";
  let player = document.getElementById("player");
  player.style.cursor = styleCursor;
}

function restartStream() {
  if (!ws) {
    return;
  }
  ws.attemptStreamReconnection = false;

  let existingOnClose = ws.onclose;

  ws.onclose = function (event) {
    existingOnClose(event);
    // this is how we restart
    connect_on_load = true;
    start(false);
  };

  // Closing the websocket closes the connection to signalling server, ending the peer connection, and closing the clientside stream too.
  ws.close();
}

function closeStream() {
  console.log("----------------------Closing stream----------------------");
  if (webRtcPlayerObj) {
    // Remove video element from the page.
    let playerDiv = document.getElementById("player");
    if (playerDiv) {
      playerDiv.removeChild(webRtcPlayerObj.video);
    }
    let outer = document.getElementById("outer");
    let middle = document.getElementById("middle");
    let inner = document.getElementById("inner");
    let dot = document.getElementById("dot");

    outer.style.fill =
      middle.style.fill =
      inner.style.fill =
      dot.style.fill =
        "#3c3b40";
    let qualityText = document.getElementById("qualityText");
    qualityText.innerHTML = "Not connected";
    // Close the peer connection and associated webrtc machinery.
    webRtcPlayerObj.close();
    webRtcPlayerObj = undefined;
  }
}

function load() {
  hideOverlay();
  parseURLParams();
  setupHtmlEvents();
  registerMessageHandlers();
  populateDefaultProtocol();
  setupFreezeFrameOverlay();
  registerKeyboardEvents();
  // Example response event listener that logs to console
  addResponseEventListener("logListener", (response) => {
    console.log(`Received response message from streamer: "${response}"`);
  });
  start(false);
}