Add Sledding Video

Client/src/app/app.module.ts

@@ -45,6 +45,8 @@ import { ContactPageComponent } from './components/contact-page/contact-page.com
 import { SharePopupComponent } from './components/popups/share-popup/share-popup.component';
 import { EventLargeComponent } from './components/event-large/event-large.component';
 import { SalvationPageComponent } from './components/salvation-page/salvation-page.component';
+import { MediaPageComponent } from './components/media-page/media-page.component';
+import { VideoPopupComponent } from './components/popups/video-popup/video-popup.component';
 
 //Directives
 import { FadeInOnScrollDirective } from './directives/fade-in-on-scroll.directive';
@@ -58,6 +60,8 @@ import { OfbDatePipe } from './pipes/ofb-date.pipe';
 // Routing
 import { AppRoutingModule } from './app-routing.module';
 
+
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -92,7 +96,9 @@ import { AppRoutingModule } from './app-routing.module';
     AddEventPopupComponent,
     EventLargeComponent,
     OfbDatePipe,
-    SalvationPageComponent
+    SalvationPageComponent,
+    MediaPageComponent,
+    VideoPopupComponent
   ],
   imports: [
     BrowserModule,
@@ -115,7 +121,8 @@ import { AppRoutingModule } from './app-routing.module';
                     YesNoPopupComponent,
                     UpdateSermonPopupComponent,
                     SharePopupComponent,
-                    AddEventPopupComponent],
+                    AddEventPopupComponent,
+                    VideoPopupComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -22,6 +22,23 @@ img.full {
     height: auto;
 }
 
+#call-to-action-container {
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 10%;
+}
+
+#action-button {
+    font-size: 16pt;
+    max-width: 100%;
+}
+
+.mr-10 {
+    margin-right: 10px;
+}
+
 .action{
     font-weight: bold;
     font-size: 20px;
@@ -129,7 +146,8 @@ img.full {
 
 #filler{
     width: 100%;
-    padding-bottom: 35%;    
+    padding-bottom: 35%;   
+    position: relative; 
 }
 
 .center{

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

@@ -2,7 +2,9 @@
 <img id="background-image" src="assets/images/home-images/tiny/sunset_b.jpg" alt="background image" width="100%">
 
 <div id="filler">
-
+    <div id="call-to-action-container">
+        <button id="action-button" (click)="actionClick()" mat-raised-button color="accent"><i ofbicon class="mr-10">play_arrow</i>2019 Sledding Highlights</button>
+    </div>    
 </div>
 
 <div id="content-wrapper">

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

@@ -1,4 +1,7 @@
 import { Component, HostListener } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material';
+import { VideoPopupComponent } from '../popups/video-popup/video-popup.component';
+import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'home-component',
@@ -20,9 +23,22 @@ export class HomeComponent {
     return true;
   }
 
+  constructor(private dialog: MatDialog)
+  {
+
+  }
+
   @HostListener('window:scroll', ['$event'])
   onScroll(event){
     let scrollTop = event.target.documentElement.scrollTop || event.target.body.scrollTop || window.pageYOffset;
     //this.backgroundTop = Math.min((scrollTop * .30),100) * -1 + "px";
   }
+
+  actionClick() {
+    let opts = new MatDialogConfig;
+    let baseUrl = environment.production === true ? "" : "https://ofbbutte.com/";
+    opts.data = { videoSrc: baseUrl + 'static/media/video/Sledding2019.mp4', posterSrc: baseUrl + 'static/media/video/Sledding2019Poster.jpg' };
+    opts.closeOnNavigation = true;
+    let dialog = this.dialog.open(VideoPopupComponent, opts)
+  }
 }

Client/src/app/components/media-page/media-page.component.html

@@ -0,0 +1,3 @@
+<p>
+  media-page works!
+</p>

Client/src/app/components/media-page/media-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaPageComponent } from './media-page.component';
+
+describe('MediaPageComponent', () => {
+  let component: MediaPageComponent;
+  let fixture: ComponentFixture<MediaPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MediaPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MediaPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Client/src/app/components/media-page/media-page.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-media-page',
+  templateUrl: './media-page.component.html',
+  styleUrls: ['./media-page.component.css']
+})
+export class MediaPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

Client/src/app/components/popups/video-popup/video-popup.component.css

@@ -0,0 +1,26 @@
+video {
+    max-width: 100%;
+}
+
+h2 {
+    display: inline-block;
+    margin-bottom: 15px;
+    width: calc(100% - 50px);
+}
+
+hr{
+    margin-bottom: 15px;
+}
+
+i {
+    font-size: 24pt;
+
+}
+
+.vertical-align-top {
+    vertical-align: top;
+}
+
+.align-right {
+    text-align: right;
+}

Client/src/app/components/popups/video-popup/video-popup.component.html

@@ -0,0 +1,10 @@
+<div md-dialog-title>
+  <h2>2019 Sledding Highlights</h2>
+  <button mat-icon-button (click)="close()" class="vertical-align-top">
+    <i ofbicon>close</i>
+  </button>
+</div>
+<hr color="primary">
+<div md-dialog-content>
+  <video width="1280" [src]="videoSrc" controls [poster]="posterSrc"></video>   
+</div>

Client/src/app/components/popups/video-popup/video-popup.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VideoPopupComponent } from './video-popup.component';
+
+describe('VideoPopupComponent', () => {
+  let component: VideoPopupComponent;
+  let fixture: ComponentFixture<VideoPopupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VideoPopupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VideoPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Client/src/app/components/popups/video-popup/video-popup.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+
+@Component({
+  selector: 'app-video-popup',
+  templateUrl: './video-popup.component.html',
+  styleUrls: ['./video-popup.component.css']
+})
+export class VideoPopupComponent implements OnInit {
+
+  public videoSrc: string;
+  public posterSrc: string;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private MatDialogRef: MatDialogRef<VideoPopupComponent>) { 
+    this.videoSrc = data.videoSrc;
+    this.posterSrc = data.posterSrc;
+  }
+
+  ngOnInit() {
+  }
+
+  public close() {
+    this.MatDialogRef.close();
+  }
+}