Add video refresh

Client/src/app/components/home/countdown.ts

@@ -6,9 +6,7 @@ export class Countdown {
     public minutes: number = 0;
     public seconds: number = 0;
     public liveDates: Date[] = [        
-        DateTime.fromObject({year: 2020, month: 3, day: 22, hour: 10, zone: 'America/Denver'}),
-        DateTime.fromObject({year: 2020, month: 3, day: 22, hour: 11, zone: 'America/Denver'}),
-        DateTime.fromObject({year: 2020, month: 3, day: 22, hour: 19, zone: 'America/Denver'})
+        DateTime.fromObject({year: 2020, month: 3, day: 22, hour: 11, zone: 'America/Denver'})
     ];
     public showButton: boolean;
     public showCounter: boolean = true;
@@ -74,7 +72,7 @@ export class Countdown {
         var nearestPast = this.getNearestPastDate(now);
         if (nearestPast) {
             var pastDiff = now.diff(nearestPast, ['minutes']);
-            if (pastDiff.minutes < 45) {                
+            if (pastDiff.minutes < 10080) {                
                 this.showButton = true;
                 this.dateDisplay = nearestPast.toLocaleString(DateTime.DATETIME_HUGE);
                 this.dateDisplaySmall = nearestPast.toLocaleString(DateTime.DATETIME_MED);
@@ -92,8 +90,8 @@ export class Countdown {
             this.dateDisplaySmall = '';
             return;
         }
-        var minDiff = nearestFuture.diff(now, ['minutes']);
-        if (minDiff.minutes <= 10) {
+        var secDiff = nearestFuture.diff(now, ['seconds']);
+        if (secDiff.seconds <= 0) {
             this.showButton = true;
         }
 

Client/src/app/components/home/home.component.css

@@ -114,6 +114,9 @@ img.full {
     #countdown-container {
         font-size: 20pt;
     }
+    #live-button {
+        font-size: 20pt;
+    }
 }
 
 .display-sm {
@@ -132,7 +135,7 @@ img.full {
     #countdown-container {
         font-size: 13pt;
         margin-top: 3px;
-    }
+    }    
     .display-none-sm {
         display: none;
     }
@@ -142,6 +145,10 @@ img.full {
     #live-date {
         margin-top: 2px;
     }
+    #live-button {
+        font-size: 18pt;
+        margin-top: -5px;
+    }
 }
 
 
@@ -154,6 +161,14 @@ img.full {
     margin-right: 10px;
 }
 
+.w-200 {
+    width: 200px;
+}
+
+.h-200 {
+    height: 200px;
+}
+
 .action{
     font-weight: bold;
     font-size: 20px;
@@ -290,7 +305,9 @@ img.full {
     margin: 10px;
 }
 
-
+img.m-100-lg {
+    margin-left: 100px;
+}
 
 @media(max-width: 850px){
     .row-content-col-left, .row-content-col-right{
@@ -302,5 +319,8 @@ img.full {
     img.full {
         width: 90%;
     }
+    img.m-100-lg {
+        margin-left: 0;
+    }
     
 }

Client/src/app/components/home/home.component.html

@@ -4,14 +4,14 @@
 <div id="filler">
     <div id="live-stream-container" *ngIf="countdown.showCounter">
         <div id="title">
-            <span class="live">LIVE</span> 
+            <span class="live">VIDEO</span> 
             <span *ngIf="!countdown.showButton"> SERMON STARTS IN</span>
-            <span *ngIf="countdown.showButton"> SERMON STREAMING NOW</span>
+            <span *ngIf="countdown.showButton"> SERMON AVAILABLE NOW</span>
         </div>
         <a id="countdown-container" routerLink="/live" [class.show-button]="countdown.showButton" >
             <div id="live-button" [class.opacity-zero]="!countdown.showButton">
                 <i ofbicon class="mr-10" >live_tv</i>
-                Click to Watch Now
+                Click to Watch
             </div>
             <div [class.opacity-zero]="countdown.showButton">
                 <span class="number">{{countdown.daysDisplay}}</span>
@@ -46,6 +46,28 @@
     </div> 
 
     <div class="row tint" *ngIf="showSpecial" >            
+        <div class="row-content">
+            <div class="row-content-col-left">                    
+                <img class="w-200 h-200 m-100-lg" ofbFadeInOnScroll src="assets/images/home-images/tiny/covid.jpg" height="200">
+            </div>
+            <div class="row-content-col-right align-top center">
+                <p ofbFadeInOnScroll class="row-content-header">COVID-19</p>
+                <p ofbFadeInOnScroll>
+                    Due to the COVID-19 outbreak our church building will be closed until April 1st. Video 
+                    and audio services will be posted online during this time. 
+                </p>
+                <br>
+                <p ofbFadeInOnScroll class="action">
+                    <i ofbicon>live_tv</i> <a routerLink="/live" class="align-top">Click here to watch online</a>
+                </p>
+                <p ofbFadeInOnScroll class="action">
+                    <i ofbicon>headset</i> <a routerLink="/sermons" class="align-top">Click here to listen online</a>
+                </p>
+            </div>                        
+        </div>
+    </div>
+
+    <div class="row tint" *ngIf="showSpecial && 1 === 2" >            
         <div class="row-content">
             <div class="row-content-col-left">                    
                 <a href="assets/images/champ_flyer.jpg" download="champ_flyer.jpg"><img class="full" ofbFadeInOnScroll src="assets/images/home-images/tiny/champ.jpg" height="300"></a>

Client/src/app/components/home/home.component.ts

@@ -12,6 +12,8 @@ import { Countdown } from './countdown';
 export class HomeComponent {
   backgroundTop: string = "0px";
   public get showSpecial() : boolean {
+    return true; //COVID-19
+
     let maxDate = new Date(2018,8,6); // September 6th 2018 -- Set the month one month behind since JavaScript dates are 0 based
     let now = new Date();
     if (now.getFullYear() > maxDate.getFullYear()) return false;

Client/src/app/components/live-stream/live-stream.component.css

@@ -10,4 +10,8 @@
     left: 0;
     width: 100%;
     height: 100%;
+}
+
+.opacity-zero {
+    opacity: 0;
 }

Client/src/app/components/live-stream/live-stream.component.html

@@ -1,7 +1,8 @@
 <secondary-page-component [hideSideBarOnMobile]="true" >
     <div mainContent class="mapWrapper">
         <div class="video-container">
-            <iframe class="video" src="https://www.youtube-nocookie.com/embed/dAxhAF9ZzbAn" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            <img style="width: 100%" *ngIf="!showVideo" [src]="pleaseWait">
+            <video [class.opacity-zero]="!showVideo" *ngIf="!error" style="width:100%" [src]="videoSrc" controls [poster]="poster" (error)="vidError()"></video>   
         </div>        
     </div>
     <div sideBar ofbFadeInOnScroll>

Client/src/app/components/live-stream/live-stream.component.ts

@@ -1,5 +1,6 @@
 import { BibleVerseService } from './../../services/bible-verse.service';
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'live-stream-component',
@@ -7,9 +8,39 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./live-stream.component.css']
 })
 export class LiveStreamComponent implements OnInit {
+ 
+  
+  public sermonVideo: string = 'https://ofbbutte.com/static/media/video/sermon.mp4';
+  public pleaseWait: string = 'https://ofbbutte.com/static/media/video/PleaseWait.jpg';
+  public clickToPlay: string = 'https://ofbbutte.com/static/media/video/ClickToPlay.jpg'; 
+  
+  
+  public videoSrc: string = this.sermonVideo;
+  public poster: string = this.clickToPlay;
+  public error: boolean = false;
+  public showVideo: boolean = false;
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit() {
+    setTimeout(() => {
+      if (!this.error) {
+        this.showVideo = true;
+      }
+    }, 3000)
+  }
+
+  public async vidError() {
+    if (this.videoSrc === '') return;
+    this.error = true;
+    setTimeout(async () => {
+      this.error = false;
+      setTimeout(() => { 
+        if (!this.error) {
+          this.showVideo = true;
+        }
+       }, 3000);
+    }, 3000);
+    
   }
 }