first commit

2025-09-14 23:05:30 -04:00
commit 2866d74b32
122 changed files with 95474 additions and 0 deletions
@@ -0,0 +1,57 @@
+<div class="container mx-auto p-4 sm:p-6">
+  <h2 class="text-3xl font-bold mb-6 text-slate-100 border-l-4 border-red-500 pl-4">{{ 'home.trending' | t }}</h2>
+  @if (notice()) {
+    <div class="mb-4 bg-amber-900/40 border border-amber-600 text-amber-200 p-3 rounded">
+      {{ notice() }}
+    </div>
+  }
+  
+  @if (loading()) {
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+      @for (item of [1,2,3,4,5,6,7,8]; track item) {
+        <div class="animate-pulse bg-slate-800 rounded-lg overflow-hidden">
+          <div class="w-full h-48 bg-slate-700"></div>
+          <div class="p-4 space-y-3">
+            <div class="h-4 bg-slate-700 rounded w-3/4"></div>
+            <div class="h-4 bg-slate-700 rounded w-1/2"></div>
+          </div>
+        </div>
+      }
+    </div>
+  } @else {
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-6 gap-y-8">
+      @for (video of trendingVideos(); track video.videoId) {
+        <a [routerLink]="['/watch', video.videoId]" [queryParams]="watchQueryParams(video)" [state]="{ video }" class="group flex flex-col bg-slate-800/50 rounded-lg overflow-hidden hover:bg-slate-700/50 transition-all duration-300 transform hover:-translate-y-1">
+          <div class="relative">
+            <img [src]="video.thumbnail" [alt]="video.title" class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105">
+            <div class="absolute bottom-2 right-2 bg-black/75 text-white text-xs px-2 py-1 rounded">
+              {{ video.duration / 60 | number:'1.0-0' }}:{{ (video.duration % 60) | number:'2.0-0' }}
+            </div>
+          </div>
+          <div class="p-4 flex-grow flex flex-col">
+            <h3 class="font-semibold text-slate-100 group-hover:text-red-400 transition-colors duration-200 line-clamp-2">{{ video.title }}</h3>
+            <div class="mt-2 flex items-center space-x-3 text-sm text-slate-400">
+              <img [src]="video.uploaderAvatar" [alt]="video.uploaderName" class="w-8 h-8 rounded-full">
+              <span>{{ video.uploaderName }}</span>
+            </div>
+            <div class="mt-auto pt-2 text-sm text-slate-400">
+              <span>{{ formatViews(video.views) }} visionnements</span> &bull; <span>{{ formatRelative(video.uploadedDate) }}</span>
+            </div>
+          </div>
+        </a>
+      }
+    </div>
+    <!-- Infinite scroll anchor -->
+    <app-infinite-anchor class="mt-6"
+                         [disabled]="!nextCursor()"
+                         [busy]="busyMore()"
+                         (loadMore)="fetchNextPage()"></app-infinite-anchor>
+    @if (busyMore()) {
+      <div class="flex items-center justify-center py-4 text-slate-400">
+        <svg class="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
+        {{ 'loading.more' | t }}
+      </div>
+    }
+  }
+</div>
+
@@ -0,0 +1,126 @@
+
+import { ChangeDetectionStrategy, Component, effect, inject, signal, untracked } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { YoutubeApiService } from '../../services/youtube-api.service';
+import { Video } from '../../models/video.model';
+import { InstanceService } from '../../services/instance.service';
+import { InfiniteAnchorComponent } from '../shared/infinite-anchor/infinite-anchor.component';
+import { formatRelativeFr } from '../../utils/date.util';
+import { TranslatePipe } from '../../pipes/translate.pipe';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterLink, InfiniteAnchorComponent, TranslatePipe]
+})
+export class HomeComponent {
+  private apiService = inject(YoutubeApiService);
+  private instances = inject(InstanceService);
+  
+  trendingVideos = signal<Video[]>([]);
+  loading = signal(true);
+  busyMore = signal(false);
+  nextCursor = signal<string | null>(null);
+  notice = signal<string | null>(null);
+
+  constructor() {
+    this.reloadTrending();
+    // React to provider/region changes to refresh trending automatically
+    effect(() => {
+      // Rerun when these signals change
+      const provider = this.instances.selectedProvider();
+      const region = this.instances.region();
+      const ptInstance = this.instances.activePeerTubeInstance();
+
+      // Reset notice and trigger reload, but without re-triggering the effect
+      untracked(() => {
+        this.notice.set(null);
+        this.reloadTrending();
+      });
+    }, { allowSignalWrites: true });
+  }
+
+  reloadTrending() {
+    const readiness = this.instances.getProviderReadiness();
+    if (!readiness.ready) {
+      this.notice.set(readiness.reason || 'Le provider sélectionné n\'est pas prêt.');
+      this.trendingVideos.set([]);
+      this.nextCursor.set(null);
+      this.loading.set(false);
+      return;
+    }
+    this.loading.set(true);
+    this.trendingVideos.set([]);
+    this.nextCursor.set(null);
+    // Important: reset busy flag so a previous pending state doesn't block new loads
+    this.busyMore.set(false);
+    this.fetchNextPage();
+  }
+
+  fetchNextPage() {
+    if (this.busyMore()) return;
+    const readiness = this.instances.getProviderReadiness();
+    if (!readiness.ready) {
+      if (!this.notice()) this.notice.set(readiness.reason || 'Le provider sélectionné n\'est pas prêt.');
+      return;
+    }
+    this.busyMore.set(true);
+    this.apiService.getTrendingPage(this.nextCursor()).subscribe(res => {
+      const merged = [...this.trendingVideos(), ...res.items];
+      this.trendingVideos.set(merged);
+      this.nextCursor.set(res.nextCursor || null);
+      this.busyMore.set(false);
+      this.loading.set(false);
+      const provider = this.instances.selectedProvider();
+      if (merged.length === 0 && !this.notice()) {
+        const readiness2 = this.instances.getProviderReadiness();
+        if (!readiness2.ready) {
+          this.notice.set(readiness2.reason || 'Le provider sélectionné n\'est pas prêt.');
+        } else if (provider === 'youtube') {
+          this.notice.set('Aucune vidéo tendance YouTube chargée. Vérifiez que votre YOUTUBE_API_KEY est valide et que les restrictions HTTP referrer incluent http://localhost:4200/*.');
+        } else if (provider === 'peertube') {
+          const inst = this.instances.activePeerTubeInstance();
+          this.notice.set(`PeerTube: les vidéos ne sont pas disponibles depuis l'instance "${inst}" pour le moment. Essayez une autre instance dans l'en-tête.`);
+        } else if (provider === 'rumble') {
+          const label = this.instances.selectedProviderLabel();
+          this.notice.set(`Les vidéos ne sont pas disponibles pour le provider "${label}" pour le moment. Réessayez plus tard ou choisissez un autre provider.`);
+        }
+      }
+    });
+  }
+
+  formatViews(views: number): string {
+    if (views >= 1_000_000_000) {
+      return (views / 1_000_000_000).toFixed(1) + 'B';
+    }
+    if (views >= 1_000_000) {
+      return (views / 1_000_000).toFixed(1) + 'M';
+    }
+    if (views >= 1_000) {
+      return (views / 1_000).toFixed(1) + 'K';
+    }
+    return views.toString();
+  }
+
+  // Relative date for cards (e.g., "il y a 2 heures")
+  formatRelative(dateIso?: string): string {
+    if (!dateIso) return '';
+    return formatRelativeFr(dateIso);
+  }
+
+  // Build query params for Watch page (provider + optional odysee slug)
+  watchQueryParams(v: Video): Record<string, any> | null {
+    const p = this.instances.selectedProvider();
+    const qp: any = { p };
+    if (p === 'odysee' && v.url?.startsWith('https://odysee.com/')) {
+      let slug = v.url.substring('https://odysee.com/'.length);
+      if (slug.startsWith('/')) slug = slug.slice(1);
+      qp.slug = slug;
+    }
+    return qp;
+  }
+}
+