feat: show instructions when playlist is empty & fix high contrast contrast

src/app/pages/player/player.page.ts

@@ -114,6 +114,7 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
 
   private initialPinchDistance: number | null = null;
   private initialFontSize: number = 1.0;
+  public portraitFontSize: number = 1.0;
 
   private lastMatchedTranscript: string = '';
 
@@ -267,8 +268,10 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
         this.autoscrollSpeed.set(playlistSongSetting.speed !== undefined ? playlistSongSetting.speed : 2);
         if (playlistSongSetting.zoom !== undefined) {
           this.fontSize.set(playlistSongSetting.zoom);
+          this.portraitFontSize = playlistSongSetting.zoom;
         } else {
           this.fontSize.set(1.0);
+          this.portraitFontSize = 1.0;
         }
       } else if (this.comunitaService.comunitaCode() && this.comunitaService.isFilterActive()) {
         const settings = this.comunitaService.comunitaCantiSettings();
@@ -289,9 +292,13 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
           this.transposeAmount.set(0);
           this.autoscrollSpeed.set(2);
         }
+        this.fontSize.set(1.0);
+        this.portraitFontSize = 1.0;
       } else {
         this.transposeAmount.set(0);
         this.autoscrollSpeed.set(2);
+        this.fontSize.set(1.0);
+        this.portraitFontSize = 1.0;
       }
     }, { allowSignalWrites: true });
 
@@ -320,6 +327,9 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private checkAndLimitFontSize(targetFont: number): number {
+    if (!this.isLandscape()) {
+      return targetFont;
+    }
     const titleMain = this.el.nativeElement.querySelector('.title-main');
     if (!titleMain) return targetFont;
 
@@ -388,9 +398,8 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
         }
       }, 150);
     } else {
-      const limitedFont = this.checkAndLimitFontSize(1.0);
-      this.fontSize.set(limitedFont);
-      this.channel.postMessage({ type: 'SYNC_FONT', fontSize: limitedFont });
+      this.fontSize.set(this.portraitFontSize);
+      this.channel.postMessage({ type: 'SYNC_FONT', fontSize: this.portraitFontSize });
     }
   }
 
@@ -518,6 +527,9 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
       }
       if (Math.abs(limited - this.fontSize()) > 0.01) {
         this.fontSize.set(limited);
+        if (!this.isLandscape()) {
+          this.portraitFontSize = limited;
+        }
         this.channel.postMessage({ type: 'SYNC_FONT', fontSize: this.fontSize() });
       }
     }
@@ -582,6 +594,9 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
       }
       if (limited !== this.fontSize()) {
         this.fontSize.set(limited);
+        if (!this.isLandscape()) {
+          this.portraitFontSize = limited;
+        }
         this.channel.postMessage({ type: 'SYNC_FONT', fontSize: this.fontSize() });
         this.updatePlaylistSettings();
       }
@@ -593,6 +608,9 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
     if (this.fontSize() > minZ) {
       const target = Math.max(this.fontSize() - this.FONT_STEP, minZ);
       this.fontSize.set(target);
+      if (!this.isLandscape()) {
+        this.portraitFontSize = target;
+      }
       this.channel.postMessage({ type: 'SYNC_FONT', fontSize: this.fontSize() });
       this.updatePlaylistSettings();
     }