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", "Kannada": "Kannada",
"Transcoding this %size%MB file should take under %processTime% %units%.": "Transcoding this %size%MB file should take under %processTime% %units%.", "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%.", "FFmpeg not configured. More in %settings_link%.": "FFmpeg not configured. More in %settings_link%.",
"File Details": "File Details",
"LBC Details": "LBC Details", "LBC Details": "LBC Details",
"Publish Amount": "Publish Amount", "Publish Amount": "Publish Amount",
"Supports and Tips": "Supports and Tips", "Supports and Tips": "Supports and Tips",

View file

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

View file

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