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 e3d6d3c95..5926a7050 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 @@ -100,6 +100,15 @@ [channel]="activeChannel" [epgProgram]="(epgProgram$ | async)!" /> + + + @if (showChannelNumberOverlay) { +
+
+ {{ channelNumberInput }} +
+
+ } } } diff --git a/apps/web/src/app/home/video-player/video-player.component.scss b/apps/web/src/app/home/video-player/video-player.component.scss index 1a2ffa0c7..c876706e4 100644 --- a/apps/web/src/app/home/video-player/video-player.component.scss +++ b/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); + } +} diff --git a/libs/ui/components/src/lib/vjs-player/vjs-player.component.ts b/libs/ui/components/src/lib/vjs-player/vjs-player.component.ts index 172c4fecc..c1db22c9c 100644 --- a/libs/ui/components/src/lib/vjs-player/vjs-player.component.ts +++ b/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'](); }