diff --git a/package.json b/package.json
index c080b6a..3916484 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index a9ab0c7..13a6620 100644
--- a/src/app/app.routing.ts
+++ b/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({
diff --git a/src/app/components/lower-third/lower-third.component.html b/src/app/components/lower-third/lower-third.component.html
new file mode 100644
index 0000000..7314dde
--- /dev/null
+++ b/src/app/components/lower-third/lower-third.component.html
@@ -0,0 +1,7 @@
+
+
+
+ {{currentSlides[activeSlide]?.text}}
+
+
+
diff --git a/src/app/components/lower-third/lower-third.component.scss b/src/app/components/lower-third/lower-third.component.scss
new file mode 100644
index 0000000..1a1de34
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/app/components/lower-third/lower-third.component.ts b/src/app/components/lower-third/lower-third.component.ts
new file mode 100644
index 0000000..1141e09
--- /dev/null
+++ b/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);
+ }
+
+}