/**
* @file 볼륨 제어.js
*/
'../../component.js'에서 컴포넌트 가져오기;
'./check-volume-support'에서 checkVolumeSupport 가져오기;
'../../utils/obj'에서 {isPlain} 가져오기;
import {throttle, bind, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js';
// 필수 자식
import './volume-bar.js';
/**
* 음량 조절을 위한 구성 요소
*
* @extends 컴포넌트
*/
클래스 VolumeControl 확장 구성 요소 {
/**
* 이 클래스의 인스턴스를 만듭니다.
*
* @param {플레이어} 플레이어
* 이 클래스가 연결되어야 하는 `Player`.
*
* @param {객체} [옵션={}]
* 플레이어 옵션의 키/값 저장소.
*/
생성자(플레이어, 옵션 = {}) {
options.vertical = 옵션.수직 || 거짓;
// 수직 옵션을 VolumeBar 아래로 전달 if
// VolumeBar가 켜져 있습니다.
if (typeof options.volumeBar === '정의되지 않음' || isPlain(options.volumeBar)) {
options.volumeBar = options.volumeBar || {};
options.volumeBar.vertical = 옵션.수직;
}
super(플레이어, 옵션);
// 볼륨 지원이 없으면 이 컨트롤을 숨깁니다.
checkVolumeSupport(this, 플레이어);
this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
this.handleMouseUpHandler_ = (e) => this.handleMouseUp(e);
this.on('마우스다운', (e) => this.handleMouseDown(e));
this.on('터치스타트', (e) => this.handleMouseDown(e));
this.on('마우스무브', (e) => this.handleMouseMove(e));
// 슬라이더가 활성화되어 있는 동안(마우스가 눌려 있고
// 드래그 중) 또는 포커스가 있는 경우 VolumeBar를 숨기고 싶지 않습니다.
this.on(this.volumeBar, ['focus', 'slideractive'], () => {
this.volumeBar.addClass('vjs-slider-active');
this.addClass('vjs-slider-active');
this.trigger('slideractive');
});
this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
this.volumeBar.removeClass('vjs-slider-active');
this.removeClass('vjs-slider-active');
this.trigger('sliderinactive');
});
}
/**
* `Component`의 DOM 요소 생성
*
* @return {요소}
* 생성된 요소입니다.
*/
createEl() {
let orientationClass = 'vjs-볼륨-수평';
if (this.options_.vertical) {
orientationClass = 'vjs-볼륨-수직';
}
return super.createEl('div', {
className: `vjs-볼륨-컨트롤 vjs-컨트롤 ${orientationClass}`
});
}
/**
* `VolumeControl`에서 `mousedown` 또는 `touchstart` 이벤트를 처리합니다.
*
* @param {EventTarget~Event} 이벤트
* 이 기능을 트리거한 `mousedown` 또는 `touchstart` 이벤트
*
* @listens mousedown
* @listens 터치스타트
*/
handleMouseDown(이벤트) {
const doc = this.el_.ownerDocument;
this.on(doc, 'mousemove', this.throttledHandleMouseMove);
this.on(doc, 'touchmove', this.throttledHandleMouseMove);
this.on(doc, 'mouseup', this.handleMouseUpHandler_);
this.on(doc, 'touchend', this.handleMouseUpHandler_);
}
/**
* `VolumeControl`에서 `mouseup` 또는 `touchend` 이벤트를 처리합니다.
*
* @param {EventTarget~Event} 이벤트
* 이 기능을 트리거한 `mouseup` 또는 `touchend` 이벤트.
*
* @listens 터치엔드
* @listens mouseup
*/
handleMouseUp(이벤트) {
const doc = this.el_.ownerDocument;
this.off(doc, 'mousemove', this.throttledHandleMouseMove);
this.off(doc, 'touchmove', this.throttledHandleMouseMove);
this.off(doc, 'mouseup', this.handleMouseUpHandler_);
this.off(doc, 'touchend', this.handleMouseUpHandler_);
}
/**
* `VolumeControl`에서 `mousedown` 또는 `touchstart` 이벤트를 처리합니다.
*
* @param {EventTarget~Event} 이벤트
* 이 기능을 트리거한 `mousedown` 또는 `touchstart` 이벤트
*
* @listens mousedown
* @listens 터치스타트
*/
handleMouseMove(이벤트) {
this.volumeBar.handleMouseMove(이벤트);
}
}
/**
* `VolumeControl`의 기본 옵션
*
* @type {객체}
* @사적인
*/
VolumeControl.prototype.options_ = {
어린이들: [
'볼륨바'
]
};
Component.registerComponent('볼륨컨트롤', 볼륨컨트롤);
기본 VolumeControl 내보내기;