/**
* @file play-toggle.js
*/
'../button.js'에서 버튼 가져오기;
'../component.js'에서 컴포넌트 가져오기;
'../utils/promise'에서 {silencePromise} 가져오기;
/**
* 재생과 일시정지를 전환하는 버튼입니다.
*
* @extends 버튼
*/
클래스 PlayToggle 확장 버튼 {
/**
* 이 클래스의 인스턴스를 만듭니다.
*
* @param {플레이어} 플레이어
* 이 클래스가 연결되어야 하는 `Player`.
*
* @param {객체} [옵션={}]
* 플레이어 옵션의 키/값 저장소.
*/
생성자(플레이어, 옵션 = {}) {
super(플레이어, 옵션);
// 재생 아이콘 표시 또는 숨기기
options.replay = options.replay === 정의되지 않음 || 옵션.재생;
this.on(플레이어, '플레이', (e) => this.handlePlay(e));
this.on(플레이어, '일시중지', (e) => this.handlePause(e));
if (옵션.재생) {
this.on(플레이어, '종료', (e) => this.handleEnded(e));
}
}
/**
* 기본 DOM `className`을 빌드합니다.
*
* @return {문자열}
* 이 개체의 DOM `className`입니다.
*/
buildCSSClass() {
`vjs-play-control ${super.buildCSSClass()}` 반환;
}
/**
* 이것은 `PlayToggle`이 "클릭"될 때 호출됩니다. 보다
* {@link ClickableComponent}에서 클릭이 무엇인지 자세히 알아보세요.
*
* @param {이벤트대상~이벤트} [이벤트]
* 이 함수를 실행하게 만든 `keydown`, `tap` 또는 `click` 이벤트
* 라고 불리는.
*
* @listens 탭
* @듣기 클릭
*/
handleClick(이벤트) {
if (this.player_.paused()) {
침묵 약속(this.player_.play());
} else {
this.player_.pause();
}
}
/**
* 동영상이 종료되고 사용자가 검색한 후 한 번 호출됩니다.
* 재생 버튼을 다시 재생 버튼으로 변경할 수 있습니다.
*
* @param {이벤트대상~이벤트} [이벤트]
* 이 기능을 실행하게 만든 이벤트.
*
* @listens Player#seeked
*/
handleSeeked(이벤트) {
this.removeClass('vjs-ended');
if (this.player_.paused()) {
this.handlePause(이벤트);
} else {
this.handlePlay(이벤트);
}
}
/**
* 모양을 변경할 수 있도록 요소에 vjs-playing 클래스를 추가합니다.
*
* @param {이벤트대상~이벤트} [이벤트]
* 이 기능을 실행하게 만든 이벤트.
*
* @listens 플레이어#플레이
*/
handlePlay(이벤트) {
this.removeClass('vjs-ended');
this.removeClass('vjs-paused');
this.addClass('vjs-playing');
// 버튼 텍스트를 "일시 중지"로 변경
this.controlText('일시중지');
}
/**
* 모양을 변경할 수 있도록 요소에 vjs-paused 클래스를 추가합니다.
*
* @param {이벤트대상~이벤트} [이벤트]
* 이 기능을 실행하게 만든 이벤트.
*
* @listens Player#pause
*/
handlePause(이벤트) {
this.removeClass('vjs-playing');
this.addClass('vjs-paused');
// 버튼 텍스트를 "재생"으로 변경
this.controlText('플레이');
}
/**
* 모양을 변경할 수 있도록 요소에 vjs-ended 클래스를 추가합니다.
*
* @param {이벤트대상~이벤트} [이벤트]
* 이 기능을 실행하게 만든 이벤트.
*
* @listens Player#ended
*/
handleEnded(이벤트) {
this.removeClass('vjs-playing');
this.addClass('vjs-ended');
// 버튼 텍스트를 "Replay"로 변경
this.controlText('재생');
// 다음 검색에서 재생 버튼을 제거합니다.
this.one(this.player_, '탐색', (e) => this.handleSeeked(e));
}
}
/**
* `PlayToggle` 컨트롤 위에 표시되어야 하는 텍스트입니다. 현지화를 위해 추가되었습니다.
*
* @유형 {문자열}
* @사적인
*/
PlayToggle.prototype.controlText_ = '재생';
Component.registerComponent('PlayToggle', PlayToggle);
기본 PlayToggle 내보내기;