lbry-desktop/ui/component/subscribeButton/view.jsx

129 lines
3.9 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import * as ICONS from 'constants/icons';
import React, { useRef } from 'react';
2018-11-21 22:20:55 +01:00
import { parseURI } from 'lbry-redux';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-09-27 20:56:15 +02:00
import useHover from 'effects/use-hover';
2020-08-10 22:47:39 +02:00
import { useIsMobile } from 'effects/use-screensize';
2021-07-06 19:01:55 +02:00
import { ENABLE_UI_NOTIFICATIONS } from 'config';
2018-03-26 23:32:43 +02:00
type SubscriptionArgs = {
2018-03-26 23:32:43 +02:00
channelName: string,
uri: string,
2020-11-02 17:51:08 +01:00
notificationsDisabled?: boolean,
2018-03-26 23:32:43 +02:00
};
type Props = {
2019-09-04 06:22:31 +02:00
permanentUrl: ?string,
2018-10-19 22:38:07 +02:00
isSubscribed: boolean,
2021-07-05 18:49:58 +02:00
doChannelSubscribe: (SubscriptionArgs, boolean) => void,
doChannelUnsubscribe: (SubscriptionArgs, boolean) => void,
2018-11-21 22:20:55 +01:00
doToast: ({ message: string }) => void,
shrinkOnMobile: boolean,
2020-11-02 17:51:08 +01:00
notificationsDisabled: boolean,
user: ?User,
uri: string,
2018-03-26 23:32:43 +02:00
};
2019-06-11 20:10:58 +02:00
export default function SubscribeButton(props: Props) {
2018-03-26 23:32:43 +02:00
const {
2019-09-04 06:22:31 +02:00
permanentUrl,
2018-03-26 23:32:43 +02:00
doChannelSubscribe,
doChannelUnsubscribe,
2018-10-19 22:38:07 +02:00
isSubscribed,
2018-11-21 22:20:55 +01:00
doToast,
shrinkOnMobile = false,
2020-11-02 17:51:08 +01:00
notificationsDisabled,
user,
uri,
2018-03-26 23:32:43 +02:00
} = props;
2019-06-28 09:33:07 +02:00
const buttonRef = useRef();
const isMobile = useIsMobile();
let isHovering = useHover(buttonRef);
isHovering = isMobile ? true : isHovering;
2021-07-06 19:01:55 +02:00
const uiNotificationsEnabled = (user && user.experimental_ui) || ENABLE_UI_NOTIFICATIONS;
const { channelName: rawChannelName } = parseURI(uri);
2019-09-04 06:22:31 +02:00
const { channelName } = parseURI(permanentUrl);
const claimName = '@' + channelName;
const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
const subscriptionLabel = isSubscribed
? __('Following --[button label indicating a channel has been followed]--')
: __('Follow');
2019-06-28 09:33:07 +02:00
const unfollowOverride = isSubscribed && isHovering && __('Unfollow');
const label = isMobile && shrinkOnMobile ? '' : unfollowOverride || subscriptionLabel;
const titlePrefix = isSubscribed ? __('Unfollow this channel') : __('Follow this channel');
if (isSubscribed && !permanentUrl && rawChannelName) {
return (
<div className="button-group">
<Button
ref={buttonRef}
iconColor="red"
largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
icon={ICONS.UNSUBSCRIBE}
button={'alt'}
requiresAuth={IS_WEB}
label={label}
title={titlePrefix}
onClick={(e) => {
e.stopPropagation();
subscriptionHandler({
channelName: '@' + rawChannelName,
uri: uri,
notificationsDisabled: true,
2021-07-05 18:49:58 +02:00
}, true);
}}
/>
</div>
);
}
2019-09-04 06:22:31 +02:00
return permanentUrl ? (
2020-11-02 17:51:08 +01:00
<div className="button-group">
<Button
ref={buttonRef}
iconColor="red"
largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : isSubscribed ? ICONS.SUBSCRIBED : ICONS.SUBSCRIBE}
2020-11-02 17:51:08 +01:00
button={'alt'}
requiresAuth={IS_WEB}
label={label}
title={titlePrefix}
onClick={(e) => {
2020-11-02 17:51:08 +01:00
e.stopPropagation();
2020-11-02 17:51:08 +01:00
subscriptionHandler({
channelName: claimName,
uri: permanentUrl,
notificationsDisabled: true,
2021-07-05 18:49:58 +02:00
}, true);
2020-11-02 17:51:08 +01:00
}}
/>
{isSubscribed && uiNotificationsEnabled && (
2020-11-02 17:51:08 +01:00
<Button
button="alt"
icon={notificationsDisabled ? ICONS.BELL : ICONS.BELL_ON}
aria-label={notificationsDisabled ? __('Turn on notifications') : __('Turn off notifications')}
2020-11-02 17:51:08 +01:00
onClick={() => {
const newNotificationsDisabled = !notificationsDisabled;
doChannelSubscribe({
channelName: claimName,
uri: permanentUrl,
notificationsDisabled: newNotificationsDisabled,
2021-07-05 18:49:58 +02:00
}, false);
2020-11-02 17:51:08 +01:00
2021-07-05 18:49:58 +02:00
doToast({ message: __(newNotificationsDisabled ? 'Notifications turned off for %channel%' : 'Notifications turned on for %channel%!',
{ channel: claimName }) });
2020-11-02 17:51:08 +01:00
}}
/>
)}
</div>
2019-09-04 06:22:31 +02:00
) : null;
2019-06-11 20:10:58 +02:00
}