comments v69

static/app-strings.json

@@ -1308,8 +1308,7 @@
   "Downvote": "Downvote",
   "Best": "Best",
   "Controversial": "Controversial",
-  "Hide %number% Replies": "Hide %number% Replies",
+  "Show Replies": "Show Replies",
-  "Show %number% Replies": "Show %number% Replies",
   "Unable to create comment, please try again later.": "Unable to create comment, please try again later.",
   "Your channel is still being setup, try again in a few moments.": "Your channel is still being setup, try again in a few moments.",
   "Unable to delete this comment, please try again later.": "Unable to delete this comment, please try again later.",

ui/component/comment/view.jsx

@@ -18,13 +18,13 @@ import usePersistedState from 'effects/use-persisted-state';
 import CommentReactions from 'component/commentReactions';
 import CommentsReplies from 'component/commentsReplies';
 import { useHistory } from 'react-router';
+import CommentCreate from 'component/commentCreate';
 
 type Props = {
   uri: string,
   author: ?string, // LBRY Channel Name, e.g. @channel
   authorUri: string, // full LBRY Channel URI: lbry://@channel#123...
   commentId: string, // sha256 digest identifying the comment
-  topLevelId: string, // sha256 digest identifying the parent of the comment
   message: string, // comment body
   timePosted: number, // Comment timestamp
   channel: ?Claim, // Channel Claim, retrieved to obtain thumbnail
@@ -41,10 +41,8 @@ type Props = {
   myChannels: ?Array<ChannelClaim>,
   commentingEnabled: boolean,
   doToast: ({ message: string }) => void,
-  hideReplyButton?: boolean,
   isTopLevel?: boolean,
-  topLevelIsReplying: boolean,
+  threadDepth: number,
-  setTopLevelIsReplying: boolean => void,
 };
 
 const LENGTH_TO_COLLAPSE = 300;
@@ -71,11 +69,8 @@ function Comment(props: Props) {
     commentingEnabled,
     myChannels,
     doToast,
-    hideReplyButton,
     isTopLevel,
-    topLevelIsReplying,
+    threadDepth,
-    setTopLevelIsReplying,
-    topLevelId,
   } = props;
   const {
     push,
@@ -134,17 +129,14 @@ function Comment(props: Props) {
       push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`);
       doToast({ message: __('A channel is required to comment on %SITE_NAME%', { SITE_NAME }) });
     } else {
-      if (setTopLevelIsReplying) {
+      setReplying(!isReplying);
-        setTopLevelIsReplying(!topLevelIsReplying);
-      } else {
-        setReplying(!isReplying);
-      }
     }
   }
 
   return (
     <li
       className={classnames('comment', {
+        'comment--top-level': isTopLevel,
         'comment--reply': !isTopLevel,
         'comment--highlighted': linkedComment && linkedComment.comment_id === commentId,
       })}
@@ -242,7 +234,7 @@ function Comment(props: Props) {
                 </div>
 
                 <div className="comment__actions">
-                  {!hideReplyButton && (
+                  {threadDepth !== 0 && (
                     <Button
                       requiresAuth={IS_WEB}
                       label={commentingEnabled ? __('Reply') : __('Log in to reply')}
@@ -253,21 +245,23 @@ function Comment(props: Props) {
                   )}
                   {ENABLE_COMMENT_REACTIONS && <CommentReactions commentId={commentId} />}
                 </div>
+
+                {isReplying && (
+                  <CommentCreate
+                    isReply
+                    uri={uri}
+                    parentId={commentId}
+                    onDoneReplying={() => setReplying(false)}
+                    onCancelReplying={() => setReplying(false)}
+                  />
+                )}
               </>
             )}
           </div>
         </div>
       </div>
 
-      {isTopLevel && (
+      <CommentsReplies threadDepth={threadDepth - 1} uri={uri} parentId={commentId} linkedComment={linkedComment} />
-        <CommentsReplies
-          uri={uri}
-          topLevelId={topLevelId}
-          linkedComment={linkedComment}
-          topLevelIsReplying={isReplying}
-          setTopLevelIsReplying={setReplying}
-        />
-      )}
     </li>
   );
 }

ui/component/commentCreate/index.js

@@ -1,15 +1,17 @@
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri, selectMyChannelClaims, selectFetchingMyChannels } from 'lbry-redux';
+import { selectIsPostingComment } from 'redux/selectors/comments';
 import { doOpenModal } from 'redux/actions/app';
 import { doCommentCreate } from 'redux/actions/comments';
-import { CommentCreate } from './view';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
+import { CommentCreate } from './view';
 
 const select = (state, props) => ({
   commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
   claim: makeSelectClaimForUri(props.uri)(state),
   channels: selectMyChannelClaims(state),
   isFetchingChannels: selectFetchingMyChannels(state),
+  isPostingComment: selectIsPostingComment(state),
 });
 
 const perform = (dispatch, ownProps) => ({

ui/component/commentCreate/view.jsx

@@ -17,11 +17,13 @@ type Props = {
   claim: StreamClaim,
   createComment: (string, string, string, ?string) => Promise<any>,
   channels: ?Array<ChannelClaim>,
-  topLevelId?: string,
   onDoneReplying?: () => void,
   onCancelReplying?: () => void,
   isNested: boolean,
   isFetchingChannels: boolean,
+  parentId: string,
+  isReply: boolean,
+  isPostingComment: boolean,
 };
 
 export function CommentCreate(props: Props) {
@@ -29,23 +31,23 @@ export function CommentCreate(props: Props) {
     createComment,
     claim,
     channels,
-    topLevelId,
     onDoneReplying,
     onCancelReplying,
     isNested,
     isFetchingChannels,
+    isReply,
+    parentId,
+    isPostingComment,
   } = props;
   const buttonref: ElementRef<any> = React.useRef();
   const { push } = useHistory();
   const { claim_id: claimId } = claim;
-  const isReply = !!topLevelId;
   const [commentValue, setCommentValue] = React.useState('');
   const [channel, setChannel] = usePersistedState('comment-channel', '');
   const [charCount, setCharCount] = useState(commentValue.length);
   const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
   const hasChannels = channels && channels.length;
-  const disabled = channel === CHANNEL_NEW || !commentValue.length;
+  const disabled = isPostingComment || channel === CHANNEL_NEW || !commentValue.length;
-
   const topChannel =
     channels &&
     channels.reduce((top, channel) => {
@@ -90,9 +92,10 @@ export function CommentCreate(props: Props) {
 
   function handleSubmit() {
     if (channel !== CHANNEL_NEW && commentValue.length) {
-      createComment(commentValue, claimId, channel, topLevelId).then(res => {
+      createComment(commentValue, claimId, channel, parentId).then(res => {
         if (res && res.signature) {
           setCommentValue('');
+
           if (onDoneReplying) {
             onDoneReplying();
           }
@@ -160,7 +163,15 @@ export function CommentCreate(props: Props) {
           button="primary"
           disabled={disabled}
           type="submit"
-          label={isReply ? __('Reply') : __('Post')}
+          label={
+            isReply
+              ? isPostingComment
+                ? __('Replying...')
+                : __('Reply')
+              : isPostingComment
+              ? __('Posting...')
+              : __('Post')
+          }
           requiresAuth={IS_WEB}
         />
         {isReply && (

ui/component/commentsList/view.jsx

@@ -193,7 +193,9 @@ function CommentList(props: Props) {
       actions={
         <>
           <CommentCreate uri={uri} />
+
           {!isFetchingComments && hasNoComments && <div className="main--empty">{__('Be the first to comment!')}</div>}
+
           <ul className="comments" ref={commentRef}>
             {!isFetchingComments &&
               comments &&
@@ -202,13 +204,13 @@ function CommentList(props: Props) {
                 return (
                   <CommentView
                     isTopLevel
+                    threadDepth={3}
                     key={comment.comment_id}
                     uri={uri}
                     authorUri={comment.channel_url}
                     author={comment.channel_name}
                     claimId={comment.claim_id}
                     commentId={comment.comment_id}
-                    topLevelId={comment.comment_id}
                     message={comment.comment}
                     timePosted={comment.timestamp * 1000}
                     claimIsMine={claimIsMine}
@@ -218,6 +220,7 @@ function CommentList(props: Props) {
                 );
               })}
           </ul>
+
           {(isFetchingComments || moreBelow) && (
             <div className="main--empty" ref={spinnerRef}>
               <Spinner type="small" />

ui/component/commentsReplies/index.js

@@ -5,7 +5,7 @@ import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import CommentsReplies from './view';
 
 const select = (state, props) => ({
-  comments: makeSelectRepliesForParentId(props.topLevelId)(state),
+  comments: makeSelectRepliesForParentId(props.parentId)(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
   commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
   myChannels: selectMyChannelClaims(state),

ui/component/commentsReplies/view.jsx

@@ -3,7 +3,6 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import Comment from 'component/comment';
 import Button from 'component/button';
-import CommentCreate from 'component/commentCreate';
 
 type Props = {
   comments: Array<any>,
@@ -11,25 +10,13 @@ type Props = {
   claimIsMine: boolean,
   myChannels: ?Array<ChannelClaim>,
   linkedComment?: Comment,
-  topLevelId: string,
   commentingEnabled: boolean,
-  topLevelIsReplying: boolean,
+  threadDepth: number,
-  setTopLevelIsReplying: boolean => void,
 };
 
 function CommentsReplies(props: Props) {
-  const {
+  const { uri, comments, claimIsMine, myChannels, linkedComment, commentingEnabled, threadDepth } = props;
-    uri,
+  const [isExpanded, setExpanded] = React.useState(true);
-    comments,
-    claimIsMine,
-    myChannels,
-    linkedComment,
-    topLevelId,
-    commentingEnabled,
-    topLevelIsReplying,
-    setTopLevelIsReplying,
-  } = props;
-  const [isExpanded, setExpanded] = React.useState(false);
   const [start, setStart] = React.useState(0);
   const [end, setEnd] = React.useState(9);
   const sortedComments = comments ? [...comments].reverse() : [];
@@ -63,7 +50,6 @@ function CommentsReplies(props: Props) {
       setStart(numberOfComments || 0);
     }
     setEnd(numberOfComments + 1);
-    setTopLevelIsReplying(false);
   }
 
   React.useEffect(() => {
@@ -84,17 +70,13 @@ function CommentsReplies(props: Props) {
   const displayedComments = sortedComments.slice(start, end);
 
   return (
-    (Boolean(numberOfComments) || topLevelIsReplying) && (
+    Boolean(numberOfComments) && (
       <div className="comment__replies-container">
-        {Boolean(numberOfComments) && (
+        {Boolean(numberOfComments) && !isExpanded && (
           <div className="comment__actions--nested">
             <Button
               className="comment__action"
-              label={
+              label={__('Show Replies')}
-                isExpanded
-                  ? __('Hide %number% Replies', { number: numberOfComments })
-                  : __('Show %number% Replies', { number: numberOfComments })
-              }
               onClick={() => setExpanded(!isExpanded)}
               icon={isExpanded ? ICONS.UP : ICONS.DOWN}
             />
@@ -109,6 +91,7 @@ function CommentsReplies(props: Props) {
                 {displayedComments.map((comment, index) => {
                   return (
                     <Comment
+                      threadDepth={threadDepth}
                       uri={uri}
                       authorUri={comment.channel_url}
                       author={comment.channel_name}
@@ -121,9 +104,7 @@ function CommentsReplies(props: Props) {
                       commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                       linkedComment={linkedComment}
                       commentingEnabled={commentingEnabled}
-                      hideReplyButton={index !== displayedComments.length - 1}
+                      handleCommentDone={handleCommentDone}
-                      topLevelIsReplying={topLevelIsReplying}
-                      setTopLevelIsReplying={setTopLevelIsReplying}
                     />
                   );
                 })}
@@ -136,17 +117,6 @@ function CommentsReplies(props: Props) {
             <Button button="link" label={__('Show more')} onClick={showMore} className="button--uri-indicator" />
           </div>
         )}
-
-        {topLevelIsReplying && (
-          <CommentCreate
-            isNested={isExpanded}
-            key={topLevelId}
-            uri={uri}
-            topLevelId={topLevelId}
-            onDoneReplying={() => handleCommentDone()}
-            onCancelReplying={() => setTopLevelIsReplying(false)}
-          />
-        )}
       </div>
     )
   );

ui/scss/component/_comments.scss

@@ -1,5 +1,5 @@
-$thumbnailWidth: 2rem;
+$thumbnailWidth: 1.5rem;
-$thumbnailWidthSmall: 1.5rem;
+$thumbnailWidthSmall: 0rem;
 
 .comments {
   list-style-type: none;
@@ -9,7 +9,7 @@ $thumbnailWidthSmall: 1.5rem;
 
 .comments--replies {
   list-style-type: none;
-  margin-left: var(--spacing-m);
+  margin-left: var(--spacing-s);
   flex: 1;
 }
 
@@ -29,8 +29,7 @@ $thumbnailWidthSmall: 1.5rem;
 }
 
 .comment__create--reply {
-  margin-top: var(--spacing-l);
+  margin-top: var(--spacing-m);
-  margin-left: calc(#{$thumbnailWidth} + var(--spacing-m));
   position: relative;
 }
 
@@ -81,11 +80,17 @@ $thumbnailWidthSmall: 1.5rem;
   }
 }
 
+.comment--top-level {
+  &:not(:first-child) {
+    margin-top: var(--spacing-l);
+  }
+}
+
 .comment__threadline {
   @extend .button--alt;
   height: auto;
   align-self: stretch;
-  padding: 2px;
+  padding: 1px;
   border-radius: 3px;
   background-color: var(--color-comment-threadline);
 
@@ -94,6 +99,10 @@ $thumbnailWidthSmall: 1.5rem;
     background-color: var(--color-comment-threadline-hover);
     border-color: var(--color-comment-threadline-hover);
   }
+
+  @media (min-width: $breakpoint-small) {
+    padding: 2px;
+  }
 }
 
 .comment-new__label-wrapper {
@@ -134,7 +143,6 @@ $thumbnailWidthSmall: 1.5rem;
 .comment__meta {
   display: flex;
   justify-content: space-between;
-  text-overflow: ellipsis;
 }
 
 .comment__meta-information {

ui/scss/themes/dark.scss

@@ -57,6 +57,8 @@
   --color-purchased-text: var(--color-gray-5);
   --color-comment-highlighted: #484734;
   --color-thumbnail-background: var(--color-gray-5);
+  --color-comment-threadline: #434b54;
+  --color-comment-threadline-hover: var(--color-gray-4);
 
   // Text
   --color-text: #d8d8d8;

ui/scss/themes/light.scss

@@ -26,9 +26,8 @@
   --color-purchased-alt: #ffebc2;
   --color-purchased-text: var(--color-gray-5);
   --color-comment-highlighted: #fff2d9;
-  --color-comment-threadline: var(--color-gray-2);
+  --color-comment-threadline: var(--color-gray-1);
   --color-comment-threadline-hover: var(--color-gray-4);
-  --color-comment-threadline-border: var(--color-gray-2);
   --color-thumbnail-background: var(--color-gray-1);
 
   // Icons