diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 327daad..863ad59 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -56,7 +56,44 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) { }, { title: "Recently Added", - videos: sortedByDate.slice(0, 15) + videos: (() => { + // Filter videos from "Geschichte des Liedes" collection + const geschichteVideos = videos.filter(video => + video.title.includes("Geschichte des Liedes") + ); + + // Group by performer/artist (extract performer name before " - ") + const performerGroups: { [key: string]: typeof videos } = {}; + geschichteVideos.forEach(video => { + const performer = video.title.split(" - ")[0] || "Unknown"; + if (!performerGroups[performer]) { + performerGroups[performer] = []; + } + performerGroups[performer].push(video); + }); + + // Sort each group by upload date (newest first) + Object.keys(performerGroups).forEach(performer => { + performerGroups[performer].sort((a, b) => + new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() + ); + }); + + // Distribute videos: first one from each performer, then continue + const result = []; + const performers = Object.keys(performerGroups); + let maxRounds = Math.max(...performers.map(p => performerGroups[p].length)); + + for (let round = 0; round < maxRounds && result.length < 15; round++) { + for (let performer of performers) { + if (performerGroups[performer][round] && result.length < 15) { + result.push(performerGroups[performer][round]); + } + } + } + + return result; + })() }, { title: "Trending Now",