feat: YouTube handle in nameplate (#752)

RTAinJapan · Aug 9, 2024 · c49b32d · c49b32d
1 parent 02868bb
commit c49b32d
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 22 deletions.
diff --git a/schemas/lib/run.json b/schemas/lib/run.json
@@ -28,6 +28,7 @@
 					"twitch": {"type": "string"},
 					"nico": {"type": "string"},
 					"twitter": {"type": "string"},
+					"youtube": {"type": "string"},
 					"camera": {
 						"type": "boolean",
 						"description": "人ごとのカメラ使用有無"
@@ -47,7 +48,8 @@
 							"name": {"type": "string"},
 							"twitch": {"type": "string"},
 							"nico": {"type": "string"},
-							"twitter": {"type": "string"}
+							"twitter": {"type": "string"},
+							"youtube": {"type": "string"}
 						},
 						"required": ["name"]
 					},

diff --git a/src/browser/dashboard/components/schedule/edit.tsx b/src/browser/dashboard/components/schedule/edit.tsx
@@ -215,17 +215,17 @@ export const EditRun: FC<Props> = ({edit, defaultValue, onFinish}) => {
 									}}
 								/>
 								<TextField
-									label={`走者${index + 1} ニコ生`}
-									value={runner.nico}
+									label={`走者${index + 1} Twitter`}
+									value={runner.twitter}
 									onChange={(e) => {
-										updateRunnerInfo(index, "nico", e.currentTarget.value);
+										updateRunnerInfo(index, "twitter", e.currentTarget.value);
 									}}
 								/>
 								<TextField
-									label={`走者${index + 1} Twitter`}
-									value={runner.twitter}
+									label={`走者${index + 1} YouTube`}
+									value={runner.youtube}
 									onChange={(e) => {
-										updateRunnerInfo(index, "twitter", e.currentTarget.value);
+										updateRunnerInfo(index, "youtube", e.currentTarget.value);
 									}}
 								/>
 								<FormControl>
@@ -310,19 +310,23 @@ export const EditRun: FC<Props> = ({edit, defaultValue, onFinish}) => {
 									}}
 								/>
 								<TextField
-									label={`解説${index + 1} ニコ生`}
-									defaultValue={commentator.nico}
+									label={`解説${index + 1} Twitter`}
+									defaultValue={commentator.twitter}
 									onChange={(e) => {
-										updateCommentatorInfo(index, "nico", e.currentTarget.value);
+										updateCommentatorInfo(
+											index,
+											"twitter",
+											e.currentTarget.value,
+										);
 									}}
 								/>
 								<TextField
-									label={`解説${index + 1} Twitter`}
-									defaultValue={commentator.twitter}
+									label={`解説${index + 1} YouTube`}
+									defaultValue={commentator.youtube}
 									onChange={(e) => {
 										updateCommentatorInfo(
 											index,
-											"twitter",
+											"youtube",
 											e.currentTarget.value,
 										);
 									}}

diff --git a/src/browser/graphics/components/nameplate/index.tsx b/src/browser/graphics/components/nameplate/index.tsx
@@ -2,7 +2,7 @@ import {ThinText, TimerText} from "../lib/text";
 import {useCurrentRun, useTimer} from "../lib/hooks";
 import iconTwitter from "../../images/icon/icon_twitter.svg";
 import iconTwitch from "../../images/icon/icon_twitch.svg";
-import iconNico from "../../images/icon/icon_nico.svg";
+import iconYoutube from "../../images/icon/icon_youtube.svg";
 import iconRunner from "../../images/icon/icon_runner.svg";
 import iconCommentator from "../../images/icon/icon_commentary.svg";
 import {CSSProperties, HTMLAttributes, useContext, useRef} from "react";
@@ -85,8 +85,8 @@ const NamePlateContent = ({
 							{display === "twitch" && (
 								<SocialText icon={iconTwitch} text={runner?.twitch} />
 							)}
-							{display === "nico" && (
-								<SocialText icon={iconNico} text={runner?.nico} />
+							{display === "youtube" && (
+								<SocialText icon={iconYoutube} text={runner?.youtube} />
 							)}
 						</FadeContainer>
 					)}
@@ -126,8 +126,8 @@ const NamePlateContent = ({
 								{display === "twitch" && (
 									<SocialText icon={iconTwitch} text={runner?.twitch} />
 								)}
-								{display === "nico" && (
-									<SocialText icon={iconNico} text={runner?.nico} />
+								{display === "youtube" && (
+									<SocialText icon={iconYoutube} text={runner?.youtube} />
 								)}
 							</FadeContainer>
 						)}

diff --git a/src/browser/graphics/components/nameplate/sync-display.tsx b/src/browser/graphics/components/nameplate/sync-display.tsx
@@ -2,7 +2,7 @@ import gsap from "gsap";
 import {ReactNode, createContext, useEffect, useState} from "react";
 import {useReplicant} from "../../../use-replicant";
 
-type DisplayLabel = "name" | "twitter" | "twitch" | "nico";
+type DisplayLabel = "name" | "twitter" | "twitch" | "youtube";
 
 export const SyncDisplayContext = createContext<DisplayLabel>("name");
 
@@ -17,14 +17,14 @@ export const SyncDisplayProvider = ({children}: {children: ReactNode}) => {
 
 	const displayTwitter = participants.some((p) => Boolean(p?.twitter));
 	const displayTwitch = participants.some((p) => Boolean(p?.twitch));
-	const displayNico = participants.some((p) => Boolean(p?.nico));
+	const displayYoutube = participants.some((p) => Boolean(p?.youtube));
 
 	useEffect(() => {
 		const tl = gsap.timeline({repeat: -1});
 		const displays: DisplayLabel[] = [
 			displayTwitter ? "twitter" : null,
 			displayTwitch ? "twitch" : null,
-			displayNico ? "nico" : null,
+			displayYoutube ? "youtube" : null,
 			"name",
 		].filter((v): v is DisplayLabel => v !== null);
 		for (const social of displays) {
@@ -39,7 +39,7 @@ export const SyncDisplayProvider = ({children}: {children: ReactNode}) => {
 		return () => {
 			tl.kill();
 		};
-	}, [displayTwitter, displayTwitch, displayNico]);
+	}, [displayTwitter, displayTwitch, displayYoutube]);
 
 	return (
 		<SyncDisplayContext.Provider value={display}>

diff --git a/src/extension/tracker.ts b/src/extension/tracker.ts
@@ -91,6 +91,7 @@ export const tracker = async (nodecg: NodeCG) => {
 					twitter: el["Twitter ID"] as string,
 					twitch: el["Twitch ID"] as string,
 					nico: el["ニコニココミュニティ ID"] as string,
+					youtube: el["YouTube ハンドル"] as string,
 					gameCategory: el["担当ゲームカテゴリ"] as string,
 				};
 			});
@@ -145,6 +146,7 @@ export const tracker = async (nodecg: NodeCG) => {
 								name: runner?.fields.name ?? "",
 								twitch: runner?.fields.twitch,
 								nico: runner?.fields.nico,
+								youtube: runner?.fields.youtube,
 								twitter: runner?.fields.twitter,
 								camera: true,
 							};