feat(channel): identite chaine partagee cliquable partout + logos fiabilises

- Nouveau app-channel-identity (avatar+nom -> /channel, fallback resolve /api/channels, initiales sinon)
- ProviderBadge: accepte les ids courts yt/dm/tw/pt/od/ru
- Search adapters yt/dm/pt/od: conservent channelExternalId/channelAvatarUrl (pt derive instance|channel)
- video-card/themes/watch/related/suggestions/subscriptions/channel-header uniformises sur l'identite partagee

src/components/channel/channel-header/channel-header.component.html

@@ -19,10 +19,16 @@
     <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
       <div class="relative -mt-2 shrink-0 sm:-mt-10">
         <img
-          [src]="channel.avatarUrl || 'https://placehold.co/160x160/png'"
+          *ngIf="channel.avatarUrl; else headerInitials"
+          [src]="channel.avatarUrl"
           [alt]="channel.title || channel.handle || 'Avatar'"
           class="h-24 w-24 rounded-full border-4 border-zinc-950 bg-zinc-800 object-cover sm:h-28 sm:w-28"
         />
+        <ng-template #headerInitials>
+          <div class="flex h-24 w-24 items-center justify-center rounded-full border-4 border-zinc-950 bg-zinc-800 text-3xl font-bold text-zinc-200 sm:h-28 sm:w-28">
+            {{ (channel.title || channel.handle || '?').charAt(0).toUpperCase() }}
+          </div>
+        </ng-template>
       </div>
       <div class="min-w-0 flex-1">
         <h1 class="truncate text-2xl font-bold text-white sm:text-3xl">

src/components/library/subscriptions/subscriptions.component.html

@@ -63,16 +63,19 @@
           >
             <ng-container *ngIf="item.channel as channel; else subscriptionFallback">
               <div class="flex items-center gap-4">
-                <img
-                  [src]="channel.avatarUrl || 'https://placehold.co/80x80/png'"
-                  [alt]="channel.title || channel.handle || 'Avatar'"
-                  class="h-16 w-16 rounded-full border border-slate-800 object-cover"
-                />
+                <a [routerLink]="['/channel', channel.provider, channel.externalId]" title="Ouvrir la page de la chaîne">
+                  <img
+                    [src]="channel.avatarUrl || 'https://placehold.co/80x80/png'"
+                    [alt]="channel.title || channel.handle || 'Avatar'"
+                    class="h-16 w-16 rounded-full border border-slate-800 object-cover hover:ring-2 hover:ring-red-500/60"
+                  />
+                </a>
                 <div class="space-y-1">
                   <div class="flex flex-wrap items-center gap-2">
-                    <h3 class="text-lg font-semibold text-slate-100">
+                    <a [routerLink]="['/channel', channel.provider, channel.externalId]"
+                       class="text-lg font-semibold text-slate-100 hover:text-red-300">
                       {{ channel.title || channel.handle || 'Chaîne inconnue' }}
-                    </h3>
+                    </a>
                     <app-provider-badge [provider]="channel.provider"></app-provider-badge>
                     <span *ngIf="channel.verified" class="text-xs text-emerald-300">✓ Vérifiée</span>
                   </div>

src/components/library/subscriptions/subscriptions.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DatePipe, DecimalPipe } from '@angular/common';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { SubscriptionsService, type SubscriptionItem } from '../../../services/subscriptions.service';
 import type { ProviderId } from '../../../app/shared/models/channel.model';
 import { ProviderBadgeComponent } from '../../../app/shared/components/provider-badge/provider-badge.component';
@@ -17,7 +17,7 @@ type SortKey = 'alpha' | 'recent' | 'subs';
 @Component({
   selector: 'app-library-subscriptions',
   standalone: true,
-  imports: [CommonModule, DatePipe, DecimalPipe, ProviderBadgeComponent, SubscribeButtonComponent],
+  imports: [CommonModule, DatePipe, DecimalPipe, RouterLink, ProviderBadgeComponent, SubscribeButtonComponent],
   templateUrl: './subscriptions.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/components/search/search-suggestions.component.html

@@ -19,9 +19,15 @@
               @if (item.thumbnail) {
                 <img [src]="item.thumbnail" class="h-12 w-20 object-cover rounded" alt=""/>
               }
-              <div class="min-w-0">
+              <div class="min-w-0 flex-1">
                 <div class="text-slate-100 truncate">{{ item.title }}</div>
-                <div class="text-slate-400 text-xs">{{ item.uploaderName }}</div>
+                <app-channel-identity
+                  size="sm"
+                  [provider]="s.id"
+                  [externalId]="channelExternalId(s, item)"
+                  [avatarUrl]="channelAvatar(item)"
+                  [name]="item.uploaderName || null"
+                ></app-channel-identity>
               </div>
             </li>
           }

src/components/search/search-suggestions.component.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { PROVIDERS, PROVIDER_MAP, type ProviderId } from '../../app/core/providers/provider-registry';
 import type { SuggestionItem } from '../../app/search/search.service';
+import { ChannelIdentityComponent } from '../../app/shared/components/channel-identity/channel-identity.component';
 
 interface SuggestionSection {
   id: ProviderId;
@@ -17,7 +18,7 @@ interface SuggestionSection {
 @Component({
   selector: 'app-search-suggestions',
   standalone: true,
-  imports: [CommonModule, RouterLink],
+  imports: [CommonModule, RouterLink, ChannelIdentityComponent],
   templateUrl: './search-suggestions.component.html'
 })
 export class SearchSuggestionsComponent {
@@ -29,8 +30,7 @@ export class SearchSuggestionsComponent {
   // which unsupported providers get an explicit row (Step 6)
   @Input() activeProviders: ProviderId[] | 'all' = 'all';
 
-  readonly sections = computed<SuggestionSection[]>(() => {
-    const groups = this.groups || ({} as Record<ProviderId, SuggestionItem[]>);
+  readonly sections = computed<SuggestionSection[]>(() => {    const groups = this.groups || ({} as Record<ProviderId, SuggestionItem[]>);
     const active = this.activeProviders === 'all'
       ? PROVIDERS.map(p => p.id)
       : (this.activeProviders || []).filter(id => PROVIDER_MAP.has(id));
@@ -47,4 +47,30 @@ export class SearchSuggestionsComponent {
       } as SuggestionSection;
     });
   });
+
+  /** ExternalId chaîne pour le lien /channel (null = non cliquable). */
+  channelExternalId(section: { id: ProviderId }, item: SuggestionItem): string | null {
+    const raw = item as unknown as Record<string, unknown>;
+    if (section.id === 'pt') {
+      // PeerTube : `instance|channel`, instance dérivée de l'URL vidéo.
+      try {
+        const url = String(raw?.['url'] || '');
+        const host = url ? new URL(url).hostname : '';
+        const channel = String(raw?.['channelId'] || '');
+        if (host && channel) return `${host}|${channel}`;
+      } catch {}
+      return null;
+    }
+    if (section.id === 'od') {
+      const name = String(raw?.['uploaderName'] || '');
+      return name || null;
+    }
+    const ext = String(raw?.['channelExternalId'] || raw?.['channelId'] || '');
+    return ext || null;
+  }
+
+  channelAvatar(item: SuggestionItem): string | null {
+    const raw = item as unknown as Record<string, unknown>;
+    return String(raw?.['uploaderAvatar'] || '') || null;
+  }
 }

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

@@ -119,8 +119,8 @@
   </div>
 
   <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-8">
-    <div *ngFor="let v of videos(); trackBy: trackByVideo" class="group">
-      <a [routerLink]="['/watch', v.videoId]" [queryParams]="watchQueryParams(v)" [state]="{ video: v }" class="block bg-slate-800/50 rounded-lg overflow-hidden hover:bg-slate-700/50 transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl">
+    <div *ngFor="let v of videos(); trackBy: trackByVideo" class="group bg-slate-800/50 rounded-lg overflow-hidden hover:bg-slate-700/50 transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-xl">
+      <a [routerLink]="['/watch', v.videoId]" [queryParams]="watchQueryParams(v)" [state]="{ video: v }" class="block">
         <div class="relative">
           <img [src]="v.thumbnail" [alt]="v.title" loading="lazy" decoding="async" class="w-full aspect-video object-cover transition-transform duration-300 group-hover:scale-105">
           <div class="absolute top-2 right-2">
@@ -137,17 +137,22 @@
             <app-like-button [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button>
           </div>
         </div>
-        <div class="p-3">
+        <div class="p-3 pb-1">
           <h3 class="font-semibold text-slate-100 group-hover:text-red-400 transition-colors duration-200 text-sm line-clamp-2 pr-2">{{ v.title }}</h3>
-          <div class="mt-2 flex items-center space-x-2 text-xs text-slate-400">
-            <img [src]="v.uploaderAvatar" [alt]="v.uploaderName" class="w-6 h-6 rounded-full">
-            <span>{{ v.uploaderName }}</span>
-          </div>
-          <div class="mt-1.5 text-xs text-slate-400">
-            <span>{{ v.views | number }} visionnements</span> &bull; <span>{{ v.uploadedDate | date:'shortDate' }}</span>
-          </div>
         </div>
       </a>
+      <div class="px-3 pb-3">
+        <app-channel-identity
+          size="sm"
+          [provider]="v.provider || provider()"
+          [externalId]="v.channelExternalId ?? null"
+          [avatarUrl]="v.channelAvatarUrl || v.uploaderAvatar || null"
+          [name]="v.uploaderName || null"
+        ></app-channel-identity>
+        <div class="mt-1.5 text-xs text-slate-400">
+          <span>{{ v.views | number }} visionnements</span> &bull; <span>{{ v.uploadedDate | date:'shortDate' }}</span>
+        </div>
+      </div>
     </div>
   </div>
 

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

@@ -10,6 +10,7 @@ import { TranslatePipe } from '../../pipes/translate.pipe';
 import { LikeButtonComponent } from '../shared/components/like-button/like-button.component';
 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 { PagedResult } from '../../services/youtube-api.service';
@@ -46,7 +47,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]
+  imports: [CommonModule, FormsModule, RouterLink, TranslatePipe, LikeButtonComponent, DurationPipe, ProviderBadgeComponent, ChannelIdentityComponent]
 })
 export class ProviderThemePageComponent implements OnDestroy {
   private route = inject(ActivatedRoute);

src/components/themes/theme-page.component.html

@@ -43,32 +43,42 @@
 
       <!-- Grid -->
       <div *ngIf="!b.loading && !b.error && filteredItems(b).length" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-        <a *ngFor="let v of filteredItems(b)"
-           [routerLink]="['/watch', v.videoId]"
-           [queryParams]="watchQueryParams(b.provider, v)"
-           [state]="{ video: v }"
-           class="group bg-slate-800/50 rounded-lg overflow-hidden hover:bg-slate-700/50 transition-all duration-300">
-          <div class="relative">
-            <img [src]="v.thumbnail" [alt]="v.title" loading="lazy" decoding="async" class="w-full h-40 object-cover">
-            <div class="absolute top-2 right-2">
-              <app-provider-badge [provider]="b.provider"></app-provider-badge>
+        <div *ngFor="let v of filteredItems(b)"
+             class="group bg-slate-800/50 rounded-lg overflow-hidden hover:bg-slate-700/50 transition-all duration-300">
+          <a [routerLink]="['/watch', v.videoId]"
+             [queryParams]="watchQueryParams(b.provider, v)"
+             [state]="{ video: v }"
+             class="block">
+            <div class="relative">
+              <img [src]="v.thumbnail" [alt]="v.title" loading="lazy" decoding="async" class="w-full h-40 object-cover">
+              <div class="absolute top-2 right-2">
+                <app-provider-badge [provider]="b.provider"></app-provider-badge>
+              </div>
+              <div class="absolute top-2 left-2 flex gap-1">
+                <span *ngIf="kindOf(v, b.provider) === 'short'" class="bg-red-600 text-white text-[11px] font-bold px-1.5 py-0.5 rounded">SHORT</span>
+                <span *ngIf="kindOf(v, b.provider) === 'live'" class="bg-purple-600 text-white text-[11px] font-bold px-1.5 py-0.5 rounded">LIVE</span>
+              </div>
+              <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded" *ngIf="v.duration && v.duration > 0">
+                {{ v.duration | duration }}
+              </div>
+              <div class="absolute bottom-2 left-2">
+                <app-like-button [videoId]="v.videoId" [provider]="b.provider" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button>
+              </div>
             </div>
-            <div class="absolute top-2 left-2 flex gap-1">
-              <span *ngIf="kindOf(v, b.provider) === 'short'" class="bg-red-600 text-white text-[11px] font-bold px-1.5 py-0.5 rounded">SHORT</span>
-              <span *ngIf="kindOf(v, b.provider) === 'live'" class="bg-purple-600 text-white text-[11px] font-bold px-1.5 py-0.5 rounded">LIVE</span>
-            </div>
-            <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded" *ngIf="v.duration && v.duration > 0">
-              {{ v.duration | duration }}
-            </div>
-            <div class="absolute bottom-2 left-2">
-              <app-like-button [videoId]="v.videoId" [provider]="b.provider" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button>
+            <div class="p-3 pb-1">
+              <h4 class="font-semibold line-clamp-2">{{ v.title }}</h4>
             </div>
+          </a>
+          <div class="px-3 pb-3">
+            <app-channel-identity
+              size="sm"
+              [provider]="v.provider || b.provider"
+              [externalId]="v.channelExternalId ?? null"
+              [avatarUrl]="v.channelAvatarUrl || v.uploaderAvatar || null"
+              [name]="v.uploaderName || null"
+            ></app-channel-identity>
           </div>
-          <div class="p-3">
-            <h4 class="font-semibold line-clamp-2">{{ v.title }}</h4>
-            <div class="text-sm text-slate-400 mt-1">{{ v.uploaderName }}</div>
-          </div>
-        </a>
+        </div>
       </div>
     </section>
   </div>

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

@@ -8,6 +8,7 @@ import { Video } from '../../models/video.model';
 import { TranslatePipe } from '../../pipes/translate.pipe';
 import { LikeButtonComponent } from '../shared/components/like-button/like-button.component';
 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';
 import { classifyVideo, isShortVideo } from '../../app/shared/utils/video-kind';
 
@@ -24,7 +25,7 @@ interface ProviderBlock {
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './theme-page.component.html',
-  imports: [CommonModule, RouterLink, TranslatePipe, LikeButtonComponent, ProviderBadgeComponent, DurationPipe]
+  imports: [CommonModule, RouterLink, TranslatePipe, LikeButtonComponent, ProviderBadgeComponent, DurationPipe, ChannelIdentityComponent]
 })
 export class ThemePageComponent {
   private route = inject(ActivatedRoute);

src/components/watch/watch.component.html

@@ -61,19 +61,39 @@
           
           <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-3 text-slate-400 gap-3">
             <div class="flex items-center space-x-3">
-              @if (channelAvatarUrl(); as avatar) {
-                <img [src]="avatar" [alt]="v.uploaderName" (error)="onAvatarError()"
-                     class="w-10 h-10 rounded-full object-cover bg-slate-700" loading="lazy" referrerpolicy="no-referrer">
-              } @else {
-                <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center text-slate-200 font-bold"
-                     [attr.aria-label]="v.uploaderName">{{ channelInitial() }}</div>
-              }
-              <div>
-                <div class="font-semibold text-slate-200">{{ v.uploaderName || channelMeta()?.title || 'Chaîne inconnue' }}</div>
-                @if (channelSubsLabel(); as subs) {
-                  <div>{{ subs }} abonnés</div>
+              <a *ngIf="canSubscribe(); else plainIdentity"
+                 [routerLink]="['/channel', subscribeProvider(), subscribeExternalId()]"
+                 class="flex items-center space-x-3 rounded-lg"
+                 title="Ouvrir la page de la chaîne">
+                @if (channelAvatarUrl(); as avatar) {
+                  <img [src]="avatar" [alt]="v.uploaderName" (error)="onAvatarError()"
+                       class="w-10 h-10 rounded-full object-cover bg-slate-700 hover:ring-2 hover:ring-red-500/60" loading="lazy" referrerpolicy="no-referrer">
+                } @else {
+                  <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center text-slate-200 font-bold hover:ring-2 hover:ring-red-500/60"
+                       [attr.aria-label]="v.uploaderName">{{ channelInitial() }}</div>
                 }
-              </div>
+                <div>
+                  <div class="font-semibold text-slate-200 hover:text-red-300">{{ v.uploaderName || channelMeta()?.title || 'Chaîne inconnue' }}</div>
+                  @if (channelSubsLabel(); as subs) {
+                    <div>{{ subs }} abonnés</div>
+                  }
+                </div>
+              </a>
+              <ng-template #plainIdentity>
+                @if (channelAvatarUrl(); as avatar) {
+                  <img [src]="avatar" [alt]="v.uploaderName" (error)="onAvatarError()"
+                       class="w-10 h-10 rounded-full object-cover bg-slate-700" loading="lazy" referrerpolicy="no-referrer">
+                } @else {
+                  <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center text-slate-200 font-bold"
+                       [attr.aria-label]="v.uploaderName">{{ channelInitial() }}</div>
+                }
+                <div>
+                  <div class="font-semibold text-slate-200">{{ v.uploaderName || channelMeta()?.title || 'Chaîne inconnue' }}</div>
+                  @if (channelSubsLabel(); as subs) {
+                    <div>{{ subs }} abonnés</div>
+                  }
+                </div>
+              </ng-template>
               @if (canSubscribe() && isLoggedIn()) {
                 <app-subscribe-button
                   [provider]="subscribeProvider()!"
@@ -317,22 +337,32 @@
         <h2 class="text-xl font-bold mb-4">Up next</h2>
         <div class="space-y-4">
           @for (related of v.relatedStreams; track related.videoId) {
-            <a [routerLink]="['/watch', related.videoId]" [queryParams]="watchQueryParams(related)" [state]="{ video: related }" class="flex items-start space-x-3 group hover:bg-slate-800/50 p-2 rounded-lg transition">
-              <div class="relative w-40 flex-shrink-0">
-                <img [src]="related.thumbnail" [alt]="related.title" class="w-full h-24 object-cover rounded">
-                <div class="absolute top-1.5 right-1.5">
-                  <app-provider-badge [provider]="related.provider"></app-provider-badge>
+            <div class="group hover:bg-slate-800/50 p-2 rounded-lg transition">
+              <a [routerLink]="['/watch', related.videoId]" [queryParams]="watchQueryParams(related)" [state]="{ video: related }" class="flex items-start space-x-3">
+                <div class="relative w-40 flex-shrink-0">
+                  <img [src]="related.thumbnail" [alt]="related.title" class="w-full h-24 object-cover rounded">
+                  <div class="absolute top-1.5 right-1.5">
+                    <app-provider-badge [provider]="related.provider"></app-provider-badge>
+                  </div>
+                  <div *ngIf="related.duration && related.duration > 0" class="absolute bottom-1.5 right-1.5 bg-black/75 text-white text-[10px] px-1.5 py-0.5 rounded">
+                    {{ related.duration | duration }}
+                  </div>
                 </div>
-                <div *ngIf="related.duration && related.duration > 0" class="absolute bottom-1.5 right-1.5 bg-black/75 text-white text-[10px] px-1.5 py-0.5 rounded">
-                  {{ related.duration | duration }}
+                <div class="flex-1 min-w-0">
+                  <h3 class="font-semibold text-sm line-clamp-2 group-hover:text-red-400">{{ related.title }}</h3>
+                  <div class="text-xs text-slate-400">{{ formatNumber(related.views) }} views</div>
                 </div>
+              </a>
+              <div class="mt-1 pl-1">
+                <app-channel-identity
+                  size="sm"
+                  [provider]="related.provider"
+                  [externalId]="related.channelExternalId ?? null"
+                  [avatarUrl]="related.channelAvatarUrl || related.uploaderAvatar || null"
+                  [name]="related.uploaderName || null"
+                ></app-channel-identity>
               </div>
-              <div class="flex-1">
-                <h3 class="font-semibold text-sm line-clamp-2 group-hover:text-red-400">{{ related.title }}</h3>
-                <div class="text-xs text-slate-400 mt-1">{{ related.uploaderName }}</div>
-                <div class="text-xs text-slate-400">{{ formatNumber(related.views) }} views</div>
-              </div>
-            </a>
+            </div>
           }
         </div>
       </div>

src/components/watch/watch.component.ts

@@ -21,6 +21,7 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { IframeProgressService } from '../../services/iframe-progress.service';
 import { formatAbsoluteFr, formatNumberFr } from '../../utils/date.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';
 
 @Component({
@@ -28,7 +29,7 @@ import { DurationPipe } from '../../app/shared/pipes/duration.pipe';
   templateUrl: './watch.component.html',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, VideoPlayerComponent, RouterLink, AddToPlaylistComponent, ProviderBadgeComponent, DurationPipe, SubscribeButtonComponent]
+  imports: [CommonModule, VideoPlayerComponent, RouterLink, AddToPlaylistComponent, ProviderBadgeComponent, DurationPipe, SubscribeButtonComponent, ChannelIdentityComponent]
 })
 export class WatchComponent implements OnDestroy, AfterViewInit {
   private route = inject(ActivatedRoute);