| 7 | import Icons from './Icons' |
| 8 | |
| 9 | export class ControlBarView implements IComponent { |
| 10 | public readonly element: HTMLElement |
| 11 | |
| 12 | private _playbackButton: HTMLElement |
| 13 | private _timeDisplay: HTMLElement |
| 14 | private _playbackRate: HTMLElement |
| 15 | private _playbackRateSettingBox: HTMLElement |
| 16 | private _playbackRateItems: HTMLElement[] = [ |
| 17 | $div({ class: 'xp-setting-item', text: '0.5x', attrs: { 'data-rate': '0.5' } }), |
| 18 | $div({ class: 'xp-setting-item', text: 'Normal', attrs: { 'data-rate': '1.0' } }), |
| 19 | $div({ class: 'xp-setting-item', text: '1.5x', attrs: { 'data-rate': '1.5' } }), |
| 20 | $div({ class: 'xp-setting-item', text: '2.0x', attrs: { 'data-rate': '2.0' } }), |
| 21 | ] |
| 22 | private _volume: HTMLElement |
| 23 | |
| 24 | private _progressBar: ProgressBarView = new ProgressBarView() |
| 25 | |
| 26 | private _state: IPlayerState = 'Paused' |
| 27 | private _currentTime: number = 0 |
| 28 | private _duration: number = 0 |
| 29 | |
| 30 | constructor(private _player: XtermPlayer) { |
| 31 | this.element = $div({ class: 'xp-control-bar' }, |
| 32 | this._progressBar.element, |
| 33 | $div({ class: 'xp-control-bar-left' }, |
| 34 | this._playbackButton = $div({ class: 'xp-icon-button' }), |
| 35 | this._volume = $div({ class: 'xp-icon-button' }), |
| 36 | this._timeDisplay = $span({ class: 'xp-time-display' }), |
| 37 | ), |
| 38 | $div({ class: 'xp-control-bar-right' }, |
| 39 | $div({ class: 'xp-playback-rate-setting' }, |
| 40 | this._playbackRate = $div({ class: 'xp-playback-rate', text: '1.0x' }), |
| 41 | this._playbackRateSettingBox = $div({ class: 'xp-setting-box' }, ...this._playbackRateItems) |
| 42 | ) |
| 43 | ) |
| 44 | ) |
| 45 | addDisposableDomListener(this._playbackRate, 'click', () => { |
| 46 | this._playbackRateSettingBox.classList.toggle('xp-setting-box-open') |
| 47 | }) |
| 48 | this._playbackRateItems.forEach(item => { |
| 49 | addDisposableDomListener(item, 'click', () => { |
| 50 | this._player.playbackRate = parseFloat(item.dataset['rate'] || '1') |
| 51 | }) |
| 52 | }) |
| 53 | addDisposableDomListener(this._volume, 'click', () => { |
| 54 | if (this._player.muted) { |
| 55 | this._player.muted = false |
| 56 | } else { |
| 57 | this._player.muted = true |
| 58 | } |
| 59 | }) |
| 60 | this._player.onVolumeChanged(this._updateVolume.bind(this)) |
| 61 | this._player.onMutedChanged(this._updateVolume.bind(this)) |
| 62 | this._updatePlaybackButton() |
| 63 | this._updateTimeDisplay() |
| 64 | this._updateVolume() |
| 65 | } |
| 66 | |