Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

add a youtube link button to songs
All checks were successful
deploy / deploy (push) Successful in 1m17s
Details

Browse Source
This commit is contained in:
Lee 2023-11-16 10:13:20 +00:00
parent fd7cbf73a7
commit ef7c6f4878
3 changed files with 88 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/icons/YouTubeLogo.tsx Normal file
View File

@ -0,0 +1,33 @@
type YouTubeLogoProps = {
size?: number;
className?: string;
};
export default function YouTubeLogo({
size = 32,
className,
}: YouTubeLogoProps) {
return (
<svg
height={size}
width={size}
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 461.001 461.001"
xmlSpace="preserve"
className={className}
>
<g>
<path
fill="#F61C0D"
d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
/>
</g>
</svg>
);
}

58
src/components/player/score/Score.tsx
View File

@ -1,3 +1,4 @@
import YouTubeLogo from "@/components/icons/YouTubeLogo";
import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { ScoresaberScore } from "@/schemas/scoresaber/score";
@ -6,6 +7,7 @@ import { getPpGainedFromScore } from "@/utils/scoresaber/scores";
import {
scoresaberDifficultyNumberToName,
songDifficultyToColor,
songNameToYouTubeLink,
} from "@/utils/songUtils";
import { formatDate, formatTimeAgo } from "@/utils/timeUtils";
import {
@ -122,29 +124,47 @@ export default function Score({
</Link>
</div>
<div className="hidden items-center justify-between gap-1 p-1 md:flex md:items-start md:justify-end">
<div className="hidden flex-col items-center justify-between gap-1 p-1 md:flex md:items-start md:justify-end">
{mapId && (
<>
<Tooltip>
<TooltipTrigger>
<Link
href={`https://beatsaver.com/maps/${mapId}`}
target="_blank"
>
<Button
className="h-[30px] w-[30px] bg-neutral-700 p-1"
variant={"secondary"}
<div className="flex gap-1">
<Tooltip>
<TooltipTrigger>
<Link
href={`https://beatsaver.com/maps/${mapId}`}
target="_blank"
>
<BeatSaverLogo size={20} />
</Button>
</Link>
</TooltipTrigger>
<TooltipContent>
<p>Click to open the map page</p>
</TooltipContent>
</Tooltip>
<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} />
<CopyBsrButton mapId={mapId} />
</div>
<div className="flex gap-1">
<Link
href={`${songNameToYouTubeLink(
leaderboard.songName,
leaderboard.songAuthorName,
)}`}
target="_blank"
>
<Button
className="h-[30px] w-[30px] bg-neutral-700 p-1"
variant={"secondary"}
>
<YouTubeLogo size={20} />
</Button>
</Link>
</div>
</>
)}
</div>

16
src/utils/songUtils.ts
View File

@ -48,3 +48,19 @@ export function scoresaberDifficultyNumberToName(
return "unknown";
}
}
/**
* Turns a song name and author into a YouTube link
*
* @param name the name of the song
* @param author the author of the song
* @returns the YouTube link for the song
*/
export function songNameToYouTubeLink(name: string, author: string) {
return encodeURI(
`https://www.youtube.com/results?search_query=${name} ${author}`.replaceAll(
" ",
"+",
),
);
}