openlp/web-remote
1
0
Fork 0
mirror of https://gitlab.com/openlp/web-remote.git synced 2024-12-22 11:32:47 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mateus Meyer Jiacomelli 2022-12-21 19:51:50 +00:00 committed by Raoul Snyman
parent a54ff79ca1
commit 8503d57e31
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>

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

@ -61,20 +61,9 @@ export class ChordViewComponent extends StageViewComponent {
// 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;
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;