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

show superchats in order properly

Browse source
This commit is contained in:
Anthony 2021-07-24 20:55:09 +02:00
parent 93c827fad0
commit 1e55acdfa0
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
1 changed files with 40 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -22,6 +22,7 @@ type Props = {
fetchingComments: boolean, fetchingComments: boolean,
doSuperChatList: (string) => void, doSuperChatList: (string) => void,
superChats: Array<Comment>, superChats: Array<Comment>,
superChatsReversed: Array,
superChatsTotalAmount: number, superChatsTotalAmount: number,
myChannels: ?Array<ChannelClaim>, myChannels: ?Array<ChannelClaim>,
}; };
@ -38,15 +39,30 @@ export default function LivestreamComments(props: Props) {
embed, embed,
doCommentSocketConnect, doCommentSocketConnect,
doCommentSocketDisconnect, doCommentSocketDisconnect,
comments, comments, // superchats in chronological format
doCommentList, doCommentList,
fetchingComments, fetchingComments,
doSuperChatList, doSuperChatList,
superChats,
superChatsTotalAmount, superChatsTotalAmount,
myChannels, myChannels,
superChats, // superchats organized by tip amount
} = props; } = props;
let { superChatsReversed } = props;
if (superChats) {
const clonedSuperchats = JSON.parse(JSON.stringify(superChats));
// sort by fiat first then by support amount
superChatsReversed = clonedSuperchats.sort(function(a,b) {
if (a.is_fiat === b.is_fiat) {
return b.support_amount - a.support_amount;
} else {
return (a.is_fiat === b.is_fiat) ? 0 : a.is_fiat ? -1 : 1;
}
}).reverse();
}
const commentsRef = React.createRef(); const commentsRef = React.createRef();
const [scrollBottom, setScrollBottom] = React.useState(true); const [scrollBottom, setScrollBottom] = React.useState(true);
const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT); const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT);
@ -71,6 +87,7 @@ export default function LivestreamComments(props: Props) {
} }
React.useEffect(() => { React.useEffect(() => {
if (claimId) { if (claimId) {
doCommentList(uri, '', 1, 75); doCommentList(uri, '', 1, 75);
doSuperChatList(uri); doSuperChatList(uri);
@ -132,6 +149,8 @@ export default function LivestreamComments(props: Props) {
<div className="livestream-discussion__title">{__('Live discussion')}</div> <div className="livestream-discussion__title">{__('Live discussion')}</div>
{superChatsTotalAmount > 0 && ( {superChatsTotalAmount > 0 && (
<div className="recommended-content__toggles"> <div className="recommended-content__toggles">
{/* the superchats in chronological order button */}
<Button <Button
className={classnames('button-toggle', { className={classnames('button-toggle', {
'button-toggle--active': viewMode === VIEW_MODE_CHAT, 'button-toggle--active': viewMode === VIEW_MODE_CHAT,
@ -140,13 +159,15 @@ export default function LivestreamComments(props: Props) {
onClick={() => setViewMode(VIEW_MODE_CHAT)} onClick={() => setViewMode(VIEW_MODE_CHAT)}
/> />
{/* the list by tip amount value button */}
<Button <Button
className={classnames('button-toggle', { className={classnames('button-toggle', {
'button-toggle--active': viewMode === VIEW_MODE_SUPER_CHAT, 'button-toggle--active': viewMode === VIEW_MODE_SUPER_CHAT,
})} })}
label={ label={
<> <>
<CreditAmount amount={superChatsTotalAmount} size={8} /> {__('Tipped')} <CreditAmount amount={superChatsTotalAmount} size={8} /> /
<CreditAmount amount={superChatsTotalAmount} size={8} isFiat={true} /> {' '}{__('Tipped')}
</> </>
} }
onClick={() => setViewMode(VIEW_MODE_SUPER_CHAT)} onClick={() => setViewMode(VIEW_MODE_SUPER_CHAT)}
@ -187,9 +208,10 @@ export default function LivestreamComments(props: Props) {
</div> </div>
)} )}
{/* top to bottom comment display */}
{!fetchingComments && comments.length > 0 ? ( {!fetchingComments && comments.length > 0 ? (
<div className="livestream__comments"> <div className="livestream__comments">
{commentsToDisplay.map((comment) => ( {viewMode === VIEW_MODE_CHAT && commentsToDisplay.map((comment) => (
<LivestreamComment <LivestreamComment
key={comment.comment_id} key={comment.comment_id}
uri={uri} uri={uri}
@ -201,6 +223,20 @@ export default function LivestreamComments(props: Props) {
commentIsMine={comment.channel_id && isMyComment(comment.channel_id)} commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
/> />
))} ))}
{viewMode === VIEW_MODE_SUPER_CHAT && superChatsReversed && superChatsReversed.map((comment) => (
<LivestreamComment
key={comment.comment_id}
uri={uri}
authorUri={comment.channel_url}
commentId={comment.comment_id}
message={comment.comment}
supportAmount={comment.support_amount}
isFiat={comment.is_fiat}
commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
/>
))}
</div> </div>
) : ( ) : (
<div className="main--empty" style={{ flex: 1 }} /> <div className="main--empty" style={{ flex: 1 }} />