drop follow label for mobile inside claimPreviewTile to save space
This commit is contained in:
parent
48d03019d6
commit
618ecfb639
3 changed files with 7 additions and 3 deletions
|
@ -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",
|
||||||
|
|
|
@ -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 })
|
||||||
|
|
|
@ -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();
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue