guest page

src/app/app-routing.module.ts

@@ -43,6 +43,10 @@ const routes: Routes = [
   {
     path: 'brand',
     loadChildren: () => import('./modules/brand/brand.module').then(m => m.BrandModule),
+  },
+  {
+    path: 'guest',
+    loadChildren: () => import('./modules/guest/guest.module').then(m => m.GuestModule),
   }
 ];
 

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

@@ -0,0 +1,8 @@
+<div *ngIf="songs$|async as songs" class="view">
+  <swiper>
+    <div *ngFor="let song of songs" class="song">
+      <app-song-text [showSwitch]="false" [text]="song|async"
+                     chordMode="hide"></app-song-text>
+    </div>
+  </swiper>
+</div>

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

@@ -0,0 +1,16 @@
+.view {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #0003;
+  backdrop-filter: blur(10px);
+  z-index: 1;
+  color: white;
+}
+
+app-song-text {
+  margin: 20px;
+  display: block;
+}

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

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {GuestComponent} from './guest.component';
+
+describe('GuestComponent', () => {
+  let component: GuestComponent;
+  let fixture: ComponentFixture<GuestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GuestComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GuestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,35 @@
+import {Component, OnInit} from '@angular/core';
+import {SongService} from '../songs/services/song.service';
+import {GlobalSettingsService} from '../../services/global-settings.service';
+import {Observable} from 'rxjs';
+import {map, switchMap} from 'rxjs/operators';
+import {ShowSongService} from '../shows/services/show-song.service';
+
+@Component({
+  selector: 'app-guest',
+  templateUrl: './guest.component.html',
+  styleUrls: ['./guest.component.less']
+})
+export class GuestComponent implements OnInit {
+  public songs$: Observable<Observable<string>[]>;
+
+
+  constructor(
+    private songService: SongService,
+    private globalSettingsService: GlobalSettingsService,
+    private showSongService: ShowSongService,
+  ) {
+  }
+
+  public ngOnInit(): void {
+    this.songs$ = this.globalSettingsService.get$.pipe(
+      map(_ => _.currentShow),
+      switchMap(_ => this.showSongService.list$(_)),
+      map(_ => _
+        .sort((x, y) => x.order - y.order)
+        .map(showSong => this.songService.read$(showSong.songId).pipe(map(song => song.text)))
+      )
+    );
+  }
+
+}

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

@@ -0,0 +1,36 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {GuestComponent} from './guest.component';
+import {RouterModule} from '@angular/router';
+import {SWIPER_CONFIG, SwiperConfigInterface, SwiperModule} from 'ngx-swiper-wrapper';
+import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
+
+const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
+  a11y: true,
+  direction: 'horizontal',
+  slidesPerView: 1,
+  keyboard: true,
+  mousewheel: true,
+  scrollbar: false,
+  navigation: true,
+  pagination: false,
+
+};
+
+@NgModule({
+  declarations: [GuestComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{path: '', component: GuestComponent}]),
+    SwiperModule,
+    SongTextModule
+  ],
+  providers: [
+    {
+      provide: SWIPER_CONFIG,
+      useValue: DEFAULT_SWIPER_CONFIG
+    }
+  ]
+})
+export class GuestModule {
+}

src/app/modules/presentation/remote/remote.component.less

@@ -35,14 +35,14 @@
   overflow: hidden;
   transition: 300ms all ease-in-out;
   cursor: pointer;
-  .card-1;
+  // .card-1;
 
   &:hover {
-    .card-2;
+    .card-1;
   }
 
   &.active {
-    .card-5;
+    .card-2;
 
     .head {
       background: #4286f4;