feat: search youtube for stuff (#1074)

client/src/app/routes/GameRoutes.tsx

@@ -328,7 +328,12 @@ function SongInfoHeader({
 				{activeChart && (
 					<Col xs={12}>
 						<hr />
-						<ChartInfoFormat playtype={playtype} chart={activeChart} game={game} />
+						<ChartInfoFormat
+							song={song}
+							playtype={playtype}
+							chart={activeChart}
+							game={game}
+						/>
 					</Col>
 				)}
 			</Row>

client/src/components/game/charts/ChartInfoFormat.tsx

@@ -14,14 +14,26 @@ import { GPT_CLIENT_IMPLEMENTATIONS } from "lib/game-implementations";
 import React, { useContext } from "react";
 import { Col, Row } from "react-bootstrap";
 import { Link } from "react-router-dom";
-import { ChartDocument, FolderDocument, Game, GetGPTString } from "tachi-common";
+import {
+	ChartDocument,
+	FolderDocument,
+	FormatDifficulty,
+	FormatDifficultySearch,
+	FormatDifficultyShort,
+	Game,
+	GetGameConfig,
+	GetGamePTConfig,
+	GetGPTString,
+	SongDocument,
+} from "tachi-common";
 import { GamePT } from "types/react";
 
 export default function ChartInfoFormat({
+	song,
 	chart,
 	game,
 	playtype,
-}: { chart: ChartDocument } & GamePT) {
+}: { chart: ChartDocument; song: SongDocument } & GamePT) {
 	const gptImpl = GPT_CLIENT_IMPLEMENTATIONS[GetGPTString(game, playtype)];
 
 	const ratingSystems = gptImpl.ratingSystems;
@@ -71,7 +83,7 @@ export default function ChartInfoFormat({
 				)}
 			</Col>
 			<Col xs={12} lg={4}>
-				<ChartInfoMiddle chart={chart} game={game} />
+				<ChartInfoMiddle song={song} chart={chart} game={game} />
 			</Col>
 			<Col xs={12} lg={3}>
 				{ratingSystems.length !== 0 &&
@@ -121,7 +133,15 @@ export default function ChartInfoFormat({
 	);
 }
 
-function ChartInfoMiddle({ game, chart }: { chart: ChartDocument; game: Game }) {
+function ChartInfoMiddle({
+	game,
+	song,
+	chart,
+}: {
+	song: SongDocument;
+	chart: ChartDocument;
+	game: Game;
+}) {
 	if (game === "bms") {
 		const bmsChart = chart as ChartDocument<"bms:7K" | "bms:14K">;
 
@@ -154,5 +174,22 @@ function ChartInfoMiddle({ game, chart }: { chart: ChartDocument; game: Game })
 		);
 	}
 
-	return <></>;
+	const gameConfig = GetGameConfig(game);
+
+	const diff = FormatDifficultySearch(chart, game);
+	let search = `${gameConfig.name} ${song.title}`;
+
+	if (diff !== null) {
+		search += ` ${diff}`;
+	}
+
+	return (
+		<>
+			<ExternalLink
+				href={`https://youtube.com/results?search_query=${encodeURIComponent(search)}`}
+			>
+				Search YouTube
+			</ExternalLink>
+		</>
+	);
 }

common/src/utils/util.ts

@@ -101,6 +101,48 @@ export function FormatDifficultyShort(chart: ChartDocument, game: Game): string
 	return `${chart.playtype}${shortDiff} ${chart.level}`;
 }
 
+/**
+ * Formats a chart's difficulty for searching, such as forwarding this query to youtube.
+ */
+export function FormatDifficultySearch(chart: ChartDocument, game: Game): string | null {
+	const gptConfig = GetGamePTConfig(game, chart.playtype);
+
+	if (game === "itg") {
+		const itgChart = chart as ChartDocument<"itg:Stamina">;
+
+		return `S${itgChart.data.difficultyTag} ${chart.level}`;
+	}
+
+	if (gptConfig.difficulties.type === "DYNAMIC") {
+		// TODO cap string length
+		return chart.difficulty;
+	}
+
+	const shortDiff = gptConfig.difficulties.shorthand[chart.difficulty] ?? chart.difficulty;
+
+	switch (game) {
+		case "jubeat":
+		case "maimai":
+		case "museca":
+		case "maimaidx":
+		case "popn":
+		case "sdvx":
+		case "wacca":
+		case "arcaea":
+		case "ongeki":
+		case "chunithm":
+		case "usc":
+			return chart.difficulty;
+		case "iidx":
+			return `${chart.playtype}${shortDiff}`;
+		case "gitadora":
+			return shortDiff;
+		case "bms":
+		case "pms":
+			return null;
+	}
+}
+
 export function FormatGame(game: Game, playtype: Playtypes[Game]): string {
 	const gameConfig = GetGameConfig(game);