just a commit

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

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

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;