1 import PropTypes from 'prop-types';
2 import React, { useState } from 'react';
3 import { Button } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
6 import DetailDialog from './DetailDialog';
7 import Icon from '../common/Icon';
8 import Box from '../users/Box';
9 import { getIcon, getTime } from '../../helpers/Result';
10 import { maySeeResults } from '../../helpers/permissions';
11 import { findResult } from '../../helpers/User';
12 import { withUser } from '../../helpers/UserContext';
13 import i18n from '../../i18n';
15 const getClassName = result => {
16 const classNames = ['status'];
17 if (result && result.has_finished) {
18 classNames.push('finished');
20 classNames.push('has-comment');
23 classNames.push('pending');
25 return classNames.join(' ');
28 const twitchReg = /^https?:\/\/(www\.)?twitch\.tv/;
29 const youtubeReg = /^https?:\/\/(www\.)?youtu(\.be|be\.)/;
31 const getVoDVariant = result => {
32 if (!result || !result.vod) return 'outline-secondary';
33 if (twitchReg.test(result.vod)) {
36 if (youtubeReg.test(result.vod)) {
37 return 'outline-youtube';
39 return 'outline-secondary';
42 const getVoDIcon = result => {
43 const variant = getVoDVariant(result);
44 if (variant === 'twitch') {
45 return <Icon.TWITCH title="" />;
47 if (variant === 'outline-youtube') {
48 return <Icon.YOUTUBE title="" />;
50 return <Icon.VIDEO title="" />;
59 const [showDialog, setShowDialog] = useState(false);
60 const result = findResult(user, round);
61 const maySee = maySeeResults(authUser, tournament, round);
62 return <div className="result">
64 <div className="d-flex align-items-center justify-content-between">
66 className={getClassName(result)}
67 onClick={() => setShowDialog(true)}
68 title={maySee && result && result.comment ? result.comment : null}
70 <span className="time">
71 {getTime(result, maySee)}
73 {getIcon(result, maySee)}
75 {maySee && result && result.vod ?
81 title={i18n.t('results.vod')}
82 variant={getVoDVariant(result)}
89 onHide={() => setShowDialog(false)}
92 tournament={tournament}
99 authUser: PropTypes.shape({
101 round: PropTypes.shape({
103 tournament: PropTypes.shape({
105 user: PropTypes.shape({
109 export default withTranslation()(withUser(Item, 'authUser'));