Browse Source

just a commit

master
Eduard Kuzmenko 3 years ago
parent
commit
0cdf511f59
  1. 11
      src/components/buttonMenu.ts
  2. 14
      src/lib/mediaPlayer.ts
  3. 12
      src/scss/partials/_ckin.scss

11
src/components/buttonMenu.ts

@ -13,8 +13,9 @@ import { closeBtnMenu } from "./misc"; @@ -13,8 +13,9 @@ import { closeBtnMenu } from "./misc";
import { ripple } from "./ripple";
export type ButtonMenuItemOptions = {
icon: string,
text: LangPackKey,
icon?: string,
text?: LangPackKey,
regularText?: string,
onClick: (e: MouseEvent | TouchEvent) => void,
element?: HTMLElement,
options?: AttachClickOptions,
@ -28,9 +29,11 @@ const ButtonMenuItem = (options: ButtonMenuItemOptions) => { @@ -28,9 +29,11 @@ const ButtonMenuItem = (options: ButtonMenuItemOptions) => {
const {icon, text, onClick} = options;
const el = document.createElement('div');
el.className = 'btn-menu-item tgico-' + icon;
el.className = 'btn-menu-item' + (icon ? ' tgico-' + icon : '');
ripple(el);
const t = i18n(text);
const t = text ? i18n(text) : document.createElement('span');
if(options.regularText) t.innerHTML = options.regularText;
t.classList.add('btn-menu-item-text');
el.append(t);

14
src/lib/mediaPlayer.ts

@ -13,7 +13,6 @@ import { cancelEvent } from "../helpers/dom/cancelEvent"; @@ -13,7 +13,6 @@ 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;
@ -416,7 +415,7 @@ export default class VideoPlayer { @@ -416,7 +415,7 @@ export default class VideoPlayer {
<div class="${skin}__controls ckin__controls">
<div class="bottom-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">
<time id="time-elapsed">0:00</time>
<span> / </span>
@ -424,8 +423,8 @@ export default class VideoPlayer { @@ -424,8 +423,8 @@ export default class VideoPlayer {
</div>
</div>
<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="btn-icon ${skin}__button btn-menu-toggle settings tgico-settings" title="Playback Rate"></button>
<button class="btn-icon ${skin}__button fullscreen tgico-fullscreen" title="Full Screen"></button>
</div>
</div>
</div>`;
@ -433,8 +432,11 @@ export default class VideoPlayer { @@ -433,8 +432,11 @@ 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 buttons: Parameters<typeof ButtonMenu>[0] = [0.25, 0.5, 1, 1.25, 1.5, 2].map((rate) => {
return {
regularText: rate === 1 ? 'Normal' : '' + rate,
onClick: () => this.video.playbackRate = rate
};
});
const btnMenu = ButtonMenu(buttons);
const settingsButton = this.wrapper.querySelector('.settings') as HTMLElement;

12
src/scss/partials/_ckin.scss

@ -95,16 +95,10 @@ @@ -95,16 +95,10 @@
}
&__button {
background: none;
border: 0;
width: 2rem;
height: 2rem;
color: #fff;
outline: 0;
padding: 3px 10px 6px 10px;
cursor: pointer;
font-size: 24px;
line-height: 1;
display: flex;
align-items: center;
padding: 0;
i {
align-self: center;

Loading…
Cancel
Save