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

Add youtube embeds

test
dan 2020-03-29 13:12:51 -06:00
parent cd64706b30
commit 1e422fa9d8
8 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<img id="background-image" src="assets/images/home-images/tiny/wood.jpg" alt="background image" width="100%">
<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 && countdown.showCounter">

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

@ -8,4 +8,5 @@ export class VideoService {
src: string;
date: Date;
archived: boolean;
yt: string;
}

2
Client/src/app/components/live-stream/live-stream.component.css
View File

@ -4,7 +4,7 @@
height: 0;
padding-bottom: 56.25%;
}
.video {
.video-container iframe {
position: absolute;
top: 0;
left: 0;

5
Client/src/app/components/live-stream/live-stream.component.html
View File

@ -1,8 +1,11 @@
<secondary-page-component [hideSideBarOnMobile]="true" >
<div mainContent class="mapWrapper">
<h2 *ngIf="!showVideo">{{message}}</h2>
<div class="video-container" *ngIf="showVideo">
<div class="video-container" *ngIf="showVideo && !yt">
<video [class.opacity-zero]="!showVideo" *ngIf="!error" style="width:100%" [src]="videoSrc" controls [poster]="poster" (error)="vidError()"></video>
</div>
<div *ngIf="showVideo && yt" class="video-container">
<iframe [src]="yt | safeUrl" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div style="margin-top: 10px">
<button routerLink="/video" style="margin-top:5px; width:100%;" mat-stroked-button>

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

@ -21,6 +21,7 @@ export class LiveStreamComponent implements OnInit {
public videoSrc: string = this.sermonVideo;
public yt: string;
public poster: string = this.clickToPlay;
public error: boolean = false;
public showVideo: boolean = false;
@ -52,6 +53,7 @@ export class LiveStreamComponent implements OnInit {
this.showVideo = true;
this.videoSrc = '';
this.videoSrc = service.src;
this.yt = service.yt;
clearInterval(this.interval);
}
} else {

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

@ -0,0 +1,13 @@
.yt-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.yt-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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

@ -5,7 +5,10 @@
<i ofbicon class="mr-10" >live_tv</i>
{{getTitle(i)}}
</button>
<video style="width:100%" *ngIf="video.show" src="{{video.src}}" controls poster="https://ofbbutte.com/static/media/video/ClickToPlay.jpg"></video>
<div *ngIf="video.show && video.yt" class="yt-container">
<iframe [src]="video.yt | safeUrl" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<video style="width:100%" *ngIf="video.show && !video.yt" src="{{video.src}}" controls poster="https://ofbbutte.com/static/media/video/ClickToPlay.jpg"></video>
</div>
</div>
<div sideBar class="side-bar">

7
Client/src/assets/json/videoServices.json
View File

@ -1,12 +1,13 @@
{
"videos": [
{
"isReady": false,
"isReady": true,
"title": "Sunday Morning",
"src": "https://ofbbutte.com/static/media/video/2020-03-29 1100 Pastor Derek Loewen.mp4",
"date": "2020-03-29T11:00:00-06:00",
"yt": "https://www.youtube.com/embed/kqipYdaQc3k",
"date": "2020-03-29T11:00:00-06:00",
"archived": false,
"message": "Please Stay Tuned Until 3/29/2020 at 11:00 AM MDT"
"message": "Please Wait... Service will begin in aproximately 15 minutes"
},
{
"isReady": true,