Add main view

src/app/components/main-view/main-view.component.html

@@ -1,3 +1,3 @@
-<p>
-  main-view works!
-</p>
+<div class="overlay">
+  <img src="{{ img }}">
+</div>

src/app/components/main-view/main-view.component.scss

@@ -0,0 +1,8 @@
+img {
+    position: absolute;
+    top: 0;
+    vertical-align: middle;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+}

src/app/components/main-view/main-view.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { OpenLPService } from '../../openlp.service';
 
 @Component({
   selector: 'app-main-view',
@@ -6,10 +7,15 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./main-view.component.scss', '../overlay.scss']
 })
 export class MainViewComponent implements OnInit {
-
-  constructor() { }
+  img: string;
+  constructor(private openlpService: OpenLPService) { }
 
   ngOnInit() {
+    this.openlpService.stateChanged$.subscribe(item => this.updateImage());
+  }
+
+  updateImage(): void {
+    this.openlpService.getMainImage().subscribe(view => this.img = view.slide_image);
   }
 
 }

src/app/openlp.service.ts

@@ -4,7 +4,8 @@ import { URLSearchParams, Http } from '@angular/http';
 
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
-import { PluginDescription, State, Slide, ServiceItem } from './responses';
+
+import { PluginDescription, State, Slide, ServiceItem, MainView } from './responses';
 import { environment } from '../environments/environment';
 
 let deserialize = (json, cls) => {
@@ -46,6 +47,10 @@ export class OpenLPService {
     }
   }
 
+  getMainImage(): Observable<MainView> {
+    return this.http.get<MainView>(`${this.apiURL}/main/image`);
+  }
+
   getItemSlides(): Observable<Slide[]> {
     return this.http.get<Slide[]>(`${this.apiURL}/controller/live/text`);
   }

src/app/responses.ts

@@ -33,4 +33,8 @@ export interface ServiceItem {
     plugin: string;
     selected: boolean;
     title: string;
+}
+
+export interface MainView {
+	slide_image: string;
 }