defer beatsaver map data loading & fix it being fucked
All checks were successful
deploy / deploy (push) Successful in 1m15s

This commit is contained in:
Lee 2023-11-24 20:43:23 +00:00
parent b74b22c0b6
commit 407bcc866b
8 changed files with 206 additions and 148 deletions

@ -4,11 +4,24 @@ import { BeatsaverAPI } from "@/utils/beatsaver/api";
export async function GET(request: Request) { export async function GET(request: Request) {
const { searchParams } = new URL(request.url); const { searchParams } = new URL(request.url);
const mapHashes = searchParams.get("hashes")?.split(",") ?? undefined; const mapHashes = searchParams.get("hashes");
if (!mapHashes) { if (!mapHashes) {
return new Response("mapHashes parameter is required", { status: 400 }); return new Response("mapHashes parameter is required", { status: 400 });
} }
let toFetch: any[] = [];
if (mapHashes.includes(",")) {
const parts = mapHashes.substring(0, mapHashes.length - 1).split(",");
toFetch.push(...parts);
} else {
toFetch.push(mapHashes);
}
// Convert all hashes to uppercase
for (const hash of toFetch) {
toFetch[toFetch.indexOf(hash)] = hash.toUpperCase();
}
// Remove duplicates
toFetch = toFetch.filter((hash, index) => toFetch.indexOf(hash) === index);
const idOnly = searchParams.get("idonly") === "true"; const idOnly = searchParams.get("idonly") === "true";
let totalInCache = 0; let totalInCache = 0;
@ -24,39 +37,51 @@ export async function GET(request: Request) {
const fetchAndCacheMap = async (mapHash: string) => { const fetchAndCacheMap = async (mapHash: string) => {
const beatSaverMap = await BeatsaverAPI.fetchMapByHash(mapHash); const beatSaverMap = await BeatsaverAPI.fetchMapByHash(mapHash);
if (beatSaverMap) { if (beatSaverMap) {
maps[mapHash] = idOnly ? { id: beatSaverMap.id } : beatSaverMap; addMap(mapHash, beatSaverMap);
await cacheMap(mapHash, beatSaverMap);
}
};
const cacheMap = async (mapHash: string, map: BeatsaverMap) => {
await ( await (
await Redis.client await Redis.client
).set( ).set(
`beatsaver:map:${mapHash}`, `beatsaver:map:${mapHash}`,
JSON.stringify(idOnly ? { id: beatSaverMap.id } : beatSaverMap), JSON.stringify(idOnly ? { id: map.id } : map),
"EX", "EX",
60 * 60 * 24 * 7, 60 * 60 * 24 * 7,
); );
}
}; };
for (const mapHash of mapHashes) { const addMap = (mapHash: string, map: any) => {
maps[mapHash] = idOnly ? { id: map.id } : map;
};
for (const mapHash of toFetch) {
const map = await fetchMapFromCache(mapHash); const map = await fetchMapFromCache(mapHash);
if (map) { if (map !== null) {
maps[mapHash] = JSON.parse(map); const json = JSON.parse(map);
addMap(mapHash, json);
totalInCache++; totalInCache++;
} }
} }
if (totalInCache === 0) { if (totalInCache === 0 && toFetch.length > 1) {
const beatSaverMaps = await BeatsaverAPI.fetchMapsByHash(...mapHashes); const beatSaverMaps = await BeatsaverAPI.fetchMapsByHash(...toFetch);
if (beatSaverMaps) { if (beatSaverMaps) {
for (const mapHash of mapHashes) { for (const mapHash of toFetch) {
const beatSaverMap = beatSaverMaps[mapHash.toLowerCase()]; const beatSaverMap = beatSaverMaps[mapHash.toLowerCase()];
if (beatSaverMap) { if (beatSaverMap) {
await fetchAndCacheMap(mapHash); await cacheMap(mapHash, beatSaverMap);
addMap(mapHash, beatSaverMap);
} }
} }
} }
} else { } else {
for (const mapHash of mapHashes) { for (const mapHash of toFetch) {
if (!maps[mapHash]) { if (!maps[mapHash]) {
await fetchAndCacheMap(mapHash); await fetchAndCacheMap(mapHash);
} }

@ -69,12 +69,7 @@ export async function generateMetadata({
*/ */
async function getData(id: string, page: number, sort: string) { async function getData(id: string, page: number, sort: string) {
const playerData = await ScoreSaberAPI.fetchPlayerData(id); const playerData = await ScoreSaberAPI.fetchPlayerData(id);
const playerScores = await ScoreSaberAPI.fetchScoresWithBeatsaverData( const playerScores = await ScoreSaberAPI.fetchScores(id, page, sort, 10);
id,
page,
sort,
10,
);
return { return {
playerData: playerData, playerData: playerData,
playerScores: playerScores, playerScores: playerScores,

@ -1,7 +1,7 @@
"use client"; "use client";
import { ScoresaberPlayer } from "@/schemas/scoresaber/player"; import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { ScoresaberScoreWithBeatsaverData } from "@/schemas/scoresaber/scoreWithBeatsaverData"; import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
import { useSettingsStore } from "@/store/settingsStore"; import { useSettingsStore } from "@/store/settingsStore";
import { SortType, SortTypes } from "@/types/SortTypes"; import { SortType, SortTypes } from "@/types/SortTypes";
import { ScoreSaberAPI } from "@/utils/scoresaber/api"; import { ScoreSaberAPI } from "@/utils/scoresaber/api";
@ -16,11 +16,11 @@ type PageInfo = {
page: number; page: number;
totalPages: number; totalPages: number;
sortType: SortType; sortType: SortType;
scores: Record<string, ScoresaberScoreWithBeatsaverData>; scores: ScoresaberPlayerScore[] | undefined;
}; };
type ScoresProps = { type ScoresProps = {
initalScores: Record<string, ScoresaberScoreWithBeatsaverData> | undefined; initalScores: ScoresaberPlayerScore[] | undefined;
initalPage: number; initalPage: number;
initalSortType: SortType; initalSortType: SortType;
initalTotalPages?: number; initalTotalPages?: number;
@ -45,7 +45,7 @@ export default function Scores({
page: initalPage, page: initalPage,
totalPages: initalTotalPages || 1, totalPages: initalTotalPages || 1,
sortType: initalSortType, sortType: initalSortType,
scores: initalScores ? initalScores : {}, scores: initalScores,
}); });
const [changedPage, setChangedPage] = useState(false); const [changedPage, setChangedPage] = useState(false);
@ -61,12 +61,8 @@ export default function Scores({
return; return;
} }
ScoreSaberAPI.fetchScoresWithBeatsaverData( ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
playerId, (scoresResponse) => {
page,
sortType.value,
10,
).then((scoresResponse) => {
if (!scoresResponse) { if (!scoresResponse) {
setError(true); setError(true);
setErrorMessage("No Scores"); setErrorMessage("No Scores");
@ -89,7 +85,8 @@ export default function Scores({
setChangedPage(true); setChangedPage(true);
console.log(`Switched page to ${page} with sort ${sortType.value}`); console.log(`Switched page to ${page} with sort ${sortType.value}`);
}); },
);
}, },
[ [
changedPage, changedPage,
@ -150,10 +147,12 @@ export default function Scores({
</div> </div>
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="flex h-full w-full flex-col items-center justify-center">
<>
{scores.scores ? (
<> <>
<div className="grid min-w-full grid-cols-1 divide-y divide-border"> <div className="grid min-w-full grid-cols-1 divide-y divide-border">
{Object.values(scores.scores).map((scoreData, id) => { {scores.scores.map((scoreData, id) => {
const { score, leaderboard, mapId } = scoreData; const { score, leaderboard } = scoreData;
return ( return (
<Score <Score
@ -161,8 +160,6 @@ export default function Scores({
player={playerData} player={playerData}
score={score} score={score}
leaderboard={leaderboard} leaderboard={leaderboard}
mapId={mapId}
ownProfile={settingsStore?.player}
/> />
); );
})} })}
@ -178,6 +175,10 @@ export default function Scores({
/> />
</div> </div>
</> </>
) : (
<p>No Scores!</p>
)}
</>
</div> </div>
</Card> </Card>
); );

@ -0,0 +1,94 @@
"use client";
import BeatSaverLogo from "@/components/icons/BeatSaverLogo";
import YouTubeLogo from "@/components/icons/YouTubeLogo";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/Tooltip";
import { Button } from "@/components/ui/button";
import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
import { songNameToYouTubeLink } from "@/utils/songUtils";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import CopyBsrButton from "./CopyBsrButton";
type MapButtonsProps = {
leaderboard: ScoresaberLeaderboardInfo;
};
export default function MapButtons({ leaderboard }: MapButtonsProps) {
const [mapId, setMapId] = useState<string | undefined>(undefined);
const hash = leaderboard.songHash;
const getMapId = useCallback(async () => {
const beatSaberMap = await fetch(
`/api/beatsaver/mapdata?hashes=${hash}&idonly=true`,
);
if (!beatSaberMap) {
return;
}
const json = await beatSaberMap.json();
setMapId(json.maps[hash].id);
}, [hash]);
useEffect(() => {
getMapId();
}, [getMapId]);
return (
<div className="hidden flex-col items-center justify-between gap-1 p-1 md:flex md:items-start md:justify-end">
{mapId && (
<>
<div className="flex gap-1">
<Tooltip>
<TooltipTrigger>
<Link
href={`https://beatsaver.com/maps/${mapId}`}
target="_blank"
>
<Button
className="h-[30px] w-[30px] bg-neutral-700 p-1"
variant={"secondary"}
>
<BeatSaverLogo size={20} />
</Button>
</Link>
</TooltipTrigger>
<TooltipContent>
<p>Click to open the map page</p>
</TooltipContent>
</Tooltip>
<CopyBsrButton mapId={mapId} />
</div>
<div className="flex gap-1">
<Tooltip>
<TooltipTrigger>
<Link
href={`${songNameToYouTubeLink(
leaderboard.songName,
leaderboard.songSubName,
leaderboard.songAuthorName,
)}`}
target="_blank"
>
<Button
className="h-[30px] w-[30px] bg-neutral-700 p-1"
variant={"secondary"}
>
<YouTubeLogo size={20} />
</Button>
</Link>
</TooltipTrigger>
<TooltipContent>
<p>Click to view the song on YouTube</p>
</TooltipContent>
</Tooltip>
</div>
</>
)}
</div>
);
}

@ -1,4 +1,3 @@
import YouTubeLogo from "@/components/icons/YouTubeLogo";
import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard"; import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
import { ScoresaberPlayer } from "@/schemas/scoresaber/player"; import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { ScoresaberScore } from "@/schemas/scoresaber/score"; import { ScoresaberScore } from "@/schemas/scoresaber/score";
@ -7,7 +6,6 @@ import { getPpGainedFromScore } from "@/utils/scoresaber/scores";
import { import {
scoresaberDifficultyNumberToName, scoresaberDifficultyNumberToName,
songDifficultyToColor, songDifficultyToColor,
songNameToYouTubeLink,
} from "@/utils/songUtils"; } from "@/utils/songUtils";
import { formatDate, formatTimeAgo } from "@/utils/timeUtils"; import { formatDate, formatTimeAgo } from "@/utils/timeUtils";
import { import {
@ -19,28 +17,19 @@ import {
import clsx from "clsx"; import clsx from "clsx";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import BeatSaverLogo from "../../icons/BeatSaverLogo"; import { Suspense } from "react";
import HeadsetIcon from "../../icons/HeadsetIcon"; import HeadsetIcon from "../../icons/HeadsetIcon";
import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/Tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/Tooltip";
import { Button } from "../../ui/button";
import ScoreStatLabel from "../ScoreStatLabel"; import ScoreStatLabel from "../ScoreStatLabel";
import CopyBsrButton from "./CopyBsrButton"; import MapButtons from "./MapButtons";
type ScoreProps = { type ScoreProps = {
score: ScoresaberScore; score: ScoresaberScore;
player: ScoresaberPlayer; player: ScoresaberPlayer;
leaderboard: ScoresaberLeaderboardInfo; leaderboard: ScoresaberLeaderboardInfo;
ownProfile?: ScoresaberPlayer;
mapId?: string;
}; };
export default function Score({ export default function Score({ score, player, leaderboard }: ScoreProps) {
score,
player,
leaderboard,
ownProfile,
mapId,
}: ScoreProps) {
const isFullCombo = score.missedNotes + score.badCuts === 0; const isFullCombo = score.missedNotes + score.badCuts === 0;
const diffName = scoresaberDifficultyNumberToName( const diffName = scoresaberDifficultyNumberToName(
leaderboard.difficulty.difficulty, leaderboard.difficulty.difficulty,
@ -124,58 +113,9 @@ export default function Score({
</Link> </Link>
</div> </div>
<div className="hidden flex-col items-center justify-between gap-1 p-1 md:flex md:items-start md:justify-end"> <Suspense fallback={<div />}>
{mapId && ( <MapButtons leaderboard={leaderboard} />
<> </Suspense>
<div className="flex gap-1">
<Tooltip>
<TooltipTrigger>
<Link
href={`https://beatsaver.com/maps/${mapId}`}
target="_blank"
>
<Button
className="h-[30px] w-[30px] bg-neutral-700 p-1"
variant={"secondary"}
>
<BeatSaverLogo size={20} />
</Button>
</Link>
</TooltipTrigger>
<TooltipContent>
<p>Click to open the map page</p>
</TooltipContent>
</Tooltip>
<CopyBsrButton mapId={mapId} />
</div>
<div className="flex gap-1">
<Tooltip>
<TooltipTrigger>
<Link
href={`${songNameToYouTubeLink(
leaderboard.songName,
leaderboard.songSubName,
leaderboard.songAuthorName,
)}`}
target="_blank"
>
<Button
className="h-[30px] w-[30px] bg-neutral-700 p-1"
variant={"secondary"}
>
<YouTubeLogo size={20} />
</Button>
</Link>
</TooltipTrigger>
<TooltipContent>
<p>Click to view the song on YouTube</p>
</TooltipContent>
</Tooltip>
</div>
</>
)}
</div>
<div className="flex items-center justify-between p-1 md:items-start md:justify-end"> <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
<div className="flex flex-col md:hidden"> <div className="flex flex-col md:hidden">

@ -25,7 +25,7 @@ async function fetchMapsByHash(
BS_GET_MAP_BY_HASH_URL, BS_GET_MAP_BY_HASH_URL,
true, true,
hashes.substring(0, hashes.length - 1), hashes.substring(0, hashes.length - 1),
) + "?idonly=true", ),
); );
const json = await response.json(); const json = await response.json();
@ -47,6 +47,7 @@ async function fetchMapByHash(hash: string): Promise<BeatsaverMap | undefined> {
const response = await BeatsaverFetchQueue.fetch( const response = await BeatsaverFetchQueue.fetch(
formatString(BS_GET_MAP_BY_HASH_URL, true, hash), formatString(BS_GET_MAP_BY_HASH_URL, true, hash),
); );
console.log(formatString(BS_GET_MAP_BY_HASH_URL, true, hash));
const json = await response.json(); const json = await response.json();
// Check if there was an error fetching the user data // Check if there was an error fetching the user data

@ -13,7 +13,7 @@ export class FetchQueue {
* @param url - The URL to fetch. * @param url - The URL to fetch.
* @returns The response. * @returns The response.
*/ */
public async fetch(url: string, options?: any): Promise<any> { public async fetch(url: string, options?: any): Promise<Response> {
const now = Date.now(); const now = Date.now();
if (now < this.rateLimitReset) { if (now < this.rateLimitReset) {

@ -178,6 +178,8 @@ async function fetchScoresWithBeatsaverData(
for (const score of scores) { for (const score of scores) {
url += `${score.leaderboard.songHash},`; url += `${score.leaderboard.songHash},`;
} }
url = url.substring(0, url.length - 1);
url += "&idonly=true";
const mapResponse = await fetch(url, { const mapResponse = await fetch(url, {
next: { next: {
revalidate: 60 * 60 * 24 * 7, // 1 week revalidate: 60 * 60 * 24 * 7, // 1 week