schedule responsive style

[alttp.git] / resources / js / components / episodes / Channel.js

diff --git a/resources/js/components/episodes/Channel.js b/resources/js/components/episodes/Channel.js
index 1943753617095c1da4b5da6075f77c6f1b05f892..d0360bd58dc4648fb83521a30940650ac9a915e6 100644 (file)
--- a/resources/js/components/episodes/Channel.js
+++ b/resources/js/components/episodes/Channel.js
@@ -3,9 +3,11 @@ import React from 'react';
 import { Button } from 'react-bootstrap';
 
 import Icon from '../common/Icon';
+import { mayEditRestream } from '../../helpers/permissions';
+import { withUser } from '../../helpers/UserContext';
 
-const Channel = ({ channel }) =>
-       <div className="episode-channel">
+const Channel = ({ channel, episode, onEditRestream, user }) =>
+       <div className="episode-channel text-nowrap">
                <Button
                        href={channel.stream_link}
                        rel="noreferer"
@@ -17,6 +19,15 @@ const Channel = ({ channel }) =>
                        {' '}
                        {channel.short_name || channel.title}
                </Button>
+               {onEditRestream && mayEditRestream(user, episode, channel) ?
+                       <Button
+                               className="ms-1"
+                               onClick={() => onEditRestream(episode, channel)}
+                               variant="outline-secondary"
+                       >
+                               <Icon.SETTINGS />
+                       </Button>
+               : null}
        </div>;
 
 Channel.propTypes = {
@@ -25,6 +36,11 @@ Channel.propTypes = {
                stream_link: PropTypes.string,
                title: PropTypes.string,
        }),
+       episode: PropTypes.shape({
+       }),
+       onEditRestream: PropTypes.func,
+       user: PropTypes.shape({
+       }),
 };
 
-export default Channel;
+export default withUser(Channel);