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;
}