/**
* @file resize-manager.js
*/
'글로벌/창'에서 창 가져오기;
import { 디바운스 } from './utils/fn.js';
import * as Events from './utils/events.js';
'./utils/merge-options.js'에서 mergeOptions 가져오기;
'./component.js'에서 컴포넌트 가져오기;
/**
* 크기 조정 관리자. 올바른 조건에서 플레이어의 'playerresize' 트리거를 담당합니다.
*
* iframe을 생성하고 디바운스된 크기 조정 핸들러를 사용하거나 새로운 {@link https://wicg.github.io/ResizeObserver/|ResizeObserver}를 사용합니다.
*
* ResizeObserver가 기본적으로 사용 가능한 경우 사용됩니다. 폴리필은 옵션으로 전달할 수 있습니다.
* `playerresize` 이벤트가 필요하지 않은 경우 플레이어에서 ResizeManager 구성 요소를 제거할 수 있습니다. 아래 예를 참조하세요.
* @예 < 표제> 크기 조정 관리자를 비활성화하는 방법< /표제>
* const 플레이어 = videojs('#vid', {
* 크기 조정 관리자: 거짓
* });
*
* @see {@link https://wicg.github.io/ResizeObserver/|ResizeObserver 사양}
*
* @extends 컴포넌트
*/
클래스 ResizeManager 확장 구성 요소 {
/**
* ResizeManager를 만듭니다.
*
* @param {객체} 플레이어
* 이 클래스가 연결되어야 하는 `Player`.
*
* @param {객체} [옵션]
* ResizeManager 옵션의 키/값 저장소.
*
* @param {객체} [options.ResizeObserver]
* 여기에 ResizeObserver용 폴리필을 전달할 수 있습니다.
* 이것이 null로 설정되면 기본 ResizeObserver를 무시하고 iframe 폴백으로 대체됩니다.
*/
생성자(플레이어, 옵션) {
let RESIZE_OBSERVER_AVAILABLE = options.ResizeObserver || window.ResizeObserver;
// `null`이 전달된 경우 ResizeObserver를 비활성화하려고 합니다.
if (options.ResizeObserver === null) {
RESIZE_OBSERVER_AVAILABLE = 거짓;
}
// ResizeObserver를 사용할 수 없을 때만 요소를 만듭니다.
const options_ = mergeOptions({
createEl: !RESIZE_OBSERVER_AVAILABLE,
reportTouchActivity: 거짓
}, 옵션);
슈퍼(플레이어, 옵션_);
this.ResizeObserver = 옵션.ResizeObserver || window.ResizeObserver;
this.loadListener_ = null;
this.resizeObserver_ = null;
this.debouncedHandler_ = 디바운스(() => {
this.resizeHandler();
}, 100, 거짓, 이);
if (RESIZE_OBSERVER_AVAILABLE) {
this.resizeObserver_ = new this.ResizeObserver(this.debouncedHandler_);
this.resizeObserver_.observe(player.el());
} else {
this.loadListener_ = () => {
if (!this.el_ || !this.el_.contentWindow) {
반품;
}
const debouncedHandler_ = this.debouncedHandler_;
let unloadListener_ = this.unloadListener_ = function() {
Events.off(this, 'resize', debouncedHandler_);
Events.off(this, 'unload', unloadListener_);
unloadListener_ = null;
};
// safari와 edge는 resizemanager dispose 전에 iframe을 언로드할 수 있습니다.
// 그 일이 일어나기 전에 이벤트 핸들러를 올바르게 폐기해야 합니다.
Events.on(this.el_.contentWindow, '언로드', unloadListener_);
Events.on(this.el_.contentWindow, 'resize', debouncedHandler_);
};
this.one('로드', this.loadListener_);
}
}
createEl() {
return super.createEl('iframe', {
className: 'vjs-resize-manager',
탭 인덱스: -1,
제목: this.localize('콘텐츠 없음')
}, {
'aria-hidden': '참'
});
}
/**
* iframe에서 크기 조정이 트리거되거나 ResizeObserver를 통해 크기 조정이 관찰될 때 호출됩니다.
*
* @fires Player#playerresize
*/
크기 조정 핸들러() {
/**
* 플레이어 크기가 변경되었을 때 호출
*
* @event 플레이어#playerresize
* @type {이벤트대상~이벤트}
*/
// 트리거할 플레이어가 아직 주변에 있는지 확인
// 폐기 후 오류가 발생하는 것을 방지합니다.
if (!this.player_ || !this.player_.trigger) {
반품;
}
this.player_.trigger('playerresize');
}
폐기() {
if (this.debouncedHandler_) {
this.debouncedHandler_.cancel();
}
if (this.resizeObserver_) {
if (this.player_.el()) {
this.resizeObserver_.unobserve(this.player_.el());
}
this.resizeObserver_.disconnect();
}
if (this.loadListener_) {
this.off('로드', this.loadListener_);
}
만약 (이것.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);
기본 ResizeManager 내보내기;