feat(preferences): section langues a telecharger (defaut fr+en), transcripts filtres cote serveur et watch

src/components/themes/provider-theme-page.component.ts

@@ -11,8 +11,9 @@ import { LikeButtonComponent } from '../shared/components/like-button/like-butto
 import { DurationPipe } from '../../app/shared/pipes/duration.pipe';
 import { ProviderBadgeComponent } from '../../app/shared/components/provider-badge/provider-badge.component';
 import { ChannelIdentityComponent } from '../../app/shared/components/channel-identity/channel-identity.component';
-import { classifyVideo, isShortVideo } from '../../app/shared/utils/video-kind';
-import { map, of, switchMap, catchError, Observable } from 'rxjs';
+import { InfiniteAnchorComponent } from '../shared/infinite-anchor/infinite-anchor.component';
+import { classifyVideo, isLiveVideo, isShortVideo } from '../../app/shared/utils/video-kind';
+import { map, of, switchMap, catchError, forkJoin, Observable } from 'rxjs';
 import { PagedResult } from '../../services/youtube-api.service';
 
 const TWITCH_THEME_KEYWORDS: Record<string, string[]> = {
@@ -47,7 +48,7 @@ const TWITCH_THEME_KEYWORDS: Record<string, string[]> = {
   standalone: true,
   templateUrl: './provider-theme-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, FormsModule, RouterLink, TranslatePipe, LikeButtonComponent, DurationPipe, ProviderBadgeComponent, ChannelIdentityComponent]
+  imports: [CommonModule, FormsModule, RouterLink, TranslatePipe, LikeButtonComponent, DurationPipe, ProviderBadgeComponent, ChannelIdentityComponent, InfiniteAnchorComponent]
 })
 export class ProviderThemePageComponent implements OnDestroy {
   private route = inject(ActivatedRoute);
@@ -66,20 +67,85 @@ export class ProviderThemePageComponent implements OnDestroy {
   // Filters state
   sort = signal<'recent' | 'viewed' | 'longest'>('recent');
   duration = signal<'any' | 'short' | 'medium' | 'long'>('any');
-  type = signal<'any' | 'video' | 'live' | 'recorded' | 'short'>('any');
+  type = signal<'any' | 'video' | 'live' | 'recorded' | 'short' | 'channel'>('any');
   language = signal<'any' | 'en' | 'fr'>('any');
   date = signal<'any' | 'day' | 'week' | 'month' | 'year'>('any');
 
   // Data state
   allVideos = signal<Video[]>([]);
   nextCursor = signal<string | null>(null);
+  // Curseurs par section Twitch (les paginations Helix sont indépendantes).
+  private twitchCursors = { live: null as string | null, vod: null as string | null, clip: null as string | null, channel: null as string | null };
+  /** Catégorie Twitch résolue (directory/category façon twitch.tv). */
+  twitchGame = signal<{ id: string; name: string; boxArtUrl?: string } | null>(null);
   loading = signal(false);
+  // Continuation (cursor > first page): grid stays mounted, bottom loader only.
+  loadingMore = signal(false);
   error = signal<string | null>(null);
 
   // Derived state for the UI
   providersList = computed(() => this.instances.providers());
   videos = computed(() => this.applyFilters(this.allVideos()));
 
+  /** La page courante est-elle une page Twitch à sections (hors thème live) ? */
+  isTwitchSections = computed(() => this.provider() === 'twitch' && this.theme() !== 'live');
+
+  /** Listes Twitch par section (filtres hors-type appliqués), façon directory. */
+  private twitchFilteredNoType(): Video[] {
+    return this.applyFiltersWithType(this.allVideos(), 'any');
+  }
+
+  twitchLives = computed(() => {
+    const p = this.provider();
+    return this.twitchFilteredNoType().filter(v =>
+      isLiveVideo({ ...v, provider: (v.provider as string) || p }));
+  });
+  twitchVods = computed(() => {
+    const p = this.provider();
+    return this.twitchFilteredNoType().filter(v => {
+      const w = { ...v, provider: (v.provider as string) || p };
+      if (isLiveVideo(w)) return false;
+      if (isShortVideo(w)) return false;
+      if (String(v.type || '').toLowerCase() === 'channel') return false;
+      return true;
+    });
+  });
+  twitchClips = computed(() => {
+    const p = this.provider();
+    return this.twitchFilteredNoType().filter(v => {
+      const w = { ...v, provider: (v.provider as string) || p };
+      if (isLiveVideo(w)) return false;
+      if (String(v.type || '').toLowerCase() === 'channel') return false;
+      if (String((v as any).kind || '').toLowerCase() === 'clip') return true;
+      return isShortVideo(w);
+    });
+  });
+  twitchChannels = computed(() => {
+    const p = this.provider();
+    return this.twitchFilteredNoType().filter(v => {
+      if ((v as any).isLive === true) return false;
+      if (isLiveVideo({ ...v, provider: (v.provider as string) || p })) return false;
+      return String(v.type || '').toLowerCase() === 'channel';
+    });
+  });
+
+  /** Onglet Twitch synchronisé avec le filtre "type" existant. */
+  twitchTab = computed<'all' | 'live' | 'video' | 'clip' | 'channel'>(() => {
+    const t = this.type();
+    if (t === 'live') return 'live';
+    if (t === 'video' || t === 'recorded') return 'video';
+    if (t === 'short') return 'clip';
+    if (t === 'channel') return 'channel';
+    return 'all';
+  });
+
+  setTwitchTab(v: 'all' | 'live' | 'video' | 'clip' | 'channel'): void {
+    if (v === 'all') this.type.set('any');
+    else if (v === 'video') this.type.set('video');
+    else if (v === 'clip') this.type.set('short');
+    else this.type.set(v);
+  }
+
   constructor() {
     this.route.paramMap.subscribe(pm => {
       const provider = (pm.get('provider') as Provider) || 'youtube';
@@ -87,6 +153,16 @@ export class ProviderThemePageComponent implements OnDestroy {
       this.provider.set(provider);
       this.theme.set(theme);
       this.instances.setSelectedProvider(provider);
+      // Thème "En direct" : activer le filtre "Live" par défaut et lever les
+      // filtres qui masqueraient les lives (durée/date = any).
+      if (theme === 'live') {
+        this.type.set('live');
+        this.duration.set('any');
+        this.date.set('any');
+      } else if (this.type() === 'live') {
+        // En quittant le thème live, ne pas rester bloqué sur le filtre Live.
+        this.type.set('any');
+      }
       this.resetAndLoad();
     });
 
@@ -105,7 +181,10 @@ export class ProviderThemePageComponent implements OnDestroy {
     this.version++;
     this.allVideos.set([]);
     this.nextCursor.set(null);
+    this.twitchCursors = { live: null, vod: null, clip: null, channel: null };
+    this.twitchGame.set(null);
     this.error.set(null);
+    this.loadingMore.set(false);
     this.loadMore();
   }
 
@@ -127,7 +206,7 @@ export class ProviderThemePageComponent implements OnDestroy {
   }
 
   loadMore() {
-    if (this.loading()) return;
+    if (this.loading() || this.loadingMore()) return;
 
     const readiness = this.instances.getProviderReadiness(this.provider());
     if (!readiness.ready) {
@@ -135,7 +214,10 @@ export class ProviderThemePageComponent implements OnDestroy {
       return;
     }
 
-    this.loading.set(true);
+    // First page (empty list) -> full loader; continuations -> bottom loader,
+    // grid stays mounted so scroll position is preserved.
+    if (this.allVideos().length > 0) this.loadingMore.set(true);
+    else this.loading.set(true);
     this.error.set(null);
     const snapshotVersion = this.version;
     const provider = this.provider();
@@ -144,36 +226,28 @@ export class ProviderThemePageComponent implements OnDestroy {
     const themeSlug = this.theme();
     const isLiveTheme = themeSlug === 'live';
 
+    // Fournisseurs sans aucun direct : aucune vidéo, message explicite.
+    const LIVE_PROVIDERS: Provider[] = ['youtube', 'twitch'];
+    if (isLiveTheme && !LIVE_PROVIDERS.includes(provider)) {
+      this.error.set('Ce fournisseur ne propose pas de directs.');
+      this.loading.set(false);
+      this.loadingMore.set(false);
+      this.cdr.markForCheck();
+      return;
+    }
+
     let apiCall: Observable<PagedResult<Video>>;
-    if (provider === 'twitch') {
-      if (isLiveTheme) {
-        // Thème live : top streams (jamais vide quand Twitch est configuré).
-        apiCall = this.api.getTwitchTopStreamsPage(cursor || undefined);
-      } else {
-        // Thème classique : VODs puis clips, puis top streams en filet de sécurité.
-        apiCall = this.api.searchTwitchVodsPage(query, cursor || undefined).pipe(
-          switchMap((res) => {
-            if ((res?.items?.length || 0) >= 8) {
-              return of(res);
-            }
-            return this.api.searchTwitchClipsPage(query, cursor || undefined).pipe(
-              map((clips) => ({ ...clips, items: [...(res?.items || []), ...(clips.items || [])] })),
-              switchMap((merged: any) => {
-                if (((merged?.items?.length) || 0) >= 4) return of(merged);
-                return this.api.getTwitchTopStreamsPage(cursor || undefined).pipe(
-                  map((top) => {
-                    const seen = new Set((merged?.items || []).map((v: Video) => v.videoId));
-                    const extra = (top?.items || []).filter((v: Video) => !seen.has(v.videoId));
-                    return { items: [...(merged?.items || []), ...extra], nextCursor: top?.nextCursor || merged?.nextCursor || null };
-                  }),
-                  // En cas d'échec du fallback, garder au moins VODs+clips.
-                  catchError(() => of(merged))
-                );
-              })
-            );
-          })
-        );
-      }
+    if (isLiveTheme && provider === 'youtube') {
+      // Directs YouTube : search.list eventType=live (vrais lives uniquement).
+      apiCall = this.api.searchYouTubeLivePage('', cursor || undefined);
+    } else if (provider === 'twitch' && !isLiveTheme) {
+      // Page Twitch à sections façon directory : lives / vidéos / clips / chaînes
+      // chargés en parallèle avec leurs propres curseurs Helix.
+      this.loadTwitchSections(snapshotVersion, provider, query);
+      return;
+    } else if (provider === 'twitch') {
+      // Thème live : top streams (jamais vide quand Twitch est configuré).
+      apiCall = this.api.getTwitchTopStreamsPage(cursor || undefined);
     } else {
       apiCall = query
         ? this.api.searchVideosPage(query, cursor, provider)
@@ -184,27 +258,127 @@ export class ProviderThemePageComponent implements OnDestroy {
       next: (res: PagedResult<Video>) => {
         if (snapshotVersion !== this.version) return;
 
+        // Thème live : garde-fou, ne jamais mélanger des VODs.
+        let items = res.items || [];
+        if (isLiveTheme) {
+          items = items.filter((v: Video) =>
+            isLiveVideo({ ...v, provider: (v.provider as string) || provider })
+          );
+        }
         const existingIds = new Set(this.allVideos().map((v: Video) => v.videoId));
-        const newVideos = (res.items || []).filter((v: Video) => !existingIds.has(v.videoId));
+        const newVideos = items.filter((v: Video) => !existingIds.has(v.videoId));
 
         this.allVideos.update(current => [...current, ...newVideos]);
         this.nextCursor.set(res.nextCursor || null);
         this.loading.set(false);
+        this.loadingMore.set(false);
         this.cdr.markForCheck();
       },
       error: (e) => {
         if (snapshotVersion !== this.version) return;
         this.error.set(e.message || 'Failed to load videos');
         this.loading.set(false);
+        this.loadingMore.set(false);
         this.cdr.markForCheck();
       }
     });
   }
 
   private applyFilters(list: Video[]): Video[] {
+    return this.applyFiltersWithType(list, this.type());
+  }
+
+  /**
+   * Chargement Twitch à sections (directory/category) : lives (+ catégorie),
+   * VODs, clips et chaînes en parallèle, chacun avec son curseur Helix.
+   * En continuation on ne recharge que l'onglet actif (ou tout si "Tout").
+   */
+  private loadTwitchSections(snapshotVersion: number, provider: Provider, query: string): void {
+    const firstPage = this.allVideos().length === 0;
+    const tab = this.twitchTab();
+    const wantLive = firstPage || tab === 'all' || tab === 'live';
+    const wantVod = firstPage || tab === 'all' || tab === 'video';
+    const wantClip = firstPage || tab === 'all' || tab === 'clip';
+    const wantChannel = firstPage || tab === 'all' || tab === 'channel';
+
+    const finish = (items: Video[], next: string | null, err?: string) => {
+      if (snapshotVersion !== this.version) return;
+      if (err) this.error.set(err);
+      const existing = new Set(this.allVideos().map(v => `${v.type}:${v.videoId}`));
+      const fresh = items.filter(v => !existing.has(`${v.type}:${v.videoId}`));
+      if (fresh.length) this.allVideos.update(cur => [...cur, ...fresh]);
+      this.nextCursor.set(next);
+      this.loading.set(false);
+      this.loadingMore.set(false);
+      this.cdr.markForCheck();
+    };
+
+    const fetchAll = (gameId: string | null) => {
+      const calls: Record<string, Observable<PagedResult<Video>>> = {};
+      if (wantLive) {
+        calls['live'] = gameId
+          ? this.api.getTwitchGameStreamsPage(gameId, this.twitchCursors.live || undefined, 12).pipe(
+              catchError(() => this.api.getTwitchTopStreamsPage(this.twitchCursors.live || undefined)))
+          : this.api.getTwitchTopStreamsPage(this.twitchCursors.live || undefined);
+      }
+      if (wantVod) calls['vod'] = this.api.searchTwitchVodsPage(query, this.twitchCursors.vod || undefined);
+      if (wantClip) calls['clip'] = this.api.searchTwitchClipsPage(query, this.twitchCursors.clip || undefined);
+      if (wantChannel) calls['channel'] = this.api.searchTwitchAllChannelsPage(query, this.twitchCursors.channel || undefined, 20);
+      if (Object.keys(calls).length === 0) {
+        this.loading.set(false);
+        this.loadingMore.set(false);
+        this.cdr.markForCheck();
+        return;
+      }
+      forkJoin(calls).subscribe({
+        next: (res) => {
+          if (snapshotVersion !== this.version) return;
+          const r = res as Record<string, PagedResult<Video>>;
+          if (r['live']) this.twitchCursors.live = r['live'].nextCursor || null;
+          if (r['vod']) this.twitchCursors.vod = r['vod'].nextCursor || null;
+          if (r['clip']) this.twitchCursors.clip = r['clip'].nextCursor || null;
+          if (r['channel']) this.twitchCursors.channel = r['channel'].nextCursor || null;
+          const items = Object.values(r).flatMap(x => x?.items || []);
+          // Filet de sécurité : si VODs+clips vides et aucun live, compléter par top streams.
+          const hasContent = items.length > 0;
+          if (!hasContent && firstPage) {
+            this.api.getTwitchTopStreamsPage(null).subscribe({
+              next: (top) => finish([...items, ...(top.items || [])], top.nextCursor || null),
+              error: () => finish(items, null),
+            });
+            return;
+          }
+          const next = this.twitchCursors.live || this.twitchCursors.vod || this.twitchCursors.clip || this.twitchCursors.channel;
+          finish(items, next);
+        },
+        error: (e) => finish([], null, e?.message || 'Failed to load videos'),
+      });
+    };
+
+    if (firstPage) {
+      // Première page : résoudre la catégorie Twitch pour des lives thématiques.
+      this.api.searchTwitchCategory(query).subscribe({
+        next: (game) => {
+          if (snapshotVersion !== this.version) return;
+          if (game) this.twitchGame.set(game);
+          fetchAll(game?.id || null);
+        },
+        error: () => {
+          if (snapshotVersion !== this.version) return;
+          fetchAll(null);
+        },
+      });
+    } else {
+      fetchAll(this.twitchGame()?.id || null);
+    }
+  }
+
+  private applyFiltersWithType(list: Video[], typeOverride: 'any' | 'video' | 'live' | 'recorded' | 'short' | 'channel'): Video[] {
     let arr = [...list];
+    const isLiveTheme = this.theme() === 'live';
     const durationFilter = this.duration();
-    if (durationFilter !== 'any') {
+    // Les lives n'ont pas de durée connue (0) : le filtre durée ne s'applique pas sur le thème live.
+    if (durationFilter !== 'any' && !isLiveTheme) {
       arr = arr.filter(v => {
         const dur = v.duration || 0;
         if (durationFilter === 'short') return dur > 0 && dur < 240; // < 4 min
@@ -214,18 +388,33 @@ export class ProviderThemePageComponent implements OnDestroy {
       });
     }
 
-    const typeFilter = this.type();
+    const typeFilter = typeOverride;
     if (typeFilter !== 'any') {
       const p = this.provider();
       arr = arr.filter(v => {
         const withProvider = { ...v, provider: (v.provider as string) || p };
-        if (typeFilter === 'video') return !isShortVideo(withProvider) && (v.type === 'video' || v.type === 'recorded');
-        if (typeFilter === 'live') return v.type === 'live' || v.type === 'channel' || v.type === 'stream' || (v as any).isLive === true;
-        if (typeFilter === 'recorded') return v.type === 'recorded' || (v.type === 'video' && !isShortVideo(withProvider));
-        // Shorts : classification partagée (durée 0/absente ⇒ jamais un Short).
-        if (typeFilter === 'short') return isShortVideo(withProvider);
+        if (typeFilter === 'video') return !isShortVideo(withProvider) && !isLiveVideo(withProvider) && String(v.type || '').toLowerCase() !== 'channel' && (v.type === 'video' || v.type === 'recorded');
+        if (typeFilter === 'live') return isLiveVideo(withProvider);
+        if (typeFilter === 'recorded') return !isLiveVideo(withProvider) && String(v.type || '').toLowerCase() !== 'channel' && (v.type === 'recorded' || (v.type === 'video' && !isShortVideo(withProvider)));
+        // Shorts / Clips : classification partagée + kind='clip' (durée parfois absente).
+        if (typeFilter === 'short') {
+          if (isLiveVideo(withProvider)) return false;
+          if (String(v.type || '').toLowerCase() === 'channel') return false;
+          if (String((v as any).kind || '').toLowerCase() === 'clip') return true;
+          return isShortVideo(withProvider);
+        }
+        // Chaînes : hors-ligne uniquement (les lives restent dans "Direct").
+        if (typeFilter === 'channel') {
+          if ((v as any).isLive === true) return false;
+          if (isLiveVideo(withProvider) && String(v.type || '').toLowerCase() !== 'channel') return false;
+          return String(v.type || '').toLowerCase() === 'channel';
+        }
         return true;
       });
+    } else if (this.theme() === 'live') {
+      // Thème live même si l'utilisateur remet le filtre sur "Any" : LIVE seulement.
+      const p = this.provider();
+      arr = arr.filter(v => isLiveVideo({ ...v, provider: (v.provider as string) || p }));
     }
 
     const langFilter = this.language();
@@ -289,6 +478,31 @@ export class ProviderThemePageComponent implements OnDestroy {
     return classifyVideo({ ...v, provider: (v.provider as string) || p });
   }
 
+  /** Badges Twitch : LIVE seulement si réellement en direct (pas les chaînes hors-ligne). */
+  isLiveCard(v: Video): boolean {
+    if ((v as any).isLive === true) return true;
+    if (String(v.type || '').toLowerCase() === 'live') return true;
+    if (String(v.type || '').toLowerCase() === 'channel') return false;
+    const p = this.provider();
+    return isLiveVideo({ ...v, provider: (v.provider as string) || p })
+      && String(v.type || '').toLowerCase() !== 'channel';
+  }
+
+  isChannelCard(v: Video): boolean {
+    if ((v as any).isLive === true) return false;
+    return String(v.type || '').toLowerCase() === 'channel';
+  }
+
+  isClipCard(v: Video): boolean {
+    if (this.isLiveCard(v) || this.isChannelCard(v)) return false;
+    if (String((v as any).kind || '').toLowerCase() === 'clip') return true;
+    const p = this.provider();
+    return isShortVideo({ ...v, provider: (v.provider as string) || p });
+  }
+
+  /** Affichage "Tout" Twitch : sections empilées façon directory. */
+  showTwitchSectionsAll = computed(() => this.isTwitchSections() && this.twitchTab() === 'all');
+
   shortsCount(): number {
     const p = this.provider();
     return this.allVideos().filter(v => isShortVideo({ ...v, provider: (v.provider as string) || p })).length;
@@ -309,11 +523,21 @@ export class ProviderThemePageComponent implements OnDestroy {
       if (slug.startsWith('/')) slug = slug.slice(1);
       qp.slug = slug;
     }
-    if (p === 'twitch' && v.type === 'channel') qp.channel = v.videoId;
+    if (p === 'twitch') {
+      // Clips : embed dédié ?clip=<slug> (jamais ?channel=, le slug n'est pas un login).
+      if (String((v as any).kind || '').toLowerCase() === 'clip') {
+        qp.clip = v.videoId;
+        return qp;
+      }
+      if (v.type === 'channel' || v.type === 'live' || (v as any).isLive === true) {
+        // ?channel= exige le login (non numérique) ; un id numérique = VOD.
+        if (v.videoId && !/^\d+$/.test(String(v.videoId))) qp.channel = v.videoId;
+      }
+    }
     return qp;
   }
 
-  trackByVideo(_idx: number, v: Video) { return v.videoId || v.url; }
+  trackByVideo(_idx: number, v: Video) { return `${v.type}:${v.videoId}` || v.url; }
 
   ngOnDestroy(): void {
     this.version++; // Invalidate any pending requests