feat: update Angular cache with latest TypeScript definitions

2025-09-22 22:17:38 -04:00
parent d78afda4cd
commit d372b7d509
27 changed files with 512 additions and 646 deletions
@@ -0,0 +1,14 @@
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+  <ng-container *ngIf="loading">
+    <app-video-card-skeleton *ngFor="let _ of skeletonItems"></app-video-card-skeleton>
+  </ng-container>
+
+  <ng-container *ngIf="!loading">
+    <app-video-card *ngFor="let video of videos" [video]="video"></app-video-card>
+  </ng-container>
+</div>
+
+<div *ngIf="!loading && videos.length === 0" class="flex flex-col items-center justify-center gap-4 rounded-lg border border-zinc-800 bg-zinc-900/50 p-8 text-center">
+  <h3 class="text-lg font-semibold text-white">Aucun résultat</h3>
+  <p class="text-zinc-400">Essayez une autre recherche ou sélectionnez un autre fournisseur.</p>
+</div>
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { VideoItem } from '../../models/video-item.model';
+import { CommonModule } from '@angular/common';
+import { VideoCardComponent } from '../video-card/video-card.component';
+import { VideoCardSkeletonComponent } from '../video-card-skeleton/video-card-skeleton.component';
+
+@Component({
+  selector: 'app-search-result-grid',
+  templateUrl: './search-result-grid.component.html',
+  styleUrls: ['./search-result-grid.component.scss'],
+  standalone: true,
+  imports: [CommonModule, VideoCardComponent, VideoCardSkeletonComponent],
+})
+export class SearchResultGridComponent {
+  @Input() videos: VideoItem[] = [];
+  @Input() loading = false;
+  @Input() skeletons = 12;
+
+  get skeletonItems() {
+    return new Array(this.skeletons);
+  }
+}
@@ -0,0 +1,7 @@
+<div class="flex flex-col gap-2 animate-pulse">
+  <div class="aspect-video w-full rounded-lg bg-zinc-800"></div>
+  <div class="flex flex-col gap-2">
+    <div class="h-5 w-3/4 rounded bg-zinc-800"></div>
+    <div class="h-4 w-1/2 rounded bg-zinc-800"></div>
+  </div>
+</div>
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-video-card-skeleton',
+  templateUrl: './video-card-skeleton.component.html',
+  styleUrls: ['./video-card-skeleton.component.scss'],
+  standalone: true,
+})
+export class VideoCardSkeletonComponent {}
@@ -0,0 +1,21 @@
+<a [routerLink]="['/watch', video.id]" [queryParams]="buildQueryParams(video)" [state]="{ video }" class="group flex flex-col gap-2">
+  <div class="relative aspect-video w-full overflow-hidden rounded-lg bg-zinc-800">
+    <img [src]="video.thumbnailUrl" [alt]="video.title" class="h-full w-full object-cover transition-transform group-hover:scale-105" />
+    <span *ngIf="video.durationSec" class="absolute bottom-1 right-1 rounded bg-black/80 px-1.5 py-0.5 text-xs text-white">
+      {{ video.durationSec | date:'mm:ss' }}
+    </span>
+  </div>
+
+  <div class="flex flex-col">
+    <h3 class="text-base font-semibold text-zinc-100 line-clamp-2" [title]="video.title">
+      {{ video.title }}
+    </h3>
+    <div class="text-sm text-zinc-400">
+      <p *ngIf="video.channelName" class="font-medium">{{ video.channelName }}</p>
+      <div class="flex gap-2">
+        <span *ngIf="video.viewCount">{{ video.viewCount | number }} vues</span>
+        <span *ngIf="video.publishedAt">{{ video.publishedAt | date:'shortDate' }}</span>
+      </div>
+    </div>
+  </div>
+</a>
@@ -0,0 +1,7 @@
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { VideoItem } from '../../models/video-item.model';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-video-card',
+  templateUrl: './video-card.component.html',
+  styleUrls: ['./video-card.component.scss'],
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+})
+export class VideoCardComponent {
+  @Input() video!: VideoItem;
+
+  buildQueryParams(v: VideoItem): Record<string, any> {
+    const qp: any = { p: v.provider };
+    if (v.provider === 'odysee' && v.slug) qp.slug = v.slug;
+    if (v.provider === 'twitch' && v.channel) qp.channel = v.channel;
+    return qp;
+  }
+}