show next song in page view

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

@@ -24,8 +24,9 @@
         *ngFor="let line of getLines(section)"
         [class.chord]="line.type === 0"
         [class.disabled]="checkDisabled(i)"
+        [class.comment]="isComment(line.text)"
         class="line"
-      >{{ line.text }}
+      >{{ transform(line.text) }}
       </div>
     </div>
     <div *ngIf="sections.length===0" class="error">

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

@@ -72,3 +72,10 @@
   font-size: 1.2em;
   font-weight: bold;
 }
+
+.comment {
+  color: #00b;
+  border-left: 2px solid #00b;
+  padding-left: 6px;
+  font-style: italic;
+}

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

@@ -124,4 +124,13 @@ export class SongTextComponent implements OnInit {
         return 'show';
     }
   }
+
+  public transform(text: string): string {
+    if (this.isComment(text)) text = text.slice(1);
+    return text.trim();
+  }
+
+  public isComment(text: string) {
+    return text.startsWith('#');
+  }
 }