/**
* @file 시크 투 라이브.js
*/
'../버튼'에서 버튼 가져오기;
'../component'에서 컴포넌트 가져오기;
import * as Dom from '../utils/dom.js';
/**
* 기간이 무한대일 때 라이브 표시기를 표시합니다.
*
* @extends 컴포넌트
*/
클래스 SeekToLive 확장 버튼 {
/**
* 이 클래스의 인스턴스를 만듭니다.
*
* @param {플레이어} 플레이어
* 이 클래스가 연결되어야 하는 `Player`.
*
* @param {객체} [옵션]
* 플레이어 옵션의 키/값 저장소.
*/
생성자(플레이어, 옵션) {
super(플레이어, 옵션);
this.updateLiveEdgeStatus();
if (this.player_.liveTracker) {
this.updateLiveEdgeStatusHandler_ = (e) => this.updateLiveEdgeStatus(e);
this.on(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
}
}
/**
* `Component`의 DOM 요소 생성
*
* @return {요소}
* 생성된 요소입니다.
*/
createEl() {
const el = super.createEl('버튼', {
className: 'vjs-탐색 라이브 제어 vjs-control'
});
this.textEl_ = Dom.createEl('스팬', {
className: 'vjs-seek-to-live-text',
textContent: this.localize('라이브')
}, {
'aria-hidden': '참'
});
el.appendChild(this.textEl_);
반환 엘;
}
/**
* 라이브 에지에 있는 경우 이 버튼의 상태를 업데이트합니다.
* 여부
*/
updateLiveEdgeStatus() {
// 기본값은 라이브 에지
if (!this.player_.liveTracker || this.player_.liveTracker.atLiveEdge()) {
this.setAttribute('aria-disabled', true);
this.addClass('vjs-at-live-edge');
this.controlText('Seek to live, 현재 라이브 재생 중');
} else {
this.setAttribute('aria-disabled', false);
this.removeClass('vjs-at-live-edge');
this.controlText('Seek to live, 현재 라이브 뒤에 있음');
}
}
/**
* 클릭하면 라이브 포인트에 최대한 가깝게 이동합니다.
* 이렇게 하려면 다음 `live-seekable-change`를 기다려야 합니다.
* 세그먼트 길이 초마다 발생하는 이벤트.
*/
핸들클릭() {
this.player_.liveTracker.seekToLiveEdge();
}
/**
* 요소 폐기 및 추적 중지
*/
폐기() {
if (this.player_.liveTracker) {
this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatusHandler_);
}
this.textEl_ = null;
super.dispose();
}
}
SeekToLive.prototype.controlText_ = '라이브 탐색, 현재 라이브 재생 중';
Component.registerComponent('SeekToLive', SeekToLive);
기본 SeekToLive 내보내기;