/**
* @file resize-manager.js
* /
import window from 'global/window';
importiere {debounce} aus '. /utils/fn.js ';
import * as Events aus './utils/events.js';
importiere mergeOptions aus './utils/merge-options.js';
importiere Komponente aus './component.js';
/**
* Ein Größenänderungsmanager. Es ist dafür verantwortlich, unter den richtigen Bedingungen `PlayerResize` beim Player auszulösen.
*
* Es erstellt entweder einen Iframe und verwendet darauf einen debouncierten Resize-Handler oder es wird der neue {@link https://wicg.github.io/ResizeObserver/|ResizeObserver} verwendet.
*
* Wenn der ResizeObserver nativ verfügbar ist, wird er verwendet. Optional kann ein Polyfill übergeben werden.
* Wenn ein `playerresize`-Ereignis nicht benötigt wird, kann die ResizeManager-Komponente aus dem Player entfernt werden, siehe das Beispiel unten.
* @example <caption>So deaktivieren Sie den Größenänderungsmanager</caption >
* const player = videojs ('#vid', {
* ResizeManager: falsch
* });
*
* @see {@link https://wicg.github.io/ResizeObserver/|ResizeObserver Spezifikation}
*
* @erweitert Komponente
* /
Klasse ResizeManager erweitert Komponente {
/**
* Erstellen Sie den ResizeManager.
*
* @param {Object} -Spieler
* Der `Player`, dem diese Klasse zugeordnet werden soll.
*
* @param {Object} [Optionen]
* Der Schlüssel-/Wertspeicher der ResizeManager-Optionen.
*
* @param {Objekt} [options.resizeObserver]
* Ein Polyfill für ResizeObserver kann hier übergeben werden.
* Wenn dieser Wert auf Null gesetzt ist, wird der native ResizeObserver ignoriert und auf den Iframe-Fallback zurückgegriffen.
* /
constructor(spieler, optionen) {
sei RESIZE_OBSERVER_AVAILABLE = Options.ResizeObserver || window.resizeObserver;
//wenn `null` übergeben wurde, wollen wir den ResizeObserver deaktivieren
wenn (options.resizeObserver === null) {
RESIZE_OBSERVER_AVAILABLE = falsch;
}
//Erstelle nur ein Element, wenn ResizeObserver nicht verfügbar ist
const optionen_ = mergeOptions ({
Erstelle EEL:! RESIZE_OBSERVER_VERFÜGBAR,
reportTouchActivity: falsch
}, Optionen);
super(spieler, optionen_);
this.resizeObserver = options.ResizeObserver || window.resizeObserver;
this.loadListener_ = null;
this.resizeObServer_ = null;
this.debouncedHandler_ = debounce () => {
this.resizeHandler ();
}, 100, falsch, das);
wenn (RESIZE_OBSERVER_AVAILABLE) {
this.resizeObserver_ = neu this.ResizeObserver (this.deBouncedHandler_);
this.resizeObserver_.observe (player.el ());
} sonst {
this.loadListener_ = () => {
wenn (! this.el_ ||! this.el_.ContentWindow) {
rückkehr;
}
const deBouncedHandler_ = this.DeBouncedHandler_;
sei unloadListener_ = this.unloadListener_ = function () {
events.off (this, 'resize', deBouncedHandler_);
events.off (this, 'unload', unloadListener_);
unloadListener_ = null;
};
//Safari und Edge können den Iframe entladen, bevor der Resizemanager ihn entsorgt
//Wir müssen Event-Handler korrekt entsorgen, bevor das passiert
events.on (this.el_.ContentWindow, 'unload', unloadListener_);
events.on (this.el_.ContentWindow, 'Größe ändern', deBouncedHandler_);
};
this.one ('load', this.loadListener_);
}
}
createEl() {
gib super.createEl ('iframe', {zurück
Klassenname: 'vjs-resize-manager',
Tab-Index: -1,
title: this.localize ('Kein Inhalt')
}, {
aria-hidden": "true
});
}
/**
* Wird aufgerufen, wenn eine Größenänderung auf dem Iframe ausgelöst wird oder eine Größenänderung über den ResizeObserver beobachtet wird
*
* @fires Spieler #playerresize
* /
ResizeHandler () {
/**
* Wird aufgerufen, wenn sich die Spielergröße geändert hat
*
* @event Spieler #playerresize
* @Typ {EventTarget~Event}
* /
//Vergewissere dich, dass der Spieler noch da ist, um ihn auszulösen
//verhindert, dass dies nach der Entsorgung zu einem Fehler führt
wenn (! dieser.spieler_ ||! this.player_.trigger) {
rückkehr;
}
this.player_.trigger ('Spielergröße ändern');
}
dispose() {
wenn (this.deBouncedHandler_) {
this.debouncedHandler_.cancel ();
}
wenn (this.resizeObServer_) {
wenn (this.player_.el ()) {
this.resizeObserver_.unobserve (this.player_.el ());
}
this.resizeObServer_.disconnect ();
}
wenn (this.loadListener_) {
this.off ('load', this.loadListener_);
}
wenn (this.el_ && this.el_.ContentWindow && this.unloadListener_) {
this.unloadListener_.call (this.el_.ContentWindow);
}
this.resizeObserver = null;
this.resizeObserver = null;
this.deBouncedHandler_ = null;
this.loadListener_ = null;
super.dispose();
}
}
component.registerComponent ('ResizeManager', ResizeManager);
Exportieren Sie den Standard-ResizeManager;