adding scroll behaviour to presentation mode

src/app/modules/presentation/monitor/monitor.component.html

@@ -1,4 +1,5 @@
-<div [style.font-size.px]="zoom" class="fullscreen">
+<div *ngIf="song" [style.font-size.px]="zoom" class="fullscreen">
-  <app-song-text [showSwitch]="false" [text]="song.text" chordMode="hide"></app-song-text>
+  <app-song-text [fullscreen]="true" [index]="index" [showSwitch]="false" [text]="song.text"
+                 chordMode="hide"></app-song-text>
   <app-legal [song]="song"></app-legal>
 </div>

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

@@ -1,3 +1,7 @@
+:host {
+  margin-top: 0 !important;
+}
+
 .fullscreen {
   position: fixed;
   top: 0;

src/app/modules/presentation/monitor/monitor.component.ts

@@ -14,7 +14,7 @@ import {Song} from '../../songs/services/song';
 export class MonitorComponent implements OnInit {
   public song: Song;
   public zoom: number;
-  private index: number;
+  public index: number;
   private sections: Section[];
 
   constructor(

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

@@ -13,7 +13,9 @@
     </mat-form-field>
 
     <div *ngFor="let song of presentationSongs" class="song">
-      <div class="title">{{song.title}}</div>
+      <div [class.active]="show.presentationSongId===song.id" class="title song-part">
+        <div (click)="onSectionClick(song.id, -1)" class="head">{{song.title}}</div>
+      </div>
       <div *ngIf="show" class="song-parts">
         <div (click)="onSectionClick(song.id, i)" *ngFor="let section of song.sections; index as i"
              [class.active]="show.presentationSongId===song.id && show.presentationSection===i"
@@ -25,9 +27,9 @@
     </div>
 
     <div *ngIf="show" class="div-bottom">
-      <button [routerLink]="'/presentation/monitor/' + currentShowId" mat-icon-button>
+      <a [routerLink]="'/presentation/monitor/' + currentShowId">
         <fa-icon [icon]="faDesktop"></fa-icon>
-      </button>
+      </a>
 
       <mat-slider
         (ngModelChange)="onZoom($event)"

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

@@ -11,8 +11,7 @@
 
 .title {
   font-weight: bold;
-  padding: 0 10px 10px 10px;
+  margin-bottom: 10px;
-
 }
 
 .song-parts {
@@ -59,7 +58,6 @@
   border-bottom: 0.5px solid #ddd;
   padding: 10px;
   font-weight: bold;
-
 }
 
 .fragment {

src/app/widget-modules/components/song-text/animation.ts

@@ -0,0 +1,18 @@
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+export const songSwitch =     // the fade-in/fade-out animation.
+  trigger('songSwitch', [
+
+    // the "in" style determines the "resting" state of the element when it is visible.
+    state('in', style({opacity: 1})),
+
+    // fade in when created. this could also be written as transition('void => *')
+    transition(':enter', [
+      style({opacity: 0}),
+      animate(600)
+    ]),
+
+    // fade out when destroyed. this could also be written as transition('void => *')
+    transition(':leave',
+      animate(600, style({opacity: 0})))
+  ])

src/app/widget-modules/components/song-text/song-text.component.html

@@ -1,10 +1,16 @@
-<div (click)="onClick()" [class.chords]="_chordMode!=='hide'" class="song-text">
+<div (click)="onClick()" *ngIf="sections" [@songSwitch]="sections" [class.chords]="_chordMode!=='hide'"
+     class="song-text">
 
   <div (click)="onChordClick()" *ngIf="showSwitch" class="menu">
     <fa-icon [icon]="faLines"></fa-icon>
   </div>
 
-  <div *ngFor="let section of sections" [class.chorus]="section.type===1" class="section">
+  <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
-    <div *ngFor="let line of getLines(section)" [class.chord]="line.type===0" class="line">{{line.text}}</div>
+    <div #section *ngFor="let section of sections; let i = index" [class.chorus]="section.type===1" class="section">
+      <div *ngFor="let line of getLines(section)" [class.chord]="line.type===0" [class.disabled]="checkDisabled(i)"
+           class="line">{{line.text}}</div>
     </div>
+  </div>
+
+  <ng-content></ng-content>
 </div>

src/app/widget-modules/components/song-text/song-text.component.less

@@ -25,6 +25,15 @@
   }
 }
 
+.line {
+  opacity: 1;
+  transition: 1000ms all ease-in-out;
+
+  &.disabled {
+    opacity: 0.5;
+  }
+}
+
 .menu {
   position: absolute;
   right: 0;
@@ -48,8 +57,6 @@
   &:hover {
     background: #ddd;
   }
-
-
 }
 
 .section {
@@ -70,3 +77,12 @@
 .chord {
   color: #009;
 }
+
+.offset {
+  position: fixed;
+  top: 0;
+
+  transition: 1000ms all ease-in-out;
+}
+
+

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren} from '@angular/core';
 import {
   Line,
   LineType,
@@ -7,20 +7,25 @@ import {
   TextRenderingService
 } from '../../../modules/songs/services/text-rendering.service';
 import {faGripLines} from '@fortawesome/free-solid-svg-icons/faGripLines';
+import {songSwitch} from './animation';
 
 export type ChordMode = 'show' | 'hide' | 'onlyFirst'
 
 @Component({
   selector: 'app-song-text',
   templateUrl: './song-text.component.html',
-  styleUrls: ['./song-text.component.less']
+  styleUrls: ['./song-text.component.less'],
+  animations: [songSwitch],
 })
 export class SongTextComponent implements OnInit {
   public sections: Section[];
-  @Input() public scrollIndex = 0;
+  @Input() public index = -1;
-  @Input() showSwitch = false;
+  @Input() public fullscreen = false;
+  @Input() public showSwitch = false;
   @Output() public chordModeChanged = new EventEmitter<ChordMode>();
+  @ViewChildren('section') viewSections: QueryList<ElementRef>;
   public faLines = faGripLines;
+  public offset = 0;
 
   constructor(private textRenderingService: TextRenderingService, private elRef: ElementRef) {
   }
@@ -34,11 +39,22 @@ export class SongTextComponent implements OnInit {
 
   @Input()
   public set text(value: string) {
-    this.sections = this.textRenderingService.parse(value).sort((a, b) => a.type - b.type);
+    this.sections = null;
-    console.log(this.sections)
+    this.offset = 0;
+    setTimeout(() =>
+      this.sections = this.textRenderingService.parse(value).sort((a, b) => a.type - b.type), 100);
   }
 
+
   ngOnInit(): void {
+    setInterval(() => {
+        if (!this.fullscreen || this.index === -1) {
+          this.offset = 0;
+          return;
+        }
+        this.offset = -this.viewSections.toArray()[this.index].nativeElement.offsetTop;
+      }
+      , 100);
   }
 
   public getLines(section: Section): Line[] {
@@ -77,4 +93,9 @@ export class SongTextComponent implements OnInit {
         return 'show';
     }
   }
+
+  checkDisabled(i: number) {
+    return this.index !== -1 && this.index !== i;
+
+  }
 }

src/styles/styles.less

@@ -33,6 +33,10 @@ h1, h2, h3, h4 {
   margin: 0 0 20px 0;
 }
 
+.mat-form-field {
+  width: 100%;
+}
+
 .mat-form-field .mat-form-field-infix {
   width: unset;
 }