X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftournament%2FScoreboard.js;h=27bb0873a4d7c75d4de6a3b15f25f1d514a07713;hb=4c5a82cb876e96c72c50e8bc12bd8a43a9afe847;hp=40ad82ff300724acda076a5f7038d1546b723c5e;hpb=d32516335ea2534e15256c948e9c38d3de40794b;p=alttp.git

diff --git a/resources/js/components/tournament/Scoreboard.js b/resources/js/components/tournament/Scoreboard.js
index 40ad82f..27bb087 100644
--- a/resources/js/components/tournament/Scoreboard.js
+++ b/resources/js/components/tournament/Scoreboard.js
@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, Table } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import Icon from '../common/Icon';
 import Box from '../users/Box';
 import { comparePlacement } from '../../helpers/Participant';
 import { getRunners } from '../../helpers/Tournament';
-import { withUser } from '../../helpers/UserContext';
-import i18n from '../../i18n';
+import { useUser } from '../../hooks/user';
 
 const getRowClassName = (tournament, participant, user) => {
 	const classNames = ['score'];
@@ -31,48 +30,77 @@ const getPlacementDisplay = participant => {
 	return participant.placement;
 };
 
-const Scoreboard = ({ tournament, user }) =>
-<Table striped className="scoreboard align-middle">
-	<thead>
-		<tr>
-			<th className="text-center">{i18n.t('participants.placementShort')}</th>
-			<th>{i18n.t('participants.participant')}</th>
-			<th className="text-end">{i18n.t('participants.scoreShort')}</th>
-		</tr>
-	</thead>
-	<tbody>
-	{getRunners(tournament).sort(comparePlacement).map(participant =>
-		<tr className={getRowClassName(tournament, participant, user)} key={participant.id}>
-			<td className="text-center">
-				{getPlacementDisplay(participant)}
-			</td>
-			<td>
-				<div className="d-flex align-items-center justify-content-between">
-					<Box user={participant.user} />
-					{participant.user.stream_link ?
-						<Button
-							href={participant.user.stream_link}
-							size="sm"
-							target="_blank"
-							title={i18n.t('users.stream')}
-							variant="outline-twitch"
-						>
-							<Icon.STREAM title="" />
-						</Button>
-					: null}
-				</div>
-			</td>
-			<td className="text-end">{participant.score}</td>
-		</tr>
-	)}
-	</tbody>
-</Table>;
+const twitchReg = /^https?:\/\/(www\.)?twitch\.tv/;
+const youtubeReg = /^https?:\/\/(www\.)?youtu(\.be|be\.)/;
+
+const getStreamVariant = participant => {
+	if (!participant || !participant.user || !participant.user.stream_link) {
+		return 'outline-secondary';
+	}
+	if (twitchReg.test(participant.user.stream_link)) {
+		return 'outline-twitch';
+	}
+	if (youtubeReg.test(participant.user.stream_link)) {
+		return 'outline-youtube';
+	}
+	return 'outline-secondary';
+};
+
+const getStreamIcon = participant => {
+	const variant = getStreamVariant(participant);
+	if (variant === 'outline-twitch') {
+		return <Icon.TWITCH title="" />;
+	}
+	if (variant === 'outline-youtube') {
+		return <Icon.YOUTUBE title="" />;
+	}
+	return <Icon.VIDEO title="" />;
+};
+
+const Scoreboard = ({ tournament }) => {
+	const { t } = useTranslation();
+	const { user } = useUser();
+
+	return <Table striped className="scoreboard align-middle">
+		<thead>
+			<tr>
+				<th className="text-center">{t('participants.placementShort')}</th>
+				<th>{t('participants.participant')}</th>
+				<th className="text-end">{t('participants.scoreShort')}</th>
+			</tr>
+		</thead>
+		<tbody>
+		{getRunners(tournament).sort(comparePlacement).map(participant =>
+			<tr className={getRowClassName(tournament, participant, user)} key={participant.id}>
+				<td className="text-center">
+					{getPlacementDisplay(participant)}
+				</td>
+				<td>
+					<div className="d-flex align-items-center justify-content-between">
+						<Box user={participant.user} />
+						{participant.user.stream_link ?
+							<Button
+								href={participant.user.stream_link}
+								size="sm"
+								target="_blank"
+								title={t('users.stream')}
+								variant={getStreamVariant(participant)}
+							>
+								{getStreamIcon(participant)}
+							</Button>
+						: null}
+					</div>
+				</td>
+				<td className="text-end">{participant.score}</td>
+			</tr>
+		)}
+		</tbody>
+	</Table>;
+};
 
 Scoreboard.propTypes = {
 	tournament: PropTypes.shape({
 	}),
-	user: PropTypes.shape({
-	}),
 };
 
-export default withTranslation()(withUser(Scoreboard));
+export default Scoreboard;