fix: risolto accesso diretto ai singoli canti tramite URL e queryParams
- Aggiunto il caricamento reattivo del canto tramite un 'effect' in PlayerPage e DisplayPage. - Ora l'applicazione attende che la lista asincrona dei canti sia popolata per caricare la canzone richiesta da URL.
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Component, OnInit, OnDestroy, signal, computed, inject } from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy, signal, computed, effect, inject } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { CantiService, Canto } from '../../services/canti.service';
|
||||
import { LyricsParserService, ParsedSection } from '../../services/lyrics-parser.service';
|
||||
@@ -11,6 +11,7 @@ import { LyricsParserService, ParsedSection } from '../../services/lyrics-parser
|
||||
})
|
||||
export class DisplayPage implements OnInit, OnDestroy {
|
||||
public canto = signal<Canto | null>(null);
|
||||
public activeSongId = signal<string | null>(null);
|
||||
public showChords = signal<boolean>(false);
|
||||
public fontSize = signal<number>(1.0);
|
||||
public currentLineIndex = signal<number>(0);
|
||||
@@ -54,14 +55,24 @@ export class DisplayPage implements OnInit, OnDestroy {
|
||||
private cantiService = inject(CantiService);
|
||||
private lyricsParser = inject(LyricsParserService);
|
||||
|
||||
constructor() { }
|
||||
constructor() {
|
||||
effect(() => {
|
||||
const id = this.activeSongId();
|
||||
const allCanti = this.cantiService.canti();
|
||||
if (id) {
|
||||
const found = allCanti.find(c => c.id === id);
|
||||
if (found) {
|
||||
this.canto.set(found);
|
||||
}
|
||||
}
|
||||
}, { allowSignalWrites: true });
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.queryParams.subscribe(params => {
|
||||
const id = params['id'];
|
||||
if (id) {
|
||||
const found = this.cantiService.getCantoById(id);
|
||||
if (found) this.canto.set(found);
|
||||
this.activeSongId.set(id);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -70,8 +81,7 @@ export class DisplayPage implements OnInit, OnDestroy {
|
||||
this.currentLineIndex.set(event.data.index);
|
||||
}
|
||||
if (event.data.type === 'SYNC_CANTO') {
|
||||
const found = this.cantiService.getCantoById(event.data.id);
|
||||
if (found) this.canto.set(found);
|
||||
this.activeSongId.set(event.data.id);
|
||||
}
|
||||
if (event.data.type === 'SYNC_CHORDS') {
|
||||
this.showChords.set(event.data.showChords);
|
||||
|
||||
Reference in New Issue
Block a user