canti primo tag
This commit is contained in:
David Frassi
@@ -0,0 +1,16 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { HomePage } from './home.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: HomePage,
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class HomePageRoutingModule {}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HomePage } from './home.page';
|
||||
import { HomePageRoutingModule } from './home-routing.module';
|
||||
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
HomePageRoutingModule,
|
||||
DragDropModule
|
||||
],
|
||||
declarations: [HomePage]
|
||||
})
|
||||
export class HomePageModule {}
|
||||
@@ -0,0 +1,285 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="bg-gradient">
|
||||
<ion-title class="outfit-font">
|
||||
<div class="header-logo-wrapper">
|
||||
<img src="assets/icon/favicon.png" class="header-logo">
|
||||
<div class="header-text-group">
|
||||
<span class="app-name">CantiCristiani</span>
|
||||
<span class="version-badge">v{{ version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<div class="offline-badge-header" *ngIf="!connectivityService.isOnline()">
|
||||
<ion-icon name="cloud-offline-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
|
||||
<ion-button (click)="importPlaylist()" class="add-btn">
|
||||
<ion-icon slot="icon-only" name="qr-code-outline"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button routerLink="/propose-canto" class="add-btn" *ngIf="!playlistService.selectionMode() && settingsService.showEditor()">
|
||||
<ion-icon slot="icon-only" name="add-outline"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button routerLink="/settings" class="settings-btn">
|
||||
<ion-icon slot="icon-only" name="settings-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="bg-gradient" *ngIf="!playlistService.selectionMode() || isAddingSongs()">
|
||||
<div class="search-wrapper-group">
|
||||
<div class="search-row">
|
||||
<div class="search-wrapper glass">
|
||||
<ion-searchbar
|
||||
placeholder="Cerca un canto..."
|
||||
[value]="searchQuery()"
|
||||
(ionInput)="onSearch($event)"
|
||||
class="custom-searchbar">
|
||||
</ion-searchbar>
|
||||
<ion-button fill="clear" (click)="toggleVoiceSearch()" class="voice-search-btn">
|
||||
<ion-icon slot="icon-only" [name]="audioEngine.isSearching() ? 'mic' : 'mic-outline'" [color]="audioEngine.isSearching() ? 'danger' : 'secondary'"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions-row">
|
||||
<div class="song-count-card outfit-font">
|
||||
{{ filteredCanti().length }}
|
||||
</div>
|
||||
<div class="filter-buttons">
|
||||
<ion-button
|
||||
*ngIf="settingsService.showEditor()"
|
||||
[fill]="showOnlyMine() ? 'solid' : 'outline'"
|
||||
size="small"
|
||||
(click)="toggleOnlyMine()"
|
||||
color="secondary"
|
||||
class="filter-chip">
|
||||
Miei
|
||||
<span class="close-icon-wrapper" *ngIf="showOnlyMine()" (click)="clearOnlyMine($event)">
|
||||
<ion-icon slot="end" name="close-circle"></ion-icon>
|
||||
</span>
|
||||
</ion-button>
|
||||
|
||||
<ion-button
|
||||
[fill]="activeFilterType() === 'liturgico' || selectedLiturgico() !== null ? 'solid' : 'outline'"
|
||||
size="small"
|
||||
(click)="toggleFilterType('liturgico')"
|
||||
class="filter-chip">
|
||||
{{ selectedLiturgico() !== null ? getSelectedLiturgicoLabel() : 'Liturgia' }}
|
||||
<ion-icon slot="end" name="chevron-down-outline" *ngIf="selectedLiturgico() === null"></ion-icon>
|
||||
<span class="close-icon-wrapper" *ngIf="selectedLiturgico() !== null" (click)="clearLiturgico($event)">
|
||||
<ion-icon slot="end" name="close-circle"></ion-icon>
|
||||
</span>
|
||||
</ion-button>
|
||||
|
||||
<ion-button
|
||||
[fill]="activeFilterType() === 'tematico' || selectedTematico() !== null ? 'solid' : 'outline'"
|
||||
size="small"
|
||||
(click)="toggleFilterType('tematico')"
|
||||
class="filter-chip">
|
||||
{{ selectedTematico() !== null ? getSelectedTematicoLabel() : 'Periodo' }}
|
||||
<ion-icon slot="end" name="chevron-down-outline" *ngIf="selectedTematico() === null"></ion-icon>
|
||||
<span class="close-icon-wrapper" *ngIf="selectedTematico() !== null" (click)="clearTematico($event)">
|
||||
<ion-icon slot="end" name="close-circle"></ion-icon>
|
||||
</span>
|
||||
</ion-button>
|
||||
|
||||
<ion-button
|
||||
[fill]="activeFilterType() === 'playlist' || playlistService.activeListName() !== null ? 'solid' : 'outline'"
|
||||
size="small"
|
||||
(click)="playlistService.playlists().length > 0 ? toggleFilterType('playlist') : playlistService.toggleSelectionMode()"
|
||||
class="filter-chip">
|
||||
{{ playlistService.activeListName() !== null ? playlistService.activeListName() : 'Playlist' }}
|
||||
<ion-icon slot="end" name="chevron-down-outline" *ngIf="playlistService.activeListName() === null && playlistService.playlists().length > 0"></ion-icon>
|
||||
<ion-icon slot="end" name="add-circle-outline" *ngIf="playlistService.activeListName() === null && playlistService.playlists().length === 0"></ion-icon>
|
||||
<span class="close-icon-wrapper" *ngIf="playlistService.activeListName() !== null" (click)="clearSpecialList($event)">
|
||||
<ion-icon slot="end" name="close-circle"></ion-icon>
|
||||
</span>
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<!-- Category Scroll (Dropdown style) -->
|
||||
<ion-toolbar class="bg-gradient momentos-toolbar" *ngIf="activeFilterType() || playlistService.selectionMode() || (playlistService.activeListName() && !playlistService.selectionMode())">
|
||||
<div class="momento-scroll">
|
||||
<!-- Selection Mode Actions -->
|
||||
<div class="selection-pill glass" *ngIf="playlistService.selectionMode()">
|
||||
<span class="selection-count">{{ playlistService.selectedIds().size }}</span>
|
||||
<ion-button fill="clear" color="secondary" (click)="finishSelection()" [disabled]="playlistService.selectedIds().size === 0" class="mini-action-btn">
|
||||
<ion-icon slot="icon-only" name="save-outline"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="clear" color="danger" (click)="cancelSelection()" class="mini-action-btn">
|
||||
<ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
|
||||
<!-- Active Playlist Actions -->
|
||||
<div class="selection-pill glass" *ngIf="playlistService.activeListName() && !playlistService.selectionMode()">
|
||||
<ion-button fill="clear" color="secondary" (click)="editPlaylist()" class="mini-action-btn">
|
||||
<ion-icon slot="icon-only" name="create-outline"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="clear" color="secondary" (click)="shareActivePlaylist()" class="mini-action-btn">
|
||||
<ion-icon slot="icon-only" name="share-social-outline"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="clear" color="danger" (click)="deleteActivePlaylist()" class="mini-action-btn" *ngIf="playlistService.activePlaylistId()">
|
||||
<ion-icon slot="icon-only" name="trash-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
|
||||
<!-- Filter chips -->
|
||||
<div
|
||||
*ngFor="let item of (activeFilterType() === 'playlist' ? playlistService.playlists() : (activeFilterType() === 'liturgico' ? cantiService.indiceLiturgico() : (activeFilterType() === 'tematico' ? cantiService.indiceTematico() : [])))"
|
||||
class="momento-chip glass"
|
||||
[class.active]="activeFilterType() === 'playlist' ? playlistService.activePlaylistId() === item.id : isIndexSelected(item.id)"
|
||||
(click)="activeFilterType() === 'playlist' ? selectPlaylist(item) : toggleIndex(item.id, activeFilterType()!)">
|
||||
{{ activeFilterType() === 'playlist' ? item.name : item.tag_name }}
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="bg-gradient"
|
||||
(touchstart)="onTouchStart($event); onInteraction()"
|
||||
(touchmove)="onTouchMove($event)"
|
||||
(touchend)="onTouchEnd()"
|
||||
(click)="onInteraction()">
|
||||
|
||||
<div class="ion-padding no-padding-top">
|
||||
<div *ngIf="cantiService.loading() && filteredCanti().length === 0" class="ion-text-center ion-padding loading-container">
|
||||
<div class="loading-wrapper">
|
||||
<ion-spinner name="crescent" color="secondary"></ion-spinner>
|
||||
<div class="percentage-label outfit-font">{{ cantiService.progress() }}%</div>
|
||||
<p class="ion-margin-top" style="color: var(--ion-color-secondary)">Caricamento canti...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wrap in DragDrop only in Reorder mode -->
|
||||
<div cdkDropList
|
||||
[cdkDropListDisabled]="!playlistService.selectionMode() || isAddingSongs()"
|
||||
(cdkDropListDropped)="drop($event)"
|
||||
class="transparent-list">
|
||||
|
||||
<ion-item *ngFor="let canto of visibleCanti()"
|
||||
[id]="'canto-' + canto.id"
|
||||
class="glass ion-margin-bottom custom-item"
|
||||
[class.is-playing]="youtubePlayerService.currentCantoId() === canto.id"
|
||||
cdkDrag
|
||||
[cdkDragDisabled]="!playlistService.selectionMode() || isAddingSongs()">
|
||||
|
||||
<!-- Drag Handle (visible only in reorder mode) -->
|
||||
<div class="drag-handle" cdkDragHandle *ngIf="playlistService.selectionMode() && !isAddingSongs()">
|
||||
<ion-icon name="reorder-two-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<div class="item-wrapper">
|
||||
<!-- Selection Area -->
|
||||
<div class="selection-column" (click)="playlistService.toggleSongSelection(canto.id); $event.stopPropagation()">
|
||||
<span class="canto-number" [class.selected-number]="playlistService.selectedIds().has(canto.id)">
|
||||
{{ canto.id.startsWith('my_') ? 'M' : canto.id_canti }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="content-column" (click)="goToCanto(canto.id)">
|
||||
<div class="top-row">
|
||||
<ion-label class="info-section">
|
||||
<h2 class="outfit-font" style="font-weight: 500; color: var(--ion-color-secondary)">
|
||||
{{ canto.titolo }}
|
||||
</h2>
|
||||
<p style="color: rgba(255,255,255,0.6); margin-bottom: 2px;">{{ canto.autore || 'Autore sconosciuto' }}</p>
|
||||
</ion-label>
|
||||
|
||||
<!-- Video Thumbnail Section -->
|
||||
<div *ngIf="canto.link_youtube && canto.link_youtube.length > 5" class="thumb-section" (click)="$event.stopPropagation()">
|
||||
<div class="thumb-container compact">
|
||||
<ng-container *ngIf="connectivityService.isOnline(); else offlineThumb">
|
||||
<div class="thumb-wrapper" (click)="playVideo($event, canto.id)">
|
||||
<img [src]="cantiService.getYoutubeThumb(canto.link_youtube)"
|
||||
class="thumb-img loaded"
|
||||
loading="lazy">
|
||||
<div class="play-overlay youtube-overlay">
|
||||
<ion-icon name="play-sharp"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-template #offlineThumb>
|
||||
<div class="thumb-wrapper">
|
||||
<div class="offline-thumb">
|
||||
<ion-icon name="cloud-offline-outline"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Button (only for local songs) -->
|
||||
<div *ngIf="canto.id.startsWith('my_')" class="delete-section" (click)="$event.stopPropagation()">
|
||||
<ion-button fill="clear" color="danger" (click)="deleteMyCanto(canto.id, $event)">
|
||||
<ion-icon slot="icon-only" name="trash-outline"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Player bars removed from here -->
|
||||
</div>
|
||||
</ion-item>
|
||||
</div>
|
||||
|
||||
<!-- Add songs / Toggle View Button -->
|
||||
<div class="ion-text-center ion-margin-top" *ngIf="playlistService.selectionMode()">
|
||||
<ion-button fill="solid" color="secondary" (click)="toggleAddingSongs()" class="action-mode-btn glass">
|
||||
<ion-icon slot="start" [name]="isAddingSongs() ? 'list-outline' : 'add-circle-outline'"></ion-icon>
|
||||
{{ isAddingSongs() ? 'Torna alla Playlist' : 'Aggiungi altri canti' }}
|
||||
</ion-button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!cantiService.loading() && filteredCanti().length === 0" class="ion-text-center ion-padding">
|
||||
<p style="color: rgba(255,255,255,0.5)">Nessun canto trovato.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-infinite-scroll (ionInfinite)="loadData($event)" threshold="150px" [disabled]="limit() >= filteredCanti().length || (playlistService.selectionMode() && !isAddingSongs())">
|
||||
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Caricamento altri canti...">
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<ion-footer *ngIf="youtubePlayerService.currentCantoId()" class="ion-no-border">
|
||||
<ion-toolbar class="global-player-toolbar glass">
|
||||
<div class="player-content">
|
||||
<div class="controls-row">
|
||||
<ion-button fill="clear" color="secondary" (click)="playPrevPreview($event)" class="skip-btn">
|
||||
<ion-icon slot="icon-only" name="play-skip-back-sharp"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<ion-button fill="clear" color="secondary" (click)="youtubePlayerService.isPlaying() ? stopVideo($event) : playVideo($event, youtubePlayerService.currentCantoId()!)" class="play-btn">
|
||||
<ion-icon slot="icon-only" [name]="youtubePlayerService.isPlaying() ? 'pause-sharp' : 'play-sharp'"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<ion-range
|
||||
[min]="0"
|
||||
[max]="youtubePlayerService.videoDuration()"
|
||||
[value]="youtubePlayerService.videoProgress()"
|
||||
(ionChange)="onSeek($event)"
|
||||
(ionKnobMoveStart)="onSeekStart()"
|
||||
(ionKnobMoveEnd)="onSeekEnd()"
|
||||
color="secondary"
|
||||
class="global-range">
|
||||
</ion-range>
|
||||
|
||||
<ion-button fill="clear" color="secondary" (click)="playNextPreview($event)" class="skip-btn">
|
||||
<ion-icon slot="icon-only" name="play-skip-forward-sharp"></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>
|
||||
</ion-footer>
|
||||
@@ -0,0 +1,750 @@
|
||||
.outfit-font {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
}
|
||||
|
||||
.bg-gradient {
|
||||
--background: radial-gradient(circle at top left, #2d3436 0%, #121212 100%);
|
||||
background: radial-gradient(circle at top left, #2d3436 0%, #121212 100%);
|
||||
}
|
||||
|
||||
.custom-searchbar {
|
||||
flex: 1 !important;
|
||||
--background: transparent !important;
|
||||
--color: white;
|
||||
--placeholder-color: rgba(255, 255, 255, 0.4);
|
||||
--icon-color: var(--ion-color-secondary);
|
||||
--box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
&::part(container) {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&::part(input-container) {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 16px 12px 16px; // Added top padding for extra clearance
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 2px 4px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
.voice-search-btn {
|
||||
--padding-start: 8px;
|
||||
--padding-end: 8px;
|
||||
margin: 0;
|
||||
height: 44px;
|
||||
|
||||
ion-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-actions-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
|
||||
// Hide scrollbar but keep functionality
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
.song-count-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(var(--ion-color-secondary-rgb), 0.15);
|
||||
border: 1px solid rgba(var(--ion-color-secondary-rgb), 0.3);
|
||||
padding: 0 12px;
|
||||
border-radius: 12px;
|
||||
height: 32px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 800;
|
||||
color: var(--ion-color-secondary);
|
||||
backdrop-filter: blur(10px);
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
|
||||
ion-button.filter-chip {
|
||||
--border-radius: 20px;
|
||||
--border-width: 1px;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
min-height: 32px;
|
||||
font-size: 0.85rem;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
|
||||
.close-icon-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 6px;
|
||||
padding: 4px;
|
||||
margin-right: -8px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
|
||||
ion-icon {
|
||||
font-size: 1.2rem;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.transparent-list {
|
||||
background: transparent !important;
|
||||
padding-bottom: 120px; // Spazio per il player fisso
|
||||
}
|
||||
|
||||
ion-item.glass {
|
||||
--background: rgba(255, 255, 255, 0.05);
|
||||
--border-radius: 16px;
|
||||
--padding-start: 16px;
|
||||
--inner-padding-end: 16px;
|
||||
margin-bottom: 12px;
|
||||
transition: transform 0.2s ease, background 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
--background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
ion-title {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
color: var(--ion-color-secondary);
|
||||
padding-inline: 0;
|
||||
|
||||
.add-btn, .settings-btn {
|
||||
--color: var(--ion-color-secondary);
|
||||
--padding-start: 8px;
|
||||
--padding-end: 8px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.header-logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
padding: 20px 0 16px 24px; // Increased padding for mobile spacing
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
||||
border: 2px solid rgba(var(--ion-color-secondary-rgb), 0.2);
|
||||
}
|
||||
|
||||
.header-text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
|
||||
.app-name {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-secondary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.version-badge {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.settings-btn {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.special-list-banner {
|
||||
--background: rgba(var(--ion-color-secondary-rgb), 0.1);
|
||||
--border-style: none;
|
||||
border-bottom: 1px solid rgba(var(--ion-color-secondary-rgb), 0.2);
|
||||
|
||||
.banner-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
height: 40px;
|
||||
|
||||
.banner-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--ion-color-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
|
||||
small {
|
||||
opacity: 0.6;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
ion-button {
|
||||
--padding-start: 4px;
|
||||
--padding-end: 4px;
|
||||
margin: 0;
|
||||
height: 32px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.results-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--ion-color-secondary);
|
||||
background: rgba(var(--ion-color-secondary-rgb), 0.1);
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
margin-right: 0;
|
||||
border: 1px solid rgba(var(--ion-color-secondary-rgb), 0.1);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-filtered {
|
||||
background: rgba(var(--ion-color-secondary-rgb), 0.2);
|
||||
border-color: var(--ion-color-secondary);
|
||||
box-shadow: 0 0 10px rgba(var(--ion-color-secondary-rgb), 0.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
font-size: 1.1rem;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.canti-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.canti-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.loading-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.percentage-label {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-secondary);
|
||||
text-shadow: 0 0 15px rgba(253, 203, 110, 0.3);
|
||||
}
|
||||
|
||||
.no-padding-top {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.search-wrapper-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px 8px 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.momentos-toolbar {
|
||||
--min-height: 32px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.momento-scroll {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding: 0 16px;
|
||||
gap: 10px;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.momento-chip {
|
||||
flex: 0 0 auto;
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-family: 'Outfit', sans-serif;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
&.active {
|
||||
background: var(--ion-color-secondary) !important;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
border-color: var(--ion-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Item Layout
|
||||
.custom-item {
|
||||
--padding-start: 16px;
|
||||
--inner-padding-end: 16px;
|
||||
--min-height: 70px; // Reduced height
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
|
||||
&.is-playing {
|
||||
--background: rgba(var(--ion-color-secondary-rgb), 0.15) !important;
|
||||
border-left: 4px solid var(--ion-color-secondary);
|
||||
box-shadow: inset 0 0 20px rgba(var(--ion-color-secondary-rgb), 0.1);
|
||||
transform: scale(1.02);
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
border-radius: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.playlist-name-chip {
|
||||
margin-right: 8px;
|
||||
max-width: 150px;
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 4px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.item-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.selection-column {
|
||||
padding: 10px 14px 10px 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.canto-number {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
background: rgba(var(--ion-color-secondary-rgb), 0.1);
|
||||
color: var(--ion-color-secondary);
|
||||
font-size: 0.85rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
border: 2px solid var(--ion-color-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
pointer-events: none;
|
||||
|
||||
&.selected-number {
|
||||
background: var(--ion-color-secondary) !important;
|
||||
color: #000 !important;
|
||||
box-shadow: 0 0 15px rgba(var(--ion-color-secondary-rgb), 0.5);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.player-inline-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&.full-width {
|
||||
margin-top: 4px;
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
ion-range {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
--bar-height: 2px;
|
||||
--knob-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-container {
|
||||
&.compact {
|
||||
width: 50px;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hidden-player {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.thumb-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
|
||||
&.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0.05) 25%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
rgba(255, 255, 255, 0.05) 75%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
.play-overlay {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
|
||||
ion-icon {
|
||||
font-size: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.youtube-overlay {
|
||||
background: rgba(0, 0, 0, 0.6) !important;
|
||||
ion-icon {
|
||||
color: #ff0000;
|
||||
font-size: 16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.offline-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
gap: 4px;
|
||||
|
||||
ion-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
span {
|
||||
font-size: 0.6rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
.finish-selection-fab {
|
||||
--border-radius: 30px;
|
||||
width: auto;
|
||||
min-width: 120px;
|
||||
|
||||
.fab-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
gap: 8px;
|
||||
|
||||
ion-icon {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.fab-label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selection-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: rgba(var(--ion-color-secondary-rgb), 0.15) !important;
|
||||
border: 1px solid rgba(var(--ion-color-secondary-rgb), 0.3);
|
||||
padding: 2px 4px 2px 10px;
|
||||
border-radius: 20px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.selection-count {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 800;
|
||||
color: var(--ion-color-secondary);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.mini-action-btn {
|
||||
--padding-start: 4px;
|
||||
--padding-end: 4px;
|
||||
margin: 0;
|
||||
height: 28px;
|
||||
min-width: 32px;
|
||||
|
||||
ion-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small-action-btn {
|
||||
--padding-start: 4px;
|
||||
--padding-end: 4px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
|
||||
ion-icon {
|
||||
font-size: 1.3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 12px 0 0;
|
||||
cursor: grab;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
ion-icon {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.action-mode-btn {
|
||||
--border-radius: 20px;
|
||||
--box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.header-logo-wrapper {
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
}
|
||||
/* GLOBAL PLAYER FOOTER */
|
||||
.global-player-toolbar {
|
||||
--background: transparent;
|
||||
--padding-top: 4px;
|
||||
--padding-bottom: 4px;
|
||||
--padding-start: 12px;
|
||||
--padding-end: 12px;
|
||||
|
||||
&.glass {
|
||||
background: rgba(26, 26, 46, 0.95) !important;
|
||||
backdrop-filter: blur(20px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.player-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.controls-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.play-btn {
|
||||
--padding-start: 0;
|
||||
--padding-end: 0;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
|
||||
ion-icon {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.skip-btn, .close-btn {
|
||||
--padding-start: 0;
|
||||
--padding-end: 0;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
|
||||
ion-icon {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.global-range {
|
||||
flex: 1;
|
||||
--bar-height: 4px;
|
||||
--knob-size: 14px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Adjust bottom spacing for list when player is active */
|
||||
.transparent-list {
|
||||
padding-bottom: 100px !important;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { HomePage } from './home.page';
|
||||
|
||||
describe('HomePage', () => {
|
||||
let component: HomePage;
|
||||
let fixture: ComponentFixture<HomePage>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [HomePage],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HomePage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,762 @@
|
||||
import { Component, computed, signal, inject, effect, OnDestroy } from '@angular/core';
|
||||
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
|
||||
import { CantiService } from '../services/canti.service';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { AudioEngineService } from '../services/audio-engine.service';
|
||||
import { ThemeService } from '../services/theme.service';
|
||||
import { ConnectivityService } from '../services/connectivity.service';
|
||||
import { PlaylistService } from '../services/playlist.service';
|
||||
import { SettingsService } from '../services/settings.service';
|
||||
import { VERSION } from '../version';
|
||||
import { YoutubePlayerService } from '../services/youtube-player.service';
|
||||
import { ModalController, AlertController, ToastController } from '@ionic/angular';
|
||||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import { MyCantiService } from '../services/my-canti.service';
|
||||
import { QrScannerComponent } from '../components/qr-scanner/qr-scanner.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
templateUrl: 'home.page.html',
|
||||
styleUrls: ['home.page.scss'],
|
||||
standalone: false,
|
||||
})
|
||||
export class HomePage implements OnDestroy {
|
||||
public searchQuery = signal<string>('');
|
||||
public selectedLiturgico = signal<number | null>(null);
|
||||
public selectedTematico = signal<number | null>(null);
|
||||
public showOnlyMine = signal<boolean>(false);
|
||||
public activeFilterType = signal<'liturgico' | 'tematico' | 'playlist' | null>(null);
|
||||
public loadedThumbs = new Set<string>();
|
||||
public version = VERSION;
|
||||
public isAddingSongs = signal<boolean>(false);
|
||||
public reorderList = signal<any[]>([]);
|
||||
public limit = signal<number>(30);
|
||||
|
||||
public fontSize = signal<number>(1.0);
|
||||
public youtubePlayerService = inject(YoutubePlayerService);
|
||||
public isSeeking = false;
|
||||
|
||||
private readonly MIN_FONT = 0.6;
|
||||
private readonly MAX_FONT = 5.0;
|
||||
private initialPinchDistance: number | null = null;
|
||||
private initialFontSize: number = 1.0;
|
||||
|
||||
private sanitizer = inject(DomSanitizer);
|
||||
public audioEngine = inject(AudioEngineService);
|
||||
public themeService = inject(ThemeService);
|
||||
public connectivityService = inject(ConnectivityService);
|
||||
public cantiService = inject(CantiService);
|
||||
public myCantiService = inject(MyCantiService);
|
||||
public playlistService = inject(PlaylistService);
|
||||
public settingsService = inject(SettingsService);
|
||||
private router = inject(Router);
|
||||
private route = inject(ActivatedRoute);
|
||||
private modalCtrl = inject(ModalController);
|
||||
private alertCtrl = inject(AlertController);
|
||||
private toastCtrl = inject(ToastController);
|
||||
|
||||
private firstInteraction = true;
|
||||
|
||||
onInteraction() {
|
||||
if (this.firstInteraction) {
|
||||
this.firstInteraction = false;
|
||||
}
|
||||
}
|
||||
|
||||
private scrollEffect = effect(() => {
|
||||
const activeId = this.youtubePlayerService.currentCantoId();
|
||||
if (activeId) {
|
||||
// Delay slightly to ensure DOM is updated and classes are applied
|
||||
setTimeout(() => {
|
||||
const element = document.getElementById('canto-' + activeId);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
private normalize(str: string | undefined): string {
|
||||
if (!str) return '';
|
||||
return str
|
||||
.toLowerCase()
|
||||
.replace(/[’'‘’´`]/g, "'")
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.replace(/hallelujah/g, 'alleluia')
|
||||
.replace(/halleluja/g, 'alleluia')
|
||||
.replace(/alleluja/g, 'alleluia');
|
||||
}
|
||||
|
||||
public filteredCanti = computed(() => {
|
||||
const query = this.normalize(this.searchQuery());
|
||||
const litId = this.selectedLiturgico();
|
||||
const temId = this.selectedTematico();
|
||||
const onlyMine = this.showOnlyMine();
|
||||
|
||||
let list = [...this.cantiService.canti(), ...this.myCantiService.myCanti()];
|
||||
|
||||
if (onlyMine) {
|
||||
list = this.myCantiService.myCanti();
|
||||
}
|
||||
|
||||
if (litId !== null) {
|
||||
list = list.filter(c => c.id_momenti?.includes(litId));
|
||||
}
|
||||
if (temId !== null) {
|
||||
list = list.filter(c => c.id_momenti?.includes(temId));
|
||||
}
|
||||
|
||||
// Special List handling (from QR Code or Saved Playlists)
|
||||
const activeIds = this.playlistService.activeListIds();
|
||||
const selectionMode = this.playlistService.selectionMode();
|
||||
|
||||
// If we are in selection mode, only show restricted list if NOT adding songs AND we have a base list to reorder
|
||||
if (selectionMode && !this.isAddingSongs() && activeIds.length > 0) {
|
||||
return this.reorderList();
|
||||
}
|
||||
|
||||
// If we have an active playlist and NOT in selection mode, show ONLY those songs
|
||||
if (activeIds.length > 0 && !selectionMode) {
|
||||
// Filter only songs in the special list and KEEP THE ORDER
|
||||
return activeIds
|
||||
.map(id => list.find(c => c.id === id))
|
||||
.filter((c): c is any => !!c);
|
||||
}
|
||||
|
||||
if (!query) return list;
|
||||
|
||||
// Converte "uno" in "1" per facilitare la ricerca vocale (es. "numero uno")
|
||||
const processedQuery = query.replace(/\buno\b/g, '1');
|
||||
|
||||
// Se la ricerca inizia con "numero" o "nr", filtra esattamente per id_canti
|
||||
const numberMatchPattern = processedQuery.match(/^(?:numero|nr\.?)\s*(\d+)$/);
|
||||
if (numberMatchPattern) {
|
||||
const targetId = numberMatchPattern[1];
|
||||
return list.filter(c => c.id_canti.toString() === targetId);
|
||||
}
|
||||
|
||||
return list.filter(c => {
|
||||
const titleMatch = this.normalize(c.titolo).includes(query);
|
||||
const authorMatch = this.normalize(c.autore).includes(query);
|
||||
const numberMatch = c.id_canti.toString().includes(query);
|
||||
|
||||
// Strip tags like {Chorus} and newlines from lyrics before searching
|
||||
const lyricsPlain = (c.testo || '')
|
||||
.replace(/{.*?}/g, '')
|
||||
.replace(/\n/g, ' ');
|
||||
const lyricsMatch = this.normalize(lyricsPlain).includes(query);
|
||||
|
||||
return titleMatch || authorMatch || lyricsMatch || numberMatch;
|
||||
});
|
||||
});
|
||||
|
||||
public visibleCanti = computed(() => {
|
||||
return this.filteredCanti().slice(0, this.limit());
|
||||
});
|
||||
|
||||
constructor() {
|
||||
// Sync speech recognition results to search query
|
||||
effect(() => {
|
||||
const transcript = this.audioEngine.searchTranscript();
|
||||
if (transcript) {
|
||||
this.searchQuery.set(transcript);
|
||||
}
|
||||
});
|
||||
|
||||
this.route.queryParams.subscribe(params => {
|
||||
if (params['import']) {
|
||||
this.handleImport(params['import']);
|
||||
}
|
||||
});
|
||||
|
||||
effect(() => {
|
||||
const selectionMode = this.playlistService.selectionMode();
|
||||
const selectedIds = this.playlistService.selectedIds();
|
||||
const activeIds = this.playlistService.activeListIds();
|
||||
|
||||
if (selectionMode) {
|
||||
if (activeIds.length === 0 && !this.isAddingSongs()) {
|
||||
this.isAddingSongs.set(true);
|
||||
}
|
||||
|
||||
const currentIds = this.reorderList().map(c => c.id);
|
||||
const newIds = Array.from(selectedIds);
|
||||
|
||||
// Use a set of IDs for faster lookup
|
||||
const currentIdSet = new Set(currentIds);
|
||||
const newIdSet = new Set(newIds);
|
||||
|
||||
// Check if there are differences in the SET of IDs
|
||||
const added = newIds.filter(id => !currentIdSet.has(id));
|
||||
const removed = currentIds.filter(id => !newIdSet.has(id));
|
||||
|
||||
if (added.length > 0 || removed.length > 0) {
|
||||
let updatedList = [...this.reorderList()];
|
||||
|
||||
// Remove songs no longer selected
|
||||
if (removed.length > 0) {
|
||||
updatedList = updatedList.filter(c => newIdSet.has(c.id));
|
||||
}
|
||||
|
||||
// Add newly selected songs at the end
|
||||
if (added.length > 0) {
|
||||
const newSongs = added.map(id => this.findCanto(id)).filter((c): c is any => !!c);
|
||||
updatedList = [...updatedList, ...newSongs];
|
||||
}
|
||||
|
||||
this.reorderList.set(updatedList);
|
||||
}
|
||||
} else {
|
||||
this.isAddingSongs.set(false);
|
||||
}
|
||||
}, { allowSignalWrites: true });
|
||||
}
|
||||
|
||||
handleImport(base64: string) {
|
||||
try {
|
||||
const decoded = decodeURIComponent(escape(atob(base64)));
|
||||
const json = JSON.parse(decoded);
|
||||
if (this.playlistService.processImportJson(json)) {
|
||||
this.router.navigate([], { queryParams: { import: null }, queryParamsHandling: 'merge' });
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to import playlist', e);
|
||||
}
|
||||
}
|
||||
|
||||
ionViewWillLeave() {
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.audioEngine.stopSearchRecognition();
|
||||
}
|
||||
|
||||
onSearch(event: any) {
|
||||
this.searchQuery.set(event.detail.value);
|
||||
this.limit.set(30);
|
||||
}
|
||||
|
||||
async deleteMyCanto(id: string, event: Event) {
|
||||
event.stopPropagation();
|
||||
const alert = await this.alertCtrl.create({
|
||||
header: 'Elimina Canto',
|
||||
message: 'Sei sicuro di voler eliminare questo canto dai tuoi brani personali?',
|
||||
buttons: [
|
||||
{ text: 'Annulla', role: 'cancel' },
|
||||
{
|
||||
text: 'Elimina',
|
||||
role: 'destructive',
|
||||
handler: () => {
|
||||
this.myCantiService.deleteCanto(id);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
findCanto(id: string) {
|
||||
return [...this.cantiService.canti(), ...this.myCantiService.myCanti()].find(c => c.id === id);
|
||||
}
|
||||
|
||||
getPlayingCanto() {
|
||||
const id = this.youtubePlayerService.currentCantoId();
|
||||
if (!id) return null;
|
||||
return this.findCanto(id);
|
||||
}
|
||||
|
||||
goToCanto(id: string) {
|
||||
if (this.playlistService.selectionMode()) {
|
||||
this.playlistService.toggleSongSelection(id);
|
||||
return;
|
||||
}
|
||||
|
||||
const params: any = { id };
|
||||
const isPlaying = this.youtubePlayerService.isPlaying();
|
||||
|
||||
if (this.youtubePlayerService.currentCantoId() === id && isPlaying) {
|
||||
params.t = Math.floor(this.youtubePlayerService.videoProgress());
|
||||
}
|
||||
|
||||
this.playlistService.autoPlayPlaylist.set(isPlaying);
|
||||
this.router.navigate(['/player'], { queryParams: params });
|
||||
}
|
||||
|
||||
toggleOnlyMine() {
|
||||
this.showOnlyMine.update(v => !v);
|
||||
if (this.showOnlyMine()) {
|
||||
this.selectedLiturgico.set(null);
|
||||
this.selectedTematico.set(null);
|
||||
}
|
||||
this.limit.set(10);
|
||||
}
|
||||
|
||||
clearOnlyMine(event: Event) {
|
||||
event.stopPropagation();
|
||||
this.showOnlyMine.set(false);
|
||||
this.limit.set(10);
|
||||
}
|
||||
|
||||
toggleIndex(id: number, type: 'liturgico' | 'tematico' | 'playlist') {
|
||||
if (type === 'liturgico') {
|
||||
this.selectedLiturgico.update(cur => cur === id ? null : id);
|
||||
} else if (type === 'tematico') {
|
||||
this.selectedTematico.update(cur => cur === id ? null : id);
|
||||
}
|
||||
this.showOnlyMine.set(false);
|
||||
this.activeFilterType.set(null);
|
||||
this.limit.set(10);
|
||||
}
|
||||
|
||||
clearLiturgico(event: Event) {
|
||||
event.stopPropagation();
|
||||
this.selectedLiturgico.set(null);
|
||||
this.activeFilterType.set(null);
|
||||
this.limit.set(10);
|
||||
}
|
||||
|
||||
clearTematico(event: Event) {
|
||||
event.stopPropagation();
|
||||
this.selectedTematico.set(null);
|
||||
this.activeFilterType.set(null);
|
||||
this.limit.set(10);
|
||||
}
|
||||
|
||||
isIndexSelected(id: number): boolean {
|
||||
return this.selectedLiturgico() === id || this.selectedTematico() === id;
|
||||
}
|
||||
|
||||
clearFilters() {
|
||||
const type = this.activeFilterType();
|
||||
|
||||
if (this.playlistService.activeListIds().length > 0) {
|
||||
this.clearSpecialList();
|
||||
}
|
||||
|
||||
if (type === 'liturgico') {
|
||||
if (this.selectedLiturgico() === null) {
|
||||
this.selectedTematico.set(null);
|
||||
} else {
|
||||
this.selectedLiturgico.set(null);
|
||||
}
|
||||
} else if (type === 'tematico') {
|
||||
if (this.selectedTematico() === null) {
|
||||
this.selectedLiturgico.set(null);
|
||||
} else {
|
||||
this.selectedTematico.set(null);
|
||||
}
|
||||
} else {
|
||||
this.selectedLiturgico.set(null);
|
||||
this.selectedTematico.set(null);
|
||||
}
|
||||
|
||||
this.showOnlyMine.set(false);
|
||||
this.searchQuery.set('');
|
||||
this.audioEngine.clearSearchTranscript();
|
||||
}
|
||||
|
||||
activeFiltersCount(): number {
|
||||
let count = 0;
|
||||
if (this.selectedLiturgico() !== null) count++;
|
||||
if (this.selectedTematico() !== null) count++;
|
||||
return count;
|
||||
}
|
||||
|
||||
getSelectedLiturgicoLabel(): string | null {
|
||||
const id = this.selectedLiturgico();
|
||||
if (id === null) return null;
|
||||
return this.cantiService.indiceLiturgico().find(m => m.id === id)?.tag_name || null;
|
||||
}
|
||||
|
||||
getSelectedTematicoLabel(): string | null {
|
||||
const id = this.selectedTematico();
|
||||
if (id === null) return null;
|
||||
return this.cantiService.indiceTematico().find(m => m.id === id)?.tag_name || null;
|
||||
}
|
||||
|
||||
hasActiveFilters(): boolean {
|
||||
return this.selectedLiturgico() !== null ||
|
||||
this.selectedTematico() !== null ||
|
||||
this.showOnlyMine() ||
|
||||
this.playlistService.activeListName() !== null ||
|
||||
this.searchQuery() !== '';
|
||||
}
|
||||
|
||||
clearAllFilters() {
|
||||
this.selectedLiturgico.set(null);
|
||||
this.selectedTematico.set(null);
|
||||
this.showOnlyMine.set(false);
|
||||
this.playlistService.activeListIds.set([]);
|
||||
this.playlistService.activeListName.set(null);
|
||||
this.playlistService.activePlaylistId.set(null);
|
||||
this.searchQuery.set('');
|
||||
this.activeFilterType.set(null);
|
||||
this.limit.set(10);
|
||||
}
|
||||
|
||||
toggleFilterType(type: 'liturgico' | 'tematico' | 'playlist') {
|
||||
if (this.activeFilterType() === type) {
|
||||
this.activeFilterType.set(null);
|
||||
} else {
|
||||
this.activeFilterType.set(type);
|
||||
}
|
||||
}
|
||||
|
||||
selectPlaylist(pl: any) {
|
||||
this.playlistService.activeListIds.set(pl.ids);
|
||||
this.playlistService.activeListName.set(pl.name);
|
||||
this.playlistService.activePlaylistId.set(pl.id);
|
||||
this.activeFilterType.set(null);
|
||||
this.limit.set(50);
|
||||
// Clear other filters
|
||||
this.selectedLiturgico.set(null);
|
||||
this.selectedTematico.set(null);
|
||||
this.showOnlyMine.set(false);
|
||||
}
|
||||
|
||||
onImgLoad(id: string) {
|
||||
this.loadedThumbs.add(id);
|
||||
}
|
||||
|
||||
openYoutube(event: Event, link: string) {
|
||||
event.stopPropagation();
|
||||
const videoId = this.cantiService.getYoutubeId(link);
|
||||
if (videoId) {
|
||||
window.open(`https://www.youtube.com/watch?v=${videoId}`, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
playVideo(event: Event, id: string) {
|
||||
event.stopPropagation();
|
||||
this.youtubePlayerService.setMediaSessionCallbacks(
|
||||
() => this.playNextPreview(),
|
||||
() => this.playPrevPreview()
|
||||
);
|
||||
this.youtubePlayerService.initPlayer(
|
||||
id,
|
||||
0,
|
||||
() => {
|
||||
if (this.settingsService.autoAdvance()) {
|
||||
this.playNextPreview();
|
||||
} else {
|
||||
this.youtubePlayerService.stop();
|
||||
}
|
||||
},
|
||||
() => {
|
||||
if (this.settingsService.autoAdvance()) {
|
||||
setTimeout(() => this.playNextPreview(), 500);
|
||||
} else {
|
||||
this.youtubePlayerService.stop();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
stopVideo(event: Event) {
|
||||
if (event) event.stopPropagation();
|
||||
this.youtubePlayerService.stop();
|
||||
this.playlistService.autoPlayPlaylist.set(false);
|
||||
}
|
||||
|
||||
playNextPreview(event?: Event) {
|
||||
if (event) event.stopPropagation();
|
||||
const currentId = this.youtubePlayerService.currentCantoId();
|
||||
if (!currentId) return;
|
||||
|
||||
const list = this.visibleCanti();
|
||||
const currentIndex = list.findIndex(c => c.id === currentId);
|
||||
|
||||
for (let i = currentIndex + 1; i < list.length; i++) {
|
||||
if (list[i].link_youtube) {
|
||||
this.playVideo(new Event('skip'), list[i].id);
|
||||
|
||||
setTimeout(() => {
|
||||
const el = document.getElementById('canto-' + list[i].id);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 300);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.youtubePlayerService.stop();
|
||||
}
|
||||
|
||||
playPrevPreview(event?: Event) {
|
||||
if (event) event.stopPropagation();
|
||||
const currentId = this.youtubePlayerService.currentCantoId();
|
||||
if (!currentId) return;
|
||||
|
||||
const list = this.visibleCanti();
|
||||
const currentIndex = list.findIndex(c => c.id === currentId);
|
||||
|
||||
for (let i = currentIndex - 1; i >= 0; i--) {
|
||||
if (list[i].link_youtube) {
|
||||
this.playVideo(new Event('skip'), list[i].id);
|
||||
|
||||
setTimeout(() => {
|
||||
const el = document.getElementById('canto-' + list[i].id);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 300);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onSeek(event: any) {
|
||||
this.youtubePlayerService.seekTo(event.detail.value);
|
||||
}
|
||||
|
||||
onSeekStart() {
|
||||
this.isSeeking = true;
|
||||
}
|
||||
|
||||
onSeekEnd() {
|
||||
this.isSeeking = false;
|
||||
}
|
||||
|
||||
getMomentiForCanto(ids: number[] | undefined): any[] {
|
||||
if (!ids) return [];
|
||||
return this.cantiService.momenti()
|
||||
.filter(m => ids.includes(m.id));
|
||||
}
|
||||
|
||||
filterByMomento(event: Event, id: number) {
|
||||
event.stopPropagation();
|
||||
// Use liturgico as default for momento tags
|
||||
this.toggleIndex(id, 'liturgico');
|
||||
// Scroll to top to show results
|
||||
const content = document.querySelector('ion-content');
|
||||
if (content) (content as any).scrollToTop(300);
|
||||
}
|
||||
|
||||
loadData(event: any) {
|
||||
setTimeout(() => {
|
||||
this.limit.update(l => l + 10);
|
||||
event.target.complete();
|
||||
|
||||
if (this.limit() >= this.filteredCanti().length) {
|
||||
event.target.disabled = true;
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// --- Touch Gestures for Pinch-to-Zoom ---
|
||||
onTouchStart(event: TouchEvent) {
|
||||
if (event.touches.length === 2) {
|
||||
this.initialPinchDistance = this.getDistance(event.touches[0], event.touches[1]);
|
||||
this.initialFontSize = this.fontSize();
|
||||
}
|
||||
}
|
||||
|
||||
onTouchMove(event: TouchEvent) {
|
||||
if (event.touches.length === 2 && this.initialPinchDistance !== null) {
|
||||
// We don't preventDefault here to allow scrolling if needed,
|
||||
// but usually pinch should be captured.
|
||||
const currentDistance = this.getDistance(event.touches[0], event.touches[1]);
|
||||
const ratio = currentDistance / this.initialPinchDistance;
|
||||
let newSize = this.initialFontSize * ratio;
|
||||
|
||||
// Clamp values
|
||||
newSize = Math.max(this.MIN_FONT, Math.min(this.MAX_FONT, newSize));
|
||||
|
||||
if (Math.abs(newSize - this.fontSize()) > 0.01) {
|
||||
this.fontSize.set(newSize);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onTouchEnd() {
|
||||
this.initialPinchDistance = null;
|
||||
}
|
||||
|
||||
private getDistance(t1: Touch, t2: Touch): number {
|
||||
return Math.sqrt(Math.pow(t1.clientX - t2.clientX, 2) + Math.pow(t1.clientY - t2.clientY, 2));
|
||||
}
|
||||
|
||||
handleScannedData(data: string) {
|
||||
if (!data) return;
|
||||
|
||||
if (data.includes('?import=')) {
|
||||
try {
|
||||
const base64 = data.split('?import=')[1];
|
||||
this.handleImport(base64);
|
||||
} catch (e) {
|
||||
console.error('Failed to parse scanned link', e);
|
||||
}
|
||||
} else if (data.startsWith('canti:')) {
|
||||
const parts = data.replace('canti:', '').split(':');
|
||||
let idsStr = '';
|
||||
if (parts.length > 1) {
|
||||
this.playlistService.activeListName.set(parts[0]);
|
||||
idsStr = parts[1];
|
||||
} else {
|
||||
this.playlistService.activeListName.set('Lista Parrocchiale');
|
||||
idsStr = parts[0];
|
||||
}
|
||||
|
||||
const ids = idsStr.split(',').map(id => id.trim());
|
||||
this.playlistService.activeListIds.set(ids);
|
||||
this.limit.set(50); // Show more initially for special lists
|
||||
|
||||
// Clear other filters to avoid confusion
|
||||
this.selectedLiturgico.set(null);
|
||||
this.selectedTematico.set(null);
|
||||
}
|
||||
}
|
||||
|
||||
toggleVoiceSearch() {
|
||||
if (this.audioEngine.isSearching()) {
|
||||
this.audioEngine.stopSearchRecognition();
|
||||
} else {
|
||||
this.audioEngine.startSearchRecognition();
|
||||
}
|
||||
}
|
||||
|
||||
async finishSelection() {
|
||||
const alert = await this.alertCtrl.create({
|
||||
header: 'Salva Playlist',
|
||||
inputs: [
|
||||
{
|
||||
name: 'name',
|
||||
type: 'text',
|
||||
placeholder: 'Nome della playlist',
|
||||
value: this.playlistService.activeListName() || ''
|
||||
}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: 'Annulla',
|
||||
role: 'cancel'
|
||||
},
|
||||
{
|
||||
text: 'Salva',
|
||||
handler: async (data) => {
|
||||
if (data.name) {
|
||||
const ids = this.reorderList().map(s => s.id);
|
||||
await this.playlistService.savePlaylist(data.name, ids);
|
||||
|
||||
const toast = await this.toastCtrl.create({
|
||||
message: 'Playlist salvata!',
|
||||
duration: 2000,
|
||||
color: 'success'
|
||||
});
|
||||
await toast.present();
|
||||
|
||||
this.isAddingSongs.set(false);
|
||||
this.playlistService.selectionMode.set(false);
|
||||
this.playlistService.selectedIds.set(new Set());
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
cancelSelection() {
|
||||
const id = this.playlistService.activePlaylistId();
|
||||
if (id) {
|
||||
const pl = this.playlistService.playlists().find(p => p.id === id);
|
||||
if (pl) {
|
||||
this.playlistService.activeListIds.set(pl.ids);
|
||||
this.playlistService.activeListName.set(pl.name);
|
||||
}
|
||||
}
|
||||
|
||||
this.playlistService.selectionMode.set(false);
|
||||
this.playlistService.selectedIds.set(new Set());
|
||||
this.isAddingSongs.set(false);
|
||||
}
|
||||
|
||||
clearSpecialList(event?: Event) {
|
||||
if (event) event.stopPropagation();
|
||||
this.playlistService.activeListIds.set([]);
|
||||
this.playlistService.activeListName.set(null);
|
||||
this.playlistService.activePlaylistId.set(null);
|
||||
this.limit.set(30);
|
||||
}
|
||||
|
||||
playPlaylist() {
|
||||
const ids = this.playlistService.activeListIds();
|
||||
if (ids.length > 0) {
|
||||
this.playlistService.autoPlayPlaylist.set(true);
|
||||
this.router.navigate(['/player'], { queryParams: { id: ids[0] } });
|
||||
}
|
||||
}
|
||||
|
||||
shareActivePlaylist() {
|
||||
const ids = this.playlistService.activeListIds();
|
||||
const name = this.playlistService.activeListName() || 'Playlist';
|
||||
this.playlistService.sharePlaylistQR(ids, name);
|
||||
}
|
||||
|
||||
async importPlaylist() {
|
||||
const modal = await this.modalCtrl.create({
|
||||
component: QrScannerComponent
|
||||
});
|
||||
await modal.present();
|
||||
|
||||
const { data } = await modal.onWillDismiss();
|
||||
if (!data) return;
|
||||
this.handleScannedData(data);
|
||||
}
|
||||
|
||||
async deleteActivePlaylist() {
|
||||
const id = this.playlistService.activePlaylistId();
|
||||
const name = this.playlistService.activeListName();
|
||||
if (!id || !name) return;
|
||||
|
||||
const alert = await this.alertCtrl.create({
|
||||
header: 'Elimina Playlist',
|
||||
message: `Vuoi davvero eliminare "${name}"?`,
|
||||
buttons: [
|
||||
{ text: 'Annulla', role: 'cancel' },
|
||||
{
|
||||
text: 'Elimina',
|
||||
role: 'destructive',
|
||||
handler: () => {
|
||||
this.playlistService.deletePlaylist(id);
|
||||
this.clearSpecialList();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
editPlaylist() {
|
||||
const ids = this.playlistService.activeListIds();
|
||||
const name = this.playlistService.activeListName();
|
||||
|
||||
// Prova a recuperare l'ID se stiamo editando una playlist salvata
|
||||
const found = this.playlistService.playlists().find(p => p.name === name);
|
||||
if (found) {
|
||||
this.playlistService.activePlaylistId.set(found.id);
|
||||
}
|
||||
|
||||
this.playlistService.selectedIds.set(new Set(ids));
|
||||
const songs = ids.map(id => this.findCanto(id)).filter((c): c is any => !!c);
|
||||
this.reorderList.set(songs);
|
||||
this.playlistService.selectionMode.set(true);
|
||||
this.isAddingSongs.set(false); // Default to reorder view
|
||||
|
||||
// Svuota la playlist attiva per mostrare tutto l'elenco in modalità selezione
|
||||
this.playlistService.activeListIds.set([]);
|
||||
this.playlistService.activeListName.set(name);
|
||||
}
|
||||
|
||||
drop(event: CdkDragDrop<any[]>) {
|
||||
const arr = [...this.reorderList()];
|
||||
moveItemInArray(arr, event.previousIndex, event.currentIndex);
|
||||
this.reorderList.set(arr);
|
||||
}
|
||||
|
||||
toggleAddingSongs() {
|
||||
this.isAddingSongs.update(v => !v);
|
||||
this.limit.set(10);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user