- PlayerMenuComponent : FAB circulaire translucide (haut-gauche) + panneau deroulant, commun aux deux pages (position, style, open/close, clic exterieur) - /shorts : consolidation de tous les boutons (fournisseurs, langue, actions) dans le menu FAB ; suppression du rail a droite et de la rangee du haut - /watch : actions (cinema, qualite, j'aime, playlist, transcription, telechargement, partage, ouvrir) deplacees dans le menu FAB - AddToPlaylistComponent : variante menuItem pour s'integrer au menu - styles .pm-item/.pm-sep/.pm-section-label dans index.css
This commit is contained in:
@@ -10,66 +10,19 @@
|
||||
|
||||
<!-- 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"
|
||||
class="absolute top-2 left-2 z-20 flex h-9 w-9 items-center justify-center rounded-full bg-black/50 text-white ring-1 ring-white/15 backdrop-blur-md hover:bg-black/70 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>
|
||||
<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="M19 12H5m7-7l-7 7 7 7"/></svg>
|
||||
</a>
|
||||
|
||||
<!-- Sélecteur icon-only : Pour toi + fournisseurs (logos) + filtre de langues.
|
||||
Aucun texte visible (logos + title/aria-label) ; le filtre actif se lit
|
||||
dans le tooltip et l'anneau ambré du globe. -->
|
||||
<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()"
|
||||
aria-label="Pour toi"
|
||||
title="Pour toi — Shorts personnalisés multi-fournisseurs à partir de vos abonnements, groupes, recherches, likes et téléchargements"
|
||||
class="chip flex h-11 w-11 shrink-0 items-center justify-center rounded-full border transition-colors"
|
||||
[class]="forYou() ? 'bg-violet-600 border-violet-500 text-white' : 'bg-black/60 border-white/15 text-slate-200 hover:bg-white/10'">
|
||||
<span class="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white shadow" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2c.7 4.8 3.2 7.3 8 8-4.8.7-7.3 3.2-8 8-.7-4.8-3.2-7.3-8-8 4.8-.7 7.3-3.2 8-8z"/><path d="M19 3c.3 2 1.3 3 3.3 3.3-2 .3-3 1.3-3.3 3.2-.3-1.9-1.3-2.9-3.2-3.2 1.9-.3 2.9-1.3 3.2-3.3z"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button *ngFor="let p of providerButtons()"
|
||||
(click)="selectProvider(p.id)"
|
||||
[attr.aria-pressed]="!forYou() && provider() === p.id"
|
||||
[attr.aria-label]="p.label"
|
||||
[title]="p.label"
|
||||
class="chip flex h-11 w-11 shrink-0 items-center justify-center rounded-full border transition-colors"
|
||||
[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'">
|
||||
<span class="flex h-7 w-7 items-center justify-center rounded-full text-white shadow" [class]="p.disc" aria-hidden="true">
|
||||
@switch (p.glyph.kind) {
|
||||
@case ('play') {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
|
||||
}
|
||||
@case ('chat') {
|
||||
<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"><rect x="4" y="3" width="16" height="13" rx="2"/><path d="M9 16v4l4-4"/><line x1="10" y1="7" x2="10" y2="11"/><line x1="14" y1="7" x2="14" y2="11"/></svg>
|
||||
}
|
||||
@default {
|
||||
<span class="text-[15px] font-extrabold leading-none">{{ glyphLetter(p) }}</span>
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Filtre de langues préférées (globe cyclique, sans texte) : chaque cran
|
||||
change le filtre de TOUS les flux ; l'anneau ambré signale un filtre
|
||||
actif (non-profil), le détail est dans le tooltip. -->
|
||||
<button (click)="cycleLangFilter()"
|
||||
[title]="langFilterHint()"
|
||||
[attr.aria-label]="langFilterHint()"
|
||||
class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border transition-colors"
|
||||
[class]="langFilter() !== 'profile' ? 'bg-black/60 border-amber-400/70 text-amber-200 hover:bg-white/10 ring-2 ring-amber-400/40' : 'bg-black/60 border-white/15 text-slate-200 hover:bg-white/10'">
|
||||
<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"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||
</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"
|
||||
class="shorts-chrome chip hidden sm:flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-black/40 text-white ring-1 ring-white/15 hover:bg-black/60 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>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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) -->
|
||||
@@ -93,13 +46,102 @@
|
||||
}
|
||||
|
||||
@if (current(); as v) {
|
||||
<!-- Menu FAB : toutes les options (fournisseur, langue, actions). -->
|
||||
<app-player-menu [(open)]="menuOpen">
|
||||
<div class="pm-section-label">Fournisseur</div>
|
||||
<button type="button" (click)="toggleForYou(); closeMenu()" class="pm-item" [class.text-violet-300]="forYou()" [attr.aria-pressed]="forYou()">
|
||||
<span class="flex h-5 w-5 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2c.7 4.8 3.2 7.3 8 8-4.8.7-7.3 3.2-8 8-.7-4.8-3.2-7.3-8-8 4.8-.7 7.3-3.2 8-8z"/><path d="M19 3c.3 2 1.3 3 3.3 3.3-2 .3-3 1.3-3.3 3.2-.3-1.9-1.3-2.9-3.2-3.2 1.9-.3 2.9-1.3 3.2-3.3z"/></svg>
|
||||
</span>
|
||||
<span class="pm-item-label">Pour toi</span>
|
||||
@if (forYou()) { <svg xmlns="http://www.w3.org/2000/svg" class="ml-auto h-4 w-4 text-white/80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg> }
|
||||
</button>
|
||||
@for (p of providerButtons(); track p.id) {
|
||||
<button type="button" (click)="selectProvider(p.id); closeMenu()" class="pm-item" [attr.aria-pressed]="!forYou() && provider() === p.id">
|
||||
<span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-white" [class]="p.disc" aria-hidden="true">
|
||||
@switch (p.glyph.kind) {
|
||||
@case ('play') {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
|
||||
}
|
||||
@case ('chat') {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="4" y="3" width="16" height="13" rx="2"/><path d="M9 16v4l4-4"/><line x1="10" y1="7" x2="10" y2="11"/><line x1="14" y1="7" x2="14" y2="11"/></svg>
|
||||
}
|
||||
@default {
|
||||
<span class="text-[11px] font-extrabold leading-none">{{ glyphLetter(p) }}</span>
|
||||
}
|
||||
}
|
||||
</span>
|
||||
<span class="pm-item-label">{{ p.label }}</span>
|
||||
@if (!forYou() && provider() === p.id) { <svg xmlns="http://www.w3.org/2000/svg" class="ml-auto h-4 w-4 text-white/80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg> }
|
||||
</button>
|
||||
}
|
||||
|
||||
<div class="pm-sep"></div>
|
||||
|
||||
<button type="button" (click)="cycleLangFilter()" class="pm-item" [title]="langFilterHint()" [attr.aria-label]="langFilterHint()">
|
||||
<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="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||
<span class="pm-item-label">Langue</span>
|
||||
<span class="pm-item-hint">{{ langFilterShort() }}</span>
|
||||
</button>
|
||||
|
||||
<div class="pm-sep"></div>
|
||||
|
||||
<button type="button" (click)="toggleLike()" class="pm-item" [disabled]="!isLoggedIn() || likeBusy()"
|
||||
[title]="isLoggedIn() ? (liked() ? 'Je n’aime plus' : 'J’aime') : 'Connectez-vous pour aimer'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
|
||||
<span class="pm-item-label">{{ liked() ? 'Je n’aime plus' : 'J’aime' }}</span>
|
||||
</button>
|
||||
<button type="button" (click)="toggleMute()" class="pm-item" [title]="muted() ? 'Activer le son' : 'Couper le son'">
|
||||
@if (muted()) {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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-4 w-4" 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>
|
||||
}
|
||||
<span class="pm-item-label">{{ muted() ? 'Activer le son' : 'Couper le son' }}</span>
|
||||
</button>
|
||||
<button type="button" (click)="toggleFullscreen(); closeMenu()" class="pm-item" [title]="isFullscreen() ? 'Quitter le plein écran' : '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>
|
||||
}
|
||||
<span class="pm-item-label">{{ isFullscreen() ? 'Quitter le plein écran' : 'Plein écran' }}</span>
|
||||
</button>
|
||||
@if (watchLink()) {
|
||||
<a [routerLink]="watchLink()" [queryParams]="watchQueryParams()" (click)="closeMenu()" class="pm-item" title="Voir les commentaires dans Watch">
|
||||
<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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
<span class="pm-item-label">Commentaires</span>
|
||||
</a>
|
||||
}
|
||||
<button type="button" (click)="share()" class="pm-item" title="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>
|
||||
<span class="pm-item-label">{{ shareCopied() ? 'Lien copié ✓' : 'Partager' }}</span>
|
||||
</button>
|
||||
@if (providerUrl()) {
|
||||
<a [href]="providerUrl()" target="_blank" rel="noopener" (click)="closeMenu()" class="pm-item">
|
||||
<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="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14L21 3"/></svg>
|
||||
<span class="pm-item-label">Ouvrir chez le fournisseur</span>
|
||||
</a>
|
||||
}
|
||||
@if (watchLink()) {
|
||||
<a [routerLink]="watchLink()" [queryParams]="watchQueryParams()" (click)="closeMenu()" class="pm-item">
|
||||
<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"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 9l5 3-5 3V9z"/></svg>
|
||||
<span class="pm-item-label">Ouvrir dans Watch</span>
|
||||
</a>
|
||||
}
|
||||
@if (currentSource()) {
|
||||
<div class="px-3 py-1.5 text-[11px] text-slate-400">Via le catalogue • {{ currentSource() }}</div>
|
||||
}
|
||||
<button type="button" (click)="skipUnplayable(); closeMenu()" class="pm-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 5v14l8-7zM12 5v14l8-7z"/></svg>
|
||||
<span class="pm-item-label">Passer (vidéo illisible)</span>
|
||||
</button>
|
||||
</app-player-menu>
|
||||
|
||||
<!-- 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). -->
|
||||
YouTube, ou accès direct au lecteur 6 s sinon). -->
|
||||
<div class="shorts-gesture absolute inset-0 z-[1] sm:hidden"
|
||||
[class.pointer-events-none]="passthrough()"
|
||||
aria-hidden="true"></div>
|
||||
@@ -108,76 +150,6 @@
|
||||
<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()">
|
||||
@@ -233,9 +205,9 @@
|
||||
|
||||
<!-- 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"
|
||||
class="shorts-chrome chip hidden sm:flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-black/40 text-white ring-1 ring-white/15 hover:bg-black/60 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>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 10l5 5 5-5H7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user