frassidavid/canti
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

aggiunto schermo nero durante il play audio in playlist

Browse Source
This commit is contained in:
David Frassi
2026-06-18 10:01:34 +02:00
parent b0bb5735c8
commit 6ed90ffff1
10 changed files with 407 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/home.page.html
+42 -4
View File
@@ -389,15 +389,18 @@
<ion-footer *ngIf="youtubePlayerService.isPlayerSupported() && 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-icon slot="icon-only" name="chevron-back"></ion-icon>
</ion-button>
<ion-button fill="clear" color="secondary" (click)="youtubePlayerService.isPlaying() ? stopVideo($event) : playVideo($event, youtubePlayerService.currentCantoId()!)" class="play-btn">
<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>
<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()"
@@ -406,11 +409,14 @@
(ionKnobMoveStart)="onSeekStart()"
(ionKnobMoveEnd)="onSeekEnd()"
color="secondary"
class="global-range">
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>
<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-icon slot="icon-only" name="chevron-forward"></ion-icon>
</ion-button>
<ion-button fill="clear" color="medium" (click)="stopVideo($event)" class="close-btn">
@@ -421,4 +427,36 @@
</ion-toolbar>
</ion-footer>
<div class="black-screen-overlay" *ngIf="isBlackOverlayActive()" (click)="isBlackOverlayDismissed.set(true)">
<div class="black-screen-content" (click)="$event.stopPropagation()">
<div (click)="isBlackOverlayDismissed.set(true)" style="display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; width: 100%;">
<ion-icon name="car-outline" class="car-mode-icon"></ion-icon>
<p class="car-mode-text outfit-font">Schermo nero attivo</p>
</div>
<div class="car-mode-canto-info" *ngIf="getPlayingCanto()">
<h2 class="car-mode-canto-title outfit-font">{{ getPlayingCanto()?.titolo }}</h2>
<p class="car-mode-canto-author outfit-font">{{ getPlayingCanto()?.autore }}</p>
</div>
<div class="car-mode-progress outfit-font" *ngIf="youtubePlayerService.currentCantoId()">
<span class="car-mode-time">{{ formatSeconds(youtubePlayerService.videoProgress()) }} / {{ formatSeconds(youtubePlayerService.videoDuration()) }}</span>
</div>
<div class="car-mode-controls">
<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-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">
<ion-icon slot="icon-only" name="play-skip-forward-sharp"></ion-icon>
</ion-button>
</div>
<p class="car-mode-subtext outfit-font" (click)="isBlackOverlayDismissed.set(true)">Tocca lo sfondo o l'icona per sbloccare</p>
</div>
</div>
src/app/home/home.page.scss
+98 -1
View File
@@ -730,7 +730,6 @@ ion-title {
&.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;
}
@@ -1342,4 +1341,102 @@ ion-title {
}
}
/* BLACK SCREEN OVERLAY FOR CAR MODE */
.black-screen-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000000 !important;
z-index: 9999999 !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
.black-screen-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.25);
text-align: center;
padding: 20px;
gap: 12px;
.car-mode-icon {
font-size: 3.5rem;
color: rgba(255, 255, 255, 0.2);
}
.car-mode-text {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
}
.car-mode-subtext {
font-size: 0.85rem;
margin: 0;
opacity: 0.8;
}
.car-mode-canto-info {
text-align: center;
margin-top: 10px;
.car-mode-canto-title {
font-size: 1.4rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.3);
margin: 0 0 4px 0;
}
.car-mode-canto-author {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.2);
margin: 0;
}
}
.car-mode-progress {
margin-top: 8px;
.car-mode-time {
font-size: 1.1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.25);
}
}
.car-mode-controls {
display: flex;
align-items: center;
gap: 24px;
margin-top: 15px;
.car-mode-btn {
--color: rgba(255, 255, 255, 0.25);
--padding-start: 8px;
--padding-end: 8px;
height: 48px;
width: 48px;
margin: 0;
ion-icon {
font-size: 1.8rem;
}
&:active {
--color: rgba(255, 255, 255, 0.55);
}
}
}
}
}
src/app/home/home.page.ts
+92 -1
View File
@@ -1,4 +1,4 @@
import { Component, computed, signal, inject, effect, OnDestroy } from '@angular/core';
import { Component, computed, signal, inject, effect, OnDestroy, HostListener } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { CantiService } from '../services/canti.service';
import { Router, ActivatedRoute } from '@angular/router';
@@ -27,6 +27,28 @@ import { showFullscreenUpdateOverlay } from '../app.component';
standalone: false,
})
export class HomePage implements OnDestroy {
@HostListener('window:keydown', ['$event'])
handleKeyDown(event: KeyboardEvent) {
// Only handle keys if a song is currently loaded in the player
if (!this.youtubePlayerService.currentCantoId()) {
return;
}
const target = event.target as HTMLElement;
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
return;
}
if (event.key === 'ArrowUp' || event.key === 'MediaTrackPrevious') {
this.playPrevPreview();
event.preventDefault();
} else if (event.key === 'ArrowDown' || event.key === 'MediaTrackNext') {
this.playNextPreview();
event.preventDefault();
} else if (event.key === 'MediaPlayPause') {
this.youtubePlayerService.togglePlayPause();
event.preventDefault();
}
}
public searchQuery = signal<string>('');
public selectedLiturgico = signal<number | null>(null);
public selectedTematico = signal<number | null>(null);
@@ -45,6 +67,13 @@ export class HomePage implements OnDestroy {
public limit = signal<number>(30);
public hasUpdateAvailable = signal<boolean>(false);
public isBlackOverlayDismissed = signal<boolean>(false);
public isBlackOverlayActive = computed(() =>
this.settingsService.carModeBlackScreen() &&
this.youtubePlayerService.currentCantoId() !== null &&
!this.isBlackOverlayDismissed()
);
public fontSize = signal<number>(1.0);
public youtubePlayerService = inject(YoutubePlayerService);
public comunitaService = inject(ComunitaService);
@@ -488,6 +517,14 @@ 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(() => {
if (this.settingsService.isVersionCheckComplete() && !queryParamsSubscribed) {
@@ -592,6 +629,16 @@ export class HomePage implements OnDestroy {
this.isAddingSongs.set(false);
}
}, { allowSignalWrites: true });
// Fullscreen control when black screen overlay is active
effect(() => {
const isBlack = this.isBlackOverlayActive();
if (isBlack) {
this.enterFullscreen();
} else {
this.exitFullscreen();
}
});
}
@@ -1932,5 +1979,49 @@ export class HomePage implements OnDestroy {
}
return dateStr;
}
formatSeconds(seconds: number | undefined | null): string {
if (seconds === undefined || seconds === null || isNaN(seconds)) {
return '0:00';
}
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
private async enterFullscreen() {
try {
const docEl = document.documentElement;
if (docEl.requestFullscreen) {
await docEl.requestFullscreen();
} else if ((docEl as any).webkitRequestFullscreen) {
await (docEl as any).webkitRequestFullscreen();
} else if ((docEl as any).msRequestFullscreen) {
await (docEl as any).msRequestFullscreen();
}
} catch (e) {
console.warn('[HomePage] Failed to enter fullscreen:', e);
}
}
private async exitFullscreen() {
try {
if (document.exitFullscreen) {
if (document.fullscreenElement) {
await document.exitFullscreen();
}
} else if ((document as any).webkitExitFullscreen) {
if ((document as any).webkitFullscreenElement) {
await (document as any).webkitExitFullscreen();
}
} else if ((document as any).msExitFullscreen) {
if ((document as any).msFullscreenElement) {
await (document as any).msExitFullscreen();
}
}
} catch (e) {
console.warn('[HomePage] Failed to exit fullscreen:', e);
}
}
}
src/app/pages/player/player.page.html
+37 -2
View File
@@ -154,14 +154,19 @@
<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>
<ion-range
[min]="0"
[max]="youtubePlayerService.videoDuration()"
[value]="youtubePlayerService.videoProgress()"
(ionChange)="onSeek($event)"
color="secondary"
class="global-range">
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>
</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);">
@@ -258,7 +263,37 @@
</ion-footer>
<!-- Black Screen Overlay -->
<div class="black-screen-overlay" *ngIf="isBlackScreen()" (click)="deactivateBlackScreen()"></div>
<div class="black-screen-overlay" *ngIf="isBlackScreen()" (click)="deactivateBlackScreen()">
<div class="black-screen-content" (click)="$event.stopPropagation()">
<div (click)="deactivateBlackScreen()" style="display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; width: 100%;">
<ion-icon name="car-outline" class="car-mode-icon"></ion-icon>
<p class="car-mode-text outfit-font">Schermo nero attivo</p>
</div>
<div class="car-mode-canto-info" *ngIf="canto()">
<h2 class="car-mode-canto-title outfit-font">{{ canto()?.titolo }}</h2>
<p class="car-mode-canto-author outfit-font">{{ canto()?.autore }}</p>
</div>
<div class="car-mode-progress outfit-font" *ngIf="youtubePlayerService.currentCantoId()">
<span class="car-mode-time">{{ formatSeconds(youtubePlayerService.videoProgress()) }} / {{ formatSeconds(youtubePlayerService.videoDuration()) }}</span>
</div>
<div class="car-mode-controls">
<ion-button fill="clear" (click)="prevSong()" class="car-mode-btn">
<ion-icon slot="icon-only" name="play-skip-back-sharp"></ion-icon>
</ion-button>
<ion-button fill="clear" (click)="toggleAudio()" 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)="nextSong()" class="car-mode-btn">
<ion-icon slot="icon-only" name="play-skip-forward-sharp"></ion-icon>
</ion-button>
</div>
<p class="car-mode-subtext outfit-font" (click)="deactivateBlackScreen()">Tocca lo sfondo o l'icona per sbloccare</p>
</div>
</div>
<!-- Hidden Camera Video for Head Navigation (needed for face detection API to run) -->
<video *ngIf="enableCameraNavigation()" id="face-preview-video" muted playsinline autoplay style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;"></video>
src/app/pages/player/player.page.scss
+90 -4
View File
@@ -891,11 +891,97 @@ ion-content.full-screen-content {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #000000;
z-index: 99999;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000000 !important;
z-index: 9999999 !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
.black-screen-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.25);
text-align: center;
padding: 20px;
gap: 12px;
.car-mode-icon {
font-size: 3.5rem;
color: rgba(255, 255, 255, 0.2);
}
.car-mode-text {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
}
.car-mode-subtext {
font-size: 0.85rem;
margin: 0;
opacity: 0.8;
}
.car-mode-canto-info {
text-align: center;
margin-top: 10px;
.car-mode-canto-title {
font-size: 1.4rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.3);
margin: 0 0 4px 0;
}
.car-mode-canto-author {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.2);
margin: 0;
}
}
.car-mode-progress {
margin-top: 8px;
.car-mode-time {
font-size: 1.1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.25);
}
}
.car-mode-controls {
display: flex;
align-items: center;
gap: 24px;
margin-top: 15px;
.car-mode-btn {
--color: rgba(255, 255, 255, 0.25);
--padding-start: 8px;
--padding-end: 8px;
height: 48px;
width: 48px;
margin: 0;
ion-icon {
font-size: 1.8rem;
}
&:active {
--color: rgba(255, 255, 255, 0.55);
}
}
}
}
}
.landscape-playlist-btn {
src/app/pages/player/player.page.ts
+17 -4
View File
@@ -33,12 +33,15 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
return;
}
if (event.key === 'ArrowUp') {
if (event.key === 'ArrowUp' || event.key === 'MediaTrackPrevious') {
this.prevSong();
event.preventDefault();
} else if (event.key === 'ArrowDown') {
} else if (event.key === 'ArrowDown' || event.key === 'MediaTrackNext') {
this.nextSong();
event.preventDefault();
} else if (event.key === 'MediaPlayPause') {
this.toggleAudio();
event.preventDefault();
}
}
@@ -322,11 +325,12 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
}
}, { allowSignalWrites: true });
// Fullscreen control in landscape mode
// Fullscreen control in landscape mode or when black screen is active
effect(() => {
const isLandscape = this.isLandscapeActive();
const isBlack = this.isBlackScreen();
if (isLandscape) {
if (isLandscape || isBlack) {
this.enterFullscreen();
} else {
this.exitFullscreen();
@@ -1279,4 +1283,13 @@ export class PlayerPage implements OnInit, AfterViewInit, OnDestroy {
this.stopCameraNavigation();
this.channel.close();
}
formatSeconds(seconds: number | undefined | null): string {
if (seconds === undefined || seconds === null || isNaN(seconds)) {
return '0:00';
}
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
}
src/app/pages/settings/settings.page.html
+8
View File
@@ -150,6 +150,14 @@
</ion-label>
<ion-toggle slot="end" [checked]="settingsService.landscapeProjectionEnabled()" (ionChange)="settingsService.toggleLandscapeProjectionEnabled()" color="secondary"></ion-toggle>
</ion-item>
<ion-item class="transparent-item" lines="none" style="border-top: 1px solid rgba(255,255,255,0.03);">
<ion-icon name="car-outline" slot="start" color="secondary"></ion-icon>
<ion-label class="outfit-font">
<h2 class="settings-item-title">Schermo nero durante l'ascolto</h2>
<p class="settings-item-subtitle">Se attiva la riproduzione in home, mostra uno schermo nero per risparmiare batteria. Tocca per disattivare.</p>
</ion-label>
<ion-toggle slot="end" [checked]="settingsService.carModeBlackScreen()" (ionChange)="settingsService.toggleCarModeBlackScreen()" color="secondary"></ion-toggle>
</ion-item>
</div>
<!-- Comunità -->
src/app/services/settings.service.ts
+20
View File
@@ -56,6 +56,9 @@ export class SettingsService {
/** Vista orizzontale per proiezione: true = attiva layout landscape per proiezione */
public landscapeProjectionEnabled = signal<boolean>(false);
/** Schermo nero per l'ascolto delle playlist in macchina: true = attivo */
public carModeBlackScreen = signal<boolean>(false);
/** Identificativo utente univoco per la gestione delle comunità */
public userUuid = signal<string>('');
@@ -254,6 +257,13 @@ export class SettingsService {
this.landscapeProjectionEnabled.set(false);
}
const savedCarModeBlackScreen = localStorage.getItem('car-mode-black-screen');
if (savedCarModeBlackScreen !== null) {
this.carModeBlackScreen.set(savedCarModeBlackScreen === 'true');
} else {
this.carModeBlackScreen.set(false);
}
// Sync browser fullscreen state with listeners (supporting vendor prefixes)
const updateFullscreenState = () => {
const isFs = !!(
@@ -311,6 +321,10 @@ export class SettingsService {
localStorage.setItem('landscape-projection-enabled', this.landscapeProjectionEnabled().toString());
});
effect(() => {
localStorage.setItem('car-mode-black-screen', this.carModeBlackScreen().toString());
});
effect(() => {
const active = this.keepScreenOn();
localStorage.setItem('keep-screen-on', active.toString());
@@ -446,6 +460,12 @@ export class SettingsService {
localStorage.setItem('landscape-projection-enabled', newValue.toString());
}
toggleCarModeBlackScreen() {
const newValue = !this.carModeBlackScreen();
this.carModeBlackScreen.set(newValue);
localStorage.setItem('car-mode-black-screen', newValue.toString());
}
setChordNotationPreference(val: 'diesis' | 'bemolle') {
this.chordNotationPreference.set(val);
}
src/app/version.ts
+1 -1
View File
@@ -1 +1 @@
export const VERSION = '2026.06.18.0234';
export const VERSION = '2026.06.18.0959';