From 333858bf48202cdc35a0b4a75d6c18c23ac90c04 Mon Sep 17 00:00:00 2001
From: David Frassi <d.frassi@estar.toscana.it>
Date: Thu, 18 Jun 2026 14:38:04 +0200
Subject: [PATCH] bugfix

---
 src/app/home/home.page.html                | 47 ++++++++++++----------
 src/app/home/home.page.ts                  | 39 ++++++++----------
 src/app/services/youtube-player.service.ts |  5 ++-
 src/app/version.ts                         |  2 +-
 4 files changed, 45 insertions(+), 48 deletions(-)

diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index f7a1f21..211b522 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -396,7 +396,7 @@
 
 </ion-content>
 
-<ion-footer *ngIf="youtubePlayerService.isPlayerSupported() && youtubePlayerService.currentCantoId()" class="ion-no-border">
+<ion-footer *ngIf="youtubePlayerService.currentCantoId()" class="ion-no-border">
   <ion-toolbar class="global-player-toolbar glass">
     <div class="player-content">
 
@@ -405,33 +405,36 @@
           <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
         </ion-button>
         
-        <ion-button fill="clear" color="secondary" (click)="youtubePlayerService.togglePlayPause()" class="play-btn">
-          <ion-icon slot="icon-only" [name]="youtubePlayerService.isPlaying() ? 'pause-sharp' : 'play-sharp'"></ion-icon>
-        </ion-button>
+        <ng-container *ngIf="youtubePlayerService.isPlayerSupported() && getPlayingCanto()?.link_youtube && getPlayingCanto()?.link_youtube!.length > 5; else noAudioMsg">
+          <ion-button fill="clear" color="secondary" (click)="togglePlayPause()" class="play-btn">
+            <ion-icon slot="icon-only" [name]="youtubePlayerService.isPlaying() ? 'pause-sharp' : 'play-sharp'"></ion-icon>
+          </ion-button>
 
-        <span class="player-time-label outfit-font" style="font-size: 0.85rem; color: var(--ion-color-secondary); opacity: 0.8; min-width: 38px; text-align: right; margin-left: 4px;">{{ formatSeconds(youtubePlayerService.videoProgress()) }}</span>
+          <span class="player-time-label outfit-font" style="font-size: 0.85rem; color: var(--ion-color-secondary); opacity: 0.8; min-width: 38px; text-align: right; margin-left: 4px;">{{ formatSeconds(youtubePlayerService.videoProgress()) }}</span>
 
-        <ion-range 
-          [min]="0" 
-          [max]="youtubePlayerService.videoDuration()" 
-          [value]="youtubePlayerService.videoProgress()"
-          (ionChange)="onSeek($event)"
-          (ionKnobMoveStart)="onSeekStart()"
-          (ionKnobMoveEnd)="onSeekEnd()"
-          color="secondary"
-          class="global-range"
-          style="margin: 0; padding: 0 4px;">
-        </ion-range>
+          <ion-range 
+            [min]="0" 
+            [max]="youtubePlayerService.videoDuration()" 
+            [value]="youtubePlayerService.videoProgress()"
+            (ionChange)="onSeek($event)"
+            (ionKnobMoveStart)="onSeekStart()"
+            (ionKnobMoveEnd)="onSeekEnd()"
+            color="secondary"
+            class="global-range"
+            style="margin: 0; padding: 0 4px;">
+          </ion-range>
 
-        <span class="player-time-label outfit-font" style="font-size: 0.85rem; color: var(--ion-color-secondary); opacity: 0.8; min-width: 38px; text-align: left; margin-right: 4px;">{{ formatSeconds(youtubePlayerService.videoDuration()) }}</span>
+          <span class="player-time-label outfit-font" style="font-size: 0.85rem; color: var(--ion-color-secondary); opacity: 0.8; min-width: 38px; text-align: left; margin-right: 4px;">{{ formatSeconds(youtubePlayerService.videoDuration()) }}</span>
+        </ng-container>
+        <ng-template #noAudioMsg>
+          <div class="no-audio-msg outfit-font" style="flex: 1; text-align: center; font-size: 0.85rem; opacity: 0.6; color: var(--ion-color-medium);">
+            Audio non disponibile
+          </div>
+        </ng-template>
 
         <ion-button fill="clear" color="secondary" (click)="playNextPreview($event)" class="skip-btn">
           <ion-icon slot="icon-only" name="chevron-forward"></ion-icon>
         </ion-button>
-
-        <ion-button fill="clear" color="medium" (click)="stopVideo($event)" class="close-btn">
-          <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
-        </ion-button>
       </div>
     </div>
   </ion-toolbar>
@@ -457,7 +460,7 @@
       <ion-button fill="clear" (click)="playPrevPreview($event)" class="car-mode-btn">
         <ion-icon slot="icon-only" name="play-skip-back-sharp"></ion-icon>
       </ion-button>
-      <ion-button fill="clear" (click)="youtubePlayerService.isPlaying() ? stopVideo($event) : playVideo($event, youtubePlayerService.currentCantoId()!)" class="car-mode-btn">
+      <ion-button fill="clear" (click)="youtubePlayerService.isPlaying() ? pauseVideo($event) : playVideo($event, youtubePlayerService.currentCantoId()!)" class="car-mode-btn">
         <ion-icon slot="icon-only" [name]="youtubePlayerService.isPlaying() ? 'pause-sharp' : 'play-sharp'"></ion-icon>
       </ion-button>
       <ion-button fill="clear" (click)="playNextPreview($event)" class="car-mode-btn">
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index bdfd962..5912647 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -44,7 +44,7 @@ export class HomePage implements OnDestroy {
       this.playNextPreview();
       event.preventDefault();
     } else if (event.key === 'MediaPlayPause') {
-      this.youtubePlayerService.togglePlayPause();
+      this.togglePlayPause();
       event.preventDefault();
     }
   }
@@ -517,13 +517,6 @@ export class HomePage implements OnDestroy {
       }
     });
 
-    // Reset black screen dismissed state when play/pause changes
-    effect(() => {
-      const isPlaying = this.youtubePlayerService.isPlaying();
-      if (!isPlaying) {
-        this.isBlackOverlayDismissed.set(false);
-      }
-    }, { allowSignalWrites: true });
 
     let queryParamsSubscribed = false;
     effect(() => {
@@ -566,9 +559,6 @@ export class HomePage implements OnDestroy {
           hasAutoActivatedPlaylist = true;
           this.selectPlaylist(lastPl);
           this.activeFilterType.set('playlist');
-          if (lastPl.ids && lastPl.ids.length > 0) {
-            this.goToCanto(lastPl.ids[0]);
-          }
         } else {
           hasAutoActivatedPlaylist = true;
         }
@@ -695,14 +685,10 @@ export class HomePage implements OnDestroy {
         }
       }
 
-      const openFirst = this.route.snapshot.queryParams['openFirst'] === '1';
       if (this.playlistService.processImportJson(json)) {
         this.limit.set(50); // Mostra più canti inizialmente per le playlist speciali
         this.activeFilterType.set('playlist');
         await this.router.navigate([], { queryParams: { import: null, openFirst: null }, queryParamsHandling: 'merge', replaceUrl: true });
-        if (openFirst && json.ids && json.ids.length > 0) {
-          this.goToCanto(json.ids[0]);
-        }
       }
     } catch (e) {
       console.error('Failed to import playlist', e);
@@ -910,11 +896,7 @@ export class HomePage implements OnDestroy {
         await toast.present();
 
         if (selectedPl.ids && selectedPl.ids.length > 0) {
-          hasNavigatedToCanto = true;
           await this.router.navigate([], { queryParams: { 'playlist-uid': null, 'playlist-id': null, 'openFirst': null }, queryParamsHandling: 'merge', replaceUrl: true });
-          if (openFirst) {
-            this.goToCanto(selectedPl.ids[0]);
-          }
         }
       } else {
         throw new Error('Formato dati non valido.');
@@ -1406,6 +1388,7 @@ export class HomePage implements OnDestroy {
     if (!this.youtubePlayerService.isPlayerSupported()) {
       return;
     }
+    this.isBlackOverlayDismissed.set(false);
     this.youtubePlayerService.setMediaSessionCallbacks(
       () => this.playNextPreview(),
       () => this.playPrevPreview()
@@ -1436,6 +1419,19 @@ export class HomePage implements OnDestroy {
     this.playlistService.autoPlayPlaylist.set(false);
   }
 
+  pauseVideo(event: Event) {
+    if (event) event.stopPropagation();
+    this.youtubePlayerService.pause();
+    this.isBlackOverlayDismissed.set(true);
+  }
+
+  togglePlayPause() {
+    if (!this.youtubePlayerService.isPlaying()) {
+      this.isBlackOverlayDismissed.set(false);
+    }
+    this.youtubePlayerService.togglePlayPause();
+  }
+
   playNextPreview(event?: Event) {
     if (event) event.stopPropagation();
     const currentId = this.youtubePlayerService.currentCantoId();
@@ -1655,11 +1651,8 @@ export class HomePage implements OnDestroy {
       // Automatically save to the device!
       this.playlistService.savePlaylist(playlistName, ids);
 
-      // Activate the playlist filter and open the first song!
+      // Activate the playlist filter
       this.activeFilterType.set('playlist');
-      if (ids.length > 0) {
-        this.goToCanto(ids[0]);
-      }
     }
   }
 
diff --git a/src/app/services/youtube-player.service.ts b/src/app/services/youtube-player.service.ts
index 806825d..31f066a 100644
--- a/src/app/services/youtube-player.service.ts
+++ b/src/app/services/youtube-player.service.ts
@@ -50,8 +50,9 @@ export class YoutubePlayerService {
     // Auto-stop player when not supported (e.g. going offline)
     effect(() => {
       const supported = this.isPlayerSupported();
-      if (!supported && this.currentCantoId()) {
-        this.stop();
+      if (!supported) {
+        this.isPlaying.set(false);
+        this.destroyPlayer();
       }
     });
   }
diff --git a/src/app/version.ts b/src/app/version.ts
index 34d6e41..d64a6c3 100644
--- a/src/app/version.ts
+++ b/src/app/version.ts
@@ -1 +1 @@
-export const VERSION = '2026.06.18.1346';
+export const VERSION = '2026.06.18.1434';