webcomponent.js

import { Client } from "./eaas-client.js";
import {
  InputBuilder,
  InputContentBuilder,
  MachineComponentBuilder,
} from "./lib/componentBuilder.js";
import { ClientOptions, NetworkConfig } from "./lib/clientOptions.js";
import { NetworkBuilder } from "./lib/networkBuilder.js";
import { _fetch } from "./lib/util.js";

const kbLayoutPrefs = {
  language: { name: "us", description: "English (US)" },
  layout: {
    name: "pc101",
    description: "Generic 101-key PC",
    vendor: "Generic",
  },
};

const containerName = "emulator-container";

class EaasClientElement extends HTMLElement {
  constructor() {
    super();
    if (this.hasAttribute("autoplay")) this.play();
  }

  async pressKey(key, keyCode = key.toUpperCase().charCodeAt(0), {altKey, ctrlKey, metaKey, timeout = 100} = {})
  {
      const el = document.getElementById(containerName).firstElementChild;
      if (ctrlKey) {
          el.dispatchEvent(new KeyboardEvent("keydown", {key: "Control", keyCode: 17, bubbles: true}));
          await new Promise(r => setTimeout(r, timeout));
      }
      if (altKey) {
          el.dispatchEvent(new KeyboardEvent("keydown", {key: "Alt", keyCode: 18, bubbles: true}));
          await new Promise(r => setTimeout(r, timeout));
      }
      el.dispatchEvent(new KeyboardEvent("keydown", {key, keyCode, ctrlKey, altKey, metaKey, bubbles: true}));
      await new Promise(r => setTimeout(r, timeout));
      el.dispatchEvent(new KeyboardEvent("keyup", {key, keyCode, ctrlKey, altKey, metaKey, bubbles: true}));
      if (altKey) {
          await new Promise(r => setTimeout(r, timeout));
          el.dispatchEvent(new KeyboardEvent("keyup", {key: "Alt", keyCode: 18, bubbles: true}));
      }
      if (ctrlKey) {
          await new Promise(r => setTimeout(r, timeout));
          el.dispatchEvent(new KeyboardEvent("keyup", {key: "Control", keyCode: 17, bubbles: true}));
      }
  }

  async play() {
    const container = document.createElement("div");
    container.id = containerName;
    container.style.position = "relative";
    container.style.zIndex = "0";
    this.append(container);
    this.container = container;
    this.backendUrl = this.getAttribute("eaas-service");
    const { backendUrl } = this;
    this.client = new Client(backendUrl, undefined, { kbLayoutPrefs });
    const { client } = this;
    this.style.display = "block";
    this.style.width = "min-content";

    let envId = this.getAttribute("environment-id");
    const imageArchive = this.getAttribute("image-archive") || "public";
    const enableInternet = this.hasAttribute("enable-internet");
    const internetDate = this.getAttribute("internet-date");
    const networkId = this.getAttribute("network-id");
    const networkLabel = this.getAttribute("network-label");
    const containerId = this.getAttribute("container-id")?.match(/\/?([^/]+)$/)[1];
    const xpraEncoding = this.getAttribute("xpra-encoding");

    if(containerId && !envId)
      envId = this.getAttribute("container-runtime-id");

    const networkName =
      this.getAttribute("network-name") ?? `network-${Math.random()}`;
    const machine = new MachineComponentBuilder(envId, imageArchive);
    machine.setInteractive(true);
    if (containerId)
      machine.setLinuxRuntime({
        userContainerEnvironment: containerId,
        userContainerArchive: imageArchive,
      });

    this.client.onEmulatorStopped = async () => {
      let result = await this.client.release();
      console.log(result);
      for (const download of downloads) {
        const a = document.createElement("a");
        a.href = result.url;
        a.append(...download.childNodes);
        download.append(a);
        download.hidden = false;
        this.append(download);
      }
    };

    const userMedia = [...this.querySelectorAll("eaas-medium")];
    if(userMedia.length)
    {
      for (const medium of userMedia) {
        const url = medium.getAttribute("source-url");
        const type = medium.getAttribute("type");

        const objectId = medium.getAttribute("object-id");
        const objectArchive = medium.getAttribute("object-archive");

        if(url && type)
          machine.addUserMedia(url, type);
        else if(objectId)
          machine.setObject(objectId, objectArchive || "zero conf");
      }
    }

    const downloads = [...this.querySelectorAll("eaas-result")];
    for (const download of downloads) {
      download.hidden = true;
    }

    let inputMedia;
    const inputs = [...this.querySelectorAll("eaas-input")];
    if (inputs.length) {
      inputMedia = new InputBuilder("/input");
      for (const input of inputs) {
        const contentBuilder = new InputContentBuilder(
          input.getAttribute("href")
        );
        contentBuilder.setName(input.getAttribute("name"));
        const format = input.getAttribute("format");
        if (format) {
          contentBuilder.setAction("extract");
          contentBuilder.setCompressionFmt(format);
        } else {
          contentBuilder.setAction("copy");
        }
        inputMedia.addContent(contentBuilder);
      }
    }
    if (inputMedia) machine.addInputMedia(inputMedia);

    const monitorStateChanges = async () => {
      let oldState;
      while (true) {
        const state = (
          await this.session.getEmulatorState()
        ).state.toLowerCase();
        if (state !== oldState) {
          this.dispatchEvent(new CustomEvent(state));
        }
        oldState = state;
        console.log({ state });
        await new Promise((r) => setTimeout(r, 1000));
      }
    };

    let clientOptions = new ClientOptions();
    let components = [machine];

    if (enableInternet) {
      const networkBuilder = new NetworkBuilder(this.backendUrl);
      networkBuilder.addComponent(machine);
      clientOptions = await networkBuilder.getDefaultClientOptions();
      clientOptions.getNetworkConfig().enableInternet(true);
      if(!internetDate)  
      {
        clientOptions.getNetworkConfig().enableSlirpDhcp(true);
      }
      else {
        console.log(internetDate);
        networkBuilder.getNetworkConfig().archived_internet_date = internetDate;
        await networkBuilder.enableDhcpService(networkBuilder.getNetworkConfig());
      }

      components = await networkBuilder.getComponents();
    }

    if (networkId) {
      const netUtils = new NetworkBuilder(backendUrl);
      const session = await netUtils.connectNetworkSession(
        client,
        networkId,
        networkName
      );

      const realSession = await _fetch(
        `${client.API_URL}/sessions/${session.id}`,
        "GET"
      );
      client.load(realSession);

      const { componentId } = client.network.networkConfig.components.find(
        (e) => e.networkLabel === networkLabel
      );

      const componentSession = client.getSession(componentId);
      this.session = componentSession;
    } else {
      if (xpraEncoding) clientOptions.setXpraEncoding(xpraEncoding);
      await client.start(components, clientOptions);
    }
    await client.connect(container);

    if(this.session == null)
      this.session = client.getActiveSession();

    if (this.session.hasPointerLock()) this.session.setPointerLock();

    for (const el of [...this.childNodes])
      if (el !== this.container) el.remove();

    monitorStateChanges();
  }
  attributeChangedCallback() {}
}

customElements.define("eaas-environment", EaasClientElement);