chore: update TypeScript build info cache
This commit is contained in:
parent
0e1f9d0bbd
commit
bcfb46ef7a
2
.angular/cache/20.2.2/app/.tsbuildinfo
vendored
2
.angular/cache/20.2.2/app/.tsbuildinfo
vendored
File diff suppressed because one or more lines are too long
11
angular.json
11
angular.json
@ -12,15 +12,16 @@
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"outputPath": {
|
||||
"base": "./dist",
|
||||
"browser": "."
|
||||
},
|
||||
"outputPath": "./dist",
|
||||
"baseHref": "/",
|
||||
"browser": "index.tsx",
|
||||
"tsConfig": "tsconfig.json",
|
||||
"assets": [
|
||||
"assets",
|
||||
"index.css"
|
||||
"public",
|
||||
"index.css",
|
||||
"index.html",
|
||||
{ "glob": "**/*", "input": "public/", "output": "/" }
|
||||
]
|
||||
},
|
||||
"configurations": {
|
||||
|
||||
BIN
db/newtube.db
BIN
db/newtube.db
Binary file not shown.
11
index.html
11
index.html
@ -2,9 +2,15 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>NewTube</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/png" href="src/assets/images/NewTube.png">
|
||||
<title>NewTube</title>
|
||||
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="NewTube" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
|
||||
<script>
|
||||
try {
|
||||
var t = localStorage.getItem('newtube.theme') || 'system';
|
||||
@ -53,5 +59,6 @@
|
||||
</head>
|
||||
<body class="bg-slate-900 text-slate-200 antialiased">
|
||||
<app-root></app-root>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/apple-touch-icon.png
Normal file
BIN
public/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public/favicon-96x96.png
Normal file
BIN
public/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
3
public/favicon.svg
Normal file
3
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1003 KiB |
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 109 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 109 KiB After Width: | Height: | Size: 109 KiB |
21
public/site.webmanifest
Normal file
21
public/site.webmanifest
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "NewTube",
|
||||
"short_name": "NewTube",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/web-app-manifest-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/web-app-manifest-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
BIN
public/web-app-manifest-192x192.png
Normal file
BIN
public/web-app-manifest-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/web-app-manifest-512x512.png
Normal file
BIN
public/web-app-manifest-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
@ -9,7 +9,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<a routerLink="/" class="flex items-center space-x-2 shrink-0">
|
||||
<img src="assets/images/NewTube.png" alt="" class="h-8 w-auto" />
|
||||
<img src="images/NewTube.png" alt="" class="h-8 w-auto" />
|
||||
<h1 class="text-2xl font-bold tracking-tight text-white">NewTube</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -56,9 +56,75 @@
|
||||
|
||||
<!-- Sections Tabs mimic (simple headings) -->
|
||||
<div class="space-y-10">
|
||||
|
||||
<!-- Videos -->
|
||||
<section>
|
||||
<h2 class="text-xl font-semibold mb-3">{{ 'themes.videos' | t }}</h2>
|
||||
<div *ngIf="videos.loading && !nonShorts.length" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
<div *ngFor="let i of [1,2,3,4,5,6,7,8]" class="animate-pulse bg-slate-800/50 rounded-lg overflow-hidden border border-slate-800">
|
||||
<div class="w-full h-32 bg-slate-800"></div>
|
||||
<div class="p-2">
|
||||
<div class="h-3 bg-slate-700 rounded w-11/12 mb-2"></div>
|
||||
<div class="h-3 bg-slate-700 rounded w-8/12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!videos.loading && nonShorts.length === 0" class="text-slate-400">{{ 'empty.noItems' | t }}</div>
|
||||
<div *ngIf="videos.error" class="mt-2 p-3 bg-red-900/30 border border-red-700 text-red-200 rounded">
|
||||
{{ videos.error }}
|
||||
<button class="ml-2 underline hover:text-red-100" (click)="retry(videos)">{{ 'action.retry' | t }}</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" *ngIf="nonShorts.length">
|
||||
<a *ngFor="let v of (nonShorts | slice:0:20); trackBy: trackByVideo"
|
||||
[routerLink]="['/watch', v.videoId]" [queryParams]="watchQueryParams(v)" [state]="{ video: v }"
|
||||
class="group bg-slate-800/50 rounded-lg overflow-hidden hover:bg-slate-700/50">
|
||||
<div class="relative">
|
||||
<img [src]="v.thumbnail" [alt]="v.title" loading="lazy" decoding="async" class="w-full h-32 object-cover">
|
||||
<div class="absolute bottom-2 left-2">
|
||||
<app-like-button [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 text-sm line-clamp-2">{{ v.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-3" *ngIf="nonShorts.length > 20">
|
||||
<button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded border border-slate-700 text-slate-200"
|
||||
(click)="showMore(videos)"
|
||||
aria-label="Afficher plus de vidéos">
|
||||
{{ 'loading.more' | t }} ({{nonShorts.length - 20}})
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Shorts: show only if any are detected -->
|
||||
<section *ngIf="shorts.length > 0">
|
||||
<h2 class="text-xl font-semibold mb-3">Shorts</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
<a *ngFor="let v of (shorts | slice:0:shortsVisibleCount); trackBy: trackByVideo"
|
||||
[routerLink]="['/watch', v.videoId]" [queryParams]="watchQueryParams(v)" [state]="{ video: v }"
|
||||
class="group bg-slate-800/50 rounded-lg overflow-hidden hover:bg-slate-700/50">
|
||||
<div class="relative">
|
||||
<img [src]="v.thumbnail" [alt]="v.title" loading="lazy" decoding="async" class="w-full h-64 object-cover">
|
||||
<div class="absolute bottom-2 left-2">
|
||||
<app-like-button [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 text-sm line-clamp-2">{{ v.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Bouton Voir plus pour les Shorts -->
|
||||
<div class="mt-3" *ngIf="shorts.length > shortsVisibleCount">
|
||||
<button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded border border-slate-700 text-slate-200"
|
||||
(click)="showMoreShorts()"
|
||||
aria-label="Afficher plus de shorts">
|
||||
{{ 'loading.more' | t }} ({{shorts.length - shortsVisibleCount}})
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recorded Streams -->
|
||||
<section>
|
||||
<h3 class="text-xl font-semibold mb-3">{{ 'themes.recorded' | t }}</h3>
|
||||
<h2 class="text-xl font-semibold mb-3">{{ 'themes.recorded' | t }}</h2>
|
||||
<div *ngIf="recorded.loading && !recorded.items.length" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
<div *ngFor="let i of [1,2,3,4,5,6,7,8]" class="animate-pulse bg-slate-800/50 rounded-lg overflow-hidden border border-slate-800">
|
||||
<div class="w-full h-32 bg-slate-800"></div>
|
||||
@ -68,13 +134,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!recorded.loading && recorded.items.length === 0" class="text-slate-400">{{ 'empty.noItems' | t }}</div>
|
||||
<div *ngIf="!recorded.loading && recordedNonShorts.length === 0" class="text-slate-400">{{ 'empty.noItems' | t }}</div>
|
||||
<div *ngIf="recorded.error" class="mt-2 p-3 bg-red-900/30 border border-red-700 text-red-200 rounded">
|
||||
{{ recorded.error }}
|
||||
<button class="ml-2 underline hover:text-red-100" (click)="retry(recorded)">{{ 'action.retry' | t }}</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" *ngIf="recorded.items.length">
|
||||
<a *ngFor="let v of (recorded.items | slice:0:recorded.visibleCount); trackBy: trackByVideo"
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" *ngIf="recordedNonShorts.length">
|
||||
<a *ngFor="let v of (recordedNonShorts | slice:0:20); trackBy: trackByVideo"
|
||||
[routerLink]="['/watch', v.videoId]" [queryParams]="watchQueryParams(v)" [state]="{ video: v }"
|
||||
class="group bg-slate-800/50 rounded-lg overflow-hidden hover:bg-slate-700/50">
|
||||
<div class="relative">
|
||||
@ -86,81 +152,21 @@
|
||||
<div class="p-2 text-sm line-clamp-2">{{ v.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Infinite scroll anchor -->
|
||||
<app-infinite-anchor
|
||||
*ngIf="recorded.items.length && (recorded.items.length >= recorded.visibleCount)"
|
||||
[busy]="recorded.loading"
|
||||
[disabled]="!recorded.nextCursor && recorded.items.length <= recorded.visibleCount"
|
||||
[rootMargin]="'1000px 0px 1000px 0px'"
|
||||
(loadMore)="showMore(recorded)">
|
||||
</app-infinite-anchor>
|
||||
<div class="mt-2 flex items-center justify-center text-slate-400 text-sm" *ngIf="recorded.loading">
|
||||
<span class="inline-block h-4 w-4 border-2 border-slate-500 border-t-transparent rounded-full animate-spin mr-2"></span>
|
||||
{{ 'loading.more' | t }}
|
||||
</div>
|
||||
<div class="mt-3" *ngIf="recorded.items.length && (recorded.items.length > recorded.visibleCount || recorded.nextCursor)">
|
||||
<button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded border border-slate-700 text-slate-200 disabled:opacity-60"
|
||||
[disabled]="recorded.loading"
|
||||
(click)="showMore(recorded)">
|
||||
{{ 'loading.more' | t }} (20)
|
||||
<div class="mt-3" *ngIf="recordedNonShorts.length > 20">
|
||||
<button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded border border-slate-700 text-slate-200"
|
||||
(click)="showMore(recorded)"
|
||||
aria-label="Afficher plus de vidéos enregistrées">
|
||||
{{ 'loading.more' | t }} ({{recordedNonShorts.length - 20}})
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Videos -->
|
||||
<section>
|
||||
<h3 class="text-xl font-semibold mb-3">{{ 'themes.videos' | t }}</h3>
|
||||
<div *ngIf="videos.loading && !videos.items.length" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
<div *ngFor="let i of [1,2,3,4,5,6,7,8]" class="animate-pulse bg-slate-800/50 rounded-lg overflow-hidden border border-slate-800">
|
||||
<div class="w-full h-32 bg-slate-800"></div>
|
||||
<div class="p-2">
|
||||
<div class="h-3 bg-slate-700 rounded w-11/12 mb-2"></div>
|
||||
<div class="h-3 bg-slate-700 rounded w-8/12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!videos.loading && videos.items.length === 0" class="text-slate-400">{{ 'empty.noItems' | t }}</div>
|
||||
<div *ngIf="videos.error" class="mt-2 p-3 bg-red-900/30 border border-red-700 text-red-200 rounded">
|
||||
{{ videos.error }}
|
||||
<button class="ml-2 underline hover:text-red-100" (click)="retry(videos)">{{ 'action.retry' | t }}</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" *ngIf="videos.items.length">
|
||||
<a *ngFor="let v of (videos.items | slice:0:videos.visibleCount); trackBy: trackByVideo"
|
||||
[routerLink]="['/watch', v.videoId]" [queryParams]="watchQueryParams(v)" [state]="{ video: v }"
|
||||
class="group bg-slate-800/50 rounded-lg overflow-hidden hover:bg-slate-700/50">
|
||||
<div class="relative">
|
||||
<img [src]="v.thumbnail" [alt]="v.title" loading="lazy" decoding="async" class="w-full h-32 object-cover">
|
||||
<div class="absolute bottom-2 left-2">
|
||||
<app-like-button [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 text-sm line-clamp-2">{{ v.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Infinite scroll anchor -->
|
||||
<app-infinite-anchor
|
||||
*ngIf="videos.items.length && (videos.items.length >= videos.visibleCount)"
|
||||
[busy]="videos.loading"
|
||||
[disabled]="!videos.nextCursor && videos.items.length <= videos.visibleCount"
|
||||
[rootMargin]="'1000px 0px 1000px 0px'"
|
||||
(loadMore)="showMore(videos)">
|
||||
</app-infinite-anchor>
|
||||
<div class="mt-2 flex items-center justify-center text-slate-400 text-sm" *ngIf="videos.loading">
|
||||
<span class="inline-block h-4 w-4 border-2 border-slate-500 border-t-transparent rounded-full animate-spin mr-2"></span>
|
||||
{{ 'loading.more' | t }}
|
||||
</div>
|
||||
<div class="mt-3" *ngIf="videos.items.length && (videos.items.length > videos.visibleCount || videos.nextCursor)">
|
||||
<button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded border border-slate-700 text-slate-200 disabled:opacity-60"
|
||||
[disabled]="videos.loading"
|
||||
(click)="showMore(videos)">
|
||||
{{ 'loading.more' | t }} (20)
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Categories (static recommended) -->
|
||||
<section>
|
||||
<h3 class="text-xl font-semibold mb-3">{{ 'themes.categories' | t }}</h3>
|
||||
<h2 class="text-xl font-semibold mb-3">{{ 'themes.categories' | t }}</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
<div *ngFor="let c of categories()" class="bg-slate-800/60 rounded-xl p-4 border border-slate-700">
|
||||
<div class="text-4xl">{{ c.emoji }}</div>
|
||||
|
||||
@ -6,7 +6,6 @@ import { InstanceService, Provider } from '../../services/instance.service';
|
||||
import { ThemesService } from '../../services/themes.service';
|
||||
import { YoutubeApiService } from '../../services/youtube-api.service';
|
||||
import { Video } from '../../models/video.model';
|
||||
import { InfiniteAnchorComponent } from '../shared/infinite-anchor/infinite-anchor.component';
|
||||
import { TranslatePipe } from '../../pipes/translate.pipe';
|
||||
import { LikeButtonComponent } from '../shared/components/like-button/like-button.component';
|
||||
|
||||
@ -25,7 +24,7 @@ interface SectionState {
|
||||
standalone: true,
|
||||
templateUrl: './provider-theme-page.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [CommonModule, FormsModule, RouterLink, InfiniteAnchorComponent, TranslatePipe, LikeButtonComponent]
|
||||
imports: [CommonModule, FormsModule, RouterLink, TranslatePipe, LikeButtonComponent]
|
||||
})
|
||||
export class ProviderThemePageComponent implements OnDestroy {
|
||||
private route = inject(ActivatedRoute);
|
||||
@ -53,7 +52,12 @@ export class ProviderThemePageComponent implements OnDestroy {
|
||||
|
||||
// Sections (Live removed on provider pages)
|
||||
recorded: SectionState = { key: 'recorded', titleKey: 'themes.recorded', items: [], nextCursor: null, loading: false, error: null, visibleCount: 20 };
|
||||
videos: SectionState = { key: 'videos', titleKey: 'themes.videos', items: [], nextCursor: null, loading: false, error: null, visibleCount: 20 };
|
||||
videos: SectionState = { key: 'videos', titleKey: 'themes.videos', items: [], nextCursor: null, loading: false, error: null, visibleCount: 12 };
|
||||
|
||||
// Derived lists for UI separation
|
||||
shorts: Video[] = []; // aggregated from both sections
|
||||
nonShorts: Video[] = []; // from videos section only
|
||||
recordedNonShorts: Video[] = []; // from recorded section
|
||||
|
||||
constructor() {
|
||||
this.route.paramMap.subscribe(pm => {
|
||||
@ -86,9 +90,12 @@ export class ProviderThemePageComponent implements OnDestroy {
|
||||
const apply = () => {
|
||||
// Reset visible window to ensure top results reflect new sort/filter instantly
|
||||
this.recorded.visibleCount = Math.max(20, this.recorded.visibleCount);
|
||||
this.videos.visibleCount = Math.max(20, this.videos.visibleCount);
|
||||
// Keep videos at 12-increment pagination
|
||||
this.videos.visibleCount = Math.max(12, this.videos.visibleCount);
|
||||
this.recorded.items = this.applyFilters(this.recorded.items);
|
||||
this.videos.items = this.applyFilters(this.videos.items);
|
||||
// Recompute derived partitions
|
||||
this.partitionVideos();
|
||||
// After filtering, re-evaluate if we need to prefetch more
|
||||
this.checkPrefetch(this.recorded);
|
||||
this.checkPrefetch(this.videos);
|
||||
@ -104,8 +111,12 @@ export class ProviderThemePageComponent implements OnDestroy {
|
||||
|
||||
private resetAll() {
|
||||
for (const s of [this.recorded, this.videos]) {
|
||||
s.items = []; s.nextCursor = null; s.loading = false; s.error = null; s.visibleCount = 20;
|
||||
s.items = []; s.nextCursor = null; s.loading = false; s.error = null;
|
||||
s.visibleCount = s.key === 'videos' ? 12 : 20;
|
||||
}
|
||||
this.shorts = [];
|
||||
this.nonShorts = [];
|
||||
this.recordedNonShorts = [];
|
||||
this.cdr.markForCheck();
|
||||
}
|
||||
|
||||
@ -175,6 +186,125 @@ export class ProviderThemePageComponent implements OnDestroy {
|
||||
return arr;
|
||||
}
|
||||
|
||||
// Pagination des shorts
|
||||
shortsVisibleCount = 20;
|
||||
|
||||
// Charge plus de shorts
|
||||
showMoreShorts() {
|
||||
this.shortsVisibleCount += 20;
|
||||
// Vérifier si nous avons assez de vidéos pour afficher
|
||||
if (this.shorts.length <= this.shortsVisibleCount) {
|
||||
// Si nous n'avons pas assez de vidéos, essayer d'en charger plus
|
||||
this.checkAndLoadMoreShorts();
|
||||
}
|
||||
this.cdr.markForCheck();
|
||||
}
|
||||
|
||||
// Vérifie et charge plus de shorts si nécessaire
|
||||
private checkAndLoadMoreShorts() {
|
||||
// Vérifier si nous avons déjà chargé toutes les vidéos disponibles
|
||||
const totalShorts = this.videos.items.filter(v => this.isShortItem(v)).length +
|
||||
this.recorded.items.filter(v => this.isShortItem(v)).length;
|
||||
|
||||
// Si nous avons moins de vidéos que ce que nous voulons afficher, essayer d'en charger plus
|
||||
if (totalShorts <= this.shortsVisibleCount) {
|
||||
// Essayer de charger plus de vidéos de la section videos d'abord
|
||||
if (this.videos.nextCursor && !this.videos.loading) {
|
||||
this.loadMore(this.videos);
|
||||
}
|
||||
// Puis essayer de charger plus de vidéos de la section recorded
|
||||
else if (this.recorded.nextCursor && !this.recorded.loading) {
|
||||
this.loadMore(this.recorded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Classification per spec
|
||||
private isShortItem(x: any): boolean {
|
||||
try {
|
||||
if (!x) return false;
|
||||
if (x.type === 'short') return true;
|
||||
if ((x as any).isShort === true) return true;
|
||||
// Platform URL hints (best-effort)
|
||||
const u = String((x as any).url || '');
|
||||
if (u) {
|
||||
// YouTube shorts URLs: /shorts/VIDEOID
|
||||
if (/\/shorts\//i.test(u)) return true;
|
||||
// General reels/clips hints used by some providers
|
||||
if (/\b(reel|reels|clip|clips)\b/i.test(u)) return true;
|
||||
}
|
||||
const dur = Number((x as any).durationSeconds ?? x.duration ?? 0);
|
||||
if (dur > 0 && dur <= 60) return true;
|
||||
const ar = Number((x as any).aspectRatio ?? 0);
|
||||
if (ar > 1.2) return true; // treat vertical as shorts if hinted
|
||||
return false;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
private partitionVideos() {
|
||||
const vids = this.videos.items || [];
|
||||
const recs = this.recorded.items || [];
|
||||
const shortsAgg: Video[] = [];
|
||||
const vidsLongs: Video[] = [];
|
||||
const recsLongs: Video[] = [];
|
||||
const seenShort = new Set<string>();
|
||||
|
||||
const pushShort = (x: Video) => {
|
||||
const k = x.videoId || x.url || '';
|
||||
if (k && !seenShort.has(k)) {
|
||||
seenShort.add(k);
|
||||
shortsAgg.push(x);
|
||||
}
|
||||
};
|
||||
|
||||
// Filtrer les shorts et les vidéos longues pour les vidéos
|
||||
for (const v of vids) {
|
||||
if (this.isShortItem(v)) {
|
||||
pushShort(v);
|
||||
} else {
|
||||
vidsLongs.push(v);
|
||||
}
|
||||
}
|
||||
|
||||
// Filtrer les shorts et les vidéos longues pour les enregistrements
|
||||
for (const r of recs) {
|
||||
if (this.isShortItem(r)) {
|
||||
pushShort(r);
|
||||
} else {
|
||||
recsLongs.push(r);
|
||||
}
|
||||
}
|
||||
|
||||
// Mettre à jour les tableaux de vidéos
|
||||
this.shorts = shortsAgg;
|
||||
|
||||
// Conserver les vidéos déjà affichées si elles existent encore
|
||||
const currentNonShorts = new Set(this.nonShorts.map(v => v.videoId || v.url || ''));
|
||||
const currentRecordedNonShorts = new Set(this.recordedNonShorts.map(v => v.videoId || v.url || ''));
|
||||
|
||||
// Mettre à jour les vidéos non-courtes en conservant l'ordre et les éléments existants
|
||||
this.nonShorts = [
|
||||
...this.nonShorts.filter(v => vidsLongs.some(v2 => (v2.videoId || v2.url) === (v.videoId || v.url))),
|
||||
...vidsLongs.filter(v => !currentNonShorts.has(v.videoId || v.url || ''))
|
||||
].slice(0, this.videos.visibleCount);
|
||||
|
||||
// Mettre à jour les enregistrements non-courts en conservant l'ordre et les éléments existants
|
||||
this.recordedNonShorts = [
|
||||
...this.recordedNonShorts.filter(v => recsLongs.some(v2 => (v2.videoId || v2.url) === (v.videoId || v.url))),
|
||||
...recsLongs.filter(v => !currentRecordedNonShorts.has(v.videoId || v.url || ''))
|
||||
].slice(0, this.recorded.visibleCount);
|
||||
|
||||
// Mettre à jour le compteur de shorts visibles si nécessaire
|
||||
if (this.shortsVisibleCount > this.shorts.length) {
|
||||
this.shortsVisibleCount = this.shorts.length;
|
||||
}
|
||||
|
||||
// Forcer la détection des changements
|
||||
this.cdr.markForCheck();
|
||||
}
|
||||
|
||||
changeProvider(p: any) {
|
||||
const provider = String(p) as Provider;
|
||||
// Sync the global provider so header search reflects the current context immediately
|
||||
@ -240,9 +370,21 @@ export class ProviderThemePageComponent implements OnDestroy {
|
||||
const afterKeys = existing.size;
|
||||
const added = Math.max(0, afterKeys - beforeKeys);
|
||||
const duplicates = Math.max(0, (incoming.length || 0) - added);
|
||||
|
||||
// Mettre à jour les éléments de la section
|
||||
section.items = this.applyFilters(merged);
|
||||
section.nextCursor = res.nextCursor || null;
|
||||
section.loading = false;
|
||||
|
||||
// Mettre à jour les tableaux de vidéos visibles
|
||||
if (section.key === 'videos') {
|
||||
this.nonShorts = section.items.filter(v => !this.isShortItem(v)).slice(0, section.visibleCount);
|
||||
} else if (section.key === 'recorded') {
|
||||
this.recordedNonShorts = section.items.filter(v => !this.isShortItem(v)).slice(0, section.visibleCount);
|
||||
}
|
||||
|
||||
// Mettre à jour les shorts si nécessaire
|
||||
this.partitionVideos();
|
||||
if (incoming.length === 0) {
|
||||
console.info('[ProviderTheme] Empty page', { provider, section: section.key, theme: this.theme(), query, cursor: section.nextCursor });
|
||||
}
|
||||
@ -269,6 +411,7 @@ export class ProviderThemePageComponent implements OnDestroy {
|
||||
}
|
||||
// Re-apply filters/sorts that depend on duration
|
||||
section.items = this.applyFilters(section.items);
|
||||
this.partitionVideos();
|
||||
this.checkPrefetch(section);
|
||||
this.cdr.markForCheck();
|
||||
},
|
||||
@ -277,6 +420,7 @@ export class ProviderThemePageComponent implements OnDestroy {
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
this.partitionVideos();
|
||||
// Logic-based prefetch: if we are within ~2 rows of the end, prefetch next page
|
||||
this.checkPrefetch(section);
|
||||
this.cdr.markForCheck();
|
||||
@ -312,16 +456,30 @@ export class ProviderThemePageComponent implements OnDestroy {
|
||||
|
||||
// Increase visible items by 20; fetch the next page if we need more data
|
||||
showMore(section: SectionState) {
|
||||
const target = section.visibleCount + 20;
|
||||
const step = section.key === 'videos' ? 12 : 20;
|
||||
const target = section.visibleCount + step;
|
||||
section.visibleCount = target;
|
||||
// If we don't have enough items yet and there is a next page, fetch it
|
||||
if (section.items.length < target && section.nextCursor && !section.loading) {
|
||||
|
||||
// Mettre à jour les vidéos visibles immédiatement
|
||||
if (section.key === 'videos') {
|
||||
this.nonShorts = this.videos.items.slice(0, section.visibleCount);
|
||||
} else if (section.key === 'recorded') {
|
||||
this.recordedNonShorts = this.recorded.items.slice(0, section.visibleCount);
|
||||
}
|
||||
|
||||
// Si nous n'avons pas assez d'éléments et qu'il y a une page suivante, la charger
|
||||
const poolLength = this.poolLengthFor(section);
|
||||
if (poolLength < target && section.nextCursor && !section.loading) {
|
||||
console.debug('[ProviderTheme] showMore triggers fetch', { section: section.key, target, have: section.items.length, nextCursor: section.nextCursor });
|
||||
this.loadMore(section);
|
||||
}
|
||||
// Additionally, run logic-based prefetch check in case of edge conditions
|
||||
|
||||
// Vérifier également si nous devons charger plus de contenu
|
||||
this.checkPrefetch(section);
|
||||
this.cdr.markForCheck();
|
||||
|
||||
// Forcer la détection des changements pour mettre à jour l'interface utilisateur
|
||||
try { this.cdr.detectChanges(); } catch {}
|
||||
}
|
||||
|
||||
// Helpers for watch params
|
||||
@ -363,13 +521,20 @@ export class ProviderThemePageComponent implements OnDestroy {
|
||||
private checkPrefetch(section: SectionState) {
|
||||
const cols = this.currentCols();
|
||||
const threshold = cols * 2; // ~2 rows
|
||||
const remaining = section.items.length - section.visibleCount;
|
||||
const pool = this.poolLengthFor(section);
|
||||
const remaining = pool - section.visibleCount;
|
||||
if (remaining <= threshold && section.nextCursor && !section.loading) {
|
||||
console.debug('[ProviderTheme] Logic prefetch triggered', { section: section.key, remaining, threshold, nextCursor: section.nextCursor });
|
||||
this.loadMore(section);
|
||||
}
|
||||
}
|
||||
|
||||
private poolLengthFor(section: SectionState): number {
|
||||
if (section.key === 'videos') return this.nonShorts.length || 0;
|
||||
if (section.key === 'recorded') return this.recordedNonShorts.length || 0;
|
||||
return section.items.length;
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
try { if (this.handleResize) window.removeEventListener('resize', this.handleResize); } catch {}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user