r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

just a commit

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-07-19 22:53:52 +03:00
parent 3fd211d663
commit 0cdf511f59
3 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/buttonMenu.ts
View File

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

14
src/lib/mediaPlayer.ts
View File

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

12
src/scss/partials/_ckin.scss
View File

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