From 592f6e34f95a8f9490dc0b2bc2ccc39b7fe1f484 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sun, 16 Nov 2025 20:25:15 +0100
Subject: [PATCH] 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.
---
 .../video-player/video-player.component.html  |  2 ++
 apps/web/src/assets/i18n/en.json              |  3 ++-
 .../info-overlay/info-overlay.component.ts    | 19 +++++++++++++++++++
 .../toolbar/toolbar.component.html            |  9 ++++++++-
 .../video-player/toolbar/toolbar.component.ts |  2 ++
 5 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/home/video-player/video-player.component.html b/apps/web/src/app/home/video-player/video-player.component.html
index a6880df8b..e3d6d3c95 100644
--- a/apps/web/src/app/home/video-player/video-player.component.html
+++ b/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') {
diff --git a/apps/web/src/assets/i18n/en.json b/apps/web/src/assets/i18n/en.json
index dd3c0e9fb..061a5513b 100644
--- a/apps/web/src/assets/i18n/en.json
+++ b/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",
diff --git a/libs/ui/components/src/lib/info-overlay/info-overlay.component.ts b/libs/ui/components/src/lib/info-overlay/info-overlay.component.ts
index abf7f4b6f..838af02c4 100644
--- a/libs/ui/components/src/lib/info-overlay/info-overlay.component.ts
+++ b/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);
+        }
+    }
 }
diff --git a/libs/ui/components/src/lib/video-player/toolbar/toolbar.component.html b/libs/ui/components/src/lib/video-player/toolbar/toolbar.component.html
index 98fd2f5ba..8b14a972a 100644
--- a/libs/ui/components/src/lib/video-player/toolbar/toolbar.component.html
+++ b/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
diff --git a/libs/ui/components/src/lib/video-player/toolbar/toolbar.component.ts b/libs/ui/components/src/lib/video-player/toolbar/toolbar.component.ts
index 132298702..e29e75479 100644
--- a/libs/ui/components/src/lib/video-player/toolbar/toolbar.component.ts
+++ b/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>();