|
|
@ -13,7 +13,6 @@ import { cancelEvent } from "../helpers/dom/cancelEvent"; |
|
|
|
import ListenerSetter from "../helpers/listenerSetter"; |
|
|
|
import ListenerSetter from "../helpers/listenerSetter"; |
|
|
|
import ButtonMenu from "../components/buttonMenu"; |
|
|
|
import ButtonMenu from "../components/buttonMenu"; |
|
|
|
import { ButtonMenuToggleHandler } from "../components/buttonMenuToggle"; |
|
|
|
import { ButtonMenuToggleHandler } from "../components/buttonMenuToggle"; |
|
|
|
import { LangPackKey } from "./langPack"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export class MediaProgressLine extends RangeSelector { |
|
|
|
export class MediaProgressLine extends RangeSelector { |
|
|
|
private filledLoad: HTMLDivElement; |
|
|
|
private filledLoad: HTMLDivElement; |
|
|
@ -416,7 +415,7 @@ export default class VideoPlayer { |
|
|
|
<div class="${skin}__controls ckin__controls"> |
|
|
|
<div class="${skin}__controls ckin__controls"> |
|
|
|
<div class="bottom-controls"> |
|
|
|
<div class="bottom-controls"> |
|
|
|
<div class="left-controls"> |
|
|
|
<div class="left-controls"> |
|
|
|
<button class="${skin}__button toggle tgico" title="Toggle Video"></button> |
|
|
|
<button class="btn-icon ${skin}__button toggle tgico" title="Toggle Video"></button> |
|
|
|
<div class="time"> |
|
|
|
<div class="time"> |
|
|
|
<time id="time-elapsed">0:00</time> |
|
|
|
<time id="time-elapsed">0:00</time> |
|
|
|
<span> / </span> |
|
|
|
<span> / </span> |
|
|
@ -424,8 +423,8 @@ export default class VideoPlayer { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right-controls"> |
|
|
|
<div class="right-controls"> |
|
|
|
<button class="${skin}__button btn-menu-toggle settings tgico-settings" title="Playback Rate"></button> |
|
|
|
<button class="btn-icon ${skin}__button btn-menu-toggle settings tgico-settings" title="Playback Rate"></button> |
|
|
|
<button class="${skin}__button fullscreen tgico-fullscreen" title="Full Screen"></button> |
|
|
|
<button class="btn-icon ${skin}__button fullscreen tgico-fullscreen" title="Full Screen"></button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div>`;
|
|
|
|
</div>`;
|
|
|
@ -433,8 +432,11 @@ export default class VideoPlayer { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
protected setBtnMenuToggle() { |
|
|
|
protected setBtnMenuToggle() { |
|
|
|
const buttons = [0.25, 0.5, 1, 1.25, 1.5, 2].map((rate) => { |
|
|
|
const buttons: Parameters<typeof ButtonMenu>[0] = [0.25, 0.5, 1, 1.25, 1.5, 2].map((rate) => { |
|
|
|
return { icon: '', text: rate.toString() as LangPackKey, onClick: () => { this.video.playbackRate = rate; } } |
|
|
|
return { |
|
|
|
|
|
|
|
regularText: rate === 1 ? 'Normal' : '' + rate, |
|
|
|
|
|
|
|
onClick: () => this.video.playbackRate = rate |
|
|
|
|
|
|
|
}; |
|
|
|
}); |
|
|
|
}); |
|
|
|
const btnMenu = ButtonMenu(buttons); |
|
|
|
const btnMenu = ButtonMenu(buttons); |
|
|
|
const settingsButton = this.wrapper.querySelector('.settings') as HTMLElement; |
|
|
|
const settingsButton = this.wrapper.querySelector('.settings') as HTMLElement; |
|
|
|