93 lines
5.1 KiB
HTML
93 lines
5.1 KiB
HTML
<div class="container mx-auto p-4 sm:p-6 max-w-6xl">
|
|
<h2 class="text-3xl font-bold mb-6 text-slate-100 border-l-4 border-red-500 pl-4 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 mr-2 text-red-400">
|
|
<path d="M12 21s-6.716-4.248-9.193-6.725A6 6 0 0 1 12 5.414 6 6 0 0 1 21.193 14.275C18.716 16.752 12 21 12 21z" />
|
|
</svg>
|
|
Liked videos
|
|
</h2>
|
|
|
|
<div class="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
|
|
<!-- Barre de recherche -->
|
|
<div class="mb-4 relative">
|
|
<input
|
|
type="text"
|
|
[ngModel]="searchQuery()"
|
|
(ngModelChange)="onSearchChange($event)"
|
|
class="block w-full pl-10 pr-10 py-2 border border-slate-600 rounded-lg bg-slate-700 text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-150"
|
|
placeholder="Rechercher dans les vidéos aimées..."
|
|
/>
|
|
<svg class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<button
|
|
*ngIf="searchQuery()"
|
|
(click)="clearSearch()"
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 px-2 py-1 text-xs rounded bg-slate-600 hover:bg-slate-500 text-white"
|
|
aria-label="Effacer la recherche"
|
|
>
|
|
Effacer
|
|
</button>
|
|
</div>
|
|
@if (loading()) {
|
|
<div class="text-slate-400">Chargement…</div>
|
|
} @else if (error(); as err) {
|
|
<div class="text-red-300">{{ err }}</div>
|
|
} @else if (items().length === 0) {
|
|
<div class="text-slate-400">Aucune vidéo aimée pour le moment.</div>
|
|
} @else {
|
|
<ul class="space-y-3">
|
|
@for (it of items(); track it.provider + ':' + it.video_id) {
|
|
<li class="group bg-slate-700/50 hover:bg-slate-700/80 rounded-lg overflow-hidden transition-all">
|
|
<a [routerLink]="['/watch', it.video_id]" [queryParams]="{ p: it.provider }" class="block p-4 hover:no-underline">
|
|
<div class="flex items-center">
|
|
<!-- Miniature de la vidéo -->
|
|
<div class="relative flex-shrink-0 w-24 h-16 bg-slate-800 rounded overflow-hidden mr-4">
|
|
@if (it.thumbnail) {
|
|
<img [src]="it.thumbnail" alt="" class="w-full h-full object-cover" />
|
|
} @else {
|
|
<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-700 to-slate-800">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded border text-xs"
|
|
[ngStyle]="getProviderColors(it.provider)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
{{ getProviderDisplayName(it.provider) }}
|
|
</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Détails de la vidéo -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-slate-100 font-medium group-hover:text-red-400 truncate">
|
|
{{ it.title || (it.provider + ':' + it.video_id) }}
|
|
</div>
|
|
<div class="text-xs text-slate-400 mt-1">
|
|
<span class="inline-flex items-center gap-2">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded border"
|
|
[ngStyle]="getProviderColors(it.provider)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
{{ getProviderDisplayName(it.provider) }}
|
|
</span>
|
|
@if (it.last_watched_at) {
|
|
<span>Vu le {{ it.last_watched_at | date:'short' }}</span>
|
|
}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flèche -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 flex-shrink-0 text-slate-400 group-hover:text-slate-200 ml-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
}
|
|
</div>
|
|
</div>
|