NewTube/src/components/shorts/watch-short.component.html

<div class="shorts-stage relative flex min-h-[calc(var(--app-vh,100dvh)-var(--header-offset,0px))] w-full flex-col items-center overflow-hidden bg-black"
     [class.shorts-chrome-hidden]="!chromeVisible()"
     (click)="closeMenu()" (mousemove)="pokeChrome()">
  <!-- Fond d'ambiance : vignette du short courant, floutée (façon YouTube). -->
  <div class="shorts-ambient" aria-hidden="true">
    @if (current()?.thumbnail) {
      <img [src]="current()?.thumbnail" alt="" />
    }
  </div>

  <!-- Retour accueil (mobile plein écran : la vidéo occupe tout, pas de header visible) -->
  <a routerLink="/"
     class="absolute top-2 left-2 z-20 flex h-11 w-11 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80 sm:hidden"
     title="Retour à l'accueil NewTube" aria-label="Retour à l'accueil NewTube" (click)="$event.stopPropagation()">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M19 12H5m7-7l-7 7 7 7"/></svg>
  </a>

  <!-- Sélecteur : Pour toi + fournisseurs -->
  <div class="scroll-rail no-scrollbar shorts-chrome relative z-10 flex w-full max-w-full items-center justify-start gap-2 overflow-x-auto px-3 pt-3 sm:justify-center" role="tablist" aria-label="Fournisseur des Shorts" (click)="$event.stopPropagation()">
    <button (click)="toggleForYou()"
            [attr.aria-pressed]="forYou()"
            class="chip shrink-0 px-3 py-2 rounded-full text-[13px] border transition-colors min-h-[44px]"
            [class]="forYou() ? 'bg-violet-600 border-violet-500 text-white' : 'bg-black/60 border-white/15 text-slate-200 hover:bg-white/10'"
            title="Shorts personnalisés multi-fournisseurs à partir de vos abonnements, groupes, recherches, likes et téléchargements">
      ✨ Pour toi
    </button>
    <button *ngFor="let p of providersList()"
            (click)="selectProvider(p.id)"
            [attr.aria-pressed]="!forYou() && provider() === p.id"
            class="chip shrink-0 px-3 py-2 rounded-full text-[13px] border transition-colors min-h-[44px]"
            [class]="!forYou() && provider() === p.id ? 'bg-red-600 border-red-500 text-white' : 'bg-black/60 border-white/15 text-slate-200 hover:bg-white/10'">
      {{ p.label }}
    </button>
  </div>

  <!-- Scène immersive : flèches (bureau) + cadre 9:16 -->
  <div class="relative z-10 flex w-full min-h-0 flex-1 items-center justify-center gap-1 px-0 py-3 sm:gap-3 sm:px-4"
        (wheel)="onWheel($event)" (touchstart)="onTouchStart($event)" (touchend)="onTouchEnd($event)">
    <!-- Flèche précédent (bureau, façon YouTube) -->
    <button type="button" (click)="prev(); $event.stopPropagation()" [disabled]="!canPrev()"
            class="shorts-chrome chip hidden sm:flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 disabled:opacity-30"
            aria-label="Short précédent">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 14l5-5 5 5H7z"/></svg>
    </button>

    <!-- Colonne centrale : cadre 9:16 (sizing dans index.css : .shorts-frame) -->
    <div class="relative flex min-w-0 items-center justify-center" style="max-width: 560px;">
      <!-- Video frame (9:16) -->
      <div #shortsFrame class="shorts-frame relative shrink-0 overflow-hidden bg-black rounded-none ring-0 shadow-none sm:rounded-2xl sm:ring-1 sm:ring-white/10 sm:shadow-2xl">
        @if (embedUrl(); as url) {
          <iframe [src]="url" [title]="current()?.title || 'Short video'" class="absolute inset-0 w-full h-full" frameborder="0" playsinline
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
        } @else if (loading()) {
          <div class="absolute inset-0 flex flex-col gap-3 items-center justify-center bg-black text-slate-400 text-sm">
            <div class="h-8 w-8 rounded-full border-2 border-slate-600 border-t-red-500 animate-spin" aria-hidden="true"></div>
            <span role="status">Chargement des Shorts…</span>
          </div>
        } @else if (error()) {
          <div class="absolute inset-0 flex flex-col gap-3 items-center justify-center text-slate-300 p-6 text-center">
            <span>{{ error() }}</span>
            <button (click)="retry(); $event.stopPropagation()" class="chip px-4 py-3 rounded bg-white/10 hover:bg-white/20 text-white text-sm min-h-[44px]">Réessayer</button>
          </div>
        }

        @if (current(); as v) {
          <!-- Capteur tactile (mobile uniquement) : l'iframe mange les
               touchers, donc le swipe up/down passerait à la trappe. Cette
               couche transparente capte swipe (navigue) et tap (play/pause
               YouTube, ou accès direct au lecteur 6 s sinon). `touch-action`
               via CSS : le navigateur ne scrolle/zoome pas, nos handlers
               possèdent le geste. En mode passthrough, elle s'efface
               (les boutons du fournisseur deviennent touchables). -->
          <div class="shorts-gesture absolute inset-0 z-[1] sm:hidden"
               [class.pointer-events-none]="passthrough()"
               aria-hidden="true"></div>

          @if (passthroughHint()) {
            <div class="absolute left-1/2 top-14 z-20 -translate-x-1/2 whitespace-nowrap px-3 py-1.5 rounded-full bg-black/75 text-white text-xs" role="status">Commandes du lecteur accessibles</div>
          }

          <!-- Haut droite : plein écran, partage rapide, menu ⋯ -->
          <div class="shorts-chrome absolute top-2 right-2 z-10 flex items-center gap-1.5" (click)="$event.stopPropagation()">
            <button type="button" (click)="toggleFullscreen()" class="flex h-10 w-10 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80" [title]="isFullscreen() ? 'Quitter le plein écran' : 'Plein écran'" aria-label="Plein écran">
              @if (isFullscreen()) {
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/></svg>
              } @else {
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
              }
            </button>
            <button type="button" (click)="share()" class="flex h-10 w-10 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80" title="Partager" aria-label="Partager">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/><line x1="15.4" y1="6.5" x2="8.6" y2="10.5"/></svg>
            </button>
            <div class="relative">
              <button type="button" (click)="toggleMenu(); $event.stopPropagation()" class="flex h-10 w-10 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80" title="Plus d'options" aria-label="Plus d'options" aria-haspopup="menu">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
              </button>
              @if (menuOpen()) {
                <div class="absolute right-0 top-11 z-20 w-60 overflow-hidden rounded-xl bg-slate-900/95 py-1 shadow-2xl ring-1 ring-white/10" role="menu" (click)="$event.stopPropagation()">
                  <a *ngIf="providerUrl()" [href]="providerUrl()" target="_blank" rel="noopener" (click)="closeMenu()" class="block px-4 py-3 text-left text-sm text-slate-200 hover:bg-slate-800" role="menuitem">Ouvrir chez le fournisseur</a>
                  <a *ngIf="watchLink()" [routerLink]="watchLink()" [queryParams]="watchQueryParams()" (click)="closeMenu()" class="block px-4 py-3 text-left text-sm text-slate-200 hover:bg-slate-800" role="menuitem">Ouvrir dans Watch</a>
                  <button type="button" (click)="copyLink()" class="block w-full px-4 py-3 text-left text-sm text-slate-200 hover:bg-slate-800" role="menuitem">{{ shareCopied() ? 'Lien copié ✓' : 'Copier le lien' }}</button>
                  @if (currentSource()) {
                    <div class="px-4 py-2 text-left text-[11px] text-slate-400" role="note">Via le catalogue • {{ currentSource() }}</div>
                  }
                  <button type="button" (click)="skipUnplayable(); closeMenu()" class="block w-full px-4 py-3 text-left text-sm text-slate-200 hover:bg-slate-800" role="menuitem">⏭ Passer (vidéo illisible)</button>
                </div>
              }
            </div>
          </div>

          <!-- Rail d'actions OVERLAY façon YouTube (dans le cadre, comme sur mobile natif) -->
          <div class="shorts-chrome absolute right-1.5 sm:right-2.5 bottom-32 sm:bottom-36 z-10 flex flex-col items-center gap-2 sm:gap-2.5" (click)="$event.stopPropagation()">
            <div class="flex flex-col items-center">
              <button type="button" (click)="toggleLike()" [disabled]="!isLoggedIn() || likeBusy()"
                      class="flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white hover:bg-black/75 disabled:opacity-40"
                      [title]="isLoggedIn() ? (liked() ? 'Je n’aime plus' : 'J’aime') : 'Connectez-vous pour aimer'" aria-label="J’aime">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 drop-shadow" viewBox="0 0 24 24" [attr.fill]="liked() ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M7 10v12M15 5.88L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88z"/></svg>
              </button>
              <span class="mt-0.5 text-[11px] font-medium text-white drop-shadow">J'aime</span>
            </div>
            <div class="flex flex-col items-center">
              <a *ngIf="watchLink()" [routerLink]="watchLink()" [queryParams]="watchQueryParams()"
                 class="flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white hover:bg-black/75"
                 title="Voir les commentaires dans Watch" aria-label="Commentaires">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 drop-shadow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
              </a>
              <span class="mt-0.5 text-[11px] font-medium text-white drop-shadow">Commentaires</span>
            </div>
            <div class="flex flex-col items-center">
              <button type="button" (click)="share()"
                      class="flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white hover:bg-black/75"
                      title="Partager" aria-label="Partager">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 drop-shadow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/><line x1="15.4" y1="6.5" x2="8.6" y2="10.5"/></svg>
              </button>
              <span class="mt-0.5 text-[11px] font-medium text-white drop-shadow">Partager</span>
            </div>
            <div class="flex flex-col items-center">
              <button type="button" (click)="toggleMute()"
                      class="flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white hover:bg-black/75"
                      [title]="muted() ? 'Activer le son' : 'Couper le son'" aria-label="Activer ou couper le son">
                @if (muted()) {
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 drop-shadow" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="17" y1="9" x2="23" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                } @else {
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 drop-shadow" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.5 8.5a5 5 0 0 1 0 7M19 5a9 9 0 0 1 0 14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
                }
              </button>
              <span class="mt-0.5 text-[11px] font-medium text-white drop-shadow">Son</span>
            </div>
          </div>

          <!-- Bas : avatar + titre + méta + fraîcheur + S'abonner (safe-area incluse) -->
          <div class="shorts-meta shorts-chrome pointer-events-none absolute left-0 right-0 bottom-0 z-10 p-3 sm:p-4 text-white bg-gradient-to-t from-black/85 via-black/35 to-transparent">
            <div class="flex items-end gap-2.5 text-sm" (click)="$event.stopPropagation()">
              @if (v.uploaderAvatar) {
                <img [src]="v.uploaderAvatar" [alt]="v.uploaderName" class="h-10 w-10 shrink-0 rounded-full object-cover ring-2 ring-white/40" loading="lazy" />
              } @else {
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/20 text-base font-bold ring-2 ring-white/40" aria-hidden="true">{{ (v.uploaderName || '?').trim().charAt(0).toUpperCase() }}</div>
              }
              <div class="flex-1 min-w-0">
                <div class="font-semibold line-clamp-2 leading-snug text-[15px] drop-shadow">{{ v.title }}</div>
                <div class="mt-0.5 flex min-w-0 items-center gap-1.5 text-[13px] text-white/85">
                  <span class="truncate">@{{ v.uploaderName }}</span>
                  <span class="shrink-0 rounded bg-white/15 px-1.5 py-0.5 text-[11px] font-semibold">{{ providerLabel() }}</span>
                </div>
                @if (currentMeta()) {
                  <div class="mt-0.5 text-[12px] text-white/70">{{ currentMeta() }}</div>
                }
                @if (currentCaptured() || catalogError()) {
                  <div class="mt-1 flex flex-wrap items-center gap-1.5 text-[11px]">
                    @if (currentCaptured()) {
                      <span class="rounded bg-white/10 px-1.5 py-0.5 text-white/70">{{ currentCaptured() }}{{ currentSource() ? ' • ' + currentSource() : '' }}</span>
                    } @else if (currentSource()) {
                      <span class="rounded bg-white/10 px-1.5 py-0.5 text-white/70">Source : {{ currentSource() }}</span>
                    }
                    @if (catalogError()) {
                      <span class="rounded bg-amber-500/25 px-1.5 py-0.5 font-semibold text-amber-200" [title]="catalogError() || ''">Source dégradée</span>
                    }
                  </div>
                }
              </div>
              @if (isLoggedIn() && currentChannelKey()) {
                <button type="button" (click)="toggleSubscribe()" [disabled]="subBusy()"
                        class="chip pointer-events-auto shrink-0 px-4 py-2.5 rounded-full text-[13px] font-semibold transition-colors disabled:opacity-50 min-h-[44px]"
                        [class]="isSubscribed() ? 'bg-white/15 text-white hover:bg-white/25' : 'bg-white text-black hover:bg-slate-200'">
                  {{ isSubscribed() ? 'Abonné' : "S'abonner" }}
                </button>
              }
            </div>
            <!-- Barre de progression fine (YouTube, temps réel) -->
            @if (ytProgress() != null) {
              <div class="mt-2 h-0.5 w-full overflow-hidden rounded bg-white/20" aria-hidden="true">
                <div class="h-full bg-red-600 transition-[width]" [style.width.%]="(ytProgress() || 0) * 100"></div>
              </div>
            }
          </div>
        }

        @if (shareCopied()) {
          <div class="absolute top-2 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-full bg-black/70 text-white text-xs" role="status">Lien copié ✓</div>
        }
      </div>
    </div>

    <!-- Flèche suivant (bureau, façon YouTube) -->
    <button type="button" (click)="next(); $event.stopPropagation()" [disabled]="!canNext()"
            class="shorts-chrome chip hidden sm:flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 disabled:opacity-30"
            aria-label="Short suivant">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 10l5 5 5-5H7z"/></svg>
    </button>
  </div>

  @if (busyMore()) {
    <div class="relative z-10 px-3 py-1.5 rounded-full bg-black/70 text-white text-xs" role="status">Chargement…</div>
  }
  <!-- Flux infini : aucune pagination visible (compteur et boutons Préc./Suiv.
       retirés) — molette, flèches ↑ ↓, balayage ou flèches latérales (bureau). -->
</div>