update countdown and archived

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

@@ -72,20 +72,9 @@ export class Countdown {
     private updateClock() {
         this.showCounter = true;
         var now = DateTime.local();
-        var nearestPast = this.getNearestPastDate(now).date;
-        if (nearestPast) {
-            var pastDiff = now.diff(nearestPast, ['minutes']);
-            if (pastDiff.minutes < 240) {                
-                this.showButton = true;
-                this.dateDisplay = nearestPast.toLocaleString(DateTime.DATETIME_HUGE);
-                this.dateDisplaySmall = nearestPast.toLocaleString(DateTime.DATETIME_MED);
-                return;
-            } 
-        }
 
-        this.showButton = false;
+        var firstNonArchived = this.getFirstNonArchived(now);
-        var nearestFuture = this.getNearestFutureDate(now).date;        
+        if (!firstNonArchived) {
-        if (!nearestFuture) {
             this.stopClock();
             this.resetToZero();
             this.showCounter = false;
@@ -93,26 +82,27 @@ export class Countdown {
             this.dateDisplaySmall = '';
             return;
         }
-        var secDiff = (<DateTime>nearestFuture).diff(now, ['seconds']);
-        if (secDiff.seconds <= 0) {
-            this.showButton = true;
-        }
 
-        var hourDiff = (<DateTime>nearestFuture).diff(now, ['hours']);
+        var hourDiff = (<DateTime>firstNonArchived.date).diff(now, ['hours']);
         if (hourDiff.hours >= 48) {
             this.showCounter = false;
             this.dateDisplay = '';
             this.dateDisplaySmall = '';
             return;
-        }        
+        } 
 
-        var diff = (<DateTime>nearestFuture).diff(now, ['days', 'hours', 'minutes', 'seconds']);
+        var secDiff = (<DateTime>firstNonArchived.date).diff(now, ['seconds']);
+        if (secDiff.seconds <= 0) {
+            this.showButton = true;            
+        }      
+
+        var diff = (<DateTime>firstNonArchived.date).diff(now, ['days', 'hours', 'minutes', 'seconds']);
         this.days = diff.days;
         this.hours = diff.hours;
         this.minutes = diff.minutes;
         this.seconds = Math.floor(diff.seconds);
-        this.dateDisplay = nearestFuture.toLocaleString(DateTime.DATETIME_HUGE);
+        this.dateDisplay = firstNonArchived.date.toLocaleString(DateTime.DATETIME_HUGE);
-        this.dateDisplaySmall = nearestFuture.toLocaleString(DateTime.DATETIME_MED)
+        this.dateDisplaySmall = firstNonArchived.date.toLocaleString(DateTime.DATETIME_MED)
     }
 
     private startClock() {
@@ -123,13 +113,23 @@ export class Countdown {
         clearInterval(this.clock);
     }
 
+    private getFirstNonArchived(now: DateTime): VideoService {
+        if (this.services.length === 0) return null;
+        const nonArchived = this.services.filter(s => s.archived === false);
+        if (!nonArchived || nonArchived.length === 0) return null;
+        return nonArchived[0];
+    }
+
     private getNearestPastDate(now: DateTime): VideoService {
         if (this.services.length === 0) return null;
+        const archived = this.services.filter(s => s.archived === false);
+        if (!archived || archived.length === 0) return null;
+
         var now = now || DateTime.local();
-        var nearestIndex = this.services.findIndex(s => s.date > now);
+        var nearestIndex = archived.findIndex(s => s.date > now);
         if (nearestIndex === 0) return null;
-        if (nearestIndex === -1) return this.services[this.services.length - 1];
+        if (nearestIndex === -1) return archived[archived.length - 1];
-        return this.services[nearestIndex - 1];
+        return archived[nearestIndex - 1];
     }
 
     private getNearestFutureDate(now: DateTime): VideoService {

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

@@ -3,6 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
 import { VideoServices } from '../home/video-services';
+import { DateTime } from "luxon";
 
 @Component({
   selector: 'live-stream-component',
@@ -30,9 +31,16 @@ export class LiveStreamComponent implements OnInit {
   ngOnInit() {
     this.interval = setInterval(() => {
       this.http.get<VideoServices>('assets/json/videoServices.json').subscribe(res => {
-        var nonArchivedReady = res.videos.filter(v => v.archived === false);
+        res.videos = res.videos.filter(v => v.archived === false);
-        if (nonArchivedReady && nonArchivedReady.length > 0) {
+        res.videos.forEach(v => v.date = DateTime.fromISO(v.date, {zone: 'America/Denver'}));
-          var service = nonArchivedReady[0];
+        res.videos.sort((a, b) => {
+          if (a.date < b.date) return -1;
+          if (a.date === b.date) return 0;
+          return 1;
+        });
+        var service = res.videos[0];
+        
+        if (service) {
           this.message = (<any>service).message;
           if (service.isReady === true) {
             this.showVideo = true;
@@ -40,17 +48,11 @@ export class LiveStreamComponent implements OnInit {
               this.videoSrc = service.src;
               clearInterval(this.interval);
           }
-        }        
+        }  else {
+          this.message = 'No Live Services';
+        }      
       });
     }, 3000);
-
-    // setTimeout(() => {
-    //   this.isReady = true;
-    //   this.showVideo = true;
-    //   this.videoSrc = '';
-    //   this.videoSrc = this.videoSrc;
-    //   clearInterval(this.interval);
-    // }, 12000)
     
   }
 

Client/src/app/components/video-services/video-services.component.html

@@ -1,11 +1,11 @@
 <secondary-page-component [hideSideBarOnMobile]="true" >
     <div mainContent>
-        <div *ngFor="let video of services; let i = index;">
+        <div *ngFor="let video of services; let i = index;" style="margin-top: 10px;">
-            <button (click)="showVideo(i)" mat-stroked-button>
+            <button (click)="showVideo(i)" mat-stroked-button style="margin-bottom: 10px;">
                 <i ofbicon class="mr-10" >live_tv</i>
-                {{video.title}}
+                {{getTitle(i)}}
             </button>
-            <video style="width:100%" *ngIf="video.show" src="{{video.src}}"></video>
+            <video style="width:100%" *ngIf="video.show" src="{{video.src}}" controls poster="https://ofbbutte.com/static/media/video/ClickToPlay.jpg"></video>
         </div>      
     </div>
     <div sideBar class="side-bar">

Client/src/app/components/video-services/video-services.component.ts

@@ -2,7 +2,7 @@ import { WindowRefService } from './../../services/window-ref.service';
 import { Component, HostListener, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { VideoServices, VideoService } from '../home/video-services';
-import { take } from 'rxjs/operators';
+import { DateTime } from "luxon";
 
 
 
@@ -32,4 +32,10 @@ export class VideoServicesComponent implements OnInit {
     });
     (<any>this.services[index]).show = true;
     }
+
+    getTitle(index: number): string {
+        const title = this.services[index].title;
+        const dte = DateTime.fromISO(this.services[index].date, {zone: 'America/Denver'})
+        return title + ' | ' + dte.toLocaleString(DateTime.DATETIME_MED);
+    }
 }

Client/src/assets/json/videoServices.json

@@ -2,11 +2,19 @@
     "videos": [
         {
             "isReady": false,
+            "title": "Wednesday Evening",
+            "src": "https://ofbbutte.com/static/media/video/2020-03-25 1900 Pastor Derek Loewen.mp4",
+            "date": "2020-03-25T19:00:00-06:00",
+            "archived": false,
+            "message": "Please Stay Tuned Until 3/25/2020 at 7:00 PM MDT"
+        },
+        {
+            "isReady": true,
             "title": "Sunday Evening",
             "src": "https://ofbbutte.com/static/media/video/2020-03-22 1900 Pastor Derek Loewen.mp4",
             "date": "2020-03-22T19:00:00-06:00",
             "archived": false,
-            "message": "Please Stay Tuned Until 3/22/2020 at 7 PM MDT"
+            "message": "Please Stay Tuned Until 3/22/2020 at 7:00 PM MDT"
         },
         {
             "isReady": true,