Browse Source

Merge pull request #41 from AlexWebArchitect/playbackrate

add video playback rate setting
master
Eduard Kuzmenko 3 years ago committed by GitHub
parent
commit
3fd211d663
  1. 16
      src/lib/mediaPlayer.ts
  2. 2
      src/scss/partials/_ckin.scss

16
src/lib/mediaPlayer.ts

@ -11,6 +11,9 @@ import RangeSelector from "../components/rangeSelector";
import { onVideoLoad } from "../helpers/files"; import { onVideoLoad } from "../helpers/files";
import { cancelEvent } from "../helpers/dom/cancelEvent"; import { cancelEvent } from "../helpers/dom/cancelEvent";
import ListenerSetter from "../helpers/listenerSetter"; import ListenerSetter from "../helpers/listenerSetter";
import ButtonMenu from "../components/buttonMenu";
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;
@ -187,6 +190,7 @@ export default class VideoPlayer {
this.skin = video.dataset.ckin ?? 'default'; this.skin = video.dataset.ckin ?? 'default';
this.stylePlayer(duration); this.stylePlayer(duration);
this.setBtnMenuToggle();
if(this.skin === 'default') { if(this.skin === 'default') {
const controls = this.wrapper.querySelector('.default__controls.ckin__controls') as HTMLDivElement; const controls = this.wrapper.querySelector('.default__controls.ckin__controls') as HTMLDivElement;
@ -420,6 +424,7 @@ 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="${skin}__button fullscreen tgico-fullscreen" title="Full Screen"></button> <button class="${skin}__button fullscreen tgico-fullscreen" title="Full Screen"></button>
</div> </div>
</div> </div>
@ -427,6 +432,17 @@ export default class VideoPlayer {
} }
} }
protected setBtnMenuToggle() {
const buttons = [0.25, 0.5, 1, 1.25, 1.5, 2].map((rate) => {
return { icon: '', text: rate.toString() as LangPackKey, onClick: () => { this.video.playbackRate = rate; } }
});
const btnMenu = ButtonMenu(buttons);
const settingsButton = this.wrapper.querySelector('.settings') as HTMLElement;
btnMenu.classList.add('top-left');
ButtonMenuToggleHandler(settingsButton);
settingsButton.append(btnMenu);
}
public static isFullScreen(): boolean { public static isFullScreen(): boolean {
// @ts-ignore // @ts-ignore
return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement); return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);

2
src/scss/partials/_ckin.scss

@ -425,6 +425,8 @@ input[type=range] {
} }
.right-controls { .right-controls {
display: flex;
align-items: center;
float: right; float: right;
} }

Loading…
Cancel
Save