resources/js/components/episodes/Channel.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button } from 'react-bootstrap';
   4
   5 import Icon from '../common/Icon';
   6 import { mayEditRestream } from '../../helpers/permissions';
   7 import { useUser } from '../../hooks/user';
   8
   9 const Channel = ({ channel, episode, onEditRestream }) => {
  10         const { user } = useUser();
  11
  12         return <div className="episode-channel text-nowrap">
  13                 <Button
  14                         href={channel.stream_link}
  15                         rel="noreferer"
  16                         target="_blank"
  17                         title={channel.title}
  18                         variant="outline-twitch"
  19                 >
  20                         <Icon.STREAM />
  21                         {' '}
  22                         {channel.short_name || channel.title}
  23                 </Button>
  24                 {onEditRestream && mayEditRestream(user, episode, channel) ?
  25                         <Button
  26                                 className="ms-1"
  27                                 onClick={() => onEditRestream(episode, channel)}
  28                                 variant="outline-secondary"
  29                         >
  30                                 <Icon.SETTINGS />
  31                         </Button>
  32                 : null}
  33         </div>;
  34 };
  35
  36 Channel.propTypes = {
  37         channel: PropTypes.shape({
  38                 short_name: PropTypes.string,
  39                 stream_link: PropTypes.string,
  40                 title: PropTypes.string,
  41         }),
  42         episode: PropTypes.shape({
  43         }),
  44         onEditRestream: PropTypes.func,
  45 };
  46
  47 export default Channel;