hyperchats

lbryio · Apr 23, 2021 · 6e97398 · 6e97398
1 parent bd62a55
commit 6e97398
Show file tree

Hide file tree

Showing 66 changed files with 1,594 additions and 403 deletions.
diff --git a/flow-typed/Comment.js b/flow-typed/Comment.js
@@ -12,11 +12,13 @@ declare type Comment = {
   is_channel_signature_valid?: boolean, // whether or not the signature could be validated
   parent_id?: number, // comment_id of comment this is in reply to
   is_pinned: boolean,
+  support_amount: number,
 };
 
 // todo: relate individual comments to their commentId
 declare type CommentsState = {
   commentsByUri: { [string]: string },
+  superChatsByUri: { [string]: { totalAmount: number, comments: Array<Comment> } },
   byId: { [string]: Array<string> },
   repliesByParentId: { [string]: Array<string> }, // ParentCommentID -> list of reply comments
   topLevelCommentsById: { [string]: Array<string> }, // ClaimID -> list of top level comments
@@ -41,3 +43,36 @@ declare type CommentReactParams = {
   clear_types?: string,
   remove?: boolean,
 };
+
+// @flow
+declare type CommentListParams = {
+  page: number,
+  page_size: number,
+  claim_id: string,
+};
+
+declare type CommentListResponse = {
+  items: Array<Comment>,
+  total_amount: number,
+};
+
+declare type CommentAbandonParams = {
+  comment_id: string,
+  creator_channel_id?: string,
+  creator_channel_name?: string,
+  channel_id?: string,
+  hexdata?: string,
+};
+
+declare type CommentCreateParams = {
+  comment: string,
+  claim_id: string,
+  parent_id?: string,
+  signature: string,
+  signing_ts: number,
+  support_tx_id?: string,
+};
+
+declare type SuperListParams = {};
+
+declare type ModerationBlockParams = {};
diff --git a/flow-typed/comments.js b/flow-typed/comments.js
diff --git a/flow-typed/user.js b/flow-typed/user.js
@@ -30,4 +30,5 @@ declare type User = {
   experimental_ui: boolean,
   odysee_live_enabled: boolean,
   odysee_live_disabled: boolean,
+  global_mod: boolean,
 };
diff --git a/package.json b/package.json
@@ -142,7 +142,7 @@
     "imagesloaded": "^4.1.4",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#eb37009a987410a60e9f2ba79708049c9904687c",
+    "lbry-redux": "lbryio/lbry-redux#7e173446838b381491492526ff29ca8312819879",
     "lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

diff --git a/ui/comments.js b/ui/comments.js
@@ -10,6 +10,8 @@ const Comments = {
   moderation_block_list: (params: ModerationBlockParams) => fetchCommentsApi('moderation.BlockedList', params),
   comment_list: (params: CommentListParams) => fetchCommentsApi('comment.List', params),
   comment_abandon: (params: CommentAbandonParams) => fetchCommentsApi('comment.Abandon', params),
+  comment_create: (params: CommentCreateParams) => fetchCommentsApi('comment.Create', params),
+  super_list: (params: SuperListParams) => fetchCommentsApi('comment.SuperChatList', params),
 };
 
 function fetchCommentsApi(method: string, params: {}) {

diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx
@@ -19,6 +19,7 @@ type Props = {
   isResolving: boolean,
   showDelayedMessage?: boolean,
   hideStakedIndicator?: boolean,
+  xsmall?: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
@@ -29,6 +30,7 @@ function ChannelThumbnail(props: Props) {
     thumbnailPreview: rawThumbnailPreview,
     obscure,
     small = false,
+    xsmall = false,
     allowGifs = false,
     claim,
     doResolveUri,
@@ -72,6 +74,7 @@ function ChannelThumbnail(props: Props) {
       className={classnames('channel-thumbnail', className, {
         [colorClassName]: !showThumb,
         'channel-thumbnail--small': small,
+        'channel-thumbnail--xsmall': xsmall,
         'channel-thumbnail--resolving': isResolving,
       })}
     >

diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx
@@ -30,12 +30,12 @@ type Props = {
   persistedStorageKey?: string,
   showHiddenByUser: boolean,
   showUnresolvedClaims?: boolean,
-  renderProperties: ?(Claim) => Node,
+  renderActions?: (Claim) => ?Node,
+  renderProperties?: (Claim) => ?Node,
   includeSupportAction?: boolean,
   injectedItem: ?Node,
   timedOutMessage?: Node,
   tileLayout?: boolean,
-  renderActions?: (Claim) => ?Node,
   searchInLanguage: boolean,
   hideMenu?: boolean,
 };
@@ -55,12 +55,12 @@ export default function ClaimList(props: Props) {
     page,
     showHiddenByUser,
     showUnresolvedClaims,
-    renderProperties,
     includeSupportAction,
     injectedItem,
     timedOutMessage,
     tileLayout = false,
     renderActions,
+    renderProperties,
     searchInLanguage,
     hideMenu,
   } = props;
@@ -101,7 +101,9 @@ export default function ClaimList(props: Props) {
   return tileLayout && !header ? (
     <section className="claim-grid">
       {urisLength > 0 &&
-        uris.map((uri) => <ClaimPreviewTile key={uri} uri={uri} showHiddenByUser={showHiddenByUser} />)}
+        uris.map((uri) => (
+          <ClaimPreviewTile key={uri} uri={uri} showHiddenByUser={showHiddenByUser} properties={renderProperties} />
+        ))}
       {!timedOut && urisLength === 0 && !loading && <div className="empty main--empty">{empty || noResultMsg}</div>}
       {timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>}
     </section>

diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx
@@ -301,10 +301,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                     <ClaimPreviewTitle uri={uri} />
                   </NavLink>
                 )}
-
-                {/* {type !== 'small' && !isChannelUri && signingChannel && SIMPLE_SITE && (
-                <ChannelThumbnail uri={signingChannel.permanent_url} />
-              )} */}
               </div>
               <ClaimPreviewSubtitle uri={uri} type={type} />
               {(pending || !!reflectingProgress) && <PublishPending uri={uri} />}

diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
@@ -40,6 +40,7 @@ type Props = {
   isMature: boolean,
   showMature: boolean,
   showHiddenByUser?: boolean,
+  properties?: (Claim) => void,
 };
 
 function ClaimPreviewTile(props: Props) {
@@ -60,6 +61,7 @@ function ClaimPreviewTile(props: Props) {
     isMature,
     showMature,
     showHiddenByUser,
+    properties,
   } = props;
   const isRepost = claim && claim.repost_channel_url;
   const shouldFetch = claim === undefined;
@@ -171,7 +173,7 @@ function ClaimPreviewTile(props: Props) {
               </div>
               {/* @endif */}
               <div className="claim-preview__file-property-overlay">
-                <FileProperties uri={uri} small />
+                <FileProperties uri={uri} small properties={properties} />
               </div>
             </React.Fragment>
           )}

diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx
@@ -1,6 +1,7 @@
 // @flow
 import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
 import * as CS from 'constants/claim_search';
+import type { Node } from 'react';
 import React from 'react';
 import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux';
 import ClaimPreviewTile from 'component/claimPreviewTile';
@@ -34,6 +35,8 @@ type Props = {
   timestamp?: string,
   feeAmount?: string,
   limitClaimsPerChannel?: number,
+  hasNoSource?: boolean,
+  renderProperties?: (Claim) => ?Node,
 };
 
 function ClaimTilesDiscover(props: Props) {
@@ -57,6 +60,8 @@ function ClaimTilesDiscover(props: Props) {
     feeAmount,
     limitClaimsPerChannel,
     fetchingClaimSearchByQuery,
+    hasNoSource,
+    renderProperties,
   } = props;
   const { location } = useHistory();
   const urlParams = new URLSearchParams(location.search);
@@ -95,7 +100,9 @@ function ClaimTilesDiscover(props: Props) {
     stream_types: streamTypes === null ? undefined : SIMPLE_SITE ? [CS.FILE_VIDEO, CS.FILE_AUDIO] : undefined,
   };
 
-  if (!ENABLE_NO_SOURCE_CLAIMS && (!claimType || claimType === 'stream')) {
+  if (ENABLE_NO_SOURCE_CLAIMS && hasNoSource) {
+    options.has_no_source = true;
+  } else if (!ENABLE_NO_SOURCE_CLAIMS && (!claimType || claimType === 'stream')) {
     options.has_source = true;
   }
 
@@ -149,7 +156,7 @@ function ClaimTilesDiscover(props: Props) {
   return (
     <ul className="claim-grid">
       {uris && uris.length
-        ? uris.map((uri) => <ClaimPreviewTile key={uri} uri={uri} />)
+        ? uris.map((uri) => <ClaimPreviewTile key={uri} uri={uri} properties={renderProperties} />)
         : new Array(pageSize).fill(1).map((x, i) => <ClaimPreviewTile key={i} placeholder />)}
     </ul>
   );

diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
@@ -21,6 +21,7 @@ import { useHistory } from 'react-router';
 import CommentCreate from 'component/commentCreate';
 import CommentMenuList from 'component/commentMenuList';
 import UriIndicator from 'component/uriIndicator';
+import CreditAmount from 'component/common/credit-amount';
 
 type Props = {
   clearPlayingUri: () => void,
@@ -51,7 +52,7 @@ type Props = {
   activeChannelClaim: ?ChannelClaim,
   playingUri: ?PlayingUri,
   stakedLevel: number,
-  livestream?: boolean,
+  supportAmount: number,
 };
 
 const LENGTH_TO_COLLAPSE = 300;
@@ -80,7 +81,7 @@ function Comment(props: Props) {
     othersReacts,
     playingUri,
     stakedLevel,
-    livestream,
+    supportAmount,
   } = props;
   const {
     push,
@@ -167,7 +168,7 @@ function Comment(props: Props) {
       className={classnames('comment', {
         'comment--top-level': isTopLevel,
         'comment--reply': !isTopLevel,
-        'comment--livestream': livestream,
+        'comment--superchat': supportAmount > 0,
       })}
       id={commentId}
       onMouseOver={() => setMouseHover(true)}
@@ -179,22 +180,15 @@ function Comment(props: Props) {
           'comment--slimed': slimedToDeath && !displayDeadComment,
         })}
       >
-        {!livestream && (
-          <div className="comment__thumbnail-wrapper">
-            {authorUri ? (
-              <ChannelThumbnail
-                uri={authorUri}
-                obscure={channelIsBlocked}
-                small
-                className="comment__author-thumbnail"
-              />
-            ) : (
-              <ChannelThumbnail small className="comment__author-thumbnail" />
-            )}
-          </div>
-        )}
+        <div className="comment__thumbnail-wrapper">
+          {authorUri ? (
+            <ChannelThumbnail uri={authorUri} obscure={channelIsBlocked} small className="comment__author-thumbnail" />
+          ) : (
+            <ChannelThumbnail small className="comment__author-thumbnail" />
+          )}
+        </div>
 
-        <div className="comment__body_container">
+        <div className="comment__body-container">
           <div className="comment__meta">
             <div className="comment__meta-information">
               {!author ? (
@@ -205,17 +199,16 @@ function Comment(props: Props) {
                     'comment__author--creator': commentByOwnerOfContent,
                   })}
                   link
-                  external={livestream}
                   uri={authorUri}
                 />
               )}
-              {!livestream && (
-                <Button
-                  className="comment__time"
-                  onClick={handleTimeClick}
-                  label={<DateTime date={timePosted} timeAgo />}
-                />
-              )}
+              <Button
+                className="comment__time"
+                onClick={handleTimeClick}
+                label={<DateTime date={timePosted} timeAgo />}
+              />
+
+              {supportAmount > 0 && <CreditAmount amount={supportAmount} superChatLight size={12} />}
 
               {isPinned && (
                 <span className="comment__pin">
@@ -251,14 +244,15 @@ function Comment(props: Props) {
             {isEditing ? (
               <Form onSubmit={handleSubmit}>
                 <FormField
+                  className="comment__edit-input"
                   type={!SIMPLE_SITE && advancedEditor ? 'markdown' : 'textarea'}
                   name="editing_comment"
                   value={editedMessage}
                   charCount={charCount}
                   onChange={handleEditMessageChanged}
                   textAreaMaxLength={FF_MAX_CHARS_IN_COMMENT}
                 />
-                <div className="section__actions">
+                <div className="section__actions section__actions--no-margin">
                   <Button
                     button="primary"
                     type="submit"
@@ -295,20 +289,18 @@ function Comment(props: Props) {
                   )}
                 </div>
 
-                {!livestream && (
-                  <div className="comment__actions">
-                    {threadDepth !== 0 && (
-                      <Button
-                        requiresAuth={IS_WEB}
-                        label={commentingEnabled ? __('Reply') : __('Log in to reply')}
-                        className="comment__action"
-                        onClick={handleCommentReply}
-                        icon={ICONS.REPLY}
-                      />
-                    )}
-                    {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
-                  </div>
-                )}
+                <div className="comment__actions">
+                  {threadDepth !== 0 && (
+                    <Button
+                      requiresAuth={IS_WEB}
+                      label={commentingEnabled ? __('Reply') : __('Log in to reply')}
+                      className="comment__action"
+                      onClick={handleCommentReply}
+                      icon={ICONS.REPLY}
+                    />
+                  )}
+                  {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
+                </div>
 
                 {isReplying && (
                   <CommentCreate