video-settings-dialog.html

<template id="video-settings-template">
  <style>
    @import "css/style.css";
    @import "css/icons.css";

    #loading,
    #edit,
    #saving {
      display: none;
    }

    :host([state="loading"]) #loading,
    :host([state="edit"]) #edit,
    :host([state="saving"]) #saving {
      display: block;
    }

    .settings-container {
      margin: 2rem 0;
    }

    .setting {
      display: flex;
      justify-content: end;
      align-items: center;
      margin-bottom: 1.5rem;
    }

    :host(:not([streaming-mode="MJPEG"])) .setting-mjpeg,
    :host(:not([streaming-mode="H264"])) .setting-h264 {
      display: none;
    }

    .streaming-mode-value-mjpeg,
    .streaming-mode-value-h264 {
      display: none;
    }

    :host([streaming-mode="MJPEG"]) .streaming-mode-value-mjpeg,
    :host([streaming-mode="H264"]) .streaming-mode-value-h264 {
      display: inline;
    }

    .setting label {
      display: block;
      text-align: right;
      margin-right: 0.5em;
      width: 6em;
    }

    .setting input {
      display: block;
      flex: 1;
      max-width: 26em;
    }

    .setting-value {
      width: 6em;
      text-align: right;
      margin-left: 0.25em;
    }

    .reset-button {
      font-size: 0.9em;
      margin: 0 1em 0 2em;
    }

    .reset-button-hidden {
      /* `_refreshButtons` assigns this class conditionally */
      visibility: hidden;
    }

    .streaming-mode-hint {
      font-size: 0.85em;
      opacity: 0.85;
    }

    .advanced-settings {
      display: none;
      margin-left: 10%;
      margin-right: 10%;
      position: relative;
    }

    :host([show-advanced-h264-settings]) .advanced-settings {
      display: block;
    }

    h4 {
      border-bottom: 1px solid #6c6c6c;
      padding-bottom: 0.3em;
      margin-top: 2em;
    }

    #advanced-settings-show-button {
      font-size: 0.9em;
    }

    :host([show-advanced-h264-settings]) #advanced-settings-show-button {
      display: none;
    }

    #advanced-settings-hide-button {
      position: absolute;
      margin-top: 0.1em;
      margin-left: 6em;
      font-size: 0.9em;
    }

    #stun-validation-error {
      margin-top: 2em;
    }
  </style>
  <div id="loading">
    <h3>Retrieving Video Settings</h3>
    <progress-spinner></progress-spinner>
  </div>
  <div id="edit">
    <h3>Change Video Settings</h3>
    <div>
      Streaming Mode:
      <dropdown-button style="--dropdown-width: 9rem">
        <button slot="button" class="btn-action">
          <span class="streaming-mode-value-mjpeg">MJPEG</span>
          <span class="streaming-mode-value-h264">H.264</span>
          <span class="icon-arrow"></span>
        </button>
        <li slot="item" id="streaming-mode-mjpeg-button">
          <div>MJPEG</div>
          <div class="streaming-mode-hint">Best Compatibility</div>
        </li>
        <li slot="item" id="streaming-mode-h264-button">
          <div>H.264</div>
          <div class="streaming-mode-hint">
            Higher Quality,<br />Lower Bandwidth
          </div>
        </li>
      </dropdown-button>
    </div>
    <div class="settings-container">
      <div class="setting">
        <label for="frame-rate-slider">Frame Rate</label>
        <input type="range" id="frame-rate-slider" min="1" max="30" />
        <div id="frame-rate-value" class="setting-value"></div>
        <div id="frame-rate-reset" class="btn-text reset-button">
          Reset to Default
        </div>
      </div>
      <div class="setting setting-mjpeg">
        <label for="mjpeg-quality-slider">Quality</label>
        <input type="range" id="mjpeg-quality-slider" min="1" max="100" />
        <div id="mjpeg-quality-value" class="setting-value"></div>
        <div id="mjpeg-quality-reset" class="btn-text reset-button">
          Reset to Default
        </div>
      </div>
      <div class="setting setting-h264">
        <label for="h264-bitrate-slider">Bit Rate</label>
        <input
          type="range"
          id="h264-bitrate-slider"
          min="50"
          max="20000"
          step="50"
        />
        <div id="h264-bitrate-value" class="setting-value"></div>
        <div id="h264-bitrate-reset" class="btn-text reset-button">
          Reset to Default
        </div>
      </div>
      <div class="setting-h264">
        <div id="advanced-settings-show-button" class="btn-text">
          Show Advanced Settings
        </div>
        <div class="advanced-settings">
          <span id="advanced-settings-hide-button" class="btn-text"
            >(Hide)</span
          >
          <h4>Advanced Settings</h4>
          <video-settings-h264-stun></video-settings-h264-stun>
        </div>
      </div>
      <inline-message variant="error" id="stun-validation-error">
        <strong>Invalid STUN address:</strong> the server address must consist
        of valid host and port values. The host part can either be a (fully
        qualified) domain name, or an IP address.
      </inline-message>
    </div>
    <button class="save-btn btn-success" type="button">Apply</button>
    <button class="close-btn" type="button">Close</button>
  </div>
  <div id="saving">
    <h3>Applying Video Settings</h3>
    <progress-spinner></progress-spinner>
  </div>
</template>

<script type="module">
  import {
    DialogClosedEvent,
    DialogFailedEvent,
    DialogCloseStateChangedEvent,
  } from "/js/events.js";
  import {
    getVideoSettings,
    saveVideoSettings,
    applyVideoSettings,
    isMjpegStreamAvailable,
  } from "/js/controllers.js";
  import { poll } from "/js/poll.js";

  (function () {
    const template = document.querySelector("#video-settings-template");

    customElements.define(
      "video-settings-dialog",
      class extends HTMLElement {
        _states = {
          LOADING: "loading",
          EDIT: "edit",
          SAVING: "saving",
        };
        _statesWithoutDialogClose = new Set([
          this._states.LOADING,
          this._states.SAVING,
        ]);

        constructor() {
          super();
          this.attachShadow({ mode: "open" });
          this._initialSettings = {};
          this._defaultSettings = {};
        }

        connectedCallback() {
          this.shadowRoot.appendChild(template.content.cloneNode(true));
          this._elements = {
            saveButton: this.shadowRoot.querySelector("#edit .save-btn"),
            closeButton: this.shadowRoot.querySelector(".close-btn"),
            streamingModeMjpegButton: this.shadowRoot.querySelector(
              "#streaming-mode-mjpeg-button"
            ),
            streamingModeH264Button: this.shadowRoot.querySelector(
              "#streaming-mode-h264-button"
            ),
            frameRateSlider:
              this.shadowRoot.querySelector("#frame-rate-slider"),
            frameRateValue: this.shadowRoot.querySelector("#frame-rate-value"),
            frameRateRestoreButton:
              this.shadowRoot.querySelector("#frame-rate-reset"),
            mjpegQualitySlider: this.shadowRoot.querySelector(
              "#mjpeg-quality-slider"
            ),
            mjpegQualityValue: this.shadowRoot.querySelector(
              "#mjpeg-quality-value"
            ),
            mjpegQualityRestoreButton: this.shadowRoot.querySelector(
              "#mjpeg-quality-reset"
            ),
            h264BitrateSlider: this.shadowRoot.querySelector(
              "#h264-bitrate-slider"
            ),
            h264BitrateValue: this.shadowRoot.querySelector(
              "#h264-bitrate-value"
            ),
            h264BitrateRestoreButton: this.shadowRoot.querySelector(
              "#h264-bitrate-reset"
            ),
            h264StunSettings: this.shadowRoot.querySelector(
              "video-settings-h264-stun"
            ),
            h264StunValidationError: this.shadowRoot.querySelector(
              "#stun-validation-error"
            ),
          };

          this.addEventListener("overlay-shown", () => this._initialize());
          this._elements.closeButton.addEventListener("click", () =>
            this.dispatchEvent(new DialogClosedEvent())
          );
          this._elements.saveButton.addEventListener("click", () =>
            this._saveSettings()
          );
          this._elements.streamingModeMjpegButton.addEventListener(
            "click",
            () => {
              this._setStreamingMode("MJPEG");
            }
          );
          this._elements.streamingModeH264Button.addEventListener(
            "click",
            () => {
              this._setStreamingMode("H264");
            }
          );
          this._elements.frameRateSlider.addEventListener("input", (event) => {
            this._setFrameRate(parseInt(event.target.value, 10));
          });
          this._elements.frameRateRestoreButton.addEventListener(
            "click",
            () => {
              this._setFrameRate(this._defaultSettings.frameRate);
            }
          );
          this._elements.mjpegQualitySlider.addEventListener(
            "input",
            (event) => {
              this._setMjpegQuality(parseInt(event.target.value, 10));
            }
          );
          this._elements.mjpegQualityRestoreButton.addEventListener(
            "click",
            () => {
              this._setMjpegQuality(this._defaultSettings.mjpegQuality);
            }
          );
          this._elements.h264BitrateSlider.addEventListener(
            "input",
            (event) => {
              this._setH264Bitrate(parseInt(event.target.value, 10));
            }
          );
          this._elements.h264BitrateRestoreButton.addEventListener(
            "click",
            () => {
              this._setH264Bitrate(this._defaultSettings.h264Bitrate);
            }
          );
          this._elements.h264StunSettings.addEventListener(
            "h264-stun-value-changed",
            () => {
              this._refreshButtons();
              this._elements.h264StunValidationError.hide();
            }
          );
          this._elements.h264StunSettings.addEventListener(
            "h264-stun-submission-requested",
            () => {
              this._elements.saveButton.click();
            }
          );
          this.shadowRoot
            .querySelector("#advanced-settings-show-button")
            .addEventListener("click", () => {
              this.toggleAttribute("show-advanced-h264-settings", true);
            });
          this.shadowRoot
            .querySelector("#advanced-settings-hide-button")
            .addEventListener("click", () => {
              this.toggleAttribute("show-advanced-h264-settings", false);
            });
        }

        get _state() {
          return this.getAttribute("state");
        }

        set _state(newValue) {
          this.setAttribute("state", newValue);
          this.dispatchEvent(
            new DialogCloseStateChangedEvent(
              !this._statesWithoutDialogClose.has(newValue)
            )
          );
        }

        _initialize() {
          this._state = this._states.LOADING;

          // Reset all transient view state.
          this._elements.h264StunValidationError.hide();
          this.toggleAttribute("show-advanced-h264-settings", false);

          // Fetch and fill in data from server.
          getVideoSettings()
            .then(
              ({
                streamingMode,
                frameRate,
                defaultFrameRate,
                mjpegQuality,
                defaultMjpegQuality,
                h264Bitrate,
                defaultH264Bitrate,
                h264StunServer,
                defaultH264StunServer,
                h264StunPort,
                defaultH264StunPort,
              }) => {
                this._setStreamingMode(streamingMode);
                this._initialSettings.streamingMode = streamingMode;

                this._setFrameRate(frameRate);
                this._initialSettings.frameRate = frameRate;
                this._defaultSettings.frameRate = defaultFrameRate;

                this._setMjpegQuality(mjpegQuality);
                this._initialSettings.mjpegQuality = mjpegQuality;
                this._defaultSettings.mjpegQuality = defaultMjpegQuality;

                this._setH264Bitrate(h264Bitrate);
                this._initialSettings.h264Bitrate = h264Bitrate;
                this._defaultSettings.h264Bitrate = defaultH264Bitrate;

                this._elements.h264StunSettings.initialize(
                  h264StunServer,
                  h264StunPort
                );
                this._initialSettings.h264StunServer = h264StunServer;
                this._defaultSettings.h264StunServer = defaultH264StunServer;
                this._initialSettings.h264StunPort = h264StunPort;
                this._defaultSettings.h264StunPort = defaultH264StunPort;

                this._refreshButtons();
                this._state = this._states.EDIT;
              }
            )
            .catch((error) => {
              this.dispatchEvent(
                new DialogFailedEvent({
                  title: "Failed to Load Video Settings",
                  details: error,
                })
              );
            });
        }

        /**
         * @returns {string}
         */
        _getStreamingMode() {
          return this.getAttribute("streaming-mode");
        }

        /**
         * @param {string} streamingMode
         */
        _setStreamingMode(streamingMode) {
          this._elements.streamingModeMjpegButton.classList.toggle(
            "disabled",
            streamingMode === "MJPEG"
          );
          this._elements.streamingModeH264Button.classList.toggle(
            "disabled",
            streamingMode === "H264"
          );
          this.setAttribute("streaming-mode", streamingMode);
          this._refreshButtons();
        }

        /**
         * @returns {number}
         */
        _getFrameRate() {
          return parseInt(this._elements.frameRateSlider.value, 10);
        }

        /**
         * @param {number} frameRate
         */
        _setFrameRate(frameRate) {
          this._elements.frameRateSlider.value = frameRate;
          this._elements.frameRateValue.innerHTML = `${frameRate} fps`;
          this._refreshButtons();
        }

        /**
         * @returns {number}
         */
        _getMjpegQuality() {
          return parseInt(this._elements.mjpegQualitySlider.value, 10);
        }

        /**
         * @param {number} mjpegQuality
         */
        _setMjpegQuality(mjpegQuality) {
          this._elements.mjpegQualitySlider.value = mjpegQuality;
          this._elements.mjpegQualityValue.innerHTML = `${mjpegQuality} %`;
          this._refreshButtons();
        }

        /**
         * @returns {number}
         */
        _getH264Bitrate() {
          return parseInt(this._elements.h264BitrateSlider.value, 10);
        }

        /**
         * @param {number} h264Bitrate
         */
        _setH264Bitrate(h264Bitrate) {
          this._elements.h264BitrateSlider.value = h264Bitrate;
          const h264BitrateValue = (h264Bitrate / 1000).toFixed(2);
          this._elements.h264BitrateValue.innerHTML = `${h264BitrateValue} Mb/s`;
          this._refreshButtons();
        }

        /**
         * Adjust all buttons in the dialog, since they might need to respond to
         * the currently selected input values.
         */
        _refreshButtons() {
          const { h264StunServer, h264StunPort } =
            this._elements.h264StunSettings.getValue();

          // Save Button: only enable if the user actually changed some value.
          const hasChangedValues = [
            [this._getStreamingMode(), this._initialSettings.streamingMode],
            [this._getFrameRate(), this._initialSettings.frameRate],
            [this._getMjpegQuality(), this._initialSettings.mjpegQuality],
            [this._getH264Bitrate(), this._initialSettings.h264Bitrate],
            [h264StunServer, this._initialSettings.h264StunServer],
            [h264StunPort, this._initialSettings.h264StunPort],
          ].some(([actualValue, initialValue]) => actualValue !== initialValue);
          this._elements.saveButton.disabled = !hasChangedValues;

          // Reset Buttons: only show if the respective slider value differs
          // from the default setting.
          [
            [
              this._getFrameRate(),
              this._defaultSettings.frameRate,
              this._elements.frameRateRestoreButton,
            ],
            [
              this._getMjpegQuality(),
              this._defaultSettings.mjpegQuality,
              this._elements.mjpegQualityRestoreButton,
            ],
            [
              this._getH264Bitrate(),
              this._defaultSettings.h264Bitrate,
              this._elements.h264BitrateRestoreButton,
            ],
          ].forEach(([actualValue, defaultValue, resetButton]) => {
            resetButton.classList.toggle(
              "reset-button-hidden",
              actualValue === defaultValue
            );
          });
        }

        _saveSettings() {
          this._state = this._states.SAVING;

          const { h264StunServer, h264StunPort } =
            this._elements.h264StunSettings.getValue();
          return saveVideoSettings({
            streamingMode: this._getStreamingMode(),
            frameRate: this._getFrameRate(),
            mjpegQuality: this._getMjpegQuality(),
            h264Bitrate: this._getH264Bitrate(),
            h264StunServer,
            h264StunPort,
          })
            .then(applyVideoSettings)
            .then(() =>
              // To ensure that the MJPEG stream is available after applying the
              // video settings, we need to poll the /stream endpoint until it
              // returns an HTTP 2xx response.
              poll({
                fn: isMjpegStreamAvailable,
                validate: (isAvailable) => isAvailable,
                interval: 1000,
              })
            )
            .then(() => {
              // Note: After the video stream stops, it doesn't try to
              // reconnect. So in order to restart the video stream, we need to
              // reload the page.
              // Should we ever change that mechanism in the future and abandon
              // the page reload, keep in mind that other parts of the frontend
              // might rely on the current behavior.
              location.reload();
            })
            .catch((error) => {
              if (error.code === "INVALID_STUN_ADDRESS") {
                // Display validation errors inline in order to make it more
                // convenient for the user to correct them.
                this._elements.h264StunValidationError.show();
                this._state = this._states.EDIT;
                return;
              }
              this.dispatchEvent(
                new DialogFailedEvent({
                  title: "Failed to Change Video Settings",
                  details: error,
                })
              );
            });
        }
      }
    );
  })();
</script>