diff --git a/ui/component/fileReactions/view.jsx b/ui/component/fileReactions/view.jsx index 7221b40ea..e8c10ae4f 100644 --- a/ui/component/fileReactions/view.jsx +++ b/ui/component/fileReactions/view.jsx @@ -1,10 +1,12 @@ // @flow +import * as REACTION_TYPES from 'constants/reactions'; import * as ICONS from 'constants/icons'; import React from 'react'; import classnames from 'classnames'; import Button from 'component/button'; import { formatNumberWithCommas } from 'util/number'; import NudgeFloating from 'component/nudgeFloating'; +import { SIMPLE_SITE } from 'config'; type Props = { claim: StreamClaim, @@ -15,18 +17,51 @@ type Props = { likeCount: number, dislikeCount: number, myReaction: ?string, + livestream?: boolean, }; function FileReactions(props: Props) { - const { claim, uri, doFetchReactions, doReactionLike, doReactionDislike, likeCount, dislikeCount } = props; + const { + claim, + uri, + doFetchReactions, + doReactionLike, + doReactionDislike, + myReaction, + likeCount, + dislikeCount, + livestream, + } = props; + const claimId = claim && claim.claim_id; const channel = claim && claim.signing_channel && claim.signing_channel.name; const isCollection = claim && claim.value_type === 'collection'; // hack because nudge gets cut off by card on cols. + const likeIcon = SIMPLE_SITE ? (myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE) : ICONS.UPVOTE; + const dislikeIcon = SIMPLE_SITE + ? myReaction === REACTION_TYPES.DISLIKE + ? ICONS.SLIME_ACTIVE + : ICONS.SLIME + : ICONS.DOWNVOTE; React.useEffect(() => { - if (claimId) { + function fetchReactions() { doFetchReactions(claimId); } - }, [claimId, doFetchReactions]); + + let fetchInterval; + if (claimId) { + fetchReactions(); + + if (livestream) { + fetchInterval = setInterval(fetchReactions, 45000); + } + } + + return () => { + if (fetchInterval) { + clearInterval(fetchInterval); + } + }; + }, [claimId, doFetchReactions, livestream]); return ( <> @@ -41,20 +76,46 @@ function FileReactions(props: Props) { title={__('I like this')} requiresAuth={IS_WEB} authSrc="filereaction_like" - className={classnames('button--file-action')} - label={formatNumberWithCommas(likeCount, 0)} + className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })} + label={ + <> + {myReaction === REACTION_TYPES.LIKE && SIMPLE_SITE && ( + <> + <div className="button__fire-glow" /> + <div className="button__fire-particle1" /> + <div className="button__fire-particle2" /> + <div className="button__fire-particle3" /> + <div className="button__fire-particle4" /> + <div className="button__fire-particle5" /> + <div className="button__fire-particle6" /> + </> + )} + {formatNumberWithCommas(likeCount, 0)} + </> + } iconSize={18} - icon={ICONS.UPVOTE} + icon={likeIcon} onClick={() => doReactionLike(uri)} /> <Button requiresAuth={IS_WEB} authSrc={'filereaction_dislike'} title={__('I dislike this')} - className={classnames('button--file-action')} - label={formatNumberWithCommas(dislikeCount, 0)} + className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })} + label={ + <> + {myReaction === REACTION_TYPES.DISLIKE && SIMPLE_SITE && ( + <> + <div className="button__slime-stain" /> + <div className="button__slime-drop1" /> + <div className="button__slime-drop2" /> + </> + )} + {formatNumberWithCommas(dislikeCount, 0)} + </> + } iconSize={18} - icon={ICONS.DOWNVOTE} + icon={dislikeIcon} onClick={() => doReactionDislike(uri)} /> </>