guest page

package-lock.json

@@ -5905,6 +5905,14 @@
       "resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.1.0.tgz",
       "integrity": "sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q=="
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -11368,6 +11376,14 @@
         "resize-observer-polyfill": "^1.5.0"
       }
     },
+    "ngx-swiper-wrapper": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-swiper-wrapper/-/ngx-swiper-wrapper-9.0.1.tgz",
+      "integrity": "sha512-Bm0zZZiJSn+Ubif4zLMJ0A4RmKSS4utCnmjpeNCLH4Y2rwLyYMoVggF+zpxhiPZ5f+xVc2QBped3VZvu1tzL9w==",
+      "requires": {
+        "swiper": "^5.3.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -15152,6 +15168,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "ssri": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.0.tgz",
@@ -15660,6 +15681,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",

package.json

@@ -6,7 +6,8 @@
     "build": "ng build",
     "deploy": "ng build --prod && firebase deploy",
     "test": "ng test",
-    "lint": "ng lint --fix"
+    "lint": "ng lint --fix",
+    "postinstall": "ngcc"
   },
   "private": true,
   "dependencies": {
@@ -30,6 +31,7 @@
     "ngx-hocs-unsubscriber": "^1.1.7",
     "ngx-mat-select-search": "^2.1.2",
     "ngx-perfect-scrollbar": "^9.0.0",
+    "ngx-swiper-wrapper": "^9.0.1",
     "rxjs": "~6.5.5",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

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;

src/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Worship Generator</title>
   <base href="/">
-  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
+  <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
 
   <link href="apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
   <link href="favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">

src/styles/styles.less

@@ -122,3 +122,14 @@ mat-dialog-container.mat-dialog-container {
 .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
   transform: translateY(-1.0em) scale(0.75);
 }
+
+
+body {
+  .swiper-button-next, .swiper-button-prev {
+    opacity: 0.1;
+  }
+
+  .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
+    opacity: 0;
+  }
+}