diff --git a/src/components/buttonMenu.ts b/src/components/buttonMenu.ts index 8718b1e0..ba94f015 100644 --- a/src/components/buttonMenu.ts +++ b/src/components/buttonMenu.ts @@ -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) => { 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); diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts index 4a694d7a..82d4d915 100644 --- a/src/lib/mediaPlayer.ts +++ b/src/lib/mediaPlayer.ts @@ -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 {
- +
/ @@ -424,8 +423,8 @@ 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[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; diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index e2a06f7a..a8c510a6 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -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;