From 75b08985fd1155faa0dc0e4984fff8ba3f6553d9 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Wed, 27 Nov 2024 20:11:23 +0100
Subject: [PATCH] style: adjust video player and layout heights

Set video player heights to 50vh for better responsiveness.
Update EPG content height to 50vh minus padding for improved
layout. Modify grid template rows to 50% for better space
distribution. Ensure fallback titles and descriptions in
dialog for better user experience.
---
 src/app/portals/epg-view/epg-view.component.ts           | 9 ++++-----
 .../live-stream-layout/live-stream-layout.component.scss | 6 +++---
 .../web-player-view/web-player-view.component.scss       | 6 +++++-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/portals/epg-view/epg-view.component.ts b/src/app/portals/epg-view/epg-view.component.ts
index 1ea036d4b..0f92ae0ca 100644
--- a/src/app/portals/epg-view/epg-view.component.ts
+++ b/src/app/portals/epg-view/epg-view.component.ts
@@ -15,7 +15,6 @@ import { EpgItem } from '../../xtream/epg-item.interface';
     templateUrl: './epg-view.component.html',
     imports: [
         DatePipe,
-        EpgItemDescriptionComponent,
         MatButtonModule,
         MatDividerModule,
         MatIconModule,
@@ -24,8 +23,8 @@ import { EpgItem } from '../../xtream/epg-item.interface';
     ],
     styles: `
         mat-list {
-            overflow-y: scroll;
-            height: calc(100vh - 459px);
+            /* overflow-y: scroll; */
+            height: 100vh;
         }
     `,
 })
@@ -37,8 +36,8 @@ export class EpgViewComponent {
     showDetails(item: EpgItem) {
         this.dialog.open(EpgItemDescriptionComponent, {
             data: {
-                title: [{ value: item.title, lang: item.lang }],
-                desc: [{ value: item.description }],
+                title: item.title ?? 'No title',
+                desc: item.description ?? 'No description',
             },
         });
     }
diff --git a/src/app/portals/live-stream-layout/live-stream-layout.component.scss b/src/app/portals/live-stream-layout/live-stream-layout.component.scss
index 5598e6bbd..8fe24537d 100644
--- a/src/app/portals/live-stream-layout/live-stream-layout.component.scss
+++ b/src/app/portals/live-stream-layout/live-stream-layout.component.scss
@@ -7,12 +7,11 @@
 .itv-container {
     display: grid;
     grid-template-columns: 330px 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-rows: 50% 50%;
     gap: 0 0;
     grid-auto-flow: row;
     grid-template-areas:
         'sidebar video-player video-player'
-        'sidebar epg epg'
         'sidebar epg epg';
     height: 100%;
 }
@@ -49,9 +48,10 @@
 }
 
 .epg-content {
-    height: 100%;
+    height: calc(50vh - 20px);
     overflow-y: auto;
     border-right: #111 1px solid;
+    padding-bottom: 20px; 
 }
 
 .sidebar-content {
diff --git a/src/app/portals/web-player-view/web-player-view.component.scss b/src/app/portals/web-player-view/web-player-view.component.scss
index 3e829143d..4f278607c 100644
--- a/src/app/portals/web-player-view/web-player-view.component.scss
+++ b/src/app/portals/web-player-view/web-player-view.component.scss
@@ -1,3 +1,7 @@
 app-vjs-player > .video-js {
-    height: 100%;
+    height: 50vh !important;
+}
+
+app-html-video-player > #video-player { 
+    height: 50vh !important;
 }