diff --git a/ui/component/livestreamComment/view.jsx b/ui/component/livestreamComment/view.jsx index d37235e79..b7c21a613 100644 --- a/ui/component/livestreamComment/view.jsx +++ b/ui/component/livestreamComment/view.jsx @@ -18,6 +18,7 @@ import { parseSticker } from 'util/comments'; type Props = { comment: Comment, + forceUpdate?: any, uri: string, // --- redux: claim: StreamClaim, @@ -26,7 +27,7 @@ type Props = { }; function LivestreamComment(props: Props) { - const { comment, claim, uri, stakedLevel, myChannelIds } = props; + const { comment, forceUpdate, uri, claim, stakedLevel, myChannelIds } = props; const { channel_url: authorUri, comment: message, support_amount: supportAmount, timestamp } = comment; const [hasUserMention, setUserMention] = React.useState(false); @@ -106,7 +107,8 @@ function LivestreamComment(props: Props) { )} - + {/* Use key to force timestamp update */} + {comment.removed ? (
diff --git a/ui/component/livestreamComments/view.jsx b/ui/component/livestreamComments/view.jsx index 88bed327b..5281c2e3c 100644 --- a/ui/component/livestreamComments/view.jsx +++ b/ui/component/livestreamComments/view.jsx @@ -15,6 +15,9 @@ import Icon from 'component/common/icon'; import OptimizedImage from 'component/optimizedImage'; import { parseSticker } from 'util/comments'; +// 30 sec timestamp refresh timer +const UPDATE_TIMESTAMP_MS = 30 * 1000; + type Props = { uri: string, claim: ?StreamClaim, @@ -60,10 +63,12 @@ export default function LivestreamComments(props: Props) { let superChatsFiatAmount, superChatsLBCAmount, superChatsTotalAmount, hasSuperChats; const commentsRef = React.createRef(); + const [viewMode, setViewMode] = React.useState(VIEW_MODES.CHAT); const [scrollPos, setScrollPos] = React.useState(0); const [showPinned, setShowPinned] = React.useState(true); const [resolvingSuperChat, setResolvingSuperChat] = React.useState(false); + const [forceUpdate, setForceUpdate] = React.useState(0); const claimId = claim && claim.claim_id; const commentsLength = commentsByChronologicalOrder && commentsByChronologicalOrder.length; @@ -74,6 +79,17 @@ export default function LivestreamComments(props: Props) { const discussionElement = document.querySelector('.livestream__comments'); const pinnedComment = pinnedComments.length > 0 ? pinnedComments[0] : null; + const now = new Date(); + + const shouldRefreshTimestamp = + commentsByChronologicalOrder && + commentsByChronologicalOrder.some((comment) => { + const { timestamp } = comment; + const timePosted = timestamp * 1000; + + // 1000 * 60 seconds * 60 minutes === less than an hour old + return now - timePosted < 1000 * 60 * 60; + }); const restoreScrollPos = React.useCallback(() => { if (discussionElement) { @@ -101,6 +117,18 @@ export default function LivestreamComments(props: Props) { } } + // Refresh timestamp on timer + React.useEffect(() => { + if (shouldRefreshTimestamp) { + const timer = setTimeout(() => { + setForceUpdate(Date.now()); + }, UPDATE_TIMESTAMP_MS); + + return () => clearTimeout(timer); + } + // forceUpdate will re-activate the timer or else it will only refresh once + }, [shouldRefreshTimestamp, forceUpdate]); + React.useEffect(() => { if (claimId) { doCommentList(uri, '', 1, 75); @@ -315,7 +343,13 @@ export default function LivestreamComments(props: Props) { {pinnedComment && showPinned && viewMode === VIEW_MODES.CHAT && (
- + +
) : (