LabelingSystem/web/libs/editor/tests/e2e/fragments/AtAudioView.js

const { I } = inject();
const assert = require("assert");

const Helpers = require("../tests/helpers");

module.exports = {
  _stageSelector: "#waveform-layer-main",
  _progressBarSelector: "loading-progress-bar",
  _controlMenuSelector: ".lsf-audio-control",
  _settingsMenuSelector: ".lsf-audio-config",
  _volumeSliderSelector: ".lsf-audio-slider__range",
  _volumeInputSelector: ".lsf-audio-slider__input",
  _muteButtonSelector: ".lsf-audio-control__mute-button",
  _playbackSpeedSliderSelector:
    ".lsf-audio-config__modal > .lsf-audio-config__scroll-content > .lsf-audio-slider:nth-child(2) .lsf-audio-slider__range",
  _playbackSpeedInputSelector:
    ".lsf-audio-config__modal > .lsf-audio-config__scroll-content > .lsf-audio-slider:nth-child(2) .lsf-audio-slider__input",
  _amplitudeSliderSelector:
    ".lsf-audio-config__modal > .lsf-audio-config__scroll-content > .lsf-audio-slider:nth-child(3) .lsf-audio-slider__range",
  _amplitudeInputSelector:
    ".lsf-audio-config__modal > .lsf-audio-config__scroll-content > .lsf-audio-slider:nth-child(3) .lsf-audio-slider__input",
  _hideTimelineButtonSelector: ".lsf-audio-config__buttons > .lsf-audio-config__menu-button:nth-child(1)",
  _hideWaveformButtonSelector: ".lsf-audio-config__buttons > .lsf-audio-config__menu-button:nth-child(2)",
  _audioElementSelector: '[data-testid="waveform-audio"]',
  _seekBackwardButtonSelector: "button[aria-label='Seek backward']",
  _playButtonSelector: "button[aria-label='Play']",
  _seekForwardButtonSelector: "button[aria-label='Seek forward']",
  _errorSelector: '[data-testid="error:audio"]',
  _httpErrorSelector: '[data-testid="error:http"]',

  _stageBbox: { x: 0, y: 0, width: 0, height: 0 },

  async lookForStage() {
    I.scrollPageToTop();
    const bbox = await I.grabElementBoundingRect(this._stageSelector);

    this._stageBbox = bbox;
  },
  async waitForAudio() {
    await I.executeScript(Helpers.waitForAudio);
    I.waitForInvisible(this._progressBarSelector, 30);
    I.waitForDetached("loading-progress-bar", 30);
    await I.executeScript(Helpers.waitForAudioCanvases);
    I.waitTicks(2);
  },
  getCurrentAudio() {
    return I.executeScript(Helpers.getCurrentMedia, "audio");
  },
  /**
   * Mousedown - mousemove - mouseup drawing on the AudioView. Works in couple of lookForStage.
   * @example
   * await AtAudioView.lookForStage();
   * AtAudioView.dragAudioElement(50, 200);
   * @param x {number}
   * @param shiftX {number}
   */
  dragAudioElement(x, shiftX, shouldRelease = true) {
    I.scrollPageToTop();
    I.moveMouse(this._stageBbox.x + x, this._stageBbox.y + this._stageBbox.height / 2);
    I.pressMouseDown();
    I.moveMouse(this._stageBbox.x + x + shiftX, this._stageBbox.y + this._stageBbox.height / 2, 3);
    if (shouldRelease === false) return;
    I.pressMouseUp();
    I.waitTicks(3);
  },

  /**
   * Click on the Audio waveform at the given x coordinate, and optional y coordinate.
   * @example
   * await AtAudioView.lookForStage();
   * AtAudioView.clickAt(50);
   * @param {number} x
   * @param {number} [y=undefined] - if not provided, will click at the center of the waveform
   */
  clickAt(x, y) {
    y = y !== undefined ? y : this._stageBbox.height / 2;
    I.scrollPageToTop();
    I.clickAt(this._stageBbox.x + x, this._stageBbox.y + y);
    I.waitTicks(3); // We gotta  wait here because clicks on the canvas are not processed immediately
  },

  clickAtBeginning() {
    this.clickAt(0);
  },

  clickAtEnd() {
    // Clicking on the end of the canvas doesn't quite work, so we click a bit before the end
    // to make sure we're it is not clicking outside the canvas, and move the cursor over.
    this.clickAt(this._stageBbox.width - 1);
    this.dragAudioElement(this._stageBbox.width - 1, 1);
  },

  async createRegion(tagName, start, length) {
    const { x, y, height } = await this.getWrapperPosition(tagName);

    return I.dragAndDropMouse(
      {
        x: x + start,
        y: y + height / 2,
      },
      {
        x: x + start + length,
        y: y + height / 2,
      },
    );
  },

  async getWrapperPosition(tagName) {
    const wrapperPosition = await I.executeScript((tagName) => {
      const _ws = Htx.annotationStore.selected.names.get(tagName)._ws;
      // `visualizer.wrapper` is for Audio v3
      const wrapper = _ws.visualizer?.wrapper ?? _ws.container;
      const bbox = wrapper.getBoundingClientRect();

      return {
        x: bbox.x,
        y: bbox.y,
        width: bbox.width,
        height: bbox.height,
      };
    }, tagName);

    return wrapperPosition;
  },

  async moveRegion(regionId, offset = 30) {
    const regionPosition = await I.executeScript(
      ({ regionId, stageBbox }) => {
        const region = Htx.annotationStore.selected.regions.find((r) => r.cleanId === regionId);

        const wsRegion = region._ws_region;

        if (!wsRegion.inViewport) {
          return null;
        }
        const { height } = wsRegion.visualizer;

        return {
          x: (wsRegion.xStart + wsRegion.xEnd) / 2 + stageBbox.x,
          y: height / 2 + stageBbox.y,
        };
      },
      { regionId, stageBbox: this._stageBbox },
    );

    if (!regionPosition) return;

    return I.dragAndDropMouse(regionPosition, {
      x: regionPosition.x + offset,
      y: regionPosition.y,
    });
  },

  /**
   * Toggle the audio control menu. This houses the volume slider and mute button.
   */
  toggleControlsMenu() {
    I.click(this._controlMenuSelector);
  },

  /**
   * Toggle the audio settings menu. This houses the playback speed slider, amplitude slider, and interface visibility toggles.
   */
  toggleSettingsMenu() {
    I.click(this._settingsMenuSelector);
  },

  /**
   * Zooms in the Audio Waveform by using the mouse wheel at the given relative position.
   * @param {number} deltaY
   * @param {Object} [atPoint] - Point where the wheel action will be called
   * @param {number} [atPoint.x=0.5] - relative X coordinate
   * @param {number} [atPoint.y=0.5] - relative Y coordinate
   * @returns {Promise<void>}
   *
   * @example
   * // zoom in
   * await AtAudioView.zoomToPoint(-100, { x: .01 });
   * // zoom out
   * await AtAudioView.zoomToPoint(100);
   */
  async zoomToPoint(deltaY, atPoint = { x: 0.5, y: 0.5 }) {
    const { x = 0.5, y = 0.5 } = atPoint;

    I.scrollPageToTop();

    const stageBBox = await I.grabElementBoundingRect(this._stageSelector);

    I.clickAt(stageBBox.x + stageBBox.width * x, stageBBox.y + stageBBox.height * y); // click to focus the canvas

    I.pressKeyDown("CommandOrControl");
    I.mouseWheel({ deltaY });
    I.pressKeyUp("CommandOrControl");
  },

  /**
   * Asserts the current volume of the audio player the slider, input and the audio player.
   * @param {number} value - volume in the range [0, 100]
   * @returns {Promise<void>}
   *
   * @example
   * await AtAudioView.seeVolume(50);
   */
  async seeVolume(value) {
    this.toggleControlsMenu();
    I.seeInField(this._volumeInputSelector, value);
    I.seeInField(this._volumeSliderSelector, value);
    const volume = await I.grabAttributeFrom(this._audioElementSelector, "volume");
    const muted = await I.grabAttributeFrom(this._audioElementSelector, "muted");

    if (muted) {
      assert.equal(volume, null, "Volume doesn't match in audio element");
    } else {
      assert.equal(volume, value / 100, "Volume doesn't match in audio element");
    }
    this.toggleControlsMenu();
  },

  /**
   * Sets the volume of the audio player via the input.
   * @param {number} value - volume in the range [0, 100]
   *
   * @example
   * AtAudioView.setVolumeInput(50);
   */
  setVolumeInput(value) {
    this.toggleControlsMenu();
    I.clearField(this._volumeInputSelector);
    I.fillField(this._volumeInputSelector, value);
    I.seeInField(this._volumeInputSelector, value);
    this.toggleControlsMenu();
  },

  /**
   * Asserts the current playback speed of the audio player the slider, input and the audio player.
   * @param {number} value - speed in the range [0.5, 2.5]
   * @returns {Promise<void>}
   *
   * @example
   * await AtAudioView.seePlaybackSpeed(1.5);
   */
  async seePlaybackSpeed(value) {
    this.toggleSettingsMenu();

    I.seeInField(this._playbackSpeedInputSelector, value);
    I.seeInField(this._playbackSpeedSliderSelector, value);

    const playbackSpeed = await I.grabAttributeFrom(this._audioElementSelector, "playbackRate");

    assert.equal(playbackSpeed, value, "Playback speed doesn't match in audio element");

    this.toggleSettingsMenu();
  },

  /**
   * Sets the playback speed of the audio player via the input.
   * @param {number} value - speed in the range [0.5, 2.5]
   *
   * @example
   * AtAudioView.setPlaybackSpeedInput(1.5);
   */
  setPlaybackSpeedInput(value) {
    this.toggleSettingsMenu();
    // it was not easy to set this field, so we have to carefully remove value and put it
    I.doubleClick(locate(this._playbackSpeedInputSelector));
    I.pressKey("Backspace");
    I.fillField(this._playbackSpeedInputSelector, value);
    this.toggleSettingsMenu();
  },

  /**
   * Asserts the current amplitude of the audio player the slider, and the input.
   * @param {number} value - amplitude (y-axis zoom) in the range [1, 150]
   * @returns {Promise<void>}
   *
   * @example
   * await AtAudioView.seeAmplitude(10);
   */
  async seeAmplitude(value) {
    this.toggleSettingsMenu();

    I.seeInField(this._amplitudeInputSelector, value);
    I.seeInField(this._amplitudeSliderSelector, value);

    this.toggleSettingsMenu();
  },

  /**
   * Sets the amplitude of the audio player via the input.
   * @param {number} value - speed in the range [1, 150]
   *
   * @example
   * AtAudioView.setAmplitudeInput(10);
   */
  setAmplitudeInput(value) {
    this.toggleSettingsMenu();
    I.clearField(this._amplitudeInputSelector);
    I.fillField(this._amplitudeInputSelector, value);
    this.toggleSettingsMenu();
  },

  clickMuteButton() {
    this.toggleControlsMenu();
    I.click(this._muteButtonSelector);
    this.toggleControlsMenu();
  },

  clickPlayButton() {
    I.click(this._playButtonSelector);
  },

  clickPauseButton() {
    I.click(this._playButtonSelector);
  },

  async seeErrorHandler(value, selector = null) {
    selector = selector ? this[selector] : this._errorSelector;
    I.seeElement(selector);
    const error = await I.grabTextFrom(selector);
    const matcher = new RegExp(value);

    assert.match(error, matcher);
  },

  /**
   * Asserts whether the audio player is reporting as paused.
   * @returns {Promise<void>}
   */
  async seeIsPlaying(playing, timeout = 5) {
    await I.waitForFunction(
      ([selector, expectedPlaying]) => {
        const audioElement = document.querySelector(selector);
        if (!audioElement) return false;
        const isPlaying = !audioElement.paused;
        console.log("!> waitForFunction", isPlaying === expectedPlaying, expectedPlaying, isPlaying);
        return isPlaying === expectedPlaying;
      },
      [this._audioElementSelector, playing],
      timeout,
    );
  },
};