feat(video-player): add channel number overlay UI

Add a transient channel number overlay to the video player UI so users
see the numeric channel feedback when entering or changing channels.

- Insert conditional overlay markup in the video-player template that
  renders when showChannelNumberOverlay is true and displays the
  channelNumberInput value.
- Add styles for .channel-number-overlay and
  .channel-number-display to center the overlay, style the numeric
  display (large bold font, dark translucent background, rounded
  corners, shadow) and include a brief scale-in animation.
- Keep overlay pointer-events disabled so it doesn't block player input.

This improves user experience by giving clear visual confirmation of
channel changes.

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

@@ -100,6 +100,15 @@
                     [channel]="activeChannel"
                     [epgProgram]="(epgProgram$ | async)!"
                 />
+
+                <!-- channel number overlay -->
+                @if (showChannelNumberOverlay) {
+                    <div class="channel-number-overlay">
+                        <div class="channel-number-display">
+                            {{ channelNumberInput }}
+                        </div>
+                    </div>
+                }
             }
         }
     </mat-drawer-content>

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

@@ -54,3 +54,39 @@
         }
     }
 }
+
+.channel-number-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    pointer-events: none;
+}
+
+.channel-number-display {
+    background: rgba(0, 0, 0, 0.85);
+    color: #fff;
+    font-size: 6rem;
+    font-weight: 700;
+    font-family: 'DM Sans', sans-serif;
+    padding: 2rem 3rem;
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    min-width: 120px;
+    text-align: center;
+    letter-spacing: 0.05em;
+    animation: scaleIn 0.15s ease-out;
+}
+
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}

libs/ui/components/src/lib/vjs-player/vjs-player.component.ts

@@ -56,11 +56,9 @@ export class VjsPlayerComponent implements OnInit, OnChanges, OnDestroy {
                 });
             }
         );
-        /* this.player.hlsQualitySelector({
+        this.player.hlsQualitySelector({
             displayCurrentQuality: true,
         });
-        // this one produces warning in console
-        */
         this.player['aspectRatioPanel']();
     }