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 && (
-
+
+
) : (