152 lines
4.3 KiB
JavaScript
152 lines
4.3 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import React, { useRef } from 'react';
|
|
import { parseURI } from 'util/lbryURI';
|
|
import Button from 'component/button';
|
|
import useHover from 'effects/use-hover';
|
|
import { useIsMobile } from 'effects/use-screensize';
|
|
|
|
type SubscriptionArgs = {
|
|
channelName: string,
|
|
uri: string,
|
|
notificationsDisabled?: boolean,
|
|
};
|
|
|
|
type Props = {
|
|
permanentUrl: ?string,
|
|
isSubscribed: boolean,
|
|
doChannelSubscribe: (SubscriptionArgs, boolean) => void,
|
|
doChannelUnsubscribe: (SubscriptionArgs, boolean) => void,
|
|
doToast: ({ message: string }) => void,
|
|
shrinkOnMobile: boolean,
|
|
notificationsDisabled: boolean,
|
|
user: ?User,
|
|
uri: string,
|
|
};
|
|
|
|
export default function SubscribeButton(props: Props) {
|
|
const {
|
|
permanentUrl,
|
|
doChannelSubscribe,
|
|
doChannelUnsubscribe,
|
|
isSubscribed,
|
|
doToast,
|
|
shrinkOnMobile = false,
|
|
notificationsDisabled,
|
|
uri,
|
|
} = props;
|
|
|
|
const buttonRef = useRef();
|
|
const isMobile = useIsMobile();
|
|
let isHovering = useHover(buttonRef);
|
|
isHovering = isMobile ? true : isHovering;
|
|
|
|
const { channelName: rawChannelName } = parseURI(uri);
|
|
|
|
let channelName;
|
|
|
|
if (permanentUrl) {
|
|
try {
|
|
const { channelName: name } = parseURI(permanentUrl);
|
|
if (name) {
|
|
channelName = name;
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
const claimName = channelName && '@' + channelName;
|
|
|
|
const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
|
|
const subscriptionLabel = isSubscribed
|
|
? __('Following --[button label indicating a channel has been followed]--')
|
|
: __('Follow');
|
|
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-group-subscribed">
|
|
<Button
|
|
ref={buttonRef}
|
|
iconColor="red"
|
|
largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
|
|
icon={ICONS.UNSUBSCRIBE}
|
|
button={'alt'}
|
|
label={label}
|
|
title={titlePrefix}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
|
|
subscriptionHandler(
|
|
{
|
|
channelName: '@' + rawChannelName,
|
|
uri: uri,
|
|
notificationsDisabled: true,
|
|
},
|
|
true
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return permanentUrl && claimName ? (
|
|
<div className="button-group">
|
|
<Button
|
|
ref={buttonRef}
|
|
iconColor="red"
|
|
className={isSubscribed ? 'button-following' : ''}
|
|
largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
|
|
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : isSubscribed ? ICONS.SUBSCRIBED : ICONS.SUBSCRIBE}
|
|
button={'alt'}
|
|
label={label}
|
|
title={titlePrefix}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
|
|
subscriptionHandler(
|
|
{
|
|
channelName: claimName,
|
|
uri: permanentUrl,
|
|
notificationsDisabled: true,
|
|
},
|
|
true
|
|
);
|
|
}}
|
|
/>
|
|
{isSubscribed && (
|
|
<>
|
|
<Button
|
|
button="alt"
|
|
icon={notificationsDisabled ? ICONS.BELL : ICONS.BELL_ON}
|
|
className={isSubscribed ? 'button-following' : ''}
|
|
aria-label={notificationsDisabled ? __('Turn on notifications') : __('Turn off notifications')}
|
|
onClick={() => {
|
|
const newNotificationsDisabled = !notificationsDisabled;
|
|
|
|
doChannelSubscribe(
|
|
{
|
|
channelName: claimName,
|
|
uri: permanentUrl,
|
|
notificationsDisabled: newNotificationsDisabled,
|
|
},
|
|
false
|
|
);
|
|
|
|
doToast({
|
|
message: __(
|
|
newNotificationsDisabled
|
|
? 'Notifications turned off for %channel%'
|
|
: 'Notifications turned on for %channel%!',
|
|
{ channel: claimName }
|
|
),
|
|
});
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : null;
|
|
}
|