feat(toolbar): add info button and overlay toggle

Add "Show program info (Press I)" translation and an info icon
button to the video player toolbar. Emit an infoOverlayClicked event
from the toolbar and expose isLeftDrawerOpened to control the menu
icon state. Update the menu icon to reflect drawer open/closed state.

Implement showOverlay() on the info overlay component to toggle
visibility and auto-hide after 10 seconds when shown. This enables
manual toggling of the program info overlay via the new toolbar
button or keyboard shortcut, improving discoverability and user
control of program information.

apps/web/src/app/home/video-player/video-player.component.html

@@ -16,7 +16,9 @@
                 (toggleLeftDrawerClicked)="drawer.toggle()"
                 (toggleRightDrawerClicked)="drawerRight.toggle()"
                 (multiEpgClicked)="openMultiEpgView()"
+                (infoOverlayClicked)="toggleInfoOverlay()"
                 [activeChannel]="activeChannel"
+                [isLeftDrawerOpened]="drawer.opened"
                 (settingsClicked)="openSettings()"
             />
             @if (activeChannel.radio === 'true') {

apps/web/src/assets/i18n/en.json

@@ -198,7 +198,8 @@
         "OPEN_CHANNELS_LIST": "Open channel list",
         "TOGGLE_FAVORITE_FLAG": "Toggle favorite flag",
         "OPEN_EPG_LIST": "Open EPG list",
-        "OPEN_MULTI_EPG": "Open Multi-EPG view"
+        "OPEN_MULTI_EPG": "Open Multi-EPG view",
+        "SHOW_INFO": "Show program info (Press I)"
     },
     "EPG": {
         "TITLE": "Electronic Program Guide",

libs/ui/components/src/lib/info-overlay/info-overlay.component.ts

@@ -80,4 +80,23 @@ export class InfoOverlayComponent implements OnChanges {
             .duration(this.stop.diff(timeNow))
             .asMilliseconds();
     }
+
+    /**
+     * Manually shows the overlay (triggered by user action like 'I' key or info button)
+     * Toggles visibility if already shown, or shows for 10 seconds if hidden
+     */
+    showOverlay(): void {
+        if (this.isVisible) {
+            // If already visible, hide it (toggle behavior)
+            clearTimeout(this.currentTimeout);
+            this.isVisible = false;
+        } else {
+            // Show overlay for 10 seconds
+            clearTimeout(this.currentTimeout);
+            this.isVisible = true;
+            this.currentTimeout = setTimeout(() => {
+                this.isVisible = false;
+            }, 10000);
+        }
+    }
 }

libs/ui/components/src/lib/video-player/toolbar/toolbar.component.html

@@ -5,7 +5,7 @@
         [matTooltip]="'TOP_MENU.OPEN_CHANNELS_LIST' | translate"
         class="sidenav-toggle-button"
     >
-        <mat-icon>menu</mat-icon>
+        <mat-icon>{{ isLeftDrawerOpened ? 'menu' : 'menu_open' }}</mat-icon>
     </button>
     @if ((playlistId$ | async) !== 'GLOBAL_FAVORITES') {
         <button
@@ -22,6 +22,13 @@
             >
         </button>
     }
+    <button
+        mat-icon-button
+        (click)="infoOverlayClicked.emit()"
+        [matTooltip]="'TOP_MENU.SHOW_INFO' | translate"
+    >
+        <mat-icon>info</mat-icon>
+    </button>
     {{ activeChannel?.name }}
     <div class="spacer"></div>
     <button

libs/ui/components/src/lib/video-player/toolbar/toolbar.component.ts

@@ -32,6 +32,8 @@ import { Channel } from 'shared-interfaces';
 })
 export class ToolbarComponent {
     @Input() activeChannel!: Channel;
+    @Input() isLeftDrawerOpened = true;
+    readonly infoOverlayClicked = output<void>();
     readonly multiEpgClicked = output<void>();
     readonly settingsClicked = output<void>();
     readonly toggleLeftDrawerClicked = output<void>();