+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+
+import { getAvatarUrl } from '../../helpers/User';
+
+const getName = player => {
+ if (player.name_override) {
+ return player.name_override;
+ }
+ if (player.user) {
+ return player.user.nickname || player.user.username;
+ }
+ return '';
+};
+
+const getStreamLink = player => {
+ if (player.stream_override) {
+ return `https://twitch.tv/${player.stream_override}`;
+ }
+ if (player.user && player.user.stream_link) {
+ return player.user.stream_link;
+ }
+ return '';
+};
+
+const Player = ({ player }) => {
+ return <div className="episode-player my-3">
+ <Button
+ className="player-link"
+ href={getStreamLink(player)}
+ rel="noreferrer"
+ target="_blank"
+ variant="outline-twitch"
+ >
+ <img alt="" src={getAvatarUrl(player.user)} />
+ <span className="text-light fs-4">{getName(player)}</span>
+ </Button>
+ </div>;
+};
+
+Player.propTypes = {
+ player: PropTypes.shape({
+ id: PropTypes.number,
+ name_override: PropTypes.string,
+ stream_override: PropTypes.string,
+ user: PropTypes.shape({
+ }),
+ }),
+};
+
+export default Player;