/**
 * @Datei text-track-display.js
 * /
importiere Komponente von '../komponente';
import * as Fn from '../utils/fn.js';
import * as Dom from '../utils/dom.js';
import window from 'global/window';

const darkGray = '#222';
const lightGray = '#ccc';
const fontMap = {
  monospace: 'monospace',
  sansSerif: 'sans-serif',
  serif: 'serif',
  monospaceSansSerif: '"Andale Mono", "Lucida Console", monospace',
  monospaceSerif: '"Courier New", monospace',
  proportionalSansSerif: 'sans-serif',
  proportionalSerif: 'serif',
  casual: '"Comic Sans MS", Impact, fantasy',
  schrift: monotype Corsiva", kursiv",
  smallcaps: '"Andale Mono", "Lucida Console", monospace, sans-serif'
};

/**
 * Konstruiert eine rgba-Farbe aus einem gegebenen Hex-Farbcode.
 *
 * @param {Nummer} Farbe
 *        Hex-Zahl für die Farbe, z. B. #f0e oder #f604e2.
 *
 * @param {Zahl} Deckkraft
 *        Wert für die Deckkraft, 0,0 - 1,0.
 *
 * @return {string}
 *         Die erstellte rgba-Farbe, z. B. "rgba(255, 0, 0, 0.3)".
 * /
export function constructColor(color, opacity) {
  hex lassen;

  if (color.length === 4) {
    // Farbe sieht aus wie "#f0e"
    hex = Farbe[1] + Farbe[1] + Farbe[2] + Farbe[2] + Farbe[3] + Farbe[3];
  } else if (color.length === 7) {
    // Farbe sieht aus wie "#f604e2"
    hex = color.slice(1);
  } else {
    throw new Error('Ungültiger Farbcode angegeben, ' + Farbe + '; muss z.B. als #f0e oder #f604e2 formatiert werden.');
  }
  return 'rgba(' +
    parseInt(hex.slice(0, 2), 16) + ',' +
    parseInt(hex.slice(2, 4), 16) + ',' +
    parseInt(hex.slice(4, 6), 16) + ',' +
    opazität + ')';
}

/**
 * Versuchen Sie, den Stil eines DOM-Elements zu aktualisieren. Einige Stiländerungen führen zu einem Fehler,
 * insbesondere im IE8. Das sollten Noops sein.
 *
 * @param {Element} el
 *        Das DOM-Element, das gestylt werden soll.
 *
 * @param {string} style
 *        Die CSS-Eigenschaft des Elements, das gestylt werden soll.
 *
 * @param {string} Regel
 *        Die Stilregel, die auf die Eigenschaft angewendet werden soll.
 *
 * @privat
 * /
function tryUpdateStyle(el, style, rule) {
  Versuchen {
    el.style[style] = rule;
  } catch (e) {

    // Befriedigt Linter.
    rückkehr;
  }
}

/**
 * Die Komponente für die Anzeige von Textspur-Hinweisen.
 *
 * @erweitert Komponente
 * /
class TextTrackDisplay extends Component {

  /**
   * Erzeugt eine Instanz dieser Klasse.
   *
   * @param {Player} Spieler
   *        Der `Player`, dem diese Klasse zugeordnet werden soll.
   *
   * @param {Object} [Optionen]
   *        Der Schlüssel/Wertspeicher der Playeroptionen.
   *
   * @param {Component~ReadyCallback} [ready]
   *        Die Funktion, die aufgerufen wird, wenn `TextTrackDisplay` fertig ist.
   * /
  constructor(player, options, ready) {
    super(Spieler, Optionen, bereit);

    const updateDisplayHandler = (e) => this.updateDisplay(e);

    player.on('loadstart', (e) => this.toggleDisplay(e));
    player.on('texttrackchange', updateDisplayHandler);
    player.on('loadedmetadata', (e) => this.preselectTrack(e));

    // Diese Funktion wurde früher bei der Spielerinitialisierung aufgerufen, verursachte aber einen Fehler
    // wenn ein Titel standardmäßig angezeigt werden soll und die Anzeige noch nicht geladen wurde.
    // Sollte wahrscheinlich in einen externen Trackloader verschoben werden, wenn wir die
    // Titel, die keine Anzeige benötigen.
    player.ready(Fn.bind(this, function() {
      if (player.tech_ && player.tech_.featuresNativeTextTracks) {
        this.hide();
        rückkehr;
      }

      player.on('fullscreenchange', updateDisplayHandler);
      player.on('playerresize', updateDisplayHandler);

      window.addEventListener('orientationchange', updateDisplayHandler);
      player.on('dispose', () => window.removeEventListener('orientationchange', updateDisplayHandler));

      const tracks = this.options_.playerOptions.tracks || [];

      for (let i = 0; i < tracks.length; i++) {
        this.player_.addRemoteTextTrack(tracks[i], true);
      }

      this.preselectTrack();
    }));
  }

  /**
  * Wählen Sie einen Titel nach dieser Reihenfolge aus:
  * - entspricht der Sprache und der Art des zuvor ausgewählten {@link TextTrack}
  * - entspricht nur der Sprache des zuvor ausgewählten {@link TextTrack}
  * - ist die erste Standardbeschriftungsspur
  * - ist die erste Standardbeschreibungsspur
  *
  * @listens Player#loadstart
  * /
  preselectTrack() {
    const modes = {captions: 1, Untertitel: 1};
    const trackList = this.player_.textTracks();
    const userPref = this.player_.cache_.selectedLanguage;
    let firstDesc;
    let firstCaptions;
    let preferredTrack;

    for (let i = 0; i < trackList.length; i++) {
      const track = trackList[i];

      wenn (
        userPref && userPref.enabled &&
        userPref.language && userPref.language === track.language &&
        track.kind in Modi
      ) {
        // Wählen Sie immer den Titel, der sowohl der Sprache als auch der Art entspricht
        if (track.kind === userPref.kind) {
          preferredTrack = track;
        // oder wählen Sie den ersten Titel, der der Sprache entspricht
        } else if (!preferredTrack) {
          preferredTrack = track;
        }

      // alles löschen, wenn offTextTrackMenuItem angeklickt wurde
      } else if (userPref && !userPref.enabled) {
        preferredTrack = null;
        firstDesc = null;
        firstCaptions = null;

      } else if (track.default) {
        if (track.kind === 'descriptions' && !firstDesc) {
          firstDesc = track;
        } else if (track.kind in modes && !firstCaptions) {
          firstCaptions = track;
        }
      }
    }

    // Der preferredTrack entspricht der Benutzerpräferenz und nimmt
    // Vorrang vor allen anderen Spuren.
    // Die bevorzugte Spur wird also vor der ersten Standardspur angezeigt
    // und die Untertitel-/Untertitelspur vor der Beschreibungsspur
    if (preferredTrack) {
      preferredTrack.mode = 'showing';
    } else if (firstCaptions) {
      firstCaptions.mode = 'anzeigen';
    } else if (firstDesc) {
      firstDesc.mode = "zeigend";
    }
  }

  /**
   * Schaltet die Anzeige von {@link TextTrack}'s vom aktuellen Zustand in den anderen Zustand um.
   * Es gibt nur zwei Staaten:
   * - 'gezeigt'
   * - 'versteckt'
   *
   * @listens Player#loadstart
   * /
  toggleDisplay() {
    if (this.player_.tech_ && this.player_.tech_.featuresNativeTextTracks) {
      this.hide();
    } else {
      this.show();
    }
  }

  /**
   * Erstellen Sie das DOM-Element der {@link Component}.
   *
   * @return {Element}
   *         Das Element, das erstellt wurde.
   * /
  createEl() {
    return super.createEl('div', {
      className: 'vjs-text-track-display'
    }, {
      übersetzen': 'ja',
      aria-live": "aus",
      'aria-atomic': 'true'
    });
  }

  /**
   * Alle angezeigten {@link TextTrack}s löschen.
   * /
  clearDisplay() {
    if (typeof window.WebVTT === 'function') {
      window.WebVTT.processCues(window, [], this.el_);
    }
  }

  /**
   * Aktualisieren Sie den angezeigten TextTrack, wenn entweder ein {@link Player#texttrackchange} oder ein
   * wird ein {@link Player#fullscreenchange} ausgelöst.
   *
   * @listens Player#Textwechsel
   * @listens Player#fullscreenchange
   * /
  updateDisplay() {
    const tracks = this.player_.textTracks();
    const allowMultipleShowingTracks = this.options_.allowMultipleShowingTracks;

    this.clearDisplay();

    if (allowMultipleShowingTracks) {
      const showingTracks = [];

      for (let i = 0; i < tracks.length; ++i) {
        const track = tracks[i];

        if (track.mode !== 'showing') {
          weiter;
        }
        showingTracks.push(track);
      }
      this.updateForTrack(showingTracks);
      rückkehr;
    }

    // Modell zur Priorisierung der Titelanzeige: Wenn mehrere Titel "angezeigt" werden,
    // Anzeige der ersten "Untertitel"- oder "Untertitel"-Spur, die "angezeigt" wird,
    // andernfalls wird der erste "Beschreibungs"-Titel angezeigt, der "angezeigt" wird

    let descriptionsTrack = null;
    let captionsSubtitlesTrack = null;
    let i = tracks.length;

    while (i--) {
      const track = tracks[i];

      if (track.mode === 'showing') {
        if (track.kind === 'descriptions') {
          descriptionsTrack = track;
        } else {
          captionsSubtitlesTrack = track;
        }
      }
    }

    if (captionsSubtitlesTrack) {
      if (this.getAttribute('aria-live') !== 'off') {
        this.setAttribute('aria-live', 'off');
      }
      this.updateForTrack(captionsSubtitlesTrack);
    } else if (descriptionsTrack) {
      if (this.getAttribute('aria-live') !== 'assertive') {
        this.setAttribute('aria-live', 'assertive');
      }
      this.updateForTrack(descriptionsTrack);
    }
  }

  /**
   * Stil {@Link TextTrack} activeCues gemäß {@Link TextTrackSettings}.
   *
   * @param {TextTrack} track
   *        Objekt der Textspur, das aktive Stichwörter für die Gestaltung enthält.
   * /
  updateDisplayState(track) {
    const overrides = this.player_.textTrackSettings.getValues();
    const cues = track.activeCues;

    let i = cues.length;

    while (i--) {
      const cue = cues[i];

      if (!cue) {
        weiter;
      }

      const cueDiv = cue.displayState;

      if (overrides.color) {
        cueDiv.firstChild.style.color = overrides.color;
      }
      if (overrides.textOpacity) {
        tryUpdateStyle(
          cueDiv.firstChild,
          farbe",
          constructColor(
            overrides.color || '#fff',
            overrides.textOpacity
          )
        );
      }
      if (overrides.backgroundColor) {
        cueDiv.firstChild.style.backgroundColor = overrides.backgroundColor;
      }
      if (overrides.backgroundOpacity) {
        tryUpdateStyle(
          cueDiv.firstChild,
          backgroundColor',
          constructColor(
            overrides.backgroundColor || '#000',
            overrides.backgroundOpacity
          )
        );
      }
      if (overrides.windowColor) {
        if (overrides.windowOpacity) {
          tryUpdateStyle(
            cueDiv,
            backgroundColor',
            constructColor(overrides.windowColor, overrides.windowOpacity)
          );
        } else {
          cueDiv.style.backgroundColor = overrides.windowColor;
        }
      }
      if (overrides.edgeStyle) {
        if (overrides.edgeStyle === 'dropshadow') {
          cueDiv.firstChild.style.textShadow = `2px 2px 3px ${darkGray}, 2px 2px 4px ${darkGray}, 2px 2px 5px ${darkGray}`;
        } else if (overrides.edgeStyle === 'raised') {
          cueDiv.firstChild.style.textShadow = `1px 1px ${darkGray}, 2px 2px ${darkGray}, 3px 3px ${darkGray}`;
        } else if (overrides.edgeStyle === 'depressed') {
          cueDiv.firstChild.style.textShadow = `1px 1px ${lightGray}, 0 1px ${lightGray}, -1px -1px ${darkGray}, 0 -1px ${darkGray}`;
        } else if (overrides.edgeStyle === 'uniform') {
          cueDiv.firstChild.style.textShadow = `0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}, 0 0 4px ${darkGray}`;
        }
      }
      if (overrides.fontPercent && overrides.fontPercent !== 1) {
        const fontSize = window.parseFloat(cueDiv.style.fontSize);

        cueDiv.style.fontSize = (fontSize * overrides.fontPercent) + 'px';
        cueDiv.style.height = 'auto';
        cueDiv.style.top = 'auto';
      }
      if (overrides.fontFamily && overrides.fontFamily !== 'default') {
        if (overrides.fontFamily === 'small-caps') {
          cueDiv.firstChild.style.fontVariant = 'Kapitälchen';
        } else {
          cueDiv.firstChild.style.fontFamily = fontMap[overrides.fontFamily];
        }
      }
    }
  }

  /**
   * Fügen Sie einen {@link TextTrack} zu der {@link Tech}s {@link TextTrackList} hinzu.
   *
   * @param {TextSpur|TextSpur[]} Spuren
   *        Textspurobjekt oder Textspurarray, das der Liste hinzugefügt werden soll.
   * /
  updateForTrack(tracks) {
    if (!Array.isArray(tracks)) {
      spuren = [Spuren];
    }
    if (typeof window.WebVTT !== 'function' ||
      tracks.every((track)=> {
        return !track.activeCues;
      })) {
      rückkehr;
    }

    const cues = [];

    // Alle aktiven Spuranhaltspunkte verschieben
    for (let i = 0; i < tracks.length; ++i) {
      const track = tracks[i];

      for (let j = 0; j < track.activeCues.length; ++j) {
        cues.push(track.activeCues[j]);
      }
    }

    // entfernt alle Hinweise, bevor es neue verarbeitet
    window.WebVTT.processCues(window, cues, this.el_);

    // Hinzufügen einer eindeutigen Klasse zu jeder Sprachspur & Hinzufügen von Einstellungsstilen, falls erforderlich
    for (let i = 0; i < tracks.length; ++i) {
      const track = tracks[i];

      for (let j = 0; j < track.activeCues.length; ++j) {
        const cueEl = track.activeCues[j].displayState;

        Dom.addClass(cueEl, 'vjs-text-track-cue');
        Dom.addClass(cueEl, 'vjs-text-track-cue-' + ((track.language) ? track.language : i));
        if (track.language) {
          Dom.setAttribute(cueEl, 'lang', track.language);
        }
      }
      if (this.player_.textTrackSettings) {
        this.updateDisplayState(track);
      }
    }
  }

}

Component.registerComponent('TextTrackDisplay', TextTrackDisplay);
standard TextTrackDisplay exportieren;