diff --git a/src/components/icons/YouTubeLogo.tsx b/src/components/icons/YouTubeLogo.tsx new file mode 100644 index 0000000..384b76f --- /dev/null +++ b/src/components/icons/YouTubeLogo.tsx @@ -0,0 +1,33 @@ +type YouTubeLogoProps = { + size?: number; + className?: string; +}; + +export default function YouTubeLogo({ + size = 32, + className, +}: YouTubeLogoProps) { + return ( + + + + + + ); +} diff --git a/src/components/player/score/Score.tsx b/src/components/player/score/Score.tsx index a35e093..e9284b2 100644 --- a/src/components/player/score/Score.tsx +++ b/src/components/player/score/Score.tsx @@ -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({ -
+
{mapId && ( <> - - - - - - - -

Click to open the map page

-
-
+ + + + +

Click to open the map page

+
+ - + +
+
+ + + +
)}
diff --git a/src/utils/songUtils.ts b/src/utils/songUtils.ts index ea624fb..5890f41 100644 --- a/src/utils/songUtils.ts +++ b/src/utils/songUtils.ts @@ -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( + " ", + "+", + ), + ); +}