drop follow label for mobile inside claimPreviewTile to save space

This commit is contained in:
Sean Yesmunt 2020-04-02 10:26:32 -04:00
parent 48d03019d6
commit 618ecfb639
3 changed files with 7 additions and 3 deletions

View file

@ -1085,7 +1085,6 @@
"Kannada": "Kannada",
"Transcoding this %size%MB file should take under %processTime% %units%.": "Transcoding this %size%MB file should take under %processTime% %units%.",
"FFmpeg not configured. More in %settings_link%.": "FFmpeg not configured. More in %settings_link%.",
"File Details": "File Details",
"LBC Details": "LBC Details",
"Publish Amount": "Publish Amount",
"Supports and Tips": "Supports and Tips",

View file

@ -187,7 +187,7 @@ function ClaimPreviewTile(props: Props) {
<div className="claim-tile__info">
{isChannel ? (
<div className="claim-tile__about--channel">
<SubscribeButton uri={uri} />
<SubscribeButton uri={uri} shrinkOnMobile />
<span className="claim-tile__publishes">
{claimsInChannel === 1
? __('%claimsInChannel% publish', { claimsInChannel })

View file

@ -5,6 +5,7 @@ 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-is-mobile';
type SubscriptionArgs = {
channelName: string,
@ -20,6 +21,7 @@ type Props = {
doOpenModal: (id: string) => void,
showSnackBarOnSubscribe: boolean,
doToast: ({ message: string }) => void,
shrinkOnMobile: boolean,
};
export default function SubscribeButton(props: Props) {
@ -32,14 +34,17 @@ export default function SubscribeButton(props: Props) {
isSubscribed,
showSnackBarOnSubscribe,
doToast,
shrinkOnMobile = false,
} = props;
const buttonRef = useRef();
const isHovering = useHover(buttonRef);
const isMobile = useIsMobile();
const { channelName } = parseURI(permanentUrl);
const claimName = '@' + channelName;
const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
const subscriptionLabel = isSubscribed ? __('Following') : __('Follow');
const unfollowOverride = isSubscribed && isHovering && __('Unfollow');
const label = isMobile && shrinkOnMobile ? '' : unfollowOverride || subscriptionLabel;
return permanentUrl ? (
<Button
@ -48,7 +53,7 @@ export default function SubscribeButton(props: Props) {
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE}
button={'alt'}
requiresAuth={IS_WEB}
label={unfollowOverride || subscriptionLabel}
label={label}
onClick={e => {
e.stopPropagation();