2021-03-10 19:34:21 +01:00
|
|
|
// @flow
|
2022-01-04 16:48:15 +01:00
|
|
|
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
|
2021-03-10 19:34:21 +01:00
|
|
|
import React from 'react';
|
|
|
|
import classnames from 'classnames';
|
|
|
|
import Spinner from 'component/spinner';
|
|
|
|
import CommentCreate from 'component/commentCreate';
|
2021-04-23 21:59:48 +02:00
|
|
|
import LivestreamComment from 'component/livestreamComment';
|
|
|
|
import Button from 'component/button';
|
|
|
|
import UriIndicator from 'component/uriIndicator';
|
|
|
|
import CreditAmount from 'component/common/credit-amount';
|
|
|
|
import ChannelThumbnail from 'component/channelThumbnail';
|
|
|
|
import Tooltip from 'component/common/tooltip';
|
2021-08-23 06:17:34 +02:00
|
|
|
import * as ICONS from 'constants/icons';
|
2022-01-04 16:48:15 +01:00
|
|
|
import Icon from 'component/common/icon';
|
2021-10-28 22:25:34 +02:00
|
|
|
import OptimizedImage from 'component/optimizedImage';
|
|
|
|
import { parseSticker } from 'util/comments';
|
2021-03-10 19:34:21 +01:00
|
|
|
|
|
|
|
type Props = {
|
|
|
|
uri: string,
|
|
|
|
claim: ?StreamClaim,
|
|
|
|
embed?: boolean,
|
2021-07-15 16:43:28 +02:00
|
|
|
doCommentList: (string, string, number, number) => void,
|
2021-03-10 19:34:21 +01:00
|
|
|
comments: Array<Comment>,
|
2021-08-17 18:09:55 +02:00
|
|
|
pinnedComments: Array<Comment>,
|
2021-03-10 19:34:21 +01:00
|
|
|
fetchingComments: boolean,
|
2021-04-23 21:59:48 +02:00
|
|
|
doSuperChatList: (string) => void,
|
|
|
|
superChats: Array<Comment>,
|
2021-11-04 09:01:29 +01:00
|
|
|
doResolveUris: (Array<string>, boolean) => void,
|
2021-03-10 19:34:21 +01:00
|
|
|
};
|
|
|
|
|
2022-01-04 16:48:15 +01:00
|
|
|
const IS_TIMESTAMP_VISIBLE = () =>
|
|
|
|
// $FlowFixMe
|
|
|
|
document.documentElement.style.getPropertyValue('--live-timestamp-opacity') === '0.5';
|
|
|
|
|
|
|
|
const TOGGLE_TIMESTAMP_OPACITY = () =>
|
|
|
|
// $FlowFixMe
|
|
|
|
document.documentElement.style.setProperty('--live-timestamp-opacity', IS_TIMESTAMP_VISIBLE() ? '0' : '0.5');
|
|
|
|
|
2021-12-28 16:51:37 +01:00
|
|
|
const VIEW_MODES = {
|
|
|
|
CHAT: 'chat',
|
|
|
|
SUPERCHAT: 'sc',
|
|
|
|
};
|
2021-06-22 16:42:52 +02:00
|
|
|
const COMMENT_SCROLL_TIMEOUT = 25;
|
2021-11-04 09:01:29 +01:00
|
|
|
const LARGE_SUPER_CHAT_LIST_THRESHOLD = 20;
|
2021-04-23 21:59:48 +02:00
|
|
|
|
|
|
|
export default function LivestreamComments(props: Props) {
|
2021-03-16 21:59:31 +01:00
|
|
|
const {
|
|
|
|
claim,
|
|
|
|
uri,
|
|
|
|
embed,
|
2021-08-11 22:58:55 +02:00
|
|
|
comments: commentsByChronologicalOrder,
|
2021-08-17 18:09:55 +02:00
|
|
|
pinnedComments,
|
2021-03-16 21:59:31 +01:00
|
|
|
doCommentList,
|
|
|
|
fetchingComments,
|
2021-04-23 21:59:48 +02:00
|
|
|
doSuperChatList,
|
2021-12-29 12:42:28 +01:00
|
|
|
superChats: superChatsByAmount,
|
2021-11-04 09:01:29 +01:00
|
|
|
doResolveUris,
|
2021-03-16 21:59:31 +01:00
|
|
|
} = props;
|
2021-07-06 22:28:29 +02:00
|
|
|
|
2021-10-28 22:25:34 +02:00
|
|
|
let superChatsFiatAmount, superChatsLBCAmount, superChatsTotalAmount, hasSuperChats;
|
2021-08-11 22:58:55 +02:00
|
|
|
|
2021-03-10 19:34:21 +01:00
|
|
|
const commentsRef = React.createRef();
|
2021-12-28 16:51:37 +01:00
|
|
|
const [viewMode, setViewMode] = React.useState(VIEW_MODES.CHAT);
|
2021-08-16 16:14:29 +02:00
|
|
|
const [scrollPos, setScrollPos] = React.useState(0);
|
2021-08-25 08:19:40 +02:00
|
|
|
const [showPinned, setShowPinned] = React.useState(true);
|
2021-11-04 09:01:29 +01:00
|
|
|
const [resolvingSuperChat, setResolvingSuperChat] = React.useState(false);
|
2022-01-04 16:48:15 +01:00
|
|
|
|
2021-03-10 19:34:21 +01:00
|
|
|
const claimId = claim && claim.claim_id;
|
2021-08-11 22:58:55 +02:00
|
|
|
const commentsLength = commentsByChronologicalOrder && commentsByChronologicalOrder.length;
|
2021-09-08 22:25:49 +02:00
|
|
|
|
2021-12-29 12:42:28 +01:00
|
|
|
const commentsToDisplay = viewMode === VIEW_MODES.CHAT ? commentsByChronologicalOrder : superChatsByAmount;
|
|
|
|
const stickerSuperChats = superChatsByAmount && superChatsByAmount.filter(({ comment }) => !!parseSticker(comment));
|
2021-03-10 19:34:21 +01:00
|
|
|
|
2021-07-16 15:55:47 +02:00
|
|
|
const discussionElement = document.querySelector('.livestream__comments');
|
|
|
|
|
2021-08-17 18:09:55 +02:00
|
|
|
const pinnedComment = pinnedComments.length > 0 ? pinnedComments[0] : null;
|
2021-08-09 08:26:03 +02:00
|
|
|
|
2021-10-08 08:33:31 +02:00
|
|
|
const restoreScrollPos = React.useCallback(() => {
|
2021-08-16 16:14:29 +02:00
|
|
|
if (discussionElement) {
|
|
|
|
discussionElement.scrollTop = 0;
|
|
|
|
}
|
2021-10-08 08:33:31 +02:00
|
|
|
}, [discussionElement]);
|
2021-08-16 16:14:29 +02:00
|
|
|
|
2021-11-04 09:01:29 +01:00
|
|
|
const superChatTopTen = React.useMemo(() => {
|
2021-12-29 12:42:28 +01:00
|
|
|
return superChatsByAmount ? superChatsByAmount.slice(0, 10) : superChatsByAmount;
|
|
|
|
}, [superChatsByAmount]);
|
2021-11-04 09:01:29 +01:00
|
|
|
|
|
|
|
const showMoreSuperChatsButton =
|
2021-12-29 12:42:28 +01:00
|
|
|
superChatTopTen && superChatsByAmount && superChatTopTen.length < superChatsByAmount.length;
|
2021-11-04 09:01:29 +01:00
|
|
|
|
|
|
|
function resolveSuperChat() {
|
2021-12-29 12:42:28 +01:00
|
|
|
if (superChatsByAmount && superChatsByAmount.length > 0) {
|
2021-11-04 09:01:29 +01:00
|
|
|
doResolveUris(
|
2021-12-29 12:42:28 +01:00
|
|
|
superChatsByAmount.map((comment) => comment.channel_url || '0'),
|
2021-11-04 09:01:29 +01:00
|
|
|
true
|
|
|
|
);
|
|
|
|
|
2021-12-29 12:42:28 +01:00
|
|
|
if (superChatsByAmount.length > LARGE_SUPER_CHAT_LIST_THRESHOLD) {
|
2021-11-04 09:01:29 +01:00
|
|
|
setResolvingSuperChat(true);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-03-10 19:34:21 +01:00
|
|
|
React.useEffect(() => {
|
|
|
|
if (claimId) {
|
2021-07-15 16:43:28 +02:00
|
|
|
doCommentList(uri, '', 1, 75);
|
2021-04-23 21:59:48 +02:00
|
|
|
doSuperChatList(uri);
|
2021-03-10 19:34:21 +01:00
|
|
|
}
|
2021-12-16 22:59:13 +01:00
|
|
|
}, [claimId, uri, doCommentList, doSuperChatList]);
|
2021-03-10 19:34:21 +01:00
|
|
|
|
2021-08-16 16:14:29 +02:00
|
|
|
// Register scroll handler (TODO: Should throttle/debounce)
|
|
|
|
React.useEffect(() => {
|
|
|
|
function handleScroll() {
|
2021-12-28 16:51:37 +01:00
|
|
|
if (discussionElement && viewMode === VIEW_MODES.CHAT) {
|
2021-08-16 16:14:29 +02:00
|
|
|
const scrollTop = discussionElement.scrollTop;
|
|
|
|
if (scrollTop !== scrollPos) {
|
|
|
|
setScrollPos(scrollTop);
|
|
|
|
}
|
|
|
|
}
|
2021-03-10 19:34:21 +01:00
|
|
|
}
|
|
|
|
|
2021-12-28 16:51:37 +01:00
|
|
|
if (discussionElement && viewMode === VIEW_MODES.CHAT) {
|
2021-06-21 15:51:07 +02:00
|
|
|
discussionElement.addEventListener('scroll', handleScroll);
|
2021-08-16 16:14:29 +02:00
|
|
|
return () => discussionElement.removeEventListener('scroll', handleScroll);
|
|
|
|
}
|
2021-12-28 16:51:37 +01:00
|
|
|
}, [discussionElement, scrollPos, viewMode]);
|
2021-03-10 19:34:21 +01:00
|
|
|
|
2021-08-16 16:14:29 +02:00
|
|
|
// Retain scrollPos=0 when receiving new messages.
|
|
|
|
React.useEffect(() => {
|
|
|
|
if (discussionElement && commentsLength > 0) {
|
|
|
|
// Only update comment scroll if the user hasn't scrolled up to view old comments
|
|
|
|
if (scrollPos >= 0) {
|
|
|
|
// +ve scrollPos: not scrolled (Usually, there'll be a few pixels beyond 0).
|
|
|
|
// -ve scrollPos: user scrolled.
|
|
|
|
const timer = setTimeout(() => {
|
|
|
|
// Use a timer here to ensure we reset after the new comment has been rendered.
|
|
|
|
discussionElement.scrollTop = 0;
|
|
|
|
}, COMMENT_SCROLL_TIMEOUT);
|
|
|
|
return () => clearTimeout(timer);
|
2021-03-10 19:34:21 +01:00
|
|
|
}
|
2021-06-18 15:40:52 +02:00
|
|
|
}
|
2021-08-16 16:14:29 +02:00
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
}, [commentsLength]); // (Just respond to 'commentsLength' updates and nothing else)
|
2021-03-10 19:34:21 +01:00
|
|
|
|
2021-11-04 09:01:29 +01:00
|
|
|
// Stop spinner for resolving superchats
|
|
|
|
React.useEffect(() => {
|
|
|
|
if (resolvingSuperChat) {
|
|
|
|
// The real solution to the sluggishness is to fix the claim store/selectors
|
|
|
|
// and to paginate the long superchat list. This serves as a band-aid,
|
|
|
|
// showing a spinner while we batch-resolve. The duration is just a rough
|
|
|
|
// estimate -- the lag will handle the remaining time.
|
|
|
|
const timer = setTimeout(() => {
|
|
|
|
setResolvingSuperChat(false);
|
|
|
|
// Scroll to the top:
|
|
|
|
const livestreamCommentsDiv = document.getElementsByClassName('livestream__comments')[0];
|
|
|
|
const divHeight = livestreamCommentsDiv.scrollHeight;
|
|
|
|
livestreamCommentsDiv.scrollTop = divHeight * -1;
|
|
|
|
}, 1000);
|
|
|
|
return () => clearTimeout(timer);
|
|
|
|
}
|
|
|
|
}, [resolvingSuperChat]);
|
|
|
|
|
2021-08-11 22:58:55 +02:00
|
|
|
// sum total amounts for fiat tips and lbc tips
|
2021-12-29 12:42:28 +01:00
|
|
|
if (superChatsByAmount) {
|
2021-08-11 22:58:55 +02:00
|
|
|
let fiatAmount = 0;
|
|
|
|
let LBCAmount = 0;
|
2021-12-29 12:42:28 +01:00
|
|
|
for (const superChat of superChatsByAmount) {
|
2021-08-11 22:58:55 +02:00
|
|
|
if (superChat.is_fiat) {
|
|
|
|
fiatAmount = fiatAmount + superChat.support_amount;
|
|
|
|
} else {
|
|
|
|
LBCAmount = LBCAmount + superChat.support_amount;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
superChatsFiatAmount = fiatAmount;
|
2021-10-28 22:25:34 +02:00
|
|
|
superChatsLBCAmount = LBCAmount;
|
|
|
|
superChatsTotalAmount = superChatsFiatAmount + superChatsLBCAmount;
|
|
|
|
hasSuperChats = (superChatsTotalAmount || 0) > 0;
|
2021-08-11 22:58:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
let superChatsReversed;
|
|
|
|
// array of superchats organized by fiat or not first, then support amount
|
2021-12-29 12:42:28 +01:00
|
|
|
if (superChatsByAmount) {
|
|
|
|
const clonedSuperchats = JSON.parse(JSON.stringify(superChatsByAmount));
|
2021-08-11 22:58:55 +02:00
|
|
|
|
2021-09-08 22:25:49 +02:00
|
|
|
// for top to bottom display, oldest superchat on top most recent on bottom
|
2021-10-08 08:33:31 +02:00
|
|
|
superChatsReversed = clonedSuperchats.sort((a, b) => {
|
|
|
|
return b.timestamp - a.timestamp;
|
|
|
|
});
|
|
|
|
}
|
2021-08-11 22:58:55 +02:00
|
|
|
|
2021-03-10 19:34:21 +01:00
|
|
|
if (!claim) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2021-10-28 22:25:34 +02:00
|
|
|
function getStickerUrl(comment: string) {
|
|
|
|
const stickerFromComment = parseSticker(comment);
|
|
|
|
return stickerFromComment && stickerFromComment.url;
|
|
|
|
}
|
|
|
|
|
2021-03-10 19:34:21 +01:00
|
|
|
return (
|
2021-04-23 21:59:48 +02:00
|
|
|
<div className="card livestream__discussion">
|
|
|
|
<div className="card__header--between livestream-discussion__header">
|
2022-01-04 16:48:15 +01:00
|
|
|
<div className="livestream-discussion__title">
|
2021-12-31 13:27:05 +01:00
|
|
|
{__('Live Chat')}
|
2022-01-04 16:48:15 +01:00
|
|
|
|
|
|
|
<Menu>
|
|
|
|
<MenuButton className="menu__button">
|
2021-12-31 13:26:12 +01:00
|
|
|
<Icon size={18} icon={ICONS.SETTINGS} />
|
2022-01-04 16:48:15 +01:00
|
|
|
</MenuButton>
|
|
|
|
|
|
|
|
<MenuList className="menu__list">
|
|
|
|
<MenuItem className="comment__menu-option" onSelect={TOGGLE_TIMESTAMP_OPACITY}>
|
|
|
|
<span className="menu__link">
|
|
|
|
<Icon aria-hidden icon={ICONS.TIME} />
|
|
|
|
{__('Toggle Timestamps')}
|
|
|
|
</span>
|
|
|
|
</MenuItem>
|
|
|
|
</MenuList>
|
|
|
|
</Menu>
|
|
|
|
</div>
|
|
|
|
|
2021-10-28 22:25:34 +02:00
|
|
|
{hasSuperChats && (
|
2021-04-23 21:59:48 +02:00
|
|
|
<div className="recommended-content__toggles">
|
2021-08-11 22:58:55 +02:00
|
|
|
{/* the superchats in chronological order button */}
|
2021-04-23 21:59:48 +02:00
|
|
|
<Button
|
2021-12-28 16:51:37 +01:00
|
|
|
className={classnames('button-toggle', { 'button-toggle--active': viewMode === VIEW_MODES.CHAT })}
|
2021-04-23 21:59:48 +02:00
|
|
|
label={__('Chat')}
|
2021-08-13 03:37:32 +02:00
|
|
|
onClick={() => {
|
2021-12-28 16:51:37 +01:00
|
|
|
setViewMode(VIEW_MODES.CHAT);
|
2021-08-11 22:58:55 +02:00
|
|
|
const livestreamCommentsDiv = document.getElementsByClassName('livestream__comments')[0];
|
2021-08-16 16:14:29 +02:00
|
|
|
livestreamCommentsDiv.scrollTop = livestreamCommentsDiv.scrollHeight;
|
2021-08-11 22:58:55 +02:00
|
|
|
}}
|
2021-04-23 21:59:48 +02:00
|
|
|
/>
|
|
|
|
|
2021-08-11 22:58:55 +02:00
|
|
|
{/* the button to show superchats listed by most to least support amount */}
|
2021-04-23 21:59:48 +02:00
|
|
|
<Button
|
2021-12-28 16:51:37 +01:00
|
|
|
className={classnames('button-toggle', { 'button-toggle--active': viewMode === VIEW_MODES.SUPERCHAT })}
|
2021-04-23 21:59:48 +02:00
|
|
|
label={
|
|
|
|
<>
|
2021-10-28 22:25:34 +02:00
|
|
|
<CreditAmount amount={superChatsLBCAmount || 0} size={8} /> /
|
2021-08-13 03:37:32 +02:00
|
|
|
<CreditAmount amount={superChatsFiatAmount || 0} size={8} isFiat /> {__('Tipped')}
|
2021-04-23 21:59:48 +02:00
|
|
|
</>
|
|
|
|
}
|
2021-08-13 03:37:32 +02:00
|
|
|
onClick={() => {
|
2021-11-04 09:01:29 +01:00
|
|
|
resolveSuperChat();
|
2021-12-28 16:51:37 +01:00
|
|
|
setViewMode(VIEW_MODES.SUPERCHAT);
|
2021-08-11 22:58:55 +02:00
|
|
|
}}
|
2021-04-23 21:59:48 +02:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<>
|
2021-08-11 22:58:55 +02:00
|
|
|
{fetchingComments && !commentsByChronologicalOrder && (
|
2021-04-23 21:59:48 +02:00
|
|
|
<div className="main--empty">
|
|
|
|
<Spinner />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
<div ref={commentsRef} className="livestream__comments-wrapper">
|
2021-12-29 12:42:28 +01:00
|
|
|
{viewMode === VIEW_MODES.CHAT && superChatsByAmount && hasSuperChats && (
|
2021-04-23 21:59:48 +02:00
|
|
|
<div className="livestream-superchats__wrapper">
|
|
|
|
<div className="livestream-superchats__inner">
|
2021-11-04 09:01:29 +01:00
|
|
|
{superChatTopTen.map((superChat: Comment) => {
|
2021-12-28 16:51:37 +01:00
|
|
|
const { comment, comment_id, channel_url, support_amount, is_fiat } = superChat;
|
2021-10-28 22:25:34 +02:00
|
|
|
const isSticker = stickerSuperChats && stickerSuperChats.includes(superChat);
|
2021-12-28 16:51:37 +01:00
|
|
|
const stickerImg = <OptimizedImage src={getStickerUrl(comment)} waitLoad loading="lazy" />;
|
2021-10-28 22:25:34 +02:00
|
|
|
|
|
|
|
return (
|
2021-12-28 16:51:37 +01:00
|
|
|
<Tooltip title={isSticker ? stickerImg : comment} key={comment_id}>
|
2021-10-28 22:25:34 +02:00
|
|
|
<div className="livestream-superchat">
|
|
|
|
<div className="livestream-superchat__thumbnail">
|
2021-12-28 16:51:37 +01:00
|
|
|
<ChannelThumbnail uri={channel_url} xsmall />
|
2021-10-28 22:25:34 +02:00
|
|
|
</div>
|
2021-04-23 21:59:48 +02:00
|
|
|
|
2021-10-28 22:25:34 +02:00
|
|
|
<div
|
|
|
|
className={classnames('livestream-superchat__info', {
|
|
|
|
'livestream-superchat__info--sticker': isSticker,
|
|
|
|
'livestream-superchat__info--not-sticker': stickerSuperChats && !isSticker,
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<div className="livestream-superchat__info--user">
|
2021-12-28 16:51:37 +01:00
|
|
|
<UriIndicator uri={channel_url} link />
|
2021-10-28 22:25:34 +02:00
|
|
|
<CreditAmount
|
2021-12-28 16:51:37 +01:00
|
|
|
hideTitle
|
2021-10-28 22:25:34 +02:00
|
|
|
size={10}
|
|
|
|
className="livestream-superchat__amount-large"
|
2021-12-28 16:51:37 +01:00
|
|
|
amount={support_amount}
|
|
|
|
isFiat={is_fiat}
|
2021-10-28 22:25:34 +02:00
|
|
|
/>
|
|
|
|
</div>
|
2021-12-28 16:51:37 +01:00
|
|
|
|
|
|
|
{isSticker && <div className="livestream-superchat__info--image">{stickerImg}</div>}
|
2021-10-28 22:25:34 +02:00
|
|
|
</div>
|
2021-04-23 21:59:48 +02:00
|
|
|
</div>
|
2021-12-28 16:51:37 +01:00
|
|
|
</Tooltip>
|
2021-10-28 22:25:34 +02:00
|
|
|
);
|
|
|
|
})}
|
2021-12-28 16:51:37 +01:00
|
|
|
|
2021-11-04 09:01:29 +01:00
|
|
|
{showMoreSuperChatsButton && (
|
|
|
|
<Button
|
|
|
|
title={__('Show More...')}
|
2021-12-28 16:51:37 +01:00
|
|
|
label={__('Show More')}
|
2021-11-04 09:01:29 +01:00
|
|
|
button="inverse"
|
|
|
|
className="close-button"
|
|
|
|
onClick={() => {
|
|
|
|
resolveSuperChat();
|
2021-12-28 16:51:37 +01:00
|
|
|
setViewMode(VIEW_MODES.SUPERCHAT);
|
2021-11-04 09:01:29 +01:00
|
|
|
}}
|
2021-12-28 16:51:37 +01:00
|
|
|
iconRight={ICONS.MORE}
|
2021-11-04 09:01:29 +01:00
|
|
|
/>
|
|
|
|
)}
|
2021-03-10 19:34:21 +01:00
|
|
|
</div>
|
2021-04-23 21:59:48 +02:00
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
|
2021-12-28 16:51:37 +01:00
|
|
|
{pinnedComment && showPinned && viewMode === VIEW_MODES.CHAT && (
|
2021-08-09 08:26:03 +02:00
|
|
|
<div className="livestream-pinned__wrapper">
|
2021-12-30 04:40:51 +01:00
|
|
|
<LivestreamComment comment={pinnedComment} key={pinnedComment.comment_id} uri={uri} />
|
2021-08-25 08:19:40 +02:00
|
|
|
<Button
|
|
|
|
title={__('Dismiss pinned comment')}
|
|
|
|
button="inverse"
|
|
|
|
className="close-button"
|
|
|
|
onClick={() => setShowPinned(false)}
|
|
|
|
icon={ICONS.REMOVE}
|
|
|
|
/>
|
2021-08-09 08:26:03 +02:00
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
|
2021-08-11 22:58:55 +02:00
|
|
|
{/* top to bottom comment display */}
|
|
|
|
{!fetchingComments && commentsByChronologicalOrder.length > 0 ? (
|
2021-04-23 21:59:48 +02:00
|
|
|
<div className="livestream__comments">
|
2021-12-28 16:51:37 +01:00
|
|
|
{viewMode === VIEW_MODES.CHAT &&
|
2021-08-13 03:37:32 +02:00
|
|
|
commentsToDisplay.map((comment) => (
|
2021-12-30 04:40:51 +01:00
|
|
|
<LivestreamComment comment={comment} key={comment.comment_id} uri={uri} />
|
2021-08-13 03:37:32 +02:00
|
|
|
))}
|
2021-08-11 22:58:55 +02:00
|
|
|
|
2021-12-28 16:51:37 +01:00
|
|
|
{viewMode === VIEW_MODES.SUPERCHAT && resolvingSuperChat && (
|
2021-11-04 09:01:29 +01:00
|
|
|
<div className="main--empty">
|
|
|
|
<Spinner />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
|
2021-12-28 16:51:37 +01:00
|
|
|
{viewMode === VIEW_MODES.SUPERCHAT &&
|
2021-11-04 09:01:29 +01:00
|
|
|
!resolvingSuperChat &&
|
2021-08-13 03:37:32 +02:00
|
|
|
superChatsReversed &&
|
|
|
|
superChatsReversed.map((comment) => (
|
2021-12-30 04:40:51 +01:00
|
|
|
<LivestreamComment comment={comment} key={comment.comment_id} uri={uri} />
|
2021-08-13 03:37:32 +02:00
|
|
|
))}
|
2021-04-23 21:59:48 +02:00
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div className="main--empty" style={{ flex: 1 }} />
|
|
|
|
)}
|
2021-03-10 19:34:21 +01:00
|
|
|
|
2021-12-28 16:51:37 +01:00
|
|
|
{scrollPos < 0 && viewMode === VIEW_MODES.CHAT && (
|
2021-06-18 15:40:52 +02:00
|
|
|
<Button
|
2021-08-23 06:17:34 +02:00
|
|
|
button="secondary"
|
|
|
|
className="livestream__comments__scroll-to-recent"
|
2021-06-18 15:40:52 +02:00
|
|
|
label={__('Recent Comments')}
|
2021-08-16 16:14:29 +02:00
|
|
|
onClick={restoreScrollPos}
|
2021-08-23 06:17:34 +02:00
|
|
|
iconRight={ICONS.DOWN}
|
2021-06-18 15:40:52 +02:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
2021-03-10 19:34:21 +01:00
|
|
|
<div className="livestream__comment-create">
|
2021-12-02 17:49:13 +01:00
|
|
|
<CommentCreate isLivestream bottom embed={embed} uri={uri} onDoneReplying={restoreScrollPos} />
|
2021-03-10 19:34:21 +01:00
|
|
|
</div>
|
2021-04-23 21:59:48 +02:00
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
</div>
|
2021-03-10 19:34:21 +01:00
|
|
|
);
|
|
|
|
}
|