lower thirds/green screen view

This commit is contained in:
Jenda 2023-02-16 16:29:08 +00:00 committed by Raoul Snyman
parent ca9ca91ac9
commit e19187d281
5 changed files with 107 additions and 1 deletions

View File

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

View File

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

View File

@ -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>

View File

@ -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);
}
}

View File

@ -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);
}
}