Added size attr for <VodsFollowUnfollowBtn> and added VodsFollowUnfol…

…lowBtn and AddUpdateNotificationsButton to Twitch Player and channel pages.
mambans · Apr 18, 2021 · a25ef6b · a25ef6b
1 parent 1482fd0
commit a25ef6b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 11 deletions.
diff --git a/frontend/src/components/sharedComponents/sharedStyledComponents.js b/frontend/src/components/sharedComponents/sharedStyledComponents.js
@@ -539,7 +539,7 @@ export const VodAddRemoveButton = styled(Button).attrs({ variant: 'link' })`
   padding: 0px;
   opacity: ${({ loweropacity }) => loweropacity || 1};
   margin-right: ${({ marginright }) => marginright || 'unset'};
-  opacity: 0;
+  /* opacity: 0; */
   transition: opacity 250ms, transform 250ms;
 
   &:hover {

diff --git a/frontend/src/components/twitch/channelPage/index.js b/frontend/src/components/twitch/channelPage/index.js
@@ -41,6 +41,8 @@ import useEventListenerMemo from '../../../hooks/useEventListenerMemo';
 import useQuery from '../../../hooks/useQuery';
 import loginNameFormat from '../loginNameFormat';
 import useToken from '../useToken';
+import VodsFollowUnfollowBtn from '../vods/VodsFollowUnfollowBtn';
+import AddUpdateNotificationsButton from '../AddUpdateNotificationsButton';
 
 export default () => {
   const { passedChannelData } = useLocation().state || {};
@@ -439,17 +441,22 @@ export default () => {
                               src={`${process.env.PUBLIC_URL}/partnered.png`}
                             />
                           )}
-
                           <FollowUnfollowBtn
                             show={channelInfo}
                             channelName={channelName}
                             id={channelInfo._id}
                           />
-                          {/* <AddUpdateNotificationsButton
+                          <VodsFollowUnfollowBtn
+                            size={28}
+                            channel={channelInfo.name || channelName}
+                            channelId={channelInfo._id}
+                          />
+
+                          <AddUpdateNotificationsButton
                             show={channelInfo}
-                            channel={channelName}
-                            size={30}
-                          /> */}
+                            channel={channelInfo.name || channelName}
+                            size={26}
+                          />
                         </div>
                         <Link
                           to={{

diff --git a/frontend/src/components/twitch/player/Player.js b/frontend/src/components/twitch/player/Player.js
@@ -55,6 +55,8 @@ import toggleFullscreenFunc from './toggleFullscreenFunc';
 import useToken from '../useToken';
 import useFullscreen from '../../../hooks/useFullscreen';
 import ToolTip from '../../sharedComponents/ToolTip';
+import VodsFollowUnfollowBtn from '../vods/VodsFollowUnfollowBtn';
+import AddUpdateNotificationsButton from '../AddUpdateNotificationsButton';
 
 const DEFAULT_CHAT_WIDTH = Math.max(window.innerWidth * 0.1, 175);
 
@@ -416,13 +418,27 @@ export default () => {
                       ref={link1}
                       href={`https://www.twitch.tv/${streamInfo?.user_name || channelName}`}
                     >
-                      <FaTwitch size={30} color='purple' />
+                      <FaTwitch size={26} color='purple' />
                     </a>
 
                     <FollowUnfollowBtn
                       channelName={streamInfo?.user_name || channelName}
                       id={streamInfo.user_id || twitchVideoPlayer.current.getChannelId()}
                     />
+
+                    <VodsFollowUnfollowBtn
+                      size={28}
+                      channel={streamInfo?.user_name || channelName}
+                      channelId={streamInfo.user_id}
+                      marginright='5px;'
+                    />
+
+                    <AddUpdateNotificationsButton
+                      channel={streamInfo?.user_name || channelName}
+                      marginright='5px;'
+                      size={26}
+                    />
+
                     <ToolTip
                       placement={'right'}
                       delay={{ show: 500, hide: 0 }}

diff --git a/frontend/src/components/twitch/vods/VodsFollowUnfollowBtn.js b/frontend/src/components/twitch/vods/VodsFollowUnfollowBtn.js
@@ -21,7 +21,15 @@ import ToolTip from '../../sharedComponents/ToolTip';
  * @param {Boolean} [show = true] - mount/show button.
  */
 
-export default ({ channel, channelId, loweropacity, marginright, className, show = true }) => {
+export default ({
+  channel,
+  channelId,
+  loweropacity,
+  marginright,
+  className,
+  show = true,
+  size,
+}) => {
   const { vods, setVods, channels, setChannels } = useContext(VodsContext) || {};
   const { authKey, username } = useContext(AccountContext);
   const [isHovered, setIsHovered] = useState();
@@ -102,12 +110,12 @@ export default ({ channel, channelId, loweropacity, marginright, className, show
       >
         {vodEnabled ? (
           isHovered ? (
-            <MdVideocamOff size='1.4em' color='red' />
+            <MdVideocamOff size={size || '1.4em'} color='red' />
           ) : (
-            <MdVideocam size='1.4em' color='green' />
+            <MdVideocam size={size || '1.4em'} color='green' />
           )
         ) : (
-          <MdVideoCall size='1.4em' />
+          <MdVideoCall size={size || '1.4em'} />
         )}
       </VodAddRemoveButton>
     </ToolTip>