diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1eaaa52..1355fe1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -28,6 +28,7 @@ import { SlidesComponent } from './components/slides/slides.component';
import { FormsModule } from '@angular/forms';
import { ChordViewComponent } from './components/chord-view/chord-view.component';
import { StageViewComponent } from './components/stage-view/stage-view.component';
+import { Nl2BrPipe } from './components/stage-view/nl2br.pipe';
import { MainViewComponent } from './components/main-view/main-view.component';
import { ChordProPipe } from './components/chord-view/chordpro.pipe';
import { LoginComponent } from './components/login/login.component';
@@ -39,6 +40,7 @@ import { ThemesComponent } from './components/themes/themes.component';
AppComponent,
ChordViewComponent,
StageViewComponent,
+ Nl2BrPipe,
MainViewComponent,
ChordProPipe,
LoginComponent,
diff --git a/src/app/components/overlay.scss b/src/app/components/overlay.scss
index 2db0709..6270d80 100644
--- a/src/app/components/overlay.scss
+++ b/src/app/components/overlay.scss
@@ -1,64 +1,79 @@
.overlay {
- background: black;
- width: 100%;
- height: 100%;
- position: fixed;
- left: 0;
- top: 0;
- z-index: 1;
- overflow: hidden;
- color: white;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
+ background: black;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ left: 0;
+ top: 0;
+ z-index: 1;
+ overflow: hidden;
+ color: white;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
}
.sidebar {
- margin: 1rem;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ margin: 1rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 30%;
}
.time {
- font-size: 2rem;
- color: gray;
+ font-size: 3rem;
+ color: yellow;
+ text-align: right;
+}
+
+.notes {
+ margin-top: 1em;
+ font-size: 3rem;
+ line-height: 3rem;
+ color: salmon;
+ text-align: right;
+}
+
+.close {
+ text-align: right;
}
.tags {
- margin-top: 1rem;
- margin-bottom: 1rem;
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- color: gray;
- font-size: 4rem;
- span {
- margin-left: 1rem;
- &.active {
- color: white;
- }
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ color: green;
+ font-size: 4rem;
+ span {
+ margin-left: 1rem;
+ &.active {
+ color: lightgreen;
+ font-weight: bold;
}
+ }
}
.slide {
- font-size: 3rem;
- white-space: pre-line;
- margin: 0;
- &.first {
- margin-top: 1rem;
- }
+ font-size: 3rem;
+ white-space: pre-line;
+ margin: 0;
+ &.first {
+ margin-top: 1rem;
+ }
}
.container {
- margin-left: 1rem;
+ margin-left: 1rem;
}
.nextSlides {
+ font-size: 2rem;
+ margin-top: 1rem;
+ color: grey;
+ .slide {
font-size: 2rem;
- margin-top: 1rem;
- color: gray;
- .slide {
- font-size: 2rem;
- }
-}
\ No newline at end of file
+ }
+}
diff --git a/src/app/components/slides/slides.component.ts b/src/app/components/slides/slides.component.ts
index d205c95..e539423 100644
--- a/src/app/components/slides/slides.component.ts
+++ b/src/app/components/slides/slides.component.ts
@@ -27,6 +27,13 @@ export class SlidesComponent implements OnInit {
}
getSlides() {
- this.openlpService.getItemSlides().subscribe(slides => this.slides = slides);
+ this.openlpService.getServiceItem().subscribe(serviceItem => {
+ if (serviceItem instanceof Array) {
+ this.slides = serviceItem;
+ }
+ else {
+ this.slides = serviceItem.slides;
+ }
+ });
}
}
diff --git a/src/app/components/stage-view/nl2br.pipe.ts b/src/app/components/stage-view/nl2br.pipe.ts
new file mode 100644
index 0000000..908a199
--- /dev/null
+++ b/src/app/components/stage-view/nl2br.pipe.ts
@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({name: 'nl2br'})
+export class Nl2BrPipe implements PipeTransform {
+ constructor(private sanitizer: DomSanitizer) { }
+
+ transform(value: string): string|SafeHtml {
+ if (!value) {
+ return value;
+ }
+ if (typeof value !== 'string') {
+ throw Error(`Invalid pipe argument: '${value}' for pipe 'Nl2BrPipe'`);
+ }
+ return this.sanitizer.bypassSecurityTrustHtml(value.replace(/(?:\r\n|\r|\n)/g, '
'));
+ }
+}
diff --git a/src/app/components/stage-view/stage-view.component.html b/src/app/components/stage-view/stage-view.component.html
index 548466a..ee90606 100644
--- a/src/app/components/stage-view/stage-view.component.html
+++ b/src/app/components/stage-view/stage-view.component.html
@@ -15,7 +15,10 @@