guest mode

src/app/modules/guest/guest-show-data.service.ts

@@ -0,0 +1,23 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {DbService} from 'src/app/services/db.service';
+import {GuestShow} from './guest-show';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GuestShowDataService {
+  public list$: BehaviorSubject<GuestShow[]> = new BehaviorSubject<GuestShow[]>([]);
+  private collection = 'guest';
+
+  public constructor(private dbService: DbService) {
+    this.dbService.col$<GuestShow>(this.collection).subscribe(_ => this.list$.next(_));
+  }
+
+  public read$: (id: string) => Observable<GuestShow | null> = (id: string): Observable<GuestShow | null> => this.list$.pipe(map(_ => _.find(s => s.id === id) || null));
+  public update$: (id: string, data: Partial<GuestShow>) => Promise<void> = async (id: string, data: Partial<GuestShow>): Promise<void> =>
+    await this.dbService.doc(this.collection + '/' + id).update(data);
+  public add: (data: Partial<GuestShow>) => Promise<string> = async (data: Partial<GuestShow>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
+  public delete: (id: string) => Promise<void> = async (id: string): Promise<void> => await this.dbService.doc(this.collection + '/' + id).delete();
+}

src/app/modules/guest/guest-show.service.ts

@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {Show} from '../shows/services/show';
+import {Song} from '../songs/services/song';
+import {GuestShowDataService} from './guest-show-data.service';
+import {ShowService} from '../shows/services/show.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GuestShowService {
+  public constructor(
+    private showService: ShowService,
+    private guestShowDataService: GuestShowDataService
+  ) {}
+
+  public async share(show: Show, songs: Song[]): Promise<string> {
+    const data = {
+      showType: show.showType,
+      date: show.date,
+      songs: songs,
+    };
+
+    if (!show.shareId) {
+      const shareId = await this.guestShowDataService.add(data);
+      await this.showService.update$(show.id, {shareId});
+    } else {
+      await this.guestShowDataService.update$(show.shareId, data);
+    }
+
+    return window.location.protocol + '//' + window.location.host + '/guest/' + show.shareId;
+  }
+}

src/app/modules/guest/guest-show.ts

@@ -0,0 +1,10 @@
+import firebase from 'firebase/compat/app';
+import {Song} from '../songs/services/song';
+import Timestamp = firebase.firestore.Timestamp;
+
+export interface GuestShow {
+  id: string;
+  showType: string;
+  date: Timestamp;
+  songs: Song[];
+}

src/app/modules/guest/guest.component.html

@@ -1,11 +1,25 @@
-<div *ngIf="songs$ | async as songs" class="view">
-<!--  <swiper>-->
-<!--    <div *ngFor="let song of songs" class="song">-->
-<!--      <app-song-text-->
-<!--        [showSwitch]="false"-->
-<!--        [text]="song"-->
-<!--        chordMode="hide"-->
-<!--      ></app-song-text>-->
-<!--    </div>-->
-<!--  </swiper>-->
+<div *ngIf="show$|async as show" class="page">
+  <div class="title">
+    <div class="left">{{ show.showType|showType }}</div>
+    <div class="right">{{ show.date.toDate() | date: 'dd.MM.yyyy' }}</div>
+  </div>
+
+  <div class="view">
+    <swiper-container scrollbar="true">
+      <swiper-slide *ngFor="let song of show.songs; let i = index; trackBy: trackBy"
+                    class="song-swipe">
+        <div class="song-title">{{ song.title }}</div>
+
+        <div class="legal">
+          <p *ngIf="song.artist">{{ song.artist }}</p>
+        </div>
+
+        <app-song-text
+          [text]="song.text"
+        ></app-song-text>
+      </swiper-slide>
+    </swiper-container>
+  </div>
 </div>
+
+

src/app/modules/guest/guest.component.less

@@ -1,12 +1,49 @@
+.page {
+  background: #0009;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  backdrop-filter: blur(8px);
+
+  --swiper-scrollbar-bg-color: #fff3;
+  --swiper-scrollbar-drag-bg-color: #fff9;
+  --swiper-scrollbar-sides-offset: 20px;
+  --swiper-scrollbar-top: 100px;
+  --swiper-scrollbar-bottom: auto;
+}
+
+.title {
+  color: white;
+  padding: 70px 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .left {
+    font-size: 1.8em;
+    color: #fff;
+  }
+}
+
+.song-title {
+  padding: 20px 20px 0;
+  font-size: 1.3em;
+}
+
+.legal {
+  padding: 0 20px;
+  font-size: 0.6em;
+  color: #fff9;
+}
+
 .view {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background: #0003;
-  backdrop-filter: blur(10px);
-  z-index: 1;
   color: white;
 }
 
@@ -14,3 +51,9 @@ app-song-text {
   margin: 20px;
   display: block;
 }
+
+.song-swipe {
+  margin-top: 100px;
+  margin-bottom: 50px;
+  min-height: calc(100vh - 150px);
+}

src/app/modules/guest/guest.component.ts

@@ -1,11 +1,9 @@
 import {Component} from '@angular/core';
-import {SongService} from '../songs/services/song.service';
-import {GlobalSettingsService} from '../../services/global-settings.service';
-import {Observable} from 'rxjs';
-import {filter, map, switchMap} from 'rxjs/operators';
-import {ShowSongService} from '../shows/services/show-song.service';
-import {GlobalSettings} from '../../services/global-settings';
-import {ShowService} from '../shows/services/show.service';
+import {GuestShowDataService} from './guest-show-data.service';
+import {ActivatedRoute} from '@angular/router';
+import {map, switchMap} from 'rxjs/operators';
+import {Song} from '../songs/services/song';
+import {ConfigService} from '../../services/config.service';
 
 @Component({
   selector: 'app-guest',
@@ -13,20 +11,17 @@ import {ShowService} from '../shows/services/show.service';
   styleUrls: ['./guest.component.less'],
 })
 export class GuestComponent {
-  public songs$: Observable<string[]> = this.globalSettingsService.get$.pipe(
-    filter(_ => !!_),
-    map(_ => _ as GlobalSettings),
-    map(_ => _.currentShow),
-    switchMap(_ => this.showSongService.list$(_).pipe(map(l => ({showSongs: l, currentShow: _})))),
-    switchMap(_ => this.showService.read$(_.currentShow).pipe(map(l => ({showSongs: _.showSongs, show: l})))),
-    filter(_ => !!_.showSongs),
-    map(_ => (_?.show ? _.show.order.map(o => _.showSongs.find(f => f.id === o) ?? _.showSongs[0]).map(m => m.text) : []))
+  public show$ = this.currentRoute.params.pipe(
+    map(param => param.id as string),
+    switchMap(id => this.service.read$(id))
   );
+  public config$ = this.configService.get$();
 
   public constructor(
-    private songService: SongService,
-    private showService: ShowService,
-    private globalSettingsService: GlobalSettingsService,
-    private showSongService: ShowSongService
+    private currentRoute: ActivatedRoute,
+    private service: GuestShowDataService,
+    private configService: ConfigService
   ) {}
+
+  public trackBy = (index: number, show: Song) => show.id;
 }

src/app/modules/guest/guest.module.ts

@@ -1,11 +1,23 @@
-import {NgModule} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {GuestComponent} from './guest.component';
 import {RouterModule} from '@angular/router';
 import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
+import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 
 @NgModule({
   declarations: [GuestComponent],
-  imports: [CommonModule, RouterModule.forChild([{path: '', component: GuestComponent}]), SongTextModule],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: ':id',
+        component: GuestComponent,
+      },
+    ]),
+    SongTextModule,
+    ShowTypeTranslaterModule,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class GuestModule {}