Remaking the chordpro routines and the chord + stage viewer

2024-12-22 11:32:47 +00:00 · 2022-12-17 07:09:43 +00:00 · 2022-12-17 07:09:43 +00:00 · 9bd4d6aec6
commit 9bd4d6aec6
parent b319373541
9 changed files with 373 additions and 95 deletions
--- a/src/app/components/_overlay-common.scss
+++ b/src/app/components/_overlay-common.scss
@ -0,0 +1,19 @@
+$mobile-breakpoint: 1024px;
+
+@mixin slide-font-size($scale: 1, $desktop-scale: $scale) {
+  font-size: calc(#{4vw * $scale} + #{1.5vh * $scale});
+
+  @media (orientation: landscape) {
+    font-size: #{6vmin * $scale};
+  }
+
+  @media (orientation: landscape) and (max-aspect-ratio: 16/9) {
+    font-size: #{3vw * $scale};
+  }
+
+  @media screen and (min-width: $mobile-breakpoint) {
+    font-size: calc(#{3.1vw * $desktop-scale} + #{1.5vh * $desktop-scale});
+    //font-size: #{4vw * $scale};
+    //font-size: #{5.6vmin * $scale};
+  }
+}
--- a/src/app/components/chord-view/chord-view.component.html
+++ b/src/app/components/chord-view/chord-view.component.html
@ -1,26 +1,33 @@
 <div class="overlay">
-  <div>
+  <div class="overlay-content">
    <div class="tags">
      <span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
    </div>
    <div class="container">
      <div class="slide currentSlide song mat-display-3" [innerHTML]="chordproFormatted(currentSlides[activeSlide])|chordpro"></div>
      <div class="nextSlides">
-        <div class="slide song" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides" [innerHTML]="chordproFormatted(slide)|chordpro"></div>
+        <div
+          class="slide song"
+          [class.first]="slide.first_slide_of_tag"
+          *ngFor="let slide of nextSlides"
+          [innerHTML]="chordproFormatted(slide)|chordpro">
        </div>
      </div>
    </div>
-  <div class="sidebar">
-    <div class="time">{{ (openlpService.getIsTwelveHourTime()) ? (time|date:'h:mm a') : (time|date:'HH:mm') }}</div>
+  </div>
+  <div class="toolbar">
+    <a class="back-button" mat-mini-fab color="" routerLink="/" [matTooltip]="'Go back to controller'">
+      <mat-icon>arrow_back</mat-icon>
+    </a>
    <div class="transpose">
-      <button mat-icon-button (click)="transposeUp()">
-        <mat-icon>keyboard_arrow_up</mat-icon>
-      </button>
-      <span>{{ transposeLevel }}</span>
      <button mat-icon-button (click)="transposeDown()">
        <mat-icon>keyboard_arrow_down</mat-icon>
      </button>
+      <span>{{ transposeLevel }}</span>
+      <button mat-icon-button (click)="transposeUp()">
+        <mat-icon>keyboard_arrow_up</mat-icon>
+      </button>
    </div>
-    <button mat-raised-button routerLink="/">Close</button>
+    <div class="time">{{ (openlpService.getIsTwelveHourTime()) ? (time|date:'h:mm a') : (time|date:'HH:mm') }}</div>
  </div>
 </div>
--- a/src/app/components/chord-view/chord-view.component.scss
+++ b/src/app/components/chord-view/chord-view.component.scss
@ -1,12 +1,19 @@
+@import '../overlay-common';
+
 .transpose {
-    margin-left: 25px;
    display: flex;
-    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    
+    mat-icon {
+        transform: scale(1.5);
+    }
+
+    @media screen and (min-width: $mobile-breakpoint) {
        font-size: 3rem;
        mat-icon {
-        font-size: 3rem;
-    }
-    span {
-        margin-left: 17px;
+            transform: scale(2);
+        }
    }
 }
--- a/src/app/components/chord-view/chordpro.pipe.ts
+++ b/src/app/components/chord-view/chordpro.pipe.ts
@ -52,6 +52,8 @@ export class ChordProPipe implements PipeTransform {
    notesSharpNotation = {};
    notesFlatNotation = {};

+    private fillHtml = `<span class="fill"><span class="fill-inner"></span></span>`;
+
    decodeHTML(value: string) {
        const tempElement = document.createElement('div');
        tempElement.innerHTML = value;
@ -146,40 +148,103 @@ export class ChordProPipe implements PipeTransform {
        // becuase it gets messed up when a chord is placed on it..
        // shouldn't be relevant if we actually get chordpro format
        song = this.decodeHTML(song);
-        const comp = this;
        if (!song) {
            return '';
        }
        let chordText = '';
-        let lastChord = '';
-        if (!song.match(comp.chordRegex)) {
+        if (!song.match(this.chordRegex)) {
            return `<div class="no-chords">${song}</div>`;
        }
-        song.split(comp.chordRegex).forEach((part, index) => {
-            if (index % 2 === 0) {
-                // text
-                if (lastChord) {
-                    chordText += `<span data-chord="${lastChord}">${part.substring(0, 1)}</span>${part.substring(1)}`;
-                    lastChord = '';
-                } else {
-                    chordText += part;
+        // Processing backwards so we can better identify where chords should overlap lyric letters
+        // or insert a space in lyrics
+        song.split(/\n/).reverse().forEach((row, index) => {
+
+            chordText = `</div>${index > 0 ? '<br>' : ''}` + chordText;
+            const rowParts = row.split(this.chordRegex);
+            let lastPart;
+
+            for (let i = rowParts.length - 1, r = 0, isFirst = true; i >= -1; i--, r++ ) {
+                if (!isFirst) {
+                    chordText = this._processChordRow(nHalfSteps, rowParts[i], i, lastPart, r) + chordText;
                }
-            } else {
+
+                lastPart = rowParts[i];
+                isFirst = false;
+            }
+
+            chordText = '<div class="song-row">' + chordText;
+        });
+        return `<div class="with-chords">${chordText}</div>`;
+    }
+
+    protected _processChordRow(nHalfSteps, part, index, lastPart, reverseIndex) {
+        if (index % 2 !== 0) {
+            if (index > 0) {
                // chord
-                lastChord = part.replace(/[[]]/, '');
+                let chord = part.replace(/[[]]/, '');
                if (nHalfSteps !== 0) {
-                    lastChord = lastChord.split('/').map(chord => {
-                        const chordRoot = comp.chordRoot(chord);
-                        const newRoot = comp.transposeChord(chordRoot, nHalfSteps);
-                        return newRoot + comp.restOfChord(chord);
+                    chord = chord.split('/').map(chordPart => {
+                        const chordRoot = this.chordRoot(chordPart);
+                        const newRoot = this.transposeChord(chordRoot, nHalfSteps);
+                        return newRoot + this.restOfChord(chordPart);
                    }).join('/');
                }

                // use proper symbols
-                lastChord = lastChord.replace(/b/g, '♭');
-                lastChord = lastChord.replace(/#/g, '♯');
+                chord = chord.replace(/b/g, '♭');
+                chord = chord.replace(/#/g, '♯');
+                const textFirstLetter = `${lastPart.substring(0, 1)}`;
+                const textRest = lastPart.substring(1);
+                const isChordMusicKey = chord.startsWith('=');
+                const chordLength = chord.length;
+                const isFirstChordAfterRealWord = (lastPart.length && (reverseIndex === 1));
+                const shouldOverlapChord = (!isChordMusicKey) && (isFirstChordAfterRealWord || (lastPart.length > chord.length));
+                const isChordOnly = !lastPart.trim().length;
+
+                const chordClass = (shouldOverlapChord && 'overlap-chord' || '') + (isChordOnly && ' chord-only' || '');
+
+                const textLength = 1 + textRest.length;
+                const fillHtmlNeededLength = (!shouldOverlapChord && (textLength < chordLength)) ? chordLength - 1 : (chordLength - 1);
+                let fillHtml = !shouldOverlapChord && !isChordMusicKey ? this._makeFillHtml(fillHtmlNeededLength || 1) : '';
+                let fillHtmlLength = fillHtml?.length ?? 0;
+                const finalTextLength = 1 + textRest.length + fillHtmlLength;
+                const needExtraFill = (!shouldOverlapChord && (finalTextLength <= chordLength));
+
+                if (needExtraFill) {
+                    fillHtml = this._makeFillHtml(fillHtmlLength + 1);
+                    fillHtmlLength++;
+                    chord += ' ';
+                }
+
+                if (!lastPart || (textFirstLetter === ' ')) {
+                    fillHtml = ' '.repeat(fillHtmlLength);
+                }
+
+                if ((fillHtmlLength === 1 && chordLength < 2)) {
+                    // To match text separator
+                    chord += ' ';
+                }
+
+                return `<span data-chord="${chord}" class="${chordClass}"><span class="chord">${chord}</span><span class="text ${fillHtml ? 'with-fill' : ''}"><span class="first-letter">${textFirstLetter}</span>${fillHtml}</span></span>${textRest}`;
+            } else {
+                return `${lastPart}`;
+            }
+        }
+        return '';
+    }
+
+    protected _makeFillHtml(length) {
+        if (length >= 3) {
+            let text = '';
+            const middle = Math.floor(length / 2);
+
+            for (let i = 0; i < length; i++) {
+                text += (i === middle) ? '\u2014' : ' ';
+            }
+
+            return text;
+        } else {
+            return '\u00B7' + (length === 2 ? ' ' : '');
        }
-        });
-        return `<div class="with-chords">${chordText}</div>`;
    }
 }
--- a/src/app/components/chord-view/chordpro.scss
+++ b/src/app/components/chord-view/chordpro.scss
@ -1,23 +1,93 @@
+@import '../overlay-common';
+
 .song {
    white-space: pre-wrap;
+
    .with-chords {
-        line-height: 2;
+        line-height: 1;
+        font-family: monospace;
+        padding-top: 0.45em; // To avoid chord overlapping top bar
+        @include slide-font-size(0.85, 0.725);
+
+        > span {
+            vertical-align: bottom;
+        }
    }

-    span[data-chord]:before {
-        position: relative;
-        top: -1em;
+    &-row {
        display: inline-block;
-        content: attr(data-chord);
-        width: 0;
+    }
+
+    span[data-chord]{
+        display: inline;
+        position: relative;
+        white-space: nowrap;
+
+        .text, .chord {
+            line-height: 1em;
+            height: 1em;
+            line-height: 2.4em;
+        }
+
+        .first-letter {
+            white-space: pre-wrap;
+        }
+
+        .chord {
            color: yellow;
+            display: inline-block;
+            transform: translateY(-100%);
+            white-space: pre;
+        }
+
+        // Chords that invades next text
+        &.overlap-chord {
+            position: relative;
+
+            .chord {
+                width: 0;
+            }
+        }
+
+        &:not(.overlap-chord) {
+            display: inline-flex;
+            flex-direction: column;
+
+            .text {
+                position: absolute;
+                left: 0;
+            }
+        }
+
+        // Chords without text
+        &.chord-only {
+            display: inline-flex;
+            flex-direction: column;
+            margin-right: 0.3em;
+
+            .chord {
+                position: static;
+            }
+        }
+
    }
 }

 .nextSlides {
    .song {
-        span[data-chord]:before {
+        span[data-chord] {
+            .chord {
                color: gray;
            }
+
+            .fill .fill-inner {
+                background-color: gray;
+            }
+        }
+
+    }
+
+    .slide .with-chords {
+        @include slide-font-size(0.75, 0.65);
    }
 }
--- a/src/app/components/overlay.scss
+++ b/src/app/components/overlay.scss
@ -1,3 +1,5 @@
+@import "./overlay-common";
+
 .overlay {
  background: black;
  width: 100%;
@ -9,44 +11,35 @@
  overflow: hidden;
  color: white;
  display: flex;
+  justify-content: flex-start;
  flex-direction: row;
-  justify-content: space-between;
-}

-.sidebar {
-  margin: 1rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 30%;
-}
+  &-content {
+    width: 100%;
+    max-width: 100%;
+    flex: 1;

-.time {
-  font-size: 3rem;
-  color: yellow;
-  text-align: right;
-}
-
-.notes {
-  margin-top: 1em;
-  font-size: 3rem;
-  line-height: 3rem;
-  color: salmon;
-  text-align: right;
-}
-
-.close {
-  text-align: right;
+    @media (orientation: portrait) {
+      overflow: hidden;
+      flex: 1;
    }

    .tags {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      color: green;
-  font-size: 4rem;
+      align-items: center;
+      @include slide-font-size(1);
+
+      @media screen and (min-width: $mobile-breakpoint) {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        font-size: 3rem;
+      }
+
      span {
        margin-left: 1rem;
        &.active {
@ -56,24 +49,120 @@
      }
    }

+  }
+
+  .sidebar {
+    padding: 0.8rem;
+    max-width: 30%;
+    margin-top: 1em;
+    overflow-y: auto;
+
+    .notes {
+      @include slide-font-size(0.9);
+      line-height: 1;
+
+      color: salmon;
+      text-align: right;
+    }
+
+    @media screen and (min-width: $mobile-breakpoint) {
+      margin-top: 4rem;
+    }
+
+    @media (orientation: portrait) {
+      max-width: none;
+      max-height: 20%;
+      margin-bottom: 3.75rem;
+      background-color: rgb(64, 64, 64);
+
+      .notes {
+        text-align: left;
+      }
+    }
+  }
+
+  @media (orientation: portrait) {
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+  
  .slide {
-  font-size: 3rem;
+    line-height: 1.2;
    white-space: pre-line;
    margin: 0;
+
    &.first {
      margin-top: 1rem;
    }
+
+    @include slide-font-size();
+  }
+
+}
+
+.toolbar {
+  padding: 0.8rem;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: auto;
+  gap: 1.5rem;
+
+  .back-button {
+    background: #fff;
+  }
+
+  @media screen and (max-width: ($mobile-breakpoint - 0.125px)){
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(64, 64, 64, 0.5);
+    backdrop-filter: blur(2px);
+    padding: 0.6rem;
+  }
+
+  @media screen and (min-width: $mobile-breakpoint) {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  @media screen and (max-width: ($mobile-breakpoint - 0.125px)) and (orientation: landscape) {
+    left: auto;
+    border-top-left-radius: 0.5rem;
+  }
+}
+
+.close {
+  text-align: right;
+}
+
+.time {
+  color: yellow;
+  text-align: right;
+  white-space: nowrap;
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 0.8rem;
+  font-size: 2rem;
+
+  @media screen and (min-width: $mobile-breakpoint) {
+    font-size: 3rem;
+  }
 }

 .container {
-  margin-left: 1rem;
+  margin: 0 1rem;
 }

 .nextSlides {
-  font-size: 2rem;
  margin-top: 1rem;
  color: grey;
+
  .slide {
-    font-size: 2rem;
+    @include slide-font-size(0.75);
  }
 }
--- a/src/app/components/stage-view/stage-view.component.html
+++ b/src/app/components/stage-view/stage-view.component.html
@ -1,5 +1,5 @@
 <div class="overlay">
-  <div>
+  <div class="overlay-content">
    <div class="tags">
      <span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
    </div>
@ -26,11 +26,23 @@
      </div>
    </div>
  </div>
-  <div class="sidebar">
-    <div class="top">
+  <div class="toolbar">
+    <a class="back-button" mat-mini-fab color="" routerLink="/" [matTooltip]="'Go back to controller'">
+      <mat-icon>arrow_back</mat-icon>
+    </a>
+    <button
+      mat-mini-fab
+      class="show-notes"
+      [matTooltip]="'Show/hide notes'"
+      [color]="showNotes ? 'primary' : ''"
+      [class.show-notes-disabled]="!showNotes"
+      (click)="showNotes = !showNotes"
+    >
+      <mat-icon>sticky_note_2</mat-icon>
+    </button>
    <div class="time">{{ (openlpService.getIsTwelveHourTime()) ? (time|date:'h:mm a') : (time|date:'HH:mm') }}</div>
+  </div>
+  <div class="sidebar" *ngIf="showNotes && notes">
    <div class="notes" [innerHTML]="notes|nl2br"></div>
  </div>
-    <div class="close"><button mat-raised-button class="closeButton" routerLink="/">Close</button></div>
-  </div>
 </div>
--- a/src/app/components/stage-view/stage-view.component.scss
+++ b/src/app/components/stage-view/stage-view.component.scss
@ -18,3 +18,11 @@
 .next-slides-text {
  font-size: 1.4rem;
 }
+
+.toolbar {
+  .show-notes {
+    &-disabled {
+      background: white;
+    }
+  }
+}
--- a/src/app/components/stage-view/stage-view.component.ts
+++ b/src/app/components/stage-view/stage-view.component.ts
@ -19,6 +19,7 @@ export class StageViewComponent implements OnInit {
  activeSlide = 0;
  tags: Tag[] = [];
  time = new Date();
+  showNotes = true;

  constructor(public openlpService: OpenLPService) {
    setInterval(() => this.time = new Date(), 1000);