lbry-desktop/ui/component/commentReactions/view.jsx

126 lines
3.9 KiB
React
Raw Normal View History

// @flow
2021-07-20 17:08:08 +02:00
import { ENABLE_CREATOR_REACTIONS, SIMPLE_SITE } from 'config';
2020-10-01 20:43:44 +02:00
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
2020-10-01 20:43:44 +02:00
import * as REACTION_TYPES from 'constants/reactions';
import React from 'react';
import classnames from 'classnames';
import Button from 'component/button';
2020-10-27 17:24:31 +01:00
import ChannelThumbnail from 'component/channelThumbnail';
import { useHistory } from 'react-router';
type Props = {
2020-09-29 16:10:23 +02:00
myReacts: Array<string>,
othersReacts: any,
react: (string, string) => void,
commentId: string,
pendingCommentReacts: Array<string>,
2020-10-27 17:24:31 +01:00
claimIsMine: boolean,
activeChannelId: ?string,
2020-10-27 17:24:31 +01:00
claim: ?ChannelClaim,
doToast: ({ message: string }) => void,
};
export default function CommentReactions(props: Props) {
const { myReacts, othersReacts, commentId, react, claimIsMine, claim, activeChannelId, doToast } = props;
const {
push,
location: { pathname },
} = useHistory();
2020-10-28 16:55:10 +01:00
const canCreatorReact =
claim &&
claimIsMine &&
(claim.value_type === 'channel'
? claim.claim_id === activeChannelId
: claim.signing_channel && claim.signing_channel.claim_id === activeChannelId);
2020-10-28 16:55:10 +01:00
const authorUri =
claim && claim.value_type === 'channel'
? claim.canonical_url
: claim && claim.signing_channel && claim.signing_channel.canonical_url;
2020-09-29 16:10:23 +02:00
const getCountForReact = (type) => {
2020-10-01 20:43:44 +02:00
let count = 0;
if (othersReacts && othersReacts[type]) {
count += othersReacts[type];
}
if (myReacts && myReacts.includes(type)) {
count += 1;
}
return count;
};
2020-10-27 17:24:31 +01:00
const creatorLiked = getCountForReact(REACTION_TYPES.CREATOR_LIKE) > 0;
2021-07-20 17:08:08 +02:00
const likeIcon = SIMPLE_SITE
? myReacts.includes(REACTION_TYPES.LIKE)
? ICONS.FIRE_ACTIVE
: ICONS.FIRE
: ICONS.UPVOTE;
const dislikeIcon = SIMPLE_SITE
? myReacts.includes(REACTION_TYPES.DISLIKE)
? ICONS.SLIME_ACTIVE
: ICONS.SLIME
: ICONS.DOWNVOTE;
2020-10-27 17:24:31 +01:00
function handleCommentLike() {
if (activeChannelId) {
react(commentId, REACTION_TYPES.LIKE);
} else {
promptForChannel();
}
}
function handleCommentDislike() {
if (activeChannelId) {
react(commentId, REACTION_TYPES.DISLIKE);
} else {
promptForChannel();
}
}
function promptForChannel() {
push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}&lc=${commentId}`);
doToast({ message: __('A channel is required to throw fire and slime') });
}
2020-10-01 20:43:44 +02:00
return (
<>
<Button
requiresAuth={IS_WEB}
2020-10-01 20:43:44 +02:00
title={__('Upvote')}
2021-07-20 17:08:08 +02:00
icon={likeIcon}
2020-10-01 20:43:44 +02:00
className={classnames('comment__action', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
})}
onClick={handleCommentLike}
2020-10-27 17:24:31 +01:00
label={<span className="comment__reaction-count">{getCountForReact(REACTION_TYPES.LIKE)}</span>}
2020-10-01 20:43:44 +02:00
/>
<Button
requiresAuth={IS_WEB}
2020-10-01 20:43:44 +02:00
title={__('Downvote')}
2021-07-20 17:08:08 +02:00
icon={dislikeIcon}
2020-10-01 20:43:44 +02:00
className={classnames('comment__action', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
})}
onClick={handleCommentDislike}
2020-10-27 17:24:31 +01:00
label={<span className="comment__reaction-count">{getCountForReact(REACTION_TYPES.DISLIKE)}</span>}
2020-10-01 20:43:44 +02:00
/>
2020-10-27 17:24:31 +01:00
2020-10-28 03:16:46 +01:00
{ENABLE_CREATOR_REACTIONS && (canCreatorReact || creatorLiked) && (
<Button
iconOnly
disabled={!canCreatorReact || !claimIsMine}
requiresAuth={IS_WEB}
title={claimIsMine ? __('You loved this') : __('Creator loved this')}
icon={creatorLiked ? ICONS.CREATOR_LIKE : ICONS.SUBSCRIBE}
className={classnames('comment__action comment__action--creator-like')}
onClick={() => react(commentId, REACTION_TYPES.CREATOR_LIKE)}
>
ChannelThumbnail improvements - [x] (6332) The IntersectionObserver method of lazy-loading loads cached images visibly late on slower devices. Previously, it was also showing the "broken image" icon briefly, which we mended by placing a dummy transparent image as the initial src. - Reverted that ugly transparent image fix. - Use the browser's built-in `loading="lazy"` instead. Sorry, Safari. - [x] Size-optimization did not take "device pixel ratio" into account. - When resizing an image through the CDN, we can't just take the dimensions of the tag in pixels directly -- we need to take zooming into account, otherwise the image ends up blurry. - Previously, we quickly disabled optimization for the channel avatar in the Channel Page because of this. Now that we know the root-cause, the change was reverted and we now go through the CDN with appropriate sizes. This also improves our Web Vital scores. - [x] Size-optimization wasn't really implemented for all ChannelThumbnail instances. - The CDN-optimized size was hardcoded to the largest instance, so small images like sidebar thumbnails are still loading images that are unnecessarily larger. - There's a little-bit of hardcoding of values from CSS here, but I think it's a ok compromise (not something we change often). It also doesn't need to be exact -- the "device pixel ratio" calculate will ensure it's slightly larger than what we need. - [x] Set `width` and `height` of `<img>` to improve CLS. - Addresses Ligthhouse complaints, although technically the shifting was addressed at the `ClaimPreviewTile` level (sub-container dimensions are well defined). - Notes: the values don't need to be the final CSS-adjusted sizes. It just needs to be in the right aspect ratio to help the browser pre-allocate space to avoid shifts. - [x] Add option to disable lazy-load Channel Thumbnails - The guidelines mentioned that items that are already in the viewport should not enable `loading="lazy"`. - We have a few areas where it doesn't make sense to lazy-load (e.g. thumbnail in Header, channel selector dropdown, publish preview, etc.).
2021-07-05 07:20:40 +02:00
{creatorLiked && (
<ChannelThumbnail xsmall uri={authorUri} hideStakedIndicator className="comment__creator-like" />
)}
2020-10-28 03:16:46 +01:00
</Button>
2020-10-27 17:24:31 +01:00
)}
2020-10-01 20:43:44 +02:00
</>
);
}