diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts index cb8091c0..4a694d7a 100644 --- a/src/lib/mediaPlayer.ts +++ b/src/lib/mediaPlayer.ts @@ -11,6 +11,9 @@ import RangeSelector from "../components/rangeSelector"; import { onVideoLoad } from "../helpers/files"; import { cancelEvent } from "../helpers/dom/cancelEvent"; import ListenerSetter from "../helpers/listenerSetter"; +import ButtonMenu from "../components/buttonMenu"; +import { ButtonMenuToggleHandler } from "../components/buttonMenuToggle"; +import { LangPackKey } from "./langPack"; export class MediaProgressLine extends RangeSelector { private filledLoad: HTMLDivElement; @@ -187,6 +190,7 @@ export default class VideoPlayer { this.skin = video.dataset.ckin ?? 'default'; this.stylePlayer(duration); + this.setBtnMenuToggle(); if(this.skin === 'default') { const controls = this.wrapper.querySelector('.default__controls.ckin__controls') as HTMLDivElement; @@ -420,6 +424,7 @@ export default class VideoPlayer {
+
@@ -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 { // @ts-ignore return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement); diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index 68ef0f0d..e2a06f7a 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -425,6 +425,8 @@ input[type=range] { } .right-controls { + display: flex; + align-items: center; float: right; }