From 1e422fa9d84b90eb308f4ff8c3bf28c64c747d57 Mon Sep 17 00:00:00 2001
From: dan <ofbadmin@ofbbutte.com>
Date: Sun, 29 Mar 2020 13:12:51 -0600
Subject: [PATCH] Add youtube embeds

---
 Client/src/app/components/home/home.component.html  |  2 +-
 Client/src/app/components/home/video-services.ts    |  1 +
 .../live-stream/live-stream.component.css           |  2 +-
 .../live-stream/live-stream.component.html          |  5 ++++-
 .../components/live-stream/live-stream.component.ts |  2 ++
 .../video-services/video-services.component.css     | 13 +++++++++++++
 .../video-services/video-services.component.html    |  5 ++++-
 Client/src/assets/json/videoServices.json           |  7 ++++---
 8 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/Client/src/app/components/home/home.component.html b/Client/src/app/components/home/home.component.html
index f452364..31984e2 100644
--- a/Client/src/app/components/home/home.component.html
+++ b/Client/src/app/components/home/home.component.html
@@ -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">
diff --git a/Client/src/app/components/home/video-services.ts b/Client/src/app/components/home/video-services.ts
index 937fcee..0d68d89 100644
--- a/Client/src/app/components/home/video-services.ts
+++ b/Client/src/app/components/home/video-services.ts
@@ -8,4 +8,5 @@ export class VideoService {
     src: string;
     date: Date;
     archived: boolean;
+    yt: string;
 }
\ No newline at end of file
diff --git a/Client/src/app/components/live-stream/live-stream.component.css b/Client/src/app/components/live-stream/live-stream.component.css
index f3db060..6799f04 100644
--- a/Client/src/app/components/live-stream/live-stream.component.css
+++ b/Client/src/app/components/live-stream/live-stream.component.css
@@ -4,7 +4,7 @@
     height: 0;
     padding-bottom: 56.25%;
 }
-.video {
+.video-container iframe {
     position: absolute;
     top: 0;
     left: 0;
diff --git a/Client/src/app/components/live-stream/live-stream.component.html b/Client/src/app/components/live-stream/live-stream.component.html
index 714e7d0..5c16181 100644
--- a/Client/src/app/components/live-stream/live-stream.component.html
+++ b/Client/src/app/components/live-stream/live-stream.component.html
@@ -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>
diff --git a/Client/src/app/components/live-stream/live-stream.component.ts b/Client/src/app/components/live-stream/live-stream.component.ts
index e47055c..3dd867d 100644
--- a/Client/src/app/components/live-stream/live-stream.component.ts
+++ b/Client/src/app/components/live-stream/live-stream.component.ts
@@ -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 {
diff --git a/Client/src/app/components/video-services/video-services.component.css b/Client/src/app/components/video-services/video-services.component.css
index e69de29..c88bc7c 100644
--- a/Client/src/app/components/video-services/video-services.component.css
+++ b/Client/src/app/components/video-services/video-services.component.css
@@ -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%;
+  }
\ No newline at end of file
diff --git a/Client/src/app/components/video-services/video-services.component.html b/Client/src/app/components/video-services/video-services.component.html
index 4852c9b..fce9e3f 100644
--- a/Client/src/app/components/video-services/video-services.component.html
+++ b/Client/src/app/components/video-services/video-services.component.html
@@ -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">
diff --git a/Client/src/assets/json/videoServices.json b/Client/src/assets/json/videoServices.json
index ae0af5d..542c34d 100644
--- a/Client/src/assets/json/videoServices.json
+++ b/Client/src/assets/json/videoServices.json
@@ -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,