resources/js/components/episodes/Player.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button } from 'react-bootstrap';
   4
   5 import { getAvatarUrl } from '../../helpers/User';
   6
   7 const getName = player => {
   8         if (player.name_override) {
   9                 return player.name_override;
  10         }
  11         if (player.user) {
  12                 return player.user.nickname || player.user.username;
  13         }
  14         return '';
  15 };
  16
  17 const getStreamLink = player => {
  18         if (player.stream_override) {
  19                 return `https://twitch.tv/${player.stream_override}`;
  20         }
  21         if (player.user && player.user.stream_link) {
  22                 return player.user.stream_link;
  23         }
  24         return '';
  25 };
  26
  27 const Player = ({ player }) => {
  28         return <div className="episode-player my-3">
  29                 <Button
  30                         className="player-link"
  31                         href={getStreamLink(player)}
  32                         rel="noreferrer"
  33                         target="_blank"
  34                         variant="outline-twitch"
  35                 >
  36                         <img alt="" src={getAvatarUrl(player.user)} />
  37                         <span className="text-light fs-4">{getName(player)}</span>
  38                 </Button>
  39         </div>;
  40 };
  41
  42 Player.propTypes = {
  43         player: PropTypes.shape({
  44                 id: PropTypes.number,
  45                 name_override: PropTypes.string,
  46                 stream_override: PropTypes.string,
  47                 user: PropTypes.shape({
  48                 }),
  49         }),
  50 };
  51
  52 export default Player;