openlp
/
web-remote
mirror of https://gitlab.com/openlp/web-remote.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'fix-owndisplay-items-errors' into 'master' 

Fixing media + images on Chord and Stage View + refactoring individal slides of Chord and Stage

See merge request openlp/web-remote!48
This commit is contained in:
Raoul Snyman 2022-12-21 19:51:50 +00:00
parent a54ff79ca1 8503d57e31
commit 11fc8bedaa
11 changed files with 105 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -43,6 +43,8 @@ import { SlideListComponent } from './components/slides/slide-list/slide-list.co
import { SlideItemComponent } from './components/slides/slide-item/slide-item.component';
import { ServiceItemComponent } from './components/service/service-item/service-item.component';
import { ServiceListComponent } from './components/service/service-list/service-list.component';
import { ChordViewItemComponent } from './components/chord-view/chord-view-item/chord-view-item.component';
import { StageViewItemComponent } from './components/stage-view/stage-view-item/stage-view-item.component';
import { DisplayModeSelectorComponent } from './components/display-mode-selector/display-mode-selector.component';
@ -51,6 +53,8 @@ import { DisplayModeSelectorComponent } from './components/display-mode-selector
AppComponent,
ChordViewComponent,
StageViewComponent,
StageViewItemComponent,
ChordViewItemComponent,
Nl2BrPipe,
MainViewComponent,
ChordProPipe,

7
src/app/components/chord-view/chord-view-item/chord-view-item.component.html Normal file
View File

@ -0,0 +1,7 @@
<div
class="slide song"
[class.currentSlide]="active"
[class.mat-headline-2]="active"
[class.first]="!active && slide.first_slide_of_tag"
[innerHTML]="chordproFormatted(slide)|chordpro">
</div>

22
src/app/components/chord-view/chord-view-item/chord-view-item.component.ts Normal file
View File

@ -0,0 +1,22 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { Slide } from '../../../responses';
@Component({
selector: 'app-chord-view-item',
templateUrl: './chord-view-item.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChordViewItemComponent {
@Input() slide: Slide;
@Input() active = false;
chordproFormatted(slide: Slide): string {
if (!slide) {
return '';
}
let chordpro: string = slide.chords;
chordpro = chordpro.replace(/<br>/g, '\n');
return chordpro;
}
}

21
src/app/components/chord-view/chord-view.component.html
View File

@ -4,14 +4,21 @@
<span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
</div>
<div class="container">
<div class="slide currentSlide song mat-headline-2" [innerHTML]="chordproFormatted(currentSlides[activeSlide])|chordpro"></div>
<app-chord-view-item
[slide]="currentSlides[activeSlide]"
[active]="true"
*ngIf="currentSlides[activeSlide]?.chords; else elseSlideNoChords"
></app-chord-view-item>
<ng-template #elseSlideNoChords>
<app-stage-view-item [slide]="currentSlides[activeSlide]" [active]="true"></app-stage-view-item>
</ng-template>
<div class="nextSlides">
<div
class="slide song"
[class.first]="slide.first_slide_of_tag"
*ngFor="let slide of nextSlides"
[innerHTML]="chordproFormatted(slide)|chordpro">
</div>
<ng-container *ngFor="let slide of nextSlides">
<app-chord-view-item [slide]="slide" *ngIf="slide?.chords; else elseNextSlideNoChords"></app-chord-view-item>
<ng-template #elseNextSlideNoChords>
<app-stage-view-item [slide]="slide"></app-stage-view-item>
</ng-template>
</ng-container>
</div>
</div>
</div>

21
src/app/components/chord-view/chord-view.component.ts
View File

@ -58,23 +58,12 @@ export class ChordViewComponent extends StageViewComponent {
const tmpTranspose = this.songTransposeMap.get(this.serviceItem.id);
this.transposeLevel = tmpTranspose;
this.openlpService.transposeSong(tmpTranspose).subscribe(transposedLyrics => {
// Replace the chords in the currentSlides with the returned transposed chords
if (transposedLyrics instanceof Array) {
for (let i = 0; i < transposedLyrics.length; ++i) {
this.currentSlides[i].chords = transposedLyrics[i].chords;
// Replace the chords in the currentSlides with the returned transposed chords
if (transposedLyrics instanceof Array) {
for (let i = 0; i < transposedLyrics.length; ++i) {
this.currentSlides[i] = {...this.currentSlides[i], chords: transposedLyrics[i].chords};
}
}
}
});
}
chordproFormatted(slide: Slide): string {
if (!slide) {
return '';
}
let chordpro: string = slide.chords;
chordpro = chordpro.replace(/<br>/g, '\n');
return chordpro;
}
}

21
src/app/components/overlay.scss
View File

@ -14,6 +14,27 @@
justify-content: flex-start;
flex-direction: row;
.active-slide-img {
/* properly size current slide thumbnail */
/* relative sizes might not work in real world */
/* If we get larger thumbnail sizes, we want to limit their size */
max-height: 75%;
min-height: 250px;
}
.active-slide-img-text {
font-size: 1.8rem;
}
.next-slides-img {
/* properly size thumbnail displayed in 2nd and subsequent slides */
/* If we get larger thumbnail sizes, we want to limit their size */
max-height: 20%;
min-height: 100px;
}
.next-slides-text {
font-size: 1.4rem;
}
&-content {
width: 100%;
max-width: 100%;

15
src/app/components/stage-view/stage-view-item/stage-view-item.component.html Normal file
View File

@ -0,0 +1,15 @@
<div
class="slide"
[class.mat-headline-2]="active"
[class.currentSlide]="active"
[class.mat-headline-4]="!active"
[class.first]="!active && slide.first_slide_of_tag"
>
<ng-container *ngIf="!(slide?.img); else elseImage">
{{slide?.text}}
</ng-container>
<ng-template #elseImage>
<img src="{{slide?.img}}" [class.active-slide-img]="active" [class.next-slides-img]="!active"/>
<div [class.active-slide-img-text]="active" [class.next-slides-text]="!active">{{ slide?.text }}</div>
</ng-template>
</div>

12
src/app/components/stage-view/stage-view-item/stage-view-item.component.ts Normal file
View File

@ -0,0 +1,12 @@
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import { Slide } from '../../../responses';
@Component({
selector: 'app-stage-view-item',
templateUrl: './stage-view-item.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class StageViewItemComponent {
@Input() slide: Slide;
@Input() active = false;
}

20
src/app/components/stage-view/stage-view.component.html
View File

@ -4,25 +4,9 @@
<span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
</div>
<div class="container">
<div class="slide currentSlide mat-headline-2">
<div *ngIf="currentSlides[activeSlide]?.img; else elseActiveSlideText">
<img src="{{currentSlides[activeSlide]?.img}}" class="active-slide-img" />
<div class="active-slide-img-text">{{ currentSlides[activeSlide]?.text }}</div>
</div>
<ng-template #elseActiveSlideText>
{{ currentSlides[activeSlide]?.text }}
</ng-template>
</div>
<app-stage-view-item [slide]="currentSlides[activeSlide]" [active]="true"></app-stage-view-item>
<div class="nextSlides">
<div class="slide mat-headline-4" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides">
<div *ngIf="slide.img; else elseNextSlidesText">
<img src="{{slide.img}}" class="next-slides-img" />
<div class="next-slides-text">{{ slide.text }}</div>
</div>
<ng-template #elseNextSlidesText>
{{ slide.text }}
</ng-template>
</div>
<app-stage-view-item [slide]="slide" *ngFor="let slide of nextSlides"></app-stage-view-item>
</div>
</div>
</div>

28
src/app/components/stage-view/stage-view.component.scss
View File

@ -1,28 +0,0 @@
.active-slide-img {
/* properly size current slide thumbnail */
/* relative sizes might not work in real world */
/* If we get larger thumbnail sizes, we want to limit their size */
max-height: 75%;
min-height: 250px;
}
.active-slide-img-text {
font-size: 1.8rem;
}
.next-slides-img {
/* properly size thumbnail displayed in 2nd and subsequent slides */
/* If we get larger thumbnail sizes, we want to limit their size */
max-height: 20%;
min-height: 100px;
}
.next-slides-text {
font-size: 1.4rem;
}
.toolbar {
.show-notes {
&-disabled {
background: white;
}
}
}

5
src/app/components/stage-view/stage-view.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { OpenLPService } from '../../openlp.service';
import { ServiceItem, Slide } from '../../responses';
@ -10,7 +10,8 @@ interface Tag {
@Component({
selector: 'app-stage-view',
templateUrl: './stage-view.component.html',
styleUrls: ['./stage-view.component.scss', '../overlay.scss']
styleUrls: ['./stage-view.component.scss', '../overlay.scss'],
encapsulation: ViewEncapsulation.None
})
export class StageViewComponent implements OnInit {
serviceItem: ServiceItem = null;