diff --git a/src/app/modules/presentation/monitor/logo/logo.component.html b/src/app/modules/presentation/monitor/logo/logo.component.html new file mode 100644 index 0000000..9e61870 --- /dev/null +++ b/src/app/modules/presentation/monitor/logo/logo.component.html @@ -0,0 +1,18 @@ + + + + + diff --git a/src/app/modules/presentation/monitor/logo/logo.component.less b/src/app/modules/presentation/monitor/logo/logo.component.less new file mode 100644 index 0000000..e69de29 diff --git a/src/app/modules/presentation/monitor/logo/logo.component.spec.ts b/src/app/modules/presentation/monitor/logo/logo.component.spec.ts new file mode 100644 index 0000000..793de6c --- /dev/null +++ b/src/app/modules/presentation/monitor/logo/logo.component.spec.ts @@ -0,0 +1,25 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {LogoComponent} from './logo.component'; + +describe('LogoComponent', () => { + let component: LogoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [LogoComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LogoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/presentation/monitor/logo/logo.component.ts b/src/app/modules/presentation/monitor/logo/logo.component.ts new file mode 100644 index 0000000..3ba3256 --- /dev/null +++ b/src/app/modules/presentation/monitor/logo/logo.component.ts @@ -0,0 +1,16 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-logo', + templateUrl: './logo.component.html', + styleUrls: ['./logo.component.less'] +}) +export class LogoComponent implements OnInit { + + constructor() { + } + + ngOnInit(): void { + } + +} diff --git a/src/app/modules/presentation/monitor/monitor.component.html b/src/app/modules/presentation/monitor/monitor.component.html index 0962639..9592c50 100644 --- a/src/app/modules/presentation/monitor/monitor.component.html +++ b/src/app/modules/presentation/monitor/monitor.component.html @@ -1,5 +1,20 @@ -
- + + + + +
+
{{showType|showType}}
+
{{date|date:'dd.MM.yyyy'}}
+
+ + - + +
diff --git a/src/app/modules/presentation/monitor/monitor.component.less b/src/app/modules/presentation/monitor/monitor.component.less index 6ff459d..d854d82 100644 --- a/src/app/modules/presentation/monitor/monitor.component.less +++ b/src/app/modules/presentation/monitor/monitor.component.less @@ -8,15 +8,52 @@ left: 0; bottom: 0; right: 0; - background: black; z-index: 1; + display: flex; + cursor: none; +} +.background { + background: black; padding: 50px; color: white; - display: flex; flex-direction: column; justify-content: space-between; transition: 300ms all ease-in-out; } + +.start { + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + flex-direction: column; + font-size: 3em; + box-sizing: border-box; + text-shadow: 0 0 10px black, 0 0 20px black, 0 0 40px black; + + .date { + font-size: 0.6em; + } +} + +.logo { + transform: scale(0.9); + opacity: 1; + filter: blur(0px); + transition: all 5s ease-in-out; +} + +.blur { + filter: blur(10px); + opacity: 0.5; +} + +.hide { + filter: blur(30px); + opacity: 0.1; + transform: scale(0.8) translateY(-10%); +} diff --git a/src/app/modules/presentation/monitor/monitor.component.ts b/src/app/modules/presentation/monitor/monitor.component.ts index c23a3e3..0e285da 100644 --- a/src/app/modules/presentation/monitor/monitor.component.ts +++ b/src/app/modules/presentation/monitor/monitor.component.ts @@ -8,16 +8,22 @@ import {GlobalSettingsService} from '../../../services/global-settings.service'; import {Config} from '../../../services/config'; import {Observable} from 'rxjs'; import {ConfigService} from '../../../services/config.service'; +import {songSwitch} from '../../../widget-modules/components/song-text/animation'; @Component({ selector: 'app-monitor', templateUrl: './monitor.component.html', - styleUrls: ['./monitor.component.less'] + styleUrls: ['./monitor.component.less'], + animations: [songSwitch] }) export class MonitorComponent implements OnInit { public song: Song; public zoom: number; + public currentShowId: string; + public songId: string; public index: number; + public showType: string; + public date: Date; private sections: Section[]; public config$: Observable; @@ -35,11 +41,15 @@ export class MonitorComponent implements OnInit { this.globalSettingsService.get$.pipe( map(_ => _.currentShow), distinctUntilChanged(), + tap(_ => this.currentShowId = _), switchMap(_ => this.showService.read$(_)), + tap(_ => this.showType = _.showType), + tap(_ => this.date = _.date.toDate()), + tap(_ => this.songId = _.presentationSongId), tap(_ => this.index = _.presentationSection), tap(_ => this.zoom = _.presentationZoom ?? 30), switchMap(_ => this.songService.read$(_.presentationSongId)) - ).subscribe(_ => { + ).subscribe((_: Song) => { this.song = _; this.sections = this.textRenderingService.parse(_.text); }); diff --git a/src/app/modules/presentation/presentation.module.ts b/src/app/modules/presentation/presentation.module.ts index 4bf2246..8a8665d 100644 --- a/src/app/modules/presentation/presentation.module.ts +++ b/src/app/modules/presentation/presentation.module.ts @@ -16,10 +16,11 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'; import {MatSliderModule} from '@angular/material/slider'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module'; +import {LogoComponent} from './monitor/logo/logo.component'; @NgModule({ - declarations: [MonitorComponent, RemoteComponent, LegalComponent], + declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent], imports: [ CommonModule, PresentationRoutingModule, diff --git a/src/app/modules/presentation/remote/remote.component.html b/src/app/modules/presentation/remote/remote.component.html index 8ed66d4..8b2a797 100644 --- a/src/app/modules/presentation/remote/remote.component.html +++ b/src/app/modules/presentation/remote/remote.component.html @@ -12,39 +12,54 @@ -
-
-
{{song.title}}
-
-
-
+
+
-
{{section.type|sectionType}} {{section.number + 1}}
-
{{getFirstLine(section)}}
+
Veranstaltung
+
+
+
Leer
-
-
- - - +
+
+
{{song.title}}
+
+
+
+
{{section.type|sectionType}} {{section.number + 1}}
+
{{getFirstLine(section)}}
+
+
+
- - -
+
+ + + + + + +
- + + diff --git a/src/app/modules/presentation/remote/remote.component.less b/src/app/modules/presentation/remote/remote.component.less index 298d12f..94612fe 100644 --- a/src/app/modules/presentation/remote/remote.component.less +++ b/src/app/modules/presentation/remote/remote.component.less @@ -68,3 +68,7 @@ display: grid; grid-template-columns: 40px auto; } + +.padding-bottom { + padding-bottom: 20px; +} diff --git a/src/app/modules/presentation/remote/remote.component.ts b/src/app/modules/presentation/remote/remote.component.ts index c24ea94..46235d7 100644 --- a/src/app/modules/presentation/remote/remote.component.ts +++ b/src/app/modules/presentation/remote/remote.component.ts @@ -12,6 +12,7 @@ import {GlobalSettingsService} from '../../../services/global-settings.service'; import {FormControl} from '@angular/forms'; import {distinctUntilChanged, map} from 'rxjs/operators'; import {fade} from '../../../animations'; +import {delay} from '../../../services/delay'; export interface PresentationSong { id: string; @@ -32,6 +33,7 @@ export class RemoteComponent { public songs: Song[]; public presentationSongs: PresentationSong[]; public currentShowId: string; + public progress = false; public faDesktop = faDesktop; public showControl = new FormControl(); @@ -49,12 +51,21 @@ export class RemoteComponent { globalSettingsService.get$.pipe( map(_ => _.currentShow), distinctUntilChanged() - ).subscribe(_ => this.showControl.setValue(_)); + ).subscribe(_ => { + this.showControl.setValue(_, {emitEvent: false}); + this.onShowChanged(_, false); + }); this.showControl.valueChanges.subscribe(value => this.onShowChanged(value)); } - public onShowChanged(change: string): void { - this.globalSettingsService.set({currentShow: change}); + public async onShowChanged(change: string, updateShow = true): Promise { + this.progress = true; + if (updateShow) { + await this.showService.update$(change, {presentationSongId: 'empty'}); + await delay(1200); + await this.globalSettingsService.set({currentShow: change}); + await this.showService.update$(change, {presentationSongId: 'title'}); + } this.currentShowId = change; this.showService.read$(change).subscribe(_ => this.show = _); this.showSongService.list$(change).subscribe(_ => { @@ -67,6 +78,8 @@ export class RemoteComponent { sections: this.textRenderingService.parse(song.text) })) }); + await delay(500); + this.progress = false; } public getFirstLine(section: Section): string { diff --git a/src/app/modules/songs/song/edit/edit-file/edit-file.component.html b/src/app/modules/songs/song/edit/edit-file/edit-file.component.html index e2e1136..3d184a0 100644 --- a/src/app/modules/songs/song/edit/edit-file/edit-file.component.html +++ b/src/app/modules/songs/song/edit/edit-file/edit-file.component.html @@ -18,5 +18,9 @@ cloud_upload
+ +

+ +

diff --git a/src/app/modules/songs/song/edit/edit-file/edit-file.component.ts b/src/app/modules/songs/song/edit/edit-file/edit-file.component.ts index 05eebc5..3814406 100644 --- a/src/app/modules/songs/song/edit/edit-file/edit-file.component.ts +++ b/src/app/modules/songs/song/edit/edit-file/edit-file.component.ts @@ -2,7 +2,10 @@ import {Component} from '@angular/core'; import {Upload} from '../../../services/upload'; import {UploadService} from '../../../services/upload.service'; import {ActivatedRoute} from '@angular/router'; -import {map} from 'rxjs/operators'; +import {map, switchMap} from 'rxjs/operators'; +import {FileDataService} from '../../../services/file-data.service'; +import {Observable} from 'rxjs'; +import {File} from '../../../services/file'; @Component({ selector: 'app-edit-file', @@ -14,13 +17,24 @@ export class EditFileComponent { public selectedFiles: FileList; public currentUpload: Upload; public songId: string; + public files$: Observable; - constructor(private activatedRoute: ActivatedRoute, private uploadService: UploadService) { + + constructor( + private activatedRoute: ActivatedRoute, + private uploadService: UploadService, + private fileService: FileDataService, + ) { this.activatedRoute.params.pipe( map(param => param.songId), ).subscribe(songId => { this.songId = songId; }); + + this.files$ = this.activatedRoute.params.pipe( + map(param => param.songId), + switchMap(songId => this.fileService.read$(songId)) + ); } detectFiles(event) { diff --git a/src/app/modules/songs/song/edit/edit-file/file/file.component.html b/src/app/modules/songs/song/edit/edit-file/file/file.component.html index baf3bc9..a02880b 100644 --- a/src/app/modules/songs/song/edit/edit-file/file/file.component.html +++ b/src/app/modules/songs/song/edit/edit-file/file/file.component.html @@ -1 +1,3 @@ -

file works!

+ + {{name}} + diff --git a/src/app/modules/songs/song/edit/edit-file/file/file.component.ts b/src/app/modules/songs/song/edit/edit-file/file/file.component.ts index 4178708..79c177d 100644 --- a/src/app/modules/songs/song/edit/edit-file/file/file.component.ts +++ b/src/app/modules/songs/song/edit/edit-file/file/file.component.ts @@ -1,4 +1,7 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; +import {Observable} from 'rxjs'; +import {File} from '../../../../services/file'; +import {AngularFireStorage} from '@angular/fire/storage'; @Component({ selector: 'app-file', @@ -6,11 +9,20 @@ import {Component, OnInit} from '@angular/core'; styleUrls: ['./file.component.less'] }) export class FileComponent implements OnInit { + public url$: Observable; + public name: string; - constructor() { + constructor(private storage: AngularFireStorage) { } - ngOnInit() { - } + @Input() set file(file: File) { + const ref = this.storage.ref(file.path + '/' + file.name); + this.url$ = ref.getDownloadURL(); + this.name = file.name; + + }; + + ngOnInit(): void { + } } diff --git a/src/app/modules/songs/song/file/file.component.html b/src/app/modules/songs/song/file/file.component.html new file mode 100644 index 0000000..a02880b --- /dev/null +++ b/src/app/modules/songs/song/file/file.component.html @@ -0,0 +1,3 @@ + + {{name}} + diff --git a/src/app/modules/songs/song/file/file.component.less b/src/app/modules/songs/song/file/file.component.less new file mode 100644 index 0000000..e69de29 diff --git a/src/app/modules/songs/song/file/file.component.spec.ts b/src/app/modules/songs/song/file/file.component.spec.ts new file mode 100644 index 0000000..0543dff --- /dev/null +++ b/src/app/modules/songs/song/file/file.component.spec.ts @@ -0,0 +1,25 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {FileComponent} from './file.component'; + +describe('FileComponent', () => { + let component: FileComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [FileComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/songs/song/file/file.component.ts b/src/app/modules/songs/song/file/file.component.ts new file mode 100644 index 0000000..29b0e10 --- /dev/null +++ b/src/app/modules/songs/song/file/file.component.ts @@ -0,0 +1,29 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {File} from '../../services/file'; +import {AngularFireStorage} from '@angular/fire/storage'; +import {Observable} from 'rxjs'; + +@Component({ + selector: 'app-file', + templateUrl: './file.component.html', + styleUrls: ['./file.component.less'] +}) +export class FileComponent implements OnInit { + public url$: Observable; + public name: string; + + constructor(private storage: AngularFireStorage) { + } + + @Input() set file(file: File) { + + const ref = this.storage.ref(file.path + '/' + file.name); + this.url$ = ref.getDownloadURL(); + this.name = file.name; + + }; + + ngOnInit(): void { + } + +} diff --git a/src/app/modules/songs/song/song.component.html b/src/app/modules/songs/song/song.component.html index c70985f..84cdb30 100644 --- a/src/app/modules/songs/song/song.component.html +++ b/src/app/modules/songs/song/song.component.html @@ -35,6 +35,8 @@ -
{{file.name}}
+

+ +

diff --git a/src/app/modules/songs/song/song.module.ts b/src/app/modules/songs/song/song.module.ts index 30b963b..3c10b30 100644 --- a/src/app/modules/songs/song/song.module.ts +++ b/src/app/modules/songs/song/song.module.ts @@ -12,10 +12,11 @@ import {MatChipsModule} from '@angular/material/chips'; import {RoleModule} from '../../../services/user/role.module'; import {StatusTranslaterModule} from '../../../widget-modules/pipes/status-translater/status-translater.module'; import {ButtonModule} from '../../../widget-modules/components/button/button.module'; +import {FileComponent} from './file/file.component'; @NgModule({ - declarations: [SongComponent], + declarations: [SongComponent, FileComponent], exports: [SongComponent], imports: [ CommonModule, diff --git a/src/app/widget-modules/components/song-text/animation.ts b/src/app/widget-modules/components/song-text/animation.ts index edbcaa6..dd9e9e9 100644 --- a/src/app/widget-modules/components/song-text/animation.ts +++ b/src/app/widget-modules/components/song-text/animation.ts @@ -9,10 +9,12 @@ export const songSwitch = // the fade-in/fade-out animation. // fade in when created. this could also be written as transition('void => *') transition(':enter', [ style({opacity: 0}), - animate(600) + animate(1200, style({opacity: 0})), + animate(1200, style({opacity: 1})), ]), // fade out when destroyed. this could also be written as transition('void => *') transition(':leave', - animate(600, style({opacity: 0}))) + animate(1200, style({opacity: 0})) + ) ]) diff --git a/src/app/widget-modules/components/song-text/song-text.component.ts b/src/app/widget-modules/components/song-text/song-text.component.ts index 38f426f..6079b3c 100644 --- a/src/app/widget-modules/components/song-text/song-text.component.ts +++ b/src/app/widget-modules/components/song-text/song-text.component.ts @@ -46,9 +46,9 @@ export class SongTextComponent implements OnInit { } - ngOnInit(): void { + public ngOnInit(): void { setInterval(() => { - if (!this.fullscreen || this.index === -1) { + if (!this.fullscreen || this.index === -1 || !this.viewSections.toArray()[this.index]) { this.offset = 0; return; } @@ -79,13 +79,12 @@ export class SongTextComponent implements OnInit { this.chordModeChanged.emit(next); } - public onClick() { + public onClick(): void { scrollTo(0, this.elRef.nativeElement.offsetTop - 20); } - public checkDisabled(i: number) { + public checkDisabled(i: number): boolean { return this.index !== -1 && this.index !== i; - } private getNextChordMode(): ChordMode {