From 8503d57e316a6446d36c23aeb966890828405332 Mon Sep 17 00:00:00 2001 From: Mateus Meyer Jiacomelli Date: Wed, 21 Dec 2022 19:51:50 +0000 Subject: [PATCH] Fixing media + images on Chord and Stage View + refactoring individal slides of Chord and Stage --- src/app/app.module.ts | 4 +++ .../chord-view-item.component.html | 7 +++++ .../chord-view-item.component.ts | 22 +++++++++++++++ .../chord-view/chord-view.component.html | 21 +++++++++----- .../chord-view/chord-view.component.ts | 21 ++++---------- src/app/components/overlay.scss | 21 ++++++++++++++ .../stage-view-item.component.html | 15 ++++++++++ .../stage-view-item.component.ts | 12 ++++++++ .../stage-view/stage-view.component.html | 20 ++----------- .../stage-view/stage-view.component.scss | 28 ------------------- .../stage-view/stage-view.component.ts | 5 ++-- 11 files changed, 105 insertions(+), 71 deletions(-) create mode 100644 src/app/components/chord-view/chord-view-item/chord-view-item.component.html create mode 100644 src/app/components/chord-view/chord-view-item/chord-view-item.component.ts create mode 100644 src/app/components/stage-view/stage-view-item/stage-view-item.component.html create mode 100644 src/app/components/stage-view/stage-view-item/stage-view-item.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9b6c2a3..cccedd0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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, diff --git a/src/app/components/chord-view/chord-view-item/chord-view-item.component.html b/src/app/components/chord-view/chord-view-item/chord-view-item.component.html new file mode 100644 index 0000000..c666a35 --- /dev/null +++ b/src/app/components/chord-view/chord-view-item/chord-view-item.component.html @@ -0,0 +1,7 @@ +
+
\ No newline at end of file diff --git a/src/app/components/chord-view/chord-view-item/chord-view-item.component.ts b/src/app/components/chord-view/chord-view-item/chord-view-item.component.ts new file mode 100644 index 0000000..c8f49ee --- /dev/null +++ b/src/app/components/chord-view/chord-view-item/chord-view-item.component.ts @@ -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(/
/g, '\n'); + + return chordpro; + } +} diff --git a/src/app/components/chord-view/chord-view.component.html b/src/app/components/chord-view/chord-view.component.html index e1ead8e..eae9fd1 100644 --- a/src/app/components/chord-view/chord-view.component.html +++ b/src/app/components/chord-view/chord-view.component.html @@ -4,14 +4,21 @@ {{ tag.text }}
-
+ + + +
-
-
+ + + + + +
diff --git a/src/app/components/chord-view/chord-view.component.ts b/src/app/components/chord-view/chord-view.component.ts index 4d04be0..b3a253a 100644 --- a/src/app/components/chord-view/chord-view.component.ts +++ b/src/app/components/chord-view/chord-view.component.ts @@ -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(/
/g, '\n'); - - return chordpro; - } } diff --git a/src/app/components/overlay.scss b/src/app/components/overlay.scss index a620375..f71bc08 100644 --- a/src/app/components/overlay.scss +++ b/src/app/components/overlay.scss @@ -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%; diff --git a/src/app/components/stage-view/stage-view-item/stage-view-item.component.html b/src/app/components/stage-view/stage-view-item/stage-view-item.component.html new file mode 100644 index 0000000..67ec77a --- /dev/null +++ b/src/app/components/stage-view/stage-view-item/stage-view-item.component.html @@ -0,0 +1,15 @@ +
+ + {{slide?.text}} + + + +
{{ slide?.text }}
+
+
diff --git a/src/app/components/stage-view/stage-view-item/stage-view-item.component.ts b/src/app/components/stage-view/stage-view-item/stage-view-item.component.ts new file mode 100644 index 0000000..634dda4 --- /dev/null +++ b/src/app/components/stage-view/stage-view-item/stage-view-item.component.ts @@ -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; +} diff --git a/src/app/components/stage-view/stage-view.component.html b/src/app/components/stage-view/stage-view.component.html index b443277..0567c3b 100644 --- a/src/app/components/stage-view/stage-view.component.html +++ b/src/app/components/stage-view/stage-view.component.html @@ -4,25 +4,9 @@ {{ tag.text }}
-
-
- -
{{ currentSlides[activeSlide]?.text }}
-
- - {{ currentSlides[activeSlide]?.text }} - -
+
-
-
- -
{{ slide.text }}
-
- - {{ slide.text }} - -
+
diff --git a/src/app/components/stage-view/stage-view.component.scss b/src/app/components/stage-view/stage-view.component.scss index eb57666..e69de29 100644 --- a/src/app/components/stage-view/stage-view.component.scss +++ b/src/app/components/stage-view/stage-view.component.scss @@ -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; - } - } -} diff --git a/src/app/components/stage-view/stage-view.component.ts b/src/app/components/stage-view/stage-view.component.ts index 294b347..bf35ad4 100644 --- a/src/app/components/stage-view/stage-view.component.ts +++ b/src/app/components/stage-view/stage-view.component.ts @@ -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;