fix(auth,download): playlists/likes 401, suppression downloads, 429 formats
CI / build-and-test (push) Failing after 8m20s

- likes + playlists: authMiddlewareCookieAware (cookies + Bearer) au lieu
  du Bearer seul -> corrige 401 Unauthorized meme connecte (creation
  playlist, ajout video, bouton J'aime)
- add-to-playlist/like-button/search-box: retire HttpClientModule local
  qui court-circuitait les intercepteurs fonctionnels
- intercepteur: refresh+retry sur 401 meme sans token en memoire (F5)
- UserService: apiBase() au lieu de /proxy/api en dur (prod :4000)
- J'aime: envoie titre/miniature, erreur visible au lieu de bouton mort
- download: seaux separes (lectures 120/min, ecritures 30/min, formats
  30/min) + reponses limiter en JSON rate_limited + Retry-After
- formats: cache memoire 10 min + ytdlpNetOpts + retry front avec backoff
- polling allege (downloads 5s, suivi job 4s, 429 transitoire non fatal)
- erreurs FR precises (http-error.util): 401/403/404/410/429/quota/500
  avec compte a rebours + bouton Reessayer
This commit is contained in:
2026-09-26 09:26:44 -04:00
parent 2db1f2deee
commit d5ceab7115
11 changed files with 482 additions and 73 deletions
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { DownloadService, type DownloadJob, type DownloadQuota } from '../../../services/download.service';
import { AuthService } from '../../../services/auth.service';
import { frenchDownloadError } from '../../../utils/http-error.util';
import { TranslatePipe } from '../../../pipes/translate.pipe';
import { ProviderBadgeComponent } from '../../../app/shared/components/provider-badge/provider-badge.component';
@@ -88,14 +89,15 @@ export class DownloadsComponent {
retry(job: DownloadJob): void {
if (this.busyIds().has(job.id)) return;
this.markBusy(job.id, true);
this.error.set(null);
this.downloads.retryJob(job.id).subscribe({
next: () => {
this.markBusy(job.id, false);
this.reload();
},
error: () => {
error: (err) => {
this.markBusy(job.id, false);
this.error.set('Nouvel essai impossible pour le moment.');
this.error.set(frenchDownloadError(err));
},
});
}
@@ -103,14 +105,16 @@ export class DownloadsComponent {
cancel(job: DownloadJob): void {
if (this.busyIds().has(job.id)) return;
this.markBusy(job.id, true);
this.error.set(null);
this.downloads.cancelJob(job.id).subscribe({
next: () => {
this.markBusy(job.id, false);
this.items.update((list) => list.filter((j) => j.id !== job.id));
this.syncPoller();
},
error: () => {
error: (err) => {
this.markBusy(job.id, false);
this.error.set('Suppression impossible pour le moment.');
this.error.set(frenchDownloadError(err));
},
});
}
@@ -188,7 +192,9 @@ export class DownloadsComponent {
private syncPoller(): void {
const hasActive = this.items().some((j) => ACTIVE_STATES.has(j.state));
if (hasActive && !this.poller) {
this.poller = setInterval(() => this.refreshActive(), 3000);
// 5 s : le polling agressif (3 s) saturait à lui seul le seau
// anti-abus et affamait suppressions + formats (429).
this.poller = setInterval(() => this.refreshActive(), 5000);
} else if (!hasActive && this.poller) {
clearInterval(this.poller);
this.poller = null;
+201 -5
View File
@@ -1,28 +1,36 @@
import { Component, EventEmitter, Output, Input, signal, computed, effect, inject, HostListener, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { ProviderId, PROVIDERS } from '../../app/core/providers/provider-registry';
import { ProviderPickerComponent } from './provider-picker.component';
import { SearchService } from '../../app/search/search.service';
import { UserService, type UserPreferences } from '../../services/user.service';
import { HistoryService, type SearchHistoryItem } from '../../services/history.service';
import { TelemetryService } from '../../services/telemetry.service';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { Subject, of } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap, catchError, finalize } from 'rxjs/operators';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { SuggestService } from '../../app/search/suggest.service';
import { mergeGroups, highlightParts } from '../../app/search/suggest.util';
// No overlays; we render fixed-position modals with high z-index
const AT_QUERY_RE = /(^|\s)@([a-z]{1,24})$/i;
/** One row of the Step 15 typeahead panel (provider null = recent search). */
export interface SuggestFlatItem {
text: string;
provider: string | null;
}
@Component({
selector: 'app-search-box',
standalone: true,
// NOTE : HttpClient est fourni à la racine (intercepteurs inclus) : ne pas
// importer HttpClientModule ici (écraserait les intercepteurs -> 401).
imports: [
CommonModule,
FormsModule,
ProviderPickerComponent,
HttpClientModule // Nécessaire pour SearchService
ProviderPickerComponent
],
providers: [
SearchService, // Fournir le service au niveau du composant
@@ -36,6 +44,8 @@ export class SearchBoxComponent {
private users = inject(UserService);
private history = inject(HistoryService);
private telemetry = inject(TelemetryService);
// Optional: keeps unit tests (which don't provide it) working with a null guard
private suggestSvc = inject(SuggestService, { optional: true });
@ViewChild('qInput', { static: false }) qInputRef?: ElementRef<HTMLInputElement>;
@ViewChild('quickDialog', { static: false }) quickDialogRef?: ElementRef<HTMLDivElement>;
@@ -66,6 +76,29 @@ export class SearchBoxComponent {
quickOpen = signal(false);
recentSearches = signal<SearchHistoryItem[]>([]);
// Step 15 — query typeahead (suggestions de requêtes, avant validation).
// `suggestionsOpen` doubles as the typeahead panel flag (closed when @ popover opens).
suggestLoading = signal(false);
suggestGroups = signal<Record<string, string[]>>({});
recentSuggest = signal<string[]>([]);
suggestIndex = signal(-1);
private allRecentCache: string[] = [];
private lastRecentFetch = 0;
private suggestShownFor: string | null = null;
readonly suggestFlat = computed((): SuggestFlatItem[] => {
const q = this.query();
const recents = (this.recentSuggest() || []).slice(0, 5).map((t) => ({ text: t, provider: null as string | null }));
const seen = new Set(recents.map((r) => r.text.toLowerCase()));
const merged = mergeGroups(this.suggestGroups() || {}).filter((m) => {
const k = m.text.toLowerCase();
if (seen.has(k)) return false;
seen.add(k);
return true;
});
void q;
return [...recents, ...merged].slice(0, 15);
});
// Element to restore focus to when a modal closes (a11y)
private lastFocused: HTMLElement | null = null;
@@ -88,6 +121,15 @@ export class SearchBoxComponent {
this.searchChange.emit((value || '').trim());
});
// Step 15 — debounced typeahead fetch; switchMap cancels the in-flight
// request on each keystroke so a slow response never overwrites the latest.
this._suggestReq.pipe(
debounceTime(250),
distinctUntilChanged(),
switchMap((value) => this.fetchSuggest(value)),
takeUntilDestroyed()
).subscribe((res) => this.applySuggestResponse(res));
// Reflect SearchService into local state to restore from URL/preference
effect(() => {
if (hydratedFromService) return; // only hydrate once
@@ -152,6 +194,115 @@ export class SearchBoxComponent {
const hasOptions = this.atOptions().length > 0;
this.atOpen.set(AT_QUERY_RE.test(value) && hasOptions);
if (this.atIndex() >= this.atOptions().length) this.atIndex.set(0);
// Step 15 — typeahead has lower priority than the @ popover
if (this.atOpen()) {
this.suggestionsOpen.set(false);
this.suggestIndex.set(-1);
} else {
this.refreshRecentSuggest(value);
this._suggestReq.next(value);
}
}
// --- Step 15 helpers ---
private fetchSuggest(value: string) {
const q = String(value || '').trim();
if (!this.suggestSvc || q.length < 2 || this.atOpen()) {
return of(null);
}
const prov = this.providersForRequest();
const providers = Array.isArray(prov) ? prov : undefined;
this.suggestLoading.set(true);
return this.suggestSvc.suggestOnce(q, providers, 10).pipe(
catchError(() => of({ q, groups: {} as Record<string, string[]> })),
finalize(() => this.suggestLoading.set(false)),
);
}
private applySuggestResponse(res: { q: string; groups: Record<string, string[]> } | null) {
if (!res) {
this.suggestGroups.set({});
this.suggestionsOpen.set(false);
this.suggestIndex.set(-1);
return;
}
this.suggestGroups.set(res.groups || {});
this.refreshRecentSuggest(this.query());
const flat = this.suggestFlat();
if (flat.length > 0) {
this.suggestionsOpen.set(true);
this.suggestIndex.set(-1);
const key = String(res.q || '').toLowerCase();
if (this.suggestShownFor !== key) {
this.suggestShownFor = key;
this.telemetry.track('suggest_shown', { queryLength: key.length, resultCount: flat.length });
}
} else {
this.suggestionsOpen.set(false);
this.suggestIndex.set(-1);
}
}
/** Filter cached history synchronously; refresh the cache at most every 10s. */
private refreshRecentSuggest(value: string) {
const q = String(value || '').trim().toLowerCase();
if (q.length >= 2 && this.allRecentCache.length > 0) {
this.recentSuggest.set(this.allRecentCache.filter((t) => t.toLowerCase().includes(q)).slice(0, 5));
} else if (q.length < 2) {
this.recentSuggest.set([]);
}
const now = Date.now();
if (q.length < 2 || now - this.lastRecentFetch < 10_000) return;
this.lastRecentFetch = now;
try {
this.history.getSearchHistory(15).subscribe({
next: (items) => {
this.allRecentCache = (items || []).map((i) => String(i?.query || '').trim()).filter(Boolean);
const cur = String(this.query() || '').trim().toLowerCase();
if (cur.length >= 2) {
this.recentSuggest.set(this.allRecentCache.filter((t) => t.toLowerCase().includes(cur)).slice(0, 5));
}
},
error: () => {},
});
} catch {}
}
/** Fill the input with a suggestion; submit=true also runs the search. */
applySuggestion(text: string, submit: boolean) {
const t = String(text || '').trim();
if (!t) return;
const prov = this.providersForRequest();
this.telemetry.track('suggest_used', { providers: Array.isArray(prov) ? prov : ['all'], queryLength: t.length });
this.suggestionsOpen.set(false);
this.suggestIndex.set(-1);
this.query.set(t);
try { this.search.q$.next(t); } catch {}
try { this.qInputRef?.nativeElement && (this.qInputRef.nativeElement.value = t); } catch {}
if (submit) {
this.submitted.emit({ q: t, providers: this.providersForRequest() });
this.telemetry.track('search_submit', { providers: Array.isArray(prov) ? prov : ['all'], queryLength: t.length });
} else {
this._suggestReq.next(t);
}
try { this.qInputRef?.nativeElement?.focus(); } catch {}
}
suggestHighlight(text: string): { pre: string; match: string; post: string } {
return highlightParts(text, this.query());
}
providerBadge(pid: string | null): string {
if (!pid) return '';
const found = PROVIDERS.find((p) => p.id === (pid as ProviderId));
return found ? found.shortLabel : String(pid).toUpperCase();
}
onSuggestInputFocus() {
if (!this.atOpen() && String(this.query() || '').trim().length >= 2 && this.suggestFlat().length > 0) {
this.suggestionsOpen.set(true);
}
}
// Pick an option from the inline '@' popover: strip the '@term' and toggle the chip
@@ -205,6 +356,47 @@ export class SearchBoxComponent {
}
if (ev.key === 'Escape') { this.atOpen.set(false); return; }
}
// Step 15 — typeahead navigation (second priority after the @ popover)
if (this.suggestionsOpen() && !this.atOpen()) {
const flat = this.suggestFlat();
if (flat.length > 0) {
const last = flat.length - 1;
if (ev.key === 'ArrowDown') {
ev.preventDefault();
this.suggestIndex.set(this.suggestIndex() >= last ? 0 : this.suggestIndex() + 1);
return;
}
if (ev.key === 'ArrowUp') {
ev.preventDefault();
this.suggestIndex.set(this.suggestIndex() <= 0 ? last : this.suggestIndex() - 1);
return;
}
if (ev.key === 'Enter') {
const idx = this.suggestIndex();
if (idx >= 0 && idx <= last) {
ev.stopImmediatePropagation();
ev.preventDefault();
this.applySuggestion(flat[idx].text, true);
return;
}
}
// Tab completes the active (or first) suggestion without searching
if (ev.key === 'Tab') {
const idx = this.suggestIndex() >= 0 ? this.suggestIndex() : 0;
if (flat[idx]) {
ev.preventDefault();
this.applySuggestion(flat[idx].text, false);
return;
}
}
}
// Esc closes the panel but keeps the typed text
if (ev.key === 'Escape') {
this.suggestionsOpen.set(false);
this.suggestIndex.set(-1);
return;
}
}
// Alt+1..6 map to chips by registry order
if (ev.altKey) {
const map: Record<string, ProviderId | undefined> = { '1': 'yt', '2': 'dm', '3': 'tw', '4': 'pt', '5': 'od', '6': 'ru' };
@@ -250,6 +442,8 @@ export class SearchBoxComponent {
onSubmit(ev: Event) {
try { ev.preventDefault(); } catch {}
this.suggestionsOpen.set(false);
this.suggestIndex.set(-1);
let q = (this.query() || '').trim();
if ((!q || q.length === 0) && this.qInputRef?.nativeElement) {
try {
@@ -355,4 +549,6 @@ export class SearchBoxComponent {
// Internal subject for debouncing query changes
private _qChanges = new Subject<string>();
// Internal subject for debounced typeahead fetches (Step 15)
private _suggestReq = new Subject<string>();
}
@@ -1,6 +1,5 @@
import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, inject, signal, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { PlaylistsService, Playlist } from '../../../../services/playlists.service';
import { AuthService } from '../../../../services/auth.service';
import { forkJoin } from 'rxjs';
@@ -8,7 +7,10 @@ import { forkJoin } from 'rxjs';
@Component({
selector: 'app-add-to-playlist',
standalone: true,
imports: [CommonModule, HttpClientModule],
// NOTE : ne pas importer HttpClientModule ici : fourni à la racine via
// provideHttpClient(withInterceptors(...)), un import local créerait un
// HttpClient sans intercepteurs (plus de Bearer/refresh -> 401).
imports: [CommonModule],
template: `
<div class="relative inline-block text-left" (click)="$event.stopPropagation();">
<button (click)="toggleOpen($event)"
@@ -2,13 +2,13 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit
import { CommonModule } from '@angular/common';
import { LikesService } from '../../../../services/likes.service';
import { finalize } from 'rxjs';
import { HttpClientModule } from '@angular/common/http';
import { AuthService } from '../../../../services/auth.service';
@Component({
selector: 'app-like-button',
standalone: true,
imports: [CommonModule, HttpClientModule],
// NOTE : ne pas importer HttpClientModule ici (voir add-to-playlist).
imports: [CommonModule],
// Le service est déjà fourni via providedIn: 'root' dans le service
template: `
@if (isAuthenticated()) {
+9 -1
View File
@@ -149,6 +149,9 @@
</svg>
<span>{{ liked() ? 'Aimée' : 'J\'aime' }}</span>
</button>
@if (likeError(); as lerr) {
<span class="text-xs text-red-300" role="alert">{{ lerr }}</span>
}
}
@if (isLoggedIn()) {
<app-add-to-playlist [provider]="provider()" [videoId]="v.videoId" [title]="v.title" [thumbnail]="v.thumbnail"></app-add-to-playlist>
@@ -277,7 +280,12 @@
}
}
@if (downloadError() && !formatsLoading()) {
<div class="mt-3 text-sm text-red-300" role="alert">{{ downloadError() }}</div>
<div class="mt-3 flex flex-wrap items-center gap-3" role="alert">
<span class="text-sm text-red-300">{{ downloadError() }}</span>
<button (click)="retryFormats()" class="rounded-full bg-slate-700 px-3 py-1 text-xs font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
Réessayer
</button>
</div>
}
</section>
}
+48 -19
View File
@@ -20,6 +20,7 @@ import { SubscribeButtonComponent } from '../../app/shared/components/subscribe-
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { IframeProgressService } from '../../services/iframe-progress.service';
import { formatAbsoluteFr, formatNumberFr } from '../../utils/date.util';
import { frenchDownloadError } from '../../utils/http-error.util';
import { ProviderBadgeComponent } from '../../app/shared/components/provider-badge/provider-badge.component';
import { ChannelIdentityComponent } from '../../app/shared/components/channel-identity/channel-identity.component';
import { DurationPipe } from '../../app/shared/pipes/duration.pipe';
@@ -289,6 +290,7 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
// --- Like state ---
liked = signal<boolean>(false);
likeBusy = signal<boolean>(false);
likeError = signal<string | null>(null);
// --- Transcript state (Phase 2: display + search + click-to-seek + auto-scroll) ---
transcriptOpen = signal(false);
@@ -547,30 +549,43 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
// Toggle like status for the current video
toggleLike(): void {
if (!this.isLoggedIn()) return;
const provider = this.provider();
const videoId = this.videoId();
if (!provider || !videoId || this.likeBusy()) return;
this.likeBusy.set(true);
const handleError = () => {
this.likeError.set(null);
const handleError = (err: unknown) => {
this.likeBusy.set(false);
const status = (err as { status?: number })?.status;
this.likeError.set(
status === 401
? "Session expirée. Reconnectez-vous puis réessayez."
: "Impossible d’enregistrer votre avis pour le moment. Réessayez."
);
};
// Titre + miniature connus : évite l'enrichissement serveur lent (yt-dlp).
const v = this.video();
const title = v?.title || undefined;
const thumbnail = v?.thumbnail || undefined;
if (this.liked()) {
this.likes.unlike(provider, videoId).subscribe({
next: () => {
this.liked.set(false);
this.likeBusy.set(false);
this.likeError.set(null);
},
error: handleError
});
} else {
this.likes.like(provider, videoId).subscribe({
this.likes.like(provider, videoId, title, thumbnail).subscribe({
next: () => {
this.liked.set(true);
this.likeBusy.set(false);
this.likeError.set(null);
},
error: handleError
});
@@ -634,6 +649,7 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
// Reset like state while loading
this.liked.set(false);
this.likeBusy.set(false);
this.likeError.set(null);
const provider = this.provider();
if (provider === 'rumble') {
// Validate and enrich Rumble video via backend scraping (may also normalize id)
@@ -1261,11 +1277,20 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
// --- Download logic ---
openDownloadPanel() {
// Anti double-clic : ne recharge pas si le panneau est déjà ouvert.
if (this.downloadOpen() && (this.formatsLoading() || this.downloadFormats().length > 0)) return;
this.downloadOpen.set(true);
this.downloadError.set(null);
this.loadFormats();
}
/** Nouveau essai manuel depuis le panneau (bouton « Réessayer »). */
retryFormats(): void {
if (this.formatsLoading()) return;
this.downloadError.set(null);
this.loadFormats();
}
closeDownloadPanel() {
this.downloadOpen.set(false);
}
@@ -1303,8 +1328,9 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
loadFormats() {
const p = this.provider();
const id = this.videoId();
if (!p || !id) return;
if (!p || !id || this.formatsLoading()) return;
this.formatsLoading.set(true);
this.downloadError.set(null);
this.downloads.listFormats(p, id, this.buildProviderOpts()).subscribe({
next: (res) => {
const list = (res?.formats || []).slice();
@@ -1312,14 +1338,12 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
list.sort((a, b) => (parseInt((b.resolution || '').replace(/[^0-9]/g, '')) || 0) - (parseInt((a.resolution || '').replace(/[^0-9]/g, '')) || 0));
this.downloadFormats.set(list);
this.formatsLoading.set(false);
if (!list.length) this.downloadError.set('Aucun format disponible pour cette vidéo.');
},
error: (err) => {
const status = err?.status || 0;
if (status === 403) this.downloadError.set('Le téléchargement est désactivé pour ce provider.');
else {
const details = (err && err.error && (err.error.details || err.error.error)) || err?.message || '';
this.downloadError.set(details ? `Impossible de récupérer les formats. (${details})` : 'Impossible de récupérer les formats.');
}
// Message FR propre (jamais le brut « Http failure response... »),
// avec compte à rebours sur les 429 + bouton Réessayer du panneau.
this.downloadError.set(frenchDownloadError(err));
this.formatsLoading.set(false);
}
});
@@ -1360,6 +1384,7 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
private pollJob(jobId: string) {
if (this.jobPoller) clearInterval(this.jobPoller);
// 4 s au lieu de 2 s : le polling agressif saturait le seau anti-abus (429).
this.jobPoller = setInterval(() => {
this.downloads.getJob(jobId).subscribe({
next: (job) => {
@@ -1373,14 +1398,18 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
if (job.state === 'failed') this.downloadError.set(job.error || 'Téléchargement échoué.');
}
},
error: () => {
// Stop polling on error
clearInterval(this.jobPoller);
this.jobPoller = null;
this.downloadError.set('Erreur de suivi du téléchargement.');
error: (err) => {
// Un 429 transitoire ne doit pas tuer le suivi : on continue le
// polling, seule une erreur durable l'arrête (401/403/404).
const status = (err as { status?: number })?.status;
if (status === 401 || status === 403 || status === 404) {
clearInterval(this.jobPoller);
this.jobPoller = null;
this.downloadError.set(frenchDownloadError(err));
}
}
});
}, 2000);
}, 4000);
}
cancelDownload() {
+4 -6
View File
@@ -33,11 +33,9 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {
if (isRefreshCall) {
return throwError(() => err);
}
// If there is no access token at all, we are not logged in: do not try refresh
const hasToken = !!auth.getAccessToken();
if (!hasToken) {
return throwError(() => err);
}
// Même sans token en mémoire (ex. juste après F5), une session par
// cookies httpOnly peut exister : on tente un refresh via cookies
// avant d'abandonner. refresh() n'échoue jamais bruyamment (false).
// Try a single refresh then retry the request once
return auth.refresh().pipe(
switchMap((ok) => {
@@ -47,7 +45,7 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {
if (newToken) {
retry = retry.clone({ setHeaders: { Authorization: `Bearer ${newToken}` } });
}
if (retry.url.startsWith('/proxy/api')) {
if (retry.url.startsWith('/proxy/api') || retry.url.startsWith('/api')) {
retry = retry.clone({ withCredentials: true });
}
return next(retry);
+15 -2
View File
@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable, map } from 'rxjs';
import { HttpClient, HttpErrorResponse, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable, map, retry, timer, throwError } from 'rxjs';
export interface DownloadFormat {
id: string;
@@ -61,6 +61,19 @@ export class DownloadService {
return this.http.get<{ url: string; formats: DownloadFormat[]; title: string; duration: number }>(
`/proxy/api/download/${encodeURIComponent(provider)}/${encodeURIComponent(videoId)}/formats`,
{ params, withCredentials: true }
).pipe(
// La liste des formats dépend de yt-dlp/YouTube (parfois 429/5xx
// transitoires) : 2 nouveaux essais espacés, jamais sur les 4xx
// définitives (401/403/404) pour ne pas marteler le seau anti-abus.
retry({
count: 2,
delay: (err: unknown, retryCount: number) => {
const status = (err as HttpErrorResponse)?.status;
const retryable = status === 0 || status === 429 || (typeof status === 'number' && status >= 500);
if (!retryable) return throwError(() => err);
return timer(1500 * retryCount);
},
})
);
}
+15 -3
View File
@@ -24,19 +24,31 @@ export class UserService {
return this._preferences();
}
/** Même règle que les autres services : /proxy/api en dev (proxy Angular),
* /api quand on est servi par le backend :4000 (prod/docker). L'URL codée
* en dur cassait loadMe/loadPreferences en prod (-> currentUser null). */
private apiBase(): string {
try {
const port = window?.location?.port || '';
return port && port !== '4000' ? '/proxy/api' : '/api';
} catch {
return '/api';
}
}
loadPreferences(): Observable<UserPreferences> {
return this.http.get<UserPreferences>('/proxy/api/user/preferences', { withCredentials: true }).pipe(
return this.http.get<UserPreferences>(`${this.apiBase()}/user/preferences`, { withCredentials: true }).pipe(
tap(p => this._preferences.set(p || {}))
);
}
updatePreferences(patch: Partial<UserPreferences>): Observable<UserPreferences> {
return this.http.patch<UserPreferences>('/proxy/api/user/preferences', patch, { withCredentials: true }).pipe(
return this.http.patch<UserPreferences>(`${this.apiBase()}/user/preferences`, patch, { withCredentials: true }).pipe(
tap(p => this._preferences.set(p || {}))
);
}
loadMe(): Observable<AuthUser> {
return this.http.get<AuthUser>('/proxy/api/user/me', { withCredentials: true });
return this.http.get<AuthUser>(`${this.apiBase()}/user/me`, { withCredentials: true });
}
}
+79
View File
@@ -0,0 +1,79 @@
import { HttpErrorResponse } from '@angular/common/http';
/** Code d'erreur métier renvoyé par le backend : { error: 'rate_limited', ... }. */
export function backendErrorCode(err: unknown): string | null {
try {
const body = (err as HttpErrorResponse)?.error;
if (body && typeof body === 'object' && typeof body.error === 'string') return body.error;
if (typeof body === 'string') {
const m = /"error"\s*:\s*"([a-z_]+)"/i.exec(body);
if (m) return m[1];
}
} catch {}
return null;
}
/**
* Secondes avant de réessayer après un 429 : backend { retryAfterSec } >
* header Retry-After > header RateLimit-Reset (epoch secondes) > défaut.
*/
export function retryAfterSeconds(err: unknown, fallback = 30): number {
try {
const e = err as HttpErrorResponse;
const body = e?.error;
if (body && typeof body === 'object' && Number.isFinite(Number(body.retryAfterSec))) {
return Math.max(1, Math.ceil(Number(body.retryAfterSec)));
}
const headers = e?.headers;
const retryAfter = headers?.get?.('Retry-After');
if (retryAfter && Number.isFinite(Number(retryAfter))) return Math.max(1, Math.ceil(Number(retryAfter)));
const reset = headers?.get?.('RateLimit-Reset');
if (reset && Number.isFinite(Number(reset))) {
const nowSec = Date.now() / 1000;
const wait = Math.ceil(Number(reset) - nowSec);
if (wait >= 1 && wait <= 3600) return wait;
}
} catch {}
return fallback;
}
/** Vrai quand l'échec est transitoire et mérite un retry (429 / réseau / 5xx). */
export function isRetryableStatus(status: number | undefined): boolean {
return status === 0 || status === 429 || (typeof status === 'number' && status >= 500 && status < 600);
}
/**
* Message FR prêt à afficher pour les erreurs du module téléchargement.
* Ne fuit jamais le corps brut (HTML / « Http failure response... »).
*/
export function frenchDownloadError(err: unknown): string {
const e = err as HttpErrorResponse;
const status = typeof e?.status === 'number' ? e.status : undefined;
const code = backendErrorCode(err);
if (status === 0) return 'Serveur de téléchargement injoignable. Vérifiez que le backend tourne puis réessayez.';
if (status === 401) return 'Session expirée. Reconnectez-vous puis réessayez.';
if (status === 403) {
if (code === 'download_disabled_for_provider' || code === 'forbidden') {
return code === 'forbidden'
? 'Action interdite (ressource d’un autre compte).'
: 'Le téléchargement est désactivé pour ce provider.';
}
return 'Action interdite.';
}
if (status === 404) return 'Ce téléchargement n’existe plus (déjà supprimé ou autre compte). Actualisez la liste.';
if (status === 410) return 'Le fichier n’est plus présent sur le serveur (nettoyé). Relancez un téléchargement.';
if (status === 429) {
if (code === 'too_many_downloads') return 'Trop de téléchargements en parallèle. Attendez la fin d’un job puis réessayez.';
if (code === 'storage_quota_exceeded') return 'Quota de stockage atteint. Supprimez d’anciens fichiers puis réessayez.';
const wait = retryAfterSeconds(err);
return `Trop de requêtes pour le moment (limite anti-abus). Réessayez dans ~${wait} s.`;
}
if (status === 400) {
if (code === 'job_not_retryable') return 'Ce job ne peut pas être relancé dans son état actuel.';
return 'Requête invalide.';
}
if (code === 'formats_failed' || status === 500) {
return 'Impossible de récupérer les formats (service vidéo indisponible). Réessayez dans un instant.';
}
return 'Opération impossible pour le moment. Réessayez plus tard.';
}