ad19495702
Naomi comment websockets increase slow mode time to 5 seconds fix to prevent duplicate comments update livestream details fix channel pin electron boom fix rebase prune unused icons updating meme updating meme update livestream for naomi fix rebase DigitalCashNetwork remove electroboom pin Slavguns Joel So he can edit his claims add streamTypes param to claimTilesDiscover so following section can search for all types of content fix typo
102 lines
3.1 KiB
JavaScript
102 lines
3.1 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import React, { useRef } from 'react';
|
|
import { parseURI } from 'lbry-redux';
|
|
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) => void,
|
|
doChannelUnsubscribe: (SubscriptionArgs) => void,
|
|
showSnackBarOnSubscribe: boolean,
|
|
doToast: ({ message: string }) => void,
|
|
shrinkOnMobile: boolean,
|
|
notificationsDisabled: boolean,
|
|
};
|
|
|
|
export default function SubscribeButton(props: Props) {
|
|
const {
|
|
permanentUrl,
|
|
doChannelSubscribe,
|
|
doChannelUnsubscribe,
|
|
isSubscribed,
|
|
showSnackBarOnSubscribe,
|
|
doToast,
|
|
shrinkOnMobile = false,
|
|
notificationsDisabled,
|
|
} = props;
|
|
|
|
const buttonRef = useRef();
|
|
const isMobile = useIsMobile();
|
|
let isHovering = useHover(buttonRef);
|
|
isHovering = isMobile ? true : isHovering;
|
|
|
|
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');
|
|
const unfollowOverride = isSubscribed && isHovering && __('Unfollow');
|
|
|
|
const label = isMobile && shrinkOnMobile ? '' : unfollowOverride || subscriptionLabel;
|
|
const titlePrefix = isSubscribed ? __('Unfollow this channel') : __('Follow this channel');
|
|
|
|
return permanentUrl ? (
|
|
<div className="button-group">
|
|
<Button
|
|
ref={buttonRef}
|
|
iconColor="red"
|
|
largestLabel={isMobile && shrinkOnMobile ? '' : subscriptionLabel}
|
|
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE}
|
|
button={'alt'}
|
|
requiresAuth={IS_WEB}
|
|
label={label}
|
|
title={titlePrefix}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
|
|
subscriptionHandler({
|
|
channelName: claimName,
|
|
uri: permanentUrl,
|
|
notificationsDisabled: true,
|
|
});
|
|
|
|
if (showSnackBarOnSubscribe) {
|
|
doToast({ message: __('Now following %channel%!', { channel: claimName }) });
|
|
}
|
|
}}
|
|
/>
|
|
{isSubscribed && (
|
|
<Button
|
|
button="alt"
|
|
icon={notificationsDisabled ? ICONS.BELL : ICONS.BELL_ON}
|
|
aria-label={notificationsDisabled ? __('Turn on notifications') : __('Turn off notifications')}
|
|
onClick={() => {
|
|
const newNotificationsDisabled = !notificationsDisabled;
|
|
|
|
doChannelSubscribe({
|
|
channelName: claimName,
|
|
uri: permanentUrl,
|
|
notificationsDisabled: newNotificationsDisabled,
|
|
});
|
|
|
|
if (newNotificationsDisabled === false) {
|
|
doToast({ message: __('Notifications turned on for %channel%!', { channel: claimName }) });
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
) : null;
|
|
}
|