-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>;
+};