Merge branch 'master' into account-deletion-no-useEffect

static/app-strings.json

@@ -2951,6 +2951,7 @@
   "Remove all content from the account and forfeit credits left on the account to Odysee" : "Remove all content from the account and forfeit credits left on the account to Odysee",
   "Remove content and send deletion request" : "Remove content and send deletion request",
   "Remove content" : "Remove content",
+  "IMPORTANT: this donation is sent without a comment. If you want to include a comment, click the $ next to the comment input area.": "IMPORTANT: this donation is sent without a comment. If you want to include a comment, click the $ next to the comment input area.",
 
   "--end--": "--end--"
 }

ui/component/comment/view.jsx

@@ -20,6 +20,7 @@ import {
   COMMENT_PAGE_SIZE_REPLIES,
   LINKED_COMMENT_QUERY_PARAM,
   THREAD_COMMENT_QUERY_PARAM,
+  THRESHOLD_MS,
 } from 'constants/comment';
 import { FF_MAX_CHARS_IN_COMMENT } from 'constants/form-field';
 import { SITE_NAME, SIMPLE_SITE, ENABLE_COMMENT_REACTIONS } from 'config';
@@ -155,11 +156,11 @@ function CommentView(props: Props & StateProps & DispatchProps) {
     is_pinned: isPinned,
     support_amount: supportAmount,
     replies: numDirectReplies,
-    timestamp,
   } = comment;
   const claimName = authorTitle || author;
 
-  const timePosted = timestamp * 1000;
+  const timePosted = comment.timestamp * 1000;
+  const commentIsEdited = parseInt(comment.signing_ts) - comment.timestamp > THRESHOLD_MS.IS_EDITED / 1000;
   const commentIsMine = channelId && myChannelIds && myChannelIds.includes(channelId);
 
   const isMobile = useIsMobile();
@@ -380,7 +381,12 @@ function CommentView(props: Props & StateProps & DispatchProps) {
               <Button
                 className="comment__time"
                 onClick={handleTimeClick}
-                label={<DateTime date={timePosted} timeAgo />}
+                label={
+                  <>
+                    <DateTime date={timePosted} timeAgo />
+                    {commentIsEdited && <span className="comment__edited">{__('(edited)')}</span>}
+                  </>
+                }
               />
 
               {supportAmount > 0 && <CreditAmount isFiat={isFiat} amount={supportAmount} superChatLight size={12} />}

ui/component/walletTipAmountSelector/view.jsx

@@ -275,6 +275,12 @@ function WalletTipAmountSelector(props: Props) {
         (!canReceiveFiatTips
           ? getHelpMessage(__('Only creators that verify cash accounts can receive tips.'))
           : getHelpMessage(__('Send a tip directly from your attached card.')))}
+      {activeTab === TAB_FIAT &&
+        getHelpMessage(
+          __(
+            'IMPORTANT: this donation is sent without a comment. If you want to include a comment, click the $ next to the comment input area.'
+          )
+        )}
     </>
   );
 }

ui/constants/comment.js

@@ -19,5 +19,9 @@ export const BLOCK_LEVEL = {
   ADMIN: 'admin',
 };
 
+export const THRESHOLD_MS = {
+  IS_EDITED: 5 * 1000,
+};
+
 export const COMMENT_PAGE_SIZE_TOP_LEVEL = 10;
 export const COMMENT_PAGE_SIZE_REPLIES = 10;

ui/hocs/withStreamClaimRender/internal/paidContentOverlay/view.jsx

@@ -67,6 +67,7 @@ export default function PaidContentOvelay(props: Props) {
           icon={sdkFeeRequired ? ICONS.LBC : fiatIconToUse}
           button="primary"
           label={label}
+          requiresAuth
           {...clickProps}
         />
       );

ui/modal/modalAffirmPurchase/index.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
 import { doPlayUri, doSetPlayingUri } from 'redux/actions/content';
-import { selectPlayingUri } from 'redux/selectors/content';
+import { selectInsufficientCreditsForUri, selectPlayingUri } from 'redux/selectors/content';
 import { doHideModal, doAnaltyicsPurchaseEvent } from 'redux/actions/app';
 import { makeSelectMetadataForUri } from 'redux/selectors/claims';
 import ModalAffirmPurchase from './view';
 
 const select = (state, props) => ({
+  isInsufficientCredits: selectInsufficientCreditsForUri(state, props.uri),
   metadata: makeSelectMetadataForUri(props.uri)(state),
   playingUri: selectPlayingUri(state),
 });

ui/modal/modalAffirmPurchase/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import analytics from 'analytics';
+import ClaimInsufficientCredits from 'component/claimInsufficientCredits';
 import FilePrice from 'component/filePrice';
 import { Modal } from 'modal/modal';
 import Card from 'component/common/card';
@@ -13,6 +14,7 @@ import { isURIEqual } from 'util/lbryURI';
 const ANIMATION_LENGTH = 2500;
 
 type Props = {
+  isInsufficientCredits: boolean,
   closeModal: () => void,
   loadVideo: (string, (GetResponse) => void) => void,
   uri: string,
@@ -25,7 +27,17 @@ type Props = {
 };
 
 function ModalAffirmPurchase(props: Props) {
-  const { closeModal, loadVideo, metadata, uri, analyticsPurchaseEvent, playingUri, setPlayingUri, cancelCb } = props;
+  const {
+    isInsufficientCredits,
+    closeModal,
+    loadVideo,
+    metadata,
+    uri,
+    analyticsPurchaseEvent,
+    playingUri,
+    setPlayingUri,
+    cancelCb,
+  } = props;
   const [success, setSuccess] = React.useState(false);
   const [purchasing, setPurchasing] = React.useState(false);
   const modalTitle = __('Confirm Purchase');
@@ -81,6 +93,14 @@ function ModalAffirmPurchase(props: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- on mount
   }, []);
 
+  if (isInsufficientCredits) {
+    return (
+      <Modal type="card" isOpen onAborted={cancelPurchase}>
+        <Card title={__('Insufficient credits')} subtitle={<ClaimInsufficientCredits uri={uri} />} />
+      </Modal>
+    );
+  }
+
   return (
     <Modal type="card" isOpen contentLabel={modalTitle} onAborted={cancelPurchase}>
       <Card

ui/scss/component/_comments.scss

@@ -526,6 +526,10 @@ $thumbnailWidthSmall: 2rem;
   }
 }
 
+.comment__edited {
+  margin-left: var(--spacing-xxxxs);
+}
+
 .comment__menu {
   align-self: flex-end;
   line-height: 1;