lower thirds/green screen view

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openlp/web-remote",
-  "version": "0.9.5",
+  "version": "0.9.10",
   "description": "The web remote for OpenLP, written in Angular",
   "keywords": [
     "OpenLP",

src/app/app.routing.ts

@@ -9,6 +9,7 @@ import { ChordViewComponent } from './components/chord-view/chord-view.component
 import { MainViewComponent } from './components/main-view/main-view.component';
 import { StageViewComponent } from './components/stage-view/stage-view.component';
 import { ThemesComponent } from './components/themes/themes.component';
+import { LowerThirdComponent } from './components/lower-third/lower-third.component';
 import { SettingsComponent } from './components/settings/settings.component';
 
 const routes: Routes = [
@@ -21,6 +22,7 @@ const routes: Routes = [
     { path: 'main', component: MainViewComponent },
     { path: 'stage', component: StageViewComponent },
     { path: 'themes', component: ThemesComponent},
+    { path: 'lower-third', component: LowerThirdComponent},
     { path: 'settings', component: SettingsComponent}
 ];
 @NgModule({

src/app/components/lower-third/lower-third.component.html

@@ -0,0 +1,7 @@
+<div class="lower-third">
+  <div class="slide">
+    <div class="slide-item" [style.font-size]="fontSize" [style.font-family]="fontFamily">
+      {{currentSlides[activeSlide]?.text}}
+    </div>
+  </div>
+</div>

src/app/components/lower-third/lower-third.component.scss

@@ -0,0 +1,32 @@
+.lower-third {
+    background:#00FF00;
+    min-height: 100vh;
+    justify-content: flex-end;
+    flex-direction: column;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    &:not(.embedded) {
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 1200;
+    }
+
+    .slide {
+        margin-left: 2.5rem;
+        margin-right: 2.5rem;
+        white-space: pre-wrap;
+        margin-bottom: 2rem;
+        flex: 0;
+        text-align: center;
+    }
+
+    .slide-item {
+        font-size: 28pt;
+        line-height: 1.15;
+        font-weight: 700;
+        color: white;
+        text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.7);
+    }
+}

src/app/components/lower-third/lower-third.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { SettingsProperties, SettingsService } from 'src/app/settings.service';
+import { OpenLPService } from '../../openlp.service';
+import { ServiceItem, Slide } from '../../responses';
+
+@Component({
+  selector: 'app-lower-third',
+  templateUrl: './lower-third.component.html',
+  styleUrls: ['./lower-third.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class LowerThirdComponent implements OnInit, OnDestroy {
+  @Input() embedded = false;
+  serviceItem: ServiceItem = null;
+  currentSlides: Slide[] = [];
+  activeSlide = 0;
+  fontSize = '29pt';
+  fontFamily = null;
+
+  serviceItemSubscription$: Subscription = null;
+
+  constructor(
+    public openlpService: OpenLPService,
+    protected route: ActivatedRoute,
+    protected settingsService: SettingsService,
+    protected ref: ChangeDetectorRef
+  ) {
+    this.route.queryParams.subscribe(params => {
+      this.fontSize = params['font-size'];
+      this.fontFamily = params['font-family'];
+    });
+  }
+
+  ngOnInit() {
+    this.updateCurrentSlides(null, null);
+    this.openlpService.stateChanged$.subscribe(item => this.updateCurrentSlides(item.item, item.slide));
+  }
+
+  ngOnDestroy(): void {
+  }
+
+  updateCurrentSlides(serviceItemId: string, currentSlide: number): void {
+    this.serviceItemSubscription$?.unsubscribe();
+    this.serviceItemSubscription$ = this.openlpService.getServiceItem().subscribe(serviceItem => {
+      this.serviceItem = serviceItem;
+      if (serviceItem instanceof Array) {
+        this.setNewSlides(serviceItem, currentSlide);
+      }
+      else {
+        this.setNewSlides(serviceItem.slides, currentSlide);
+       }
+    });
+  }
+
+  setNewSlides(slides: Slide[], currentSlide: number): void {
+    if (slides.length === 0) {
+      return;
+    }
+    this.currentSlides = slides;
+    this.activeSlide = slides.findIndex(s => s.selected);
+   }
+
+}