LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Improve Sticker Superchat display

Browse source
This commit is contained in:
Rafael 2021-12-29 08:42:28 -03:00 committed by Thomas Zarebczan
parent 1578810013
commit 2d1b876acc
2 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ui/component/livestreamComments/view.jsx
View file

@ -45,7 +45,7 @@ export default function LivestreamComments(props: Props) {
fetchingComments, fetchingComments,
doSuperChatList, doSuperChatList,
myChannelIds, myChannelIds,
superChats: superChatsByTipAmount, superChats: superChatsByAmount,
doResolveUris, doResolveUris,
} = props; } = props;
@ -59,9 +59,8 @@ export default function LivestreamComments(props: Props) {
const claimId = claim && claim.claim_id; const claimId = claim && claim.claim_id;
const commentsLength = commentsByChronologicalOrder && commentsByChronologicalOrder.length; const commentsLength = commentsByChronologicalOrder && commentsByChronologicalOrder.length;
const commentsToDisplay = viewMode === VIEW_MODES.CHAT ? commentsByChronologicalOrder : superChatsByTipAmount; const commentsToDisplay = viewMode === VIEW_MODES.CHAT ? commentsByChronologicalOrder : superChatsByAmount;
const stickerSuperChats = const stickerSuperChats = superChatsByAmount && superChatsByAmount.filter(({ comment }) => !!parseSticker(comment));
superChatsByTipAmount && superChatsByTipAmount.filter(({ comment }) => Boolean(parseSticker(comment)));
const discussionElement = document.querySelector('.livestream__comments'); const discussionElement = document.querySelector('.livestream__comments');
@ -74,20 +73,20 @@ export default function LivestreamComments(props: Props) {
}, [discussionElement]); }, [discussionElement]);
const superChatTopTen = React.useMemo(() => { const superChatTopTen = React.useMemo(() => {
return superChatsByTipAmount ? superChatsByTipAmount.slice(0, 10) : superChatsByTipAmount; return superChatsByAmount ? superChatsByAmount.slice(0, 10) : superChatsByAmount;
}, [superChatsByTipAmount]); }, [superChatsByAmount]);
const showMoreSuperChatsButton = const showMoreSuperChatsButton =
superChatTopTen && superChatsByTipAmount && superChatTopTen.length < superChatsByTipAmount.length; superChatTopTen && superChatsByAmount && superChatTopTen.length < superChatsByAmount.length;
function resolveSuperChat() { function resolveSuperChat() {
if (superChatsByTipAmount && superChatsByTipAmount.length > 0) { if (superChatsByAmount && superChatsByAmount.length > 0) {
doResolveUris( doResolveUris(
superChatsByTipAmount.map((comment) => comment.channel_url || '0'), superChatsByAmount.map((comment) => comment.channel_url || '0'),
true true
); );
if (superChatsByTipAmount.length > LARGE_SUPER_CHAT_LIST_THRESHOLD) { if (superChatsByAmount.length > LARGE_SUPER_CHAT_LIST_THRESHOLD) {
setResolvingSuperChat(true); setResolvingSuperChat(true);
} }
} }
@ -153,10 +152,10 @@ export default function LivestreamComments(props: Props) {
}, [resolvingSuperChat]); }, [resolvingSuperChat]);
// sum total amounts for fiat tips and lbc tips // sum total amounts for fiat tips and lbc tips
if (superChatsByTipAmount) { if (superChatsByAmount) {
let fiatAmount = 0; let fiatAmount = 0;
let LBCAmount = 0; let LBCAmount = 0;
for (const superChat of superChatsByTipAmount) { for (const superChat of superChatsByAmount) {
if (superChat.is_fiat) { if (superChat.is_fiat) {
fiatAmount = fiatAmount + superChat.support_amount; fiatAmount = fiatAmount + superChat.support_amount;
} else { } else {
@ -172,8 +171,8 @@ export default function LivestreamComments(props: Props) {
let superChatsReversed; let superChatsReversed;
// array of superchats organized by fiat or not first, then support amount // array of superchats organized by fiat or not first, then support amount
if (superChatsByTipAmount) { if (superChatsByAmount) {
const clonedSuperchats = JSON.parse(JSON.stringify(superChatsByTipAmount)); const clonedSuperchats = JSON.parse(JSON.stringify(superChatsByAmount));
// for top to bottom display, oldest superchat on top most recent on bottom // for top to bottom display, oldest superchat on top most recent on bottom
superChatsReversed = clonedSuperchats.sort((a, b) => { superChatsReversed = clonedSuperchats.sort((a, b) => {
@ -236,7 +235,7 @@ export default function LivestreamComments(props: Props) {
</div> </div>
)} )}
<div ref={commentsRef} className="livestream__comments-wrapper"> <div ref={commentsRef} className="livestream__comments-wrapper">
{viewMode === VIEW_MODES.CHAT && superChatsByTipAmount && hasSuperChats && ( {viewMode === VIEW_MODES.CHAT && superChatsByAmount && hasSuperChats && (
<div className="livestream-superchats__wrapper"> <div className="livestream-superchats__wrapper">
<div className="livestream-superchats__inner"> <div className="livestream-superchats__inner">
{superChatTopTen.map((superChat: Comment) => { {superChatTopTen.map((superChat: Comment) => {

17
ui/scss/component/_livestream.scss
View file

@ -348,6 +348,10 @@ $recent-msg-button__height: 2rem;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: var(--font-xsmall); font-size: var(--font-xsmall);
.button {
margin-top: calc(var(--spacing-xxs) / 2);
}
} }
.livestream-superchat__info--sticker { .livestream-superchat__info--sticker {
@ -357,14 +361,15 @@ $recent-msg-button__height: 2rem;
width: 8rem; width: 8rem;
height: 3rem; height: 3rem;
.livestream-superchat__info--image { .livestream-superchat__info--user {
padding-left: var(--spacing-m); .channel-name {
width: 100%; max-width: 5rem;
height: 100%; }
} }
.button { .livestream-superchat__info--image {
margin-top: calc(var(--spacing-xxs) / 2); width: 100%;
height: 100%;
} }
} }