improved user context

[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..e2d25d72bf209e59a69fc3d1ca36c79618a3f8cd 100644 (file)
--- a/resources/js/components/episodes/Channel.js
+++ b/resources/js/components/episodes/Channel.js
@@ -3,9 +3,13 @@ import React from 'react';
 import { Button } from 'react-bootstrap';
 
 import Icon from '../common/Icon';
+import { mayEditRestream } from '../../helpers/permissions';
+import { useUser } from '../../hooks/user';
 
-const Channel = ({ channel }) =>
-       <div className="episode-channel">
+const Channel = ({ channel, episode, onEditRestream }) => {
+       const { user } = useUser();
+
+       return <div className="episode-channel text-nowrap">
                <Button
                        href={channel.stream_link}
                        rel="noreferer"
@@ -17,7 +21,17 @@ 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 = {
        channel: PropTypes.shape({
@@ -25,6 +39,9 @@ Channel.propTypes = {
                stream_link: PropTypes.string,
                title: PropTypes.string,
        }),
+       episode: PropTypes.shape({
+       }),
+       onEditRestream: PropTypes.func,
 };
 
 export default Channel;