djabsher
/
UIAngular
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update countdown and services

test
dan 2020-03-22 17:04:28 -06:00
parent c8ff77211d
commit 52caeed90f
12 changed files with 136 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Client/src/app/app-routing.module.ts
View File

@ -17,6 +17,7 @@ import { MissionaryFormPageComponent } from './components/missionary-form-page/m
import { ContributorYearlyReportComponent } from './components/contributor-yearly-report/contributor-yearly-report.component';
import { ContributorAllReportsComponent } from './components/contributor-all-reports/contributor-all-reports.component';
import { LiveStreamComponent } from './components/live-stream/live-stream.component';
import { VideoServicesComponent } from './components/video-services/video-services.component';
const routes =
[
@ -48,6 +49,10 @@ const routes =
path: 'sermons',
component: SermonsComponent
},
{
path: 'video',
component: VideoServicesComponent
},
{
path: 'sermons/:id',
component: SermonsComponent

2
Client/src/app/app.module.ts
View File

@ -77,6 +77,7 @@ import { MissionarySupportService } from './services/missionary-support-service'
import { ContributorYearlyReportComponent } from './components/contributor-yearly-report/contributor-yearly-report.component';
import { ContributorAllReportsComponent } from './components/contributor-all-reports/contributor-all-reports.component';
import { LiveStreamComponent } from './components/live-stream/live-stream.component';
import { VideoServicesComponent } from './components/video-services/video-services.component';
@ -101,6 +102,7 @@ import { LiveStreamComponent } from './components/live-stream/live-stream.compon
DurationPipe,
LocationComponent,
SermonLargeComponent,
VideoServicesComponent,
AddSermonPopupComponent,
LoginPopupComponent,
OkPopupComponent,

47
Client/src/app/components/home/countdown.ts
View File

@ -1,13 +1,12 @@
import { DateTime } from "luxon";
import { VideoServices, VideoService } from './video-services';
export class Countdown {
public days: number = 0;
public hours: number = 0;
public minutes: number = 0;
public seconds: number = 0;
public liveDates: Date[] = [
DateTime.fromObject({year: 2020, month: 3, day: 22, hour: 11, zone: 'America/Denver'})
];
public services: VideoService[] = [];
public showButton: boolean;
public showCounter: boolean = true;
@ -48,11 +47,15 @@ export class Countdown {
private clock;
constructor() {
if (this.liveDates.length == 0) return;
this.liveDates.sort((a, b) => {
if (a < b) return -1;
if (a === b) return 0;
constructor(services: VideoService[]) {
if (!services || services.length == 0) return;
this.services = services;
this.services.forEach(v => {
v.date = DateTime.fromISO(v.date, {zone: 'America/Denver'})
});
this.services.sort((a, b) => {
if (a.date < b.date) return -1;
if (a.date === b.date) return 0;
return 1;
});
this.updateClock();
@ -69,10 +72,10 @@ export class Countdown {
private updateClock() {
this.showCounter = true;
var now = DateTime.local();
var nearestPast = this.getNearestPastDate(now);
var nearestPast = this.getNearestPastDate(now).date;
if (nearestPast) {
var pastDiff = now.diff(nearestPast, ['minutes']);
if (pastDiff.minutes < 10080) {
if (pastDiff.minutes < 240) {
this.showButton = true;
this.dateDisplay = nearestPast.toLocaleString(DateTime.DATETIME_HUGE);
this.dateDisplaySmall = nearestPast.toLocaleString(DateTime.DATETIME_MED);
@ -81,7 +84,7 @@ export class Countdown {
}
this.showButton = false;
var nearestFuture = this.getNearestFutureDate(now);
var nearestFuture = this.getNearestFutureDate(now).date;
if (!nearestFuture) {
this.stopClock();
this.resetToZero();
@ -90,12 +93,12 @@ export class Countdown {
this.dateDisplaySmall = '';
return;
}
var secDiff = nearestFuture.diff(now, ['seconds']);
var secDiff = (<DateTime>nearestFuture).diff(now, ['seconds']);
if (secDiff.seconds <= 0) {
this.showButton = true;
}
var hourDiff = nearestFuture.diff(now, ['hours']);
var hourDiff = (<DateTime>nearestFuture).diff(now, ['hours']);
if (hourDiff.hours >= 48) {
this.showCounter = false;
this.dateDisplay = '';
@ -103,7 +106,7 @@ export class Countdown {
return;
}
var diff = nearestFuture.diff(now, ['days', 'hours', 'minutes', 'seconds']);
var diff = (<DateTime>nearestFuture).diff(now, ['days', 'hours', 'minutes', 'seconds']);
this.days = diff.days;
this.hours = diff.hours;
this.minutes = diff.minutes;
@ -120,19 +123,19 @@ export class Countdown {
clearInterval(this.clock);
}
private getNearestPastDate(now: DateTime): DateTime {
if (this.liveDates.length === 0) return null;
private getNearestPastDate(now: DateTime): VideoService {
if (this.services.length === 0) return null;
var now = now || DateTime.local();
var nearestIndex = this.liveDates.findIndex(d => d > now);
var nearestIndex = this.services.findIndex(s => s.date > now);
if (nearestIndex === 0) return null;
if (nearestIndex === -1) return this.liveDates[this.liveDates.length - 1];
return this.liveDates[nearestIndex - 1];
if (nearestIndex === -1) return this.services[this.services.length - 1];
return this.services[nearestIndex - 1];
}
private getNearestFutureDate(now: DateTime): DateTime {
if (this.liveDates.length === 0) return null;
private getNearestFutureDate(now: DateTime): VideoService {
if (this.services.length === 0) return null;
var now = now || DateTime.local();
var nearest = this.liveDates.find(d => d > now);
var nearest = this.services.find(s => s.date > now);
return nearest;
}

8
Client/src/app/components/home/home.component.html
View File

@ -2,11 +2,11 @@
<img id="background-image" src="assets/images/home-images/tiny/sunset_b.jpg" alt="background image" width="100%">
<div id="filler">
<div id="live-stream-container" *ngIf="countdown.showCounter">
<div id="live-stream-container" *ngIf="countdown && countdown.showCounter">
<div id="title">
<span class="live">VIDEO</span>
<span *ngIf="!countdown.showButton"> SERMON STARTS IN</span>
<span *ngIf="countdown.showButton"> SERMON AVAILABLE NOW</span>
<span *ngIf="!countdown.showButton"> SERVICE STARTS IN</span>
<span *ngIf="countdown.showButton"> SERVICE AVAILABLE NOW</span>
</div>
<a id="countdown-container" routerLink="/live" [class.show-button]="countdown.showButton" >
<div id="live-button" [class.opacity-zero]="!countdown.showButton">
@ -58,7 +58,7 @@
</p>
<br>
<p ofbFadeInOnScroll class="action">
<i ofbicon>live_tv</i> <a routerLink="/live" class="align-top">Click here to watch online</a>
<i ofbicon>live_tv</i> <a routerLink="/video" 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>

10
Client/src/app/components/home/home.component.ts
View File

@ -3,6 +3,8 @@ import { MatDialog, MatDialogConfig } from '@angular/material';
import { VideoPopupComponent } from '../popups/video-popup/video-popup.component';
import { environment } from '../../../environments/environment';
import { Countdown } from './countdown';
import { HttpClient } from '@angular/common/http';
import { VideoServices } from './video-services';
@Component({
selector: 'home-component',
@ -51,12 +53,12 @@ export class HomeComponent {
}
public countdown: Countdown;
public liveDates: Date[] = [];
constructor(private dialog: MatDialog)
constructor(private dialog: MatDialog, private http: HttpClient)
{
this.countdown = new Countdown();
this.liveDates = [];
this.http.get<VideoServices>('assets/json/videoServices.json').subscribe(res => {
this.countdown = new Countdown(res.videos);
});
}
@HostListener('window:scroll', ['$event'])

11
Client/src/app/components/home/video-services.ts 100644
View File

@ -0,0 +1,11 @@
export class VideoServices {
videos: VideoService[];
}
export class VideoService {
isReady: boolean;
title: string;
src: string;
date: Date;
archived: boolean;
}

25
Client/src/app/components/live-stream/live-stream.component.ts
View File

@ -2,6 +2,7 @@ import { BibleVerseService } from './../../services/bible-verse.service';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { VideoServices } from '../home/video-services';
@Component({
selector: 'live-stream-component',
@ -28,16 +29,20 @@ export class LiveStreamComponent implements OnInit {
private interval;
ngOnInit() {
this.interval = setInterval(() => {
this.http.get('assets/json/message.json').subscribe(res => {
console.log(res);
this.message = (<any>res).message;
this.isReady= (<any>res).isReady;
if (this.isReady === true) {
this.showVideo = true;
this.videoSrc = '';
this.videoSrc = this.sermonVideo;
clearInterval(this.interval);
}
this.http.get<VideoServices>('assets/json/videoServices.json').subscribe(res => {
var nonArchivedReady = res.videos.filter(v => v.archived === false);
if (nonArchivedReady && nonArchivedReady.length > 0) {
var service = nonArchivedReady[0];
this.message = (<any>service).message;
if (service.isReady === true) {
if (this.isReady === true) {
this.showVideo = true;
this.videoSrc = '';
this.videoSrc = service.src;
clearInterval(this.interval);
}
}
}
});
}, 3000);

0
Client/src/app/components/video-services/video-services.component.css 100644
View File

14
Client/src/app/components/video-services/video-services.component.html 100644
View File

@ -0,0 +1,14 @@
<secondary-page-component [hideSideBarOnMobile]="true" >
<div mainContent>
<div *ngFor="let video of services; let i = index;">
<button (click)="showVideo(i)" mat-stroked-button>
<i ofbicon class="mr-10" >live_tv</i>
{{video.title}}
</button>
<video style="width:100%" *ngIf="video.show" src="{{video.src}}"></video>
</div>
</div>
<div sideBar class="side-bar">
</div>
</secondary-page-component>

35
Client/src/app/components/video-services/video-services.component.ts 100644
View File

@ -0,0 +1,35 @@
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';
@Component({
selector: 'video-services-component',
templateUrl: './video-services.component.html',
styleUrls: ['./video-services.component.css'],
})
export class VideoServicesComponent implements OnInit {
public loading: boolean = true;
public services: VideoService[];
constructor(private http: HttpClient){ }
ngOnInit(){
this.http.get<VideoServices>('assets/json/videoServices.json')
.subscribe(res => {
this.services = res.videos.filter(v => v.isReady === true);
this.loading = false;
});
}
showVideo(index: number) {
this.services.forEach(s => {
(<any>s).show = false;
});
(<any>this.services[index]).show = true;
}
}

4
Client/src/assets/json/message.json
View File

@ -1,4 +0,0 @@
{
"isReady":false,
"message": "Please Wait..."
}

19
Client/src/assets/json/videoServices.json 100644
View File

@ -0,0 +1,19 @@
{
"videos": [
{
"isReady": false,
"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"
},
{
"isReady": true,
"title": "Sunday Morning",
"src": "https://ofbbutte.com/static/media/video/sermon.mp4",
"date": "2020-03-22T11:00:00-06:00",
"archived": true
}
]
}