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,
doSuperChatList: (string) => void,
superChats: Array<Comment>,
superChatsReversed: Array,
superChatsTotalAmount: number,
myChannels: ?Array<ChannelClaim>,
};
@ -38,15 +39,30 @@ export default function LivestreamComments(props: Props) {
embed,
doCommentSocketConnect,
doCommentSocketDisconnect,
comments,
comments, // superchats in chronological format
doCommentList,
fetchingComments,
doSuperChatList,
superChats,
superChatsTotalAmount,
myChannels,
superChats, // superchats organized by tip amount
} = 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 [scrollBottom, setScrollBottom] = React.useState(true);
const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT);
@ -71,6 +87,7 @@ export default function LivestreamComments(props: Props) {
}
React.useEffect(() => {
if (claimId) {
doCommentList(uri, '', 1, 75);
doSuperChatList(uri);
@ -132,6 +149,8 @@ export default function LivestreamComments(props: Props) {
<div className="livestream-discussion__title">{__('Live discussion')}</div>
{superChatsTotalAmount > 0 && (
<div className="recommended-content__toggles">
{/* the superchats in chronological order button */}
<Button
className={classnames('button-toggle', {
'button-toggle--active': viewMode === VIEW_MODE_CHAT,
@ -140,13 +159,15 @@ export default function LivestreamComments(props: Props) {
onClick={() => setViewMode(VIEW_MODE_CHAT)}
/>
{/* the list by tip amount value button */}
<Button
className={classnames('button-toggle', {
'button-toggle--active': viewMode === VIEW_MODE_SUPER_CHAT,
})}
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)}
@ -187,9 +208,10 @@ export default function LivestreamComments(props: Props) {
</div>
)}
{/* top to bottom comment display */}
{!fetchingComments && comments.length > 0 ? (
<div className="livestream__comments">
{commentsToDisplay.map((comment) => (
{viewMode === VIEW_MODE_CHAT && commentsToDisplay.map((comment) => (
<LivestreamComment
key={comment.comment_id}
uri={uri}
@ -201,6 +223,20 @@ export default function LivestreamComments(props: Props) {
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 className="main--empty" style={{ flex: 1 }} />