[webapp] TV Guide Enhancements

- TV Guide is now themed and the layout has been improved. - Added a program details dialog box, activated by clicking on a program entry. - Rebuilt web app
MythTV · Feb 9, 2022 · d282a20 · d282a20
1 parent 2311368
commit d282a20
Show file tree

Hide file tree

Showing 14 changed files with 90 additions and 36 deletions.
diff --git a/mythtv/html/apps/backend/3rdpartylicenses.txt b/mythtv/html/apps/backend/3rdpartylicenses.txt
@@ -41,6 +41,12 @@ MIT
 @angular/router
 MIT
 
+@ngx-translate/core
+MIT
+
+@ngx-translate/http-loader
+MIT
+
 primeflex
 MIT
 

diff --git a/mythtv/html/apps/backend/index.html b/mythtv/html/apps/backend/index.html
@@ -7,7 +7,7 @@
   <link id="app-theme" rel="stylesheet" type="text/css" href="assets/themes/md-light-indigo.css">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 <style>html,body{height:100%}body{margin:0;height:100%;overflow-x:hidden;overflow-y:auto;background-color:var(--surface-a);font-family:var(--font-family);font-weight:400;color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>
-<body class="mat-typography">
+<body>
   <app-root></app-root>
 <script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script>
 

diff --git a/mythtv/html/apps/backend/main.js b/mythtv/html/apps/backend/main.js
diff --git a/mythtv/html/apps/backend/styles.css b/mythtv/html/apps/backend/styles.css
diff --git a/mythtv/html/backend/src/app/guide/components/channelicon/channelicon.component.css b/mythtv/html/backend/src/app/guide/components/channelicon/channelicon.component.css
@@ -1,3 +1,9 @@
+.channelBox {
+    border-radius: 10px;
+    background: var(--surface-200);
+    height: 120px;
+}
+
 .channelIcon {
     height: 57px;
     max-width: 86px;
@@ -10,9 +16,8 @@
 .channelText {
     clear: both;
     font-weight: bold;
-    text-align: left;
+    text-align: -webkit-center;
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
     padding: 0px 3px; /* Vertical Horizontal */
 }
diff --git a/mythtv/html/backend/src/app/guide/components/channelicon/channelicon.component.html b/mythtv/html/backend/src/app/guide/components/channelicon/channelicon.component.html
@@ -1,4 +1,4 @@
-<div class="flex flex-column">
+<div class="flex flex-column align-items-center channelBox">
     <div class="channelIcon">
         <img alt="{{ channel.IconURL }} Icon" height="57" src="{{IconUrl(channel.IconURL)}}"/>
     </div>

diff --git a/mythtv/html/backend/src/app/guide/components/programentry/programentry.component.css b/mythtv/html/backend/src/app/guide/components/programentry/programentry.component.css
@@ -1,19 +1,20 @@
 .programBox {
     float: left;
-    height: 80px;
+    height: 120px;
     padding: 0px 0px 0px 2px;
-    background-color: #586e75;
+    color: var(--primary-color-text);
+    background: var(--surface-200);
     border-radius: 10px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .programTitle {
     padding: 5px 8px 4px 7px;
-    color: #fdf6e3;
     width: 100%;
     height: 28px;
-    background: linear-gradient(to bottom, #777777 1%, #555555 20%, #222222 99%);
+    color: var(--primary-color-text);
+    background: linear-gradient(to bottom, var(--surface-800) 1%, var(--surface-500) 90%, var(--surface-200) 99%);
     border-radius: inherit;
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
@@ -30,19 +31,19 @@
 .programBody {
     margin: 3px 5px 4px 5px;
     padding: 0px 0px 0px 2px;
-    color: #eee8d5;
+    color: var(--text-color-secondary);
     height: 45px;
     z-index: 5;
     /*font-size: 0.8em;*/
 }
 
 .programSubtitle {
-    color:#268bd2;
+    color: var(--text-color);
     position: relative;
     font-weight: bold;
     margin-right: 5px;
-    z-index: 1px;
     line-height: 15px;
+    padding-bottom: 5px;
 }
 
 .programDescription {

diff --git a/mythtv/html/backend/src/app/guide/components/programentry/programentry.component.html b/mythtv/html/backend/src/app/guide/components/programentry/programentry.component.html
@@ -1,4 +1,4 @@
-<div class="programBox" [style.width.%]=durationToWidth()>
+<div class="programBox" [style.width.%]=durationToWidth() (click)="showDetailsDialog()">
     <div class="programTitle">{{ program.Title }}</div>
     <div class="programBody">
         <div *ngIf="program.SubTitle.length != 0">
@@ -7,3 +7,14 @@
         <div class="programDescription">{{ program.Description }}</div>
     </div>
 </div>
+<p-dialog header=" {{ program.Title }}" [(visible)]="displayDetails" [style]="{width: '50vw'}">
+    <div class="programSubtitle">{{ toLocalShortTime(program.StartTime) }} - {{ toLocalShortTime(program.EndTime) }}
+        <ng-container *ngIf="program.SubTitle.length != 0">
+            : {{ program.SubTitle }}
+        </ng-container>
+    </div>
+    <p>{{ program.Description }}</p>
+    <ng-template pTemplate="footer">
+        <p-button icon="pi pi-check" (click)="displayDetails=false" label="Ok" styleClass="p-button-text"></p-button>
+    </ng-template>
+</p-dialog>
diff --git a/mythtv/html/backend/src/app/guide/components/programentry/programentry.component.ts b/mythtv/html/backend/src/app/guide/components/programentry/programentry.component.ts
@@ -10,6 +10,7 @@ export class ProgramEntryComponent implements OnInit {
   @Input() program! :         ScheduleOrProgram;
   @Input() guideStartTime! :  string;
   @Input() guideEndTime! :    string;
+  displayDetails :            boolean = false;
 
   constructor() { }
 
@@ -30,4 +31,28 @@ export class ProgramEntryComponent implements OnInit {
     let program_width = ((programWindow / timeWindow)*100);
     return program_width;
   }
+
+  // Taken from timebar.components.ts, but takes string arg, not Date. TODO: Refactor
+  toLocalShortTime(date : string) : string {
+    let d = new Date(date);
+    let ampm = 'AM';
+    let h;
+    let m = d.getMinutes().toString().padStart(2, '0');
+    let hour = d.getHours();
+    if (hour == 0) {
+        h = 12;
+    } else if (hour > 12) {
+        h = hour - 12;
+    } else {
+        h = hour;
+    }
+    if (hour >= 12) {
+        ampm = 'PM';
+    }
+    return h + ":" + m + " " + ampm;
+  }
+
+  showDetailsDialog() {
+    this.displayDetails = true;
+  }
 }
diff --git a/mythtv/html/backend/src/app/guide/components/timebar/timebar.component.css b/mythtv/html/backend/src/app/guide/components/timebar/timebar.component.css
@@ -1,5 +1,4 @@
 .timebarbox {
-    display: block;
     grid-template-columns: 90px auto;
     grid-template-rows: 28px;
     width: 100%;
@@ -8,11 +7,9 @@
 .datebox {
     float: left;
     padding: 5px 8px 4px 7px;
-    color: #fdf6e3;
-    background: linear-gradient(to bottom, #777777 1%, #555555 20%, #222222 99%);
+    color: var(--primary-color-text);
+    background: linear-gradient(to bottom, var(--surface-800) 1%, var(--surface-500) 90%, var(--surface-200) 99%);
     border-radius: 10px;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
 }
 
 .segmentsbox {
@@ -27,10 +24,8 @@
     float: left;
     width: 25%;
     padding: 5px 8px 4px 7px;
-    color: #fdf6e3;
+    color: var(--primary-color-text);
+    background: linear-gradient(to bottom, var(--surface-800) 1%, var(--surface-500) 90%, var(--surface-200) 99%);
     height: auto;
-    background: linear-gradient(to bottom, #777777 1%, #555555 20%, #222222 99%);
     border-radius: 10px;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
 }
diff --git a/mythtv/html/backend/src/app/guide/components/timebar/timebar.component.html b/mythtv/html/backend/src/app/guide/components/timebar/timebar.component.html
@@ -1,4 +1,4 @@
-<div class="flex flex-row timebarbox">
+<div class="grid">
     <!-- TODO: Use today or date-->
     <div class="col-1 datebox">Today</div>
     <div class="col segmentbox">{{ segmentToStartTime(0) }}</div>

diff --git a/mythtv/html/backend/src/app/guide/guide.component.css b/mythtv/html/backend/src/app/guide/guide.component.css
@@ -5,3 +5,14 @@
     height: 82px;
     padding-bottom: 2px;
 }
+.programsBox {
+    grid-template-columns: 90px auto;
+    grid-template-rows: 28px;
+    width: 100%;
+}
+
+.timebarbox {
+    grid-template-columns: 90px auto;
+    grid-template-rows: 28px;
+    width: 100%;
+}
diff --git a/mythtv/html/backend/src/app/guide/guide.component.html b/mythtv/html/backend/src/app/guide/guide.component.html
@@ -1,21 +1,21 @@
 <div *ngIf="(m_guideData$ | async)?.ProgramGuide as pg; else loading">
-    <!--p-dataView [value]="pg.Channels" [totalRecords]="pg.TotalAvailable"
-        [lazy]="true" (onLazyLoad)="loadData($event)" [paginator]="true"-->
-    <!--p-dataView [value]="m_channelData" [totalRecords]="m_channelTotal"
-        [lazy]="true" (onLazyLoad)="loadData($event)" [paginator]="true"-->
-        <p-dataView [value]="pg.Channels" [totalRecords]="pg.TotalAvailable">
-        <ng-template pTemplate="header">
-            <div class="col-12 right-align">
+    <p-dataView [value]="pg.Channels" [totalRecords]="pg.TotalAvailable">
+        <ng-template pTemplate="header" styleClass="timeHeader">
+            <div class="col-12">
                 Time Selector goes here
             </div>
-            <app-guide-timebar [startTime]="pg.StartTime"></app-guide-timebar>
         </ng-template>
-        <ng-template let-channelrow pTemplate="listItem">
-            <div class="flex flex-row col-12">
+        <ng-template let-channelrow let-i="rowIndex" pTemplate="listItem">
+            <ng-container *ngIf="( i % 5 ) == 0">
+                <div class="col-12 p-3">
+                    <app-guide-timebar [startTime]="pg.StartTime"></app-guide-timebar>
+                </div>
+            </ng-container>
+            <div class="grid col-12 p-3">
                 <div class="col-1">
                     <app-guide-channelicon [channel]=channelrow></app-guide-channelicon>
                 </div>
-                <div class="flex-auto">
+                <div class="col">
                     <ng-container *ngFor="let program of channelrow.Programs">
                         <div *ngIf="inDisplayWindow(program.StartTime, pg.EndTime)">
                             <app-guide-programentry [program]="program" 

diff --git a/mythtv/html/backend/src/index.html b/mythtv/html/backend/src/index.html
@@ -9,7 +9,7 @@
   <link id="app-theme" rel="stylesheet" type="text/css" href="assets/themes/md-light-indigo.css">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body class="mat-typography">
+<body>
   <app-root></app-root>
 </body>
 </html>