Simplifies keyboard shortcuts overlay

Removes the "Show all/Show fewer" toggle button from the keyboard shortcuts overlay for a cleaner and more streamlined user experience.

The overlay now displays all shortcuts by default, improving discoverability and reducing user interaction.

Author: tzarebczan

ui/component/viewers/videoViewer/internal/keyboard-shortcuts-overlay.js

@@ -50,7 +50,6 @@ function buildOverlayMarkup() {
       <div class="vjs-shortcuts-header">
         <div class="vjs-shortcuts-title">${__('Keyboard shortcuts')}</div>
         <div class="vjs-shortcuts-actions">
-          <button type="button" class="vjs-shortcuts-toggle"></button>
           <button type="button" class="vjs-shortcuts-close" aria-label="${__('Close')}">${__('Close')}</button>
         </div>
       </div>
@@ -83,23 +82,7 @@ export function ensureKeyboardShortcutsOverlay(player) {
   playerEl.appendChild(overlayEl);
 
   const closeButton = overlayEl.querySelector('.vjs-shortcuts-close');
-  const toggleButton = overlayEl.querySelector('.vjs-shortcuts-toggle');
-
   let isOpen = false;
-  let isExpanded = false;
-
-  const updateToggleLabel = () => {
-    if (toggleButton) {
-      toggleButton.textContent = __(isExpanded ? 'Show fewer' : 'Show all');
-      toggleButton.setAttribute('aria-expanded', String(isExpanded));
-    }
-  };
-
-  const setExpanded = (expanded) => {
-    isExpanded = expanded;
-    overlayEl.classList.toggle('vjs-shortcuts-overlay--expanded', isExpanded);
-    updateToggleLabel();
-  };
 
   const open = () => {
     if (isOpen) return;
@@ -124,16 +107,10 @@ export function ensureKeyboardShortcutsOverlay(player) {
     isOpen ? close() : open();
   };
 
-  updateToggleLabel();
-
   if (closeButton) {
     closeButton.addEventListener('click', () => close());
   }
 
-  if (toggleButton) {
-    toggleButton.addEventListener('click', () => setExpanded(!isExpanded));
-  }
-
   overlayEl.addEventListener('click', (event) => {
     if (event.target === overlayEl) close();
   });
@@ -144,7 +121,6 @@ export function ensureKeyboardShortcutsOverlay(player) {
     open,
     close,
     toggle,
-    setExpanded,
     isOpen: () => isOpen,
   };
 

ui/component/viewers/videoViewer/internal/keyboard-shortcuts-overlay.scss

@@ -33,30 +33,27 @@
 
   .vjs-shortcuts-header {
     align-items: center;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 10px;
-    justify-content: flex-start;
-    margin-bottom: 8px;
+    column-gap: 8px;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    margin-bottom: 4px;
+    row-gap: 4px;
   }
 
   .vjs-shortcuts-actions {
     align-items: center;
     display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
+    gap: 6px;
+    justify-content: flex-end;
+    justify-self: end;
   }
 
   .vjs-shortcuts-title {
-    align-self: flex-start;
     font-size: 16px;
     font-weight: 600;
   }
 
-  .vjs-shortcuts-close,
-  .vjs-shortcuts-toggle {
+  .vjs-shortcuts-close {
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 6px;
@@ -70,18 +67,14 @@
     box-sizing: border-box;
     display: grid;
     gap: 6px;
-    grid-template-columns: 1fr;
+    column-gap: 32px;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     min-height: 0;
     overflow-x: hidden;
     overflow-y: auto;
     width: 100%;
   }
 
-  .vjs-shortcuts-overlay--expanded .vjs-shortcuts-body {
-    column-gap: 52px;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  }
-
   .vjs-shortcuts-list {
     box-sizing: border-box;
     display: grid;
@@ -93,12 +86,8 @@
     width: 100%;
   }
 
-  .vjs-shortcuts-overlay--expanded .vjs-shortcuts-list--secondary {
-    display: grid;
-  }
-
   .vjs-shortcuts-list--secondary {
-    display: none;
+    display: grid;
   }
 
   .vjs-shortcuts-item {
@@ -139,28 +128,22 @@
     line-height: 1.15;
   }
 
-  .vjs-shortcuts-overlay--expanded .vjs-shortcuts-card {
-    max-width: 720px;
-    width: min(92vw, 720px);
-  }
-
   @media (max-width: 720px) {
     .vjs-shortcuts-card {
       max-height: calc(100% - 16px);
       padding: 12px 12px;
       width: calc(100% - 24px);
     }
 
-    .vjs-shortcuts-overlay--expanded .vjs-shortcuts-body {
+    .vjs-shortcuts-body {
       grid-template-columns: 1fr;
     }
 
     .vjs-shortcuts-title {
       font-size: 14px;
     }
 
-    .vjs-shortcuts-close,
-    .vjs-shortcuts-toggle {
+    .vjs-shortcuts-close {
       font-size: 11px;
       padding: 5px 8px;
     }
@@ -175,3 +158,6 @@
     }
   }
 }
+.vjs-shortcuts-actions {
+  justify-self: end;
+}

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -84,7 +84,6 @@ export type Player = {
     open: () => void,
     close: () => void,
     toggle: (forceState?: boolean) => void,
-    setExpanded: (expanded: boolean) => void,
     isOpen: () => boolean,
   },
   toggleKeyboardShortcutsOverlay?: (forceState?: boolean) => void,