adding scroll behaviour to presentation mode

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 *ngFor="let line of getLines(section)" [class.chord]="line.type===0" class="line">{{line.text}}</div>
+  <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
+    <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() showSwitch = false;
+  @Input() public index = -1;
+  @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);
-    console.log(this.sections)
+    this.sections = null;
+    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;
+
+  }
 }