flow-typed/Comment.js

@@ -27,6 +27,10 @@ declare type CommentsState = {
   myReactsByCommentId: any,
   othersReactsByCommentId: any,
   pendingCommentReactions: Array<string>,
+  moderationBlockList: ?Array<string>,
+  fetchingModerationBlockList: boolean,
+  blockingByUri: {},
+  unBlockingByUri: {},
 };
 
 declare type CommentReactParams = {

ui/comments.js

@@ -6,6 +6,8 @@ const Comments = {
   enabled: Boolean(COMMENT_SERVER_API),
 
   moderation_block: (params: ModerationBlockParams) => fetchCommentsApi('moderation.Block', params),
+  moderation_unblock: (params: ModerationBlockParams) => fetchCommentsApi('moderation.UnBlock', params),
+  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),
 };
@@ -30,8 +32,8 @@ function fetchCommentsApi(method: string, params: {}) {
   };
 
   return fetch(url, options)
-    .then(res => res.json())
+    .then((res) => res.json())
-    .then(res => res.result);
+    .then((res) => res.result);
 }
 
 export default Comments;

ui/component/abandonedChannelPreview/index.js

@@ -1,14 +1,6 @@
 import { connect } from 'react-redux';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
-import { doChannelUnsubscribe } from 'redux/actions/subscriptions';
-import { doOpenModal } from 'redux/actions/app';
 import AbandonedChannelPreview from './view';
 
-const select = (state, props) => ({
+const select = (state, props) => ({});
-  blockedChannelUris: selectBlockedChannels(state),
-});
 
-export default connect(select, {
+export default connect(select)(AbandonedChannelPreview);
-  doChannelUnsubscribe,
-  doOpenModal,
-})(AbandonedChannelPreview);

ui/component/abandonedChannelPreview/view.jsx

@@ -2,28 +2,18 @@
 import React from 'react';
 import classnames from 'classnames';
 import ChannelThumbnail from 'component/channelThumbnail';
-import Button from 'component/button';
 import { parseURI } from 'lbry-redux';
-import * as ICONS from '../../constants/icons';
+import ChannelBlockButton from 'component/channelBlockButton';
-import * as MODALS from 'constants/modal_types';
+import ChannelMuteButton from 'component/channelMuteButton';
-
-type SubscriptionArgs = {
-  channelName: string,
-  uri: string,
-};
 
 type Props = {
   uri: string,
-  doChannelUnsubscribe: SubscriptionArgs => void,
   type: string,
-  blockedChannelUris: Array<string>,
-  doOpenModal: (string, {}) => void,
 };
 
 function AbandonedChannelPreview(props: Props) {
-  const { uri, doChannelUnsubscribe, type, blockedChannelUris, doOpenModal } = props;
+  const { uri, type } = props;
   const { channelName } = parseURI(uri);
-  const isBlockedChannel = blockedChannelUris.includes(uri);
 
   return (
     <li className={classnames('claim-preview__wrapper', 'claim-preview__wrapper--notice')}>
@@ -37,31 +27,10 @@ function AbandonedChannelPreview(props: Props) {
             <div className="media__subtitle">{__(`This channel may have been unpublished.`)}</div>
           </div>
           <div className="claim-preview__actions">
-            {isBlockedChannel && (
+            <div className="section__actions">
-              <Button
+              <ChannelBlockButton uri={uri} />
-                iconColor="red"
+              <ChannelMuteButton uri={uri} />
-                icon={ICONS.UNBLOCK}
+            </div>
-                button={'alt'}
-                label={__('Unblock')}
-                onClick={() => doOpenModal(MODALS.REMOVE_BLOCKED, { blockedUri: uri })}
-              />
-            )}
-            {/* SubscribeButton uses resolved permanentUri; modifying it didn't seem worth it. */}
-            {!isBlockedChannel && (
-              <Button
-                iconColor="red"
-                icon={ICONS.UNSUBSCRIBE}
-                button={'alt'}
-                label={__('Unfollow')}
-                onClick={e => {
-                  e.stopPropagation();
-                  doChannelUnsubscribe({
-                    channelName: `@${channelName}`,
-                    uri,
-                  });
-                }}
-              />
-            )}
           </div>
         </div>
       </div>

ui/component/app/index.js

@@ -27,9 +27,10 @@ import {
   doSetActiveChannel,
   doSetIncognito,
 } from 'redux/actions/app';
+import { doFetchModBlockedList } from 'redux/actions/comments';
 import App from './view';
 
-const select = state => ({
+const select = (state) => ({
   user: selectUser(state),
   accessToken: selectAccessToken(state),
   theme: selectThemePath(state),
@@ -48,18 +49,19 @@ const select = state => ({
   myChannelUrls: selectMyChannelUrls(state),
 });
 
-const perform = dispatch => ({
+const perform = (dispatch) => ({
   fetchAccessToken: () => dispatch(doFetchAccessToken()),
   fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
-  setLanguage: language => dispatch(doSetLanguage(language)),
+  setLanguage: (language) => dispatch(doSetLanguage(language)),
   signIn: () => dispatch(doSignIn()),
   requestDownloadUpgrade: () => dispatch(doDownloadUpgradeRequested()),
   updatePreferences: () => dispatch(doGetAndPopulatePreferences()),
   getWalletSyncPref: () => dispatch(doGetWalletSyncPreference()),
-  syncLoop: noInterval => dispatch(doSyncLoop(noInterval)),
+  syncLoop: (noInterval) => dispatch(doSyncLoop(noInterval)),
   setReferrer: (referrer, doClaim) => dispatch(doUserSetReferrer(referrer, doClaim)),
   setActiveChannelIfNotSet: () => dispatch(doSetActiveChannel()),
   setIncognito: () => dispatch(doSetIncognito()),
+  fetchModBlockedList: () => dispatch(doFetchModBlockedList()),
 });
 
 export default hot(connect(select, perform)(App));

ui/component/app/view.jsx

@@ -56,14 +56,14 @@ type Props = {
     goForward: () => void,
     index: number,
     length: number,
-    push: string => void,
+    push: (string) => void,
   },
   fetchAccessToken: () => void,
   fetchChannelListMine: () => void,
   signIn: () => void,
   requestDownloadUpgrade: () => void,
   onSignedIn: () => void,
-  setLanguage: string => void,
+  setLanguage: (string) => void,
   isUpgradeAvailable: boolean,
   autoUpdateDownloaded: boolean,
   updatePreferences: () => Promise<any>,
@@ -83,7 +83,8 @@ type Props = {
   activeChannelClaim: ?ChannelClaim,
   myChannelUrls: ?Array<string>,
   setActiveChannelIfNotSet: () => void,
-  setIncognito: boolean => void,
+  setIncognito: (boolean) => void,
+  fetchModBlockedList: () => void,
 };
 
 function App(props: Props) {
@@ -114,6 +115,7 @@ function App(props: Props) {
     activeChannelClaim,
     setActiveChannelIfNotSet,
     setIncognito,
+    fetchModBlockedList,
   } = props;
 
   const appRef = useRef();
@@ -134,7 +136,7 @@ function App(props: Props) {
   const showUpgradeButton =
     (autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable)) && !upgradeNagClosed;
   // referral claiming
-  const referredRewardAvailable = rewards && rewards.some(reward => reward.reward_type === REWARDS.TYPE_REFEREE);
+  const referredRewardAvailable = rewards && rewards.some((reward) => reward.reward_type === REWARDS.TYPE_REFEREE);
   const urlParams = new URLSearchParams(search);
   const rawReferrerParam = urlParams.get('r');
   const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#');
@@ -166,7 +168,7 @@ function App(props: Props) {
 
   useEffect(() => {
     if (!uploadCount) return;
-    const handleBeforeUnload = event => {
+    const handleBeforeUnload = (event) => {
       event.preventDefault();
       event.returnValue = 'magic'; // without setting this to something it doesn't work
     };
@@ -176,7 +178,7 @@ function App(props: Props) {
 
   // allows user to navigate history using the forward and backward buttons on a mouse
   useEffect(() => {
-    const handleForwardAndBackButtons = e => {
+    const handleForwardAndBackButtons = (e) => {
       switch (e.button) {
         case MOUSE_BACK_BTN:
           history.index > 0 && history.goBack();
@@ -192,7 +194,7 @@ function App(props: Props) {
 
   // allows user to pause miniplayer using the spacebar without the page scrolling down
   useEffect(() => {
-    const handleKeyPress = e => {
+    const handleKeyPress = (e) => {
       if (e.key === ' ' && e.target === document.body) {
         e.preventDefault();
       }
@@ -244,6 +246,10 @@ function App(props: Props) {
     } else if (hasNoChannels) {
       setIncognito(true);
     }
+
+    if (hasMyChannels) {
+      fetchModBlockedList();
+    }
   }, [hasMyChannels, hasNoChannels, hasActiveChannelClaim, setActiveChannelIfNotSet, setIncognito]);
 
   useEffect(() => {
@@ -358,7 +364,7 @@ function App(props: Props) {
         [`${MAIN_WRAPPER_CLASS}--scrollbar`]: useCustomScrollbar,
       })}
       ref={appRef}
-      onContextMenu={IS_WEB ? undefined : e => openContextMenu(e)}
+      onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)}
     >
       {IS_WEB && lbryTvApiStatus === STATUS_DOWN ? (
         <Yrbl

ui/component/blockButton/index.js

@@ -1,18 +0,0 @@
-import { connect } from 'react-redux';
-import { makeSelectClaimIsMine, makeSelectShortUrlForUri, makeSelectPermanentUrlForUri } from 'lbry-redux';
-import { selectChannelIsBlocked } from 'redux/selectors/blocked';
-import { doToast } from 'redux/actions/notifications';
-import { doToggleBlockChannel } from 'redux/actions/blocked';
-import BlockButton from './view';
-
-const select = (state, props) => ({
-  channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
-  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  shortUrl: makeSelectShortUrlForUri(props.uri)(state),
-  permanentUrl: makeSelectPermanentUrlForUri(props.uri)(state),
-});
-
-export default connect(select, {
-  toggleBlockChannel: doToggleBlockChannel,
-  doToast,
-})(BlockButton);

ui/component/blockButton/view.jsx

@@ -1,49 +0,0 @@
-// @flow
-import * as ICONS from 'constants/icons';
-import * as PAGES from 'constants/pages';
-import React, { useRef } from 'react';
-import Button from 'component/button';
-import useHover from 'effects/use-hover';
-
-type Props = {
-  permanentUrl: ?string,
-  shortUrl: string,
-  isSubscribed: boolean,
-  toggleBlockChannel: (uri: string) => void,
-  channelIsBlocked: boolean,
-  claimIsMine: boolean,
-  doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
-};
-
-export default function BlockButton(props: Props) {
-  const { permanentUrl, shortUrl, toggleBlockChannel, channelIsBlocked, claimIsMine, doToast } = props;
-
-  const blockRef = useRef();
-  const isHovering = useHover(blockRef);
-  const blockLabel = channelIsBlocked ? __('Blocked') : __('Block');
-  const blockTitlePrefix = channelIsBlocked ? __('Unblock this channel') : __('Block this channel');
-  const blockedOverride = channelIsBlocked && isHovering && __('Unblock');
-
-  return permanentUrl && (!claimIsMine || channelIsBlocked) ? (
-    <Button
-      ref={blockRef}
-      icon={ICONS.BLOCK}
-      button={'alt'}
-      label={blockedOverride || blockLabel}
-      title={blockTitlePrefix}
-      requiresAuth={IS_WEB}
-      onClick={e => {
-        e.stopPropagation();
-        if (!channelIsBlocked) {
-          doToast({
-            message: __('Blocked %channelUrl%', { channelUrl: shortUrl }),
-            linkText: __('Manage'),
-            linkTarget: `/${PAGES.BLOCKED}`,
-          });
-        }
-
-        toggleBlockChannel(permanentUrl);
-      }}
-    />
-  ) : null;
-}

ui/component/channelBlockButton/index.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { doCommentModUnBlock, doCommentModBlock } from 'redux/actions/comments';
+import { makeSelectChannelIsBlocked, makeSelectUriIsBlockingOrUnBlocking } from 'redux/selectors/comments';
+import ChannelBlockButton from './view';
+
+const select = (state, props) => ({
+  isBlocked: makeSelectChannelIsBlocked(props.uri)(state),
+  isBlockingOrUnBlocking: makeSelectUriIsBlockingOrUnBlocking(props.uri)(state),
+});
+
+export default connect(select, {
+  doCommentModUnBlock,
+  doCommentModBlock,
+})(ChannelBlockButton);

ui/component/channelBlockButton/view.jsx

@@ -0,0 +1,41 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+
+type Props = {
+  uri: string,
+  isBlocked: boolean,
+  isBlockingOrUnBlocking: boolean,
+  doCommentModUnBlock: (string) => void,
+  doCommentModBlock: (string) => void,
+};
+
+function ChannelBlockButton(props: Props) {
+  const { uri, doCommentModUnBlock, doCommentModBlock, isBlocked, isBlockingOrUnBlocking } = props;
+
+  function handleClick() {
+    if (isBlocked) {
+      doCommentModUnBlock(uri);
+    } else {
+      doCommentModBlock(uri);
+    }
+  }
+
+  return (
+    <Button
+      button={isBlocked ? 'alt' : 'secondary'}
+      label={
+        isBlocked
+          ? isBlockingOrUnBlocking
+            ? __('Unblocking...')
+            : __('Unblock')
+          : isBlockingOrUnBlocking
+          ? __('Blocking...')
+          : __('Block')
+      }
+      onClick={handleClick}
+    />
+  );
+}
+
+export default ChannelBlockButton;

ui/component/channelContent/index.js

@@ -8,7 +8,7 @@ import {
   makeSelectClaimForUri,
   SETTINGS,
 } from 'lbry-redux';
-import { selectChannelIsBlocked } from 'redux/selectors/blocked';
+import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { withRouter } from 'react-router';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
@@ -24,7 +24,7 @@ const select = (state, props) => {
     fetching: makeSelectFetchingChannelClaims(props.uri)(state),
     totalPages: makeSelectTotalPagesInChannelSearch(props.uri, PAGE_SIZE)(state),
     channelIsMine: makeSelectClaimIsMine(props.uri)(state),
-    channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
+    channelIsBlocked: makeSelectChannelIsMuted(props.uri)(state),
     claim: props.uri && makeSelectClaimForUri(props.uri)(state),
     isAuthenticated: selectUserVerifiedEmail(state),
     showMature: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),

ui/component/channelMuteButton/index.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { doToggleMuteChannel } from 'redux/actions/blocked';
+import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
+import ChannelMuteButton from './view';
+
+const select = (state, props) => ({
+  isMuted: makeSelectChannelIsMuted(props.uri)(state),
+});
+
+export default connect(select, {
+  doToggleMuteChannel,
+})(ChannelMuteButton);

ui/component/channelMuteButton/view.jsx

@@ -0,0 +1,24 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+
+type Props = {
+  uri: string,
+  isMuted: boolean,
+  channelClaim: ?ChannelClaim,
+  doToggleMuteChannel: (string) => void,
+};
+
+function ChannelBlockButton(props: Props) {
+  const { uri, doToggleMuteChannel, isMuted } = props;
+
+  return (
+    <Button
+      button={isMuted ? 'alt' : 'secondary'}
+      label={isMuted ? __('Unmute') : __('Mute')}
+      onClick={() => doToggleMuteChannel(uri)}
+    />
+  );
+}
+
+export default ChannelBlockButton;

ui/component/channelStakedIndicator/view.jsx

@@ -11,6 +11,7 @@ import CreditAmount from 'component/common/credit-amount';
 type Props = {
   channelClaim: ChannelClaim,
   large?: boolean,
+  inline?: boolean,
 };
 
 function getChannelLevel(amount: number): number {
@@ -47,7 +48,7 @@ function getChannelIcon(level: number): string {
 }
 
 function ChannelStakedIndicator(props: Props) {
-  const { channelClaim, large = false } = props;
+  const { channelClaim, large = false, inline = false } = props;
 
   if (!channelClaim || !channelClaim.meta) {
     return null;
@@ -79,6 +80,7 @@ function ChannelStakedIndicator(props: Props) {
         <div
           className={classnames('channel-staked__wrapper', {
             'channel-staked__wrapper--large': large,
+            'channel-staked__wrapper--inline': inline,
           })}
         >
           <LevelIcon icon={icon} large={large} isControlling={isControlling} />

ui/component/claimList/view.jsx

@@ -32,12 +32,12 @@ type Props = {
   showUnresolvedClaims?: boolean,
   renderProperties: ?(Claim) => Node,
   includeSupportAction?: boolean,
-  hideBlock: boolean,
   injectedItem: ?Node,
   timedOutMessage?: Node,
   tileLayout?: boolean,
   renderActions?: (Claim) => ?Node,
   searchInLanguage: boolean,
+  hideMenu?: boolean,
 };
 
 export default function ClaimList(props: Props) {
@@ -57,12 +57,12 @@ export default function ClaimList(props: Props) {
     showUnresolvedClaims,
     renderProperties,
     includeSupportAction,
-    hideBlock,
     injectedItem,
     timedOutMessage,
     tileLayout = false,
     renderActions,
     searchInLanguage,
+    hideMenu,
   } = props;
 
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@@ -149,12 +149,12 @@ export default function ClaimList(props: Props) {
               <ClaimPreview
                 uri={uri}
                 type={type}
+                hideMenu={hideMenu}
                 includeSupportAction={includeSupportAction}
                 showUnresolvedClaim={showUnresolvedClaims}
                 properties={renderProperties || (type !== 'small' ? undefined : false)}
                 renderActions={renderActions}
                 showUserBlocked={showHiddenByUser}
-                hideBlock={hideBlock}
                 customShouldHide={(claim: StreamClaim) => {
                   // Hack to hide spee.ch thumbnail publishes
                   // If it meets these requirements, it was probably uploaded here:

ui/component/claimListDiscover/index.js

@@ -7,12 +7,12 @@ import {
   SETTINGS,
 } from 'lbry-redux';
 import { selectFollowedTags } from 'redux/selectors/tags';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { makeSelectClientSetting, selectLanguage } from 'redux/selectors/settings';
 import ClaimListDiscover from './view';
 
-const select = state => ({
+const select = (state) => ({
   followedTags: selectFollowedTags(state),
   claimSearchByQuery: selectClaimSearchByQuery(state),
   claimSearchByQueryLastPageReached: selectClaimSearchByQueryLastPageReached(state),
@@ -20,7 +20,7 @@ const select = state => ({
   showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
   hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
   languageSetting: selectLanguage(state),
-  hiddenUris: selectBlockedChannels(state),
+  hiddenUris: selectMutedChannels(state),
   searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
 });
 

ui/component/claimListDiscover/view.jsx

@@ -20,11 +20,11 @@ type Props = {
   doClaimSearch: ({}) => void,
   loading: boolean,
   personalView: boolean,
-  doToggleTagFollowDesktop: string => void,
+  doToggleTagFollowDesktop: (string) => void,
   meta?: Node,
   showNsfw: boolean,
   hideReposts: boolean,
-  history: { action: string, push: string => void, replace: string => void },
+  history: { action: string, push: (string) => void, replace: (string) => void },
   location: { search: string, pathname: string },
   claimSearchByQuery: {
     [string]: Array<string>,
@@ -43,13 +43,12 @@ type Props = {
   header?: Node,
   headerLabel?: string | Node,
   name?: string,
-  hideBlock?: boolean,
   hideAdvancedFilter?: boolean,
   claimType?: Array<string>,
   defaultClaimType?: Array<string>,
   streamType?: string | Array<string>,
   defaultStreamType?: string | Array<string>,
-  renderProperties?: Claim => Node,
+  renderProperties?: (Claim) => Node,
   includeSupportAction?: boolean,
   repostedClaimId?: string,
   pageSize?: number,
@@ -89,7 +88,6 @@ function ClaimListDiscover(props: Props) {
     name,
     claimType,
     pageSize,
-    hideBlock,
     defaultClaimType,
     streamType,
     defaultStreamType,
@@ -120,7 +118,7 @@ function ClaimListDiscover(props: Props) {
   const isLargeScreen = useIsLargeScreen();
   const [orderParamEntry, setOrderParamEntry] = usePersistedState(`entry-${location.pathname}`, CS.ORDER_BY_TRENDING);
   const [orderParamUser, setOrderParamUser] = usePersistedState(`orderUser-${location.pathname}`, CS.ORDER_BY_TRENDING);
-  const followed = (followedTags && followedTags.map(t => t.name)) || [];
+  const followed = (followedTags && followedTags.map((t) => t.name)) || [];
   const urlParams = new URLSearchParams(search);
   const tagsParam = // can be 'x,y,z' or 'x' or ['x','y'] or CS.CONSTANT
     (tags && getParamFromTags(tags)) ||
@@ -206,7 +204,7 @@ function ClaimListDiscover(props: Props) {
     no_totals: true,
     not_channel_ids:
       // If channelIdsParam were passed in, we don't need not_channel_ids
-      !channelIdsParam && hiddenUris && hiddenUris.length ? hiddenUris.map(hiddenUri => hiddenUri.split('#')[1]) : [],
+      !channelIdsParam && hiddenUris && hiddenUris.length ? hiddenUris.map((hiddenUri) => hiddenUri.split('#')[1]) : [],
     not_tags: !showNsfw ? MATURE_TAGS : [],
     order_by:
       orderParam === CS.ORDER_BY_TRENDING
@@ -247,12 +245,7 @@ function ClaimListDiscover(props: Props) {
 
   if (claimType !== CS.CLAIM_CHANNEL) {
     if (orderParam === CS.ORDER_BY_TOP && freshnessParam !== CS.FRESH_ALL) {
-      options.release_time = `>${Math.floor(
+      options.release_time = `>${Math.floor(moment().subtract(1, freshnessParam).startOf('hour').unix())}`;
-        moment()
-          .subtract(1, freshnessParam)
-          .startOf('hour')
-          .unix()
-      )}`;
     } else if (orderParam === CS.ORDER_BY_NEW || orderParam === CS.ORDER_BY_TRENDING) {
       // Warning - hack below
       // If users are following more than 10 channels or tags, limit results to stuff less than a year old
@@ -263,29 +256,15 @@ function ClaimListDiscover(props: Props) {
         (options.channel_ids && options.channel_ids.length > 20) ||
         (options.any_tags && options.any_tags.length > 20)
       ) {
-        options.release_time = `>${Math.floor(
+        options.release_time = `>${Math.floor(moment().subtract(3, CS.FRESH_MONTH).startOf('week').unix())}`;
-          moment()
-            .subtract(3, CS.FRESH_MONTH)
-            .startOf('week')
-            .unix()
-        )}`;
       } else if (
         (options.channel_ids && options.channel_ids.length > 10) ||
         (options.any_tags && options.any_tags.length > 10)
       ) {
-        options.release_time = `>${Math.floor(
+        options.release_time = `>${Math.floor(moment().subtract(1, CS.FRESH_YEAR).startOf('week').unix())}`;
-          moment()
-            .subtract(1, CS.FRESH_YEAR)
-            .startOf('week')
-            .unix()
-        )}`;
       } else {
         // Hack for at least the New page until https://github.com/lbryio/lbry-sdk/issues/2591 is fixed
-        options.release_time = `<${Math.floor(
+        options.release_time = `<${Math.floor(moment().startOf('minute').unix())}`;
-          moment()
-            .startOf('minute')
-            .unix()
-        )}`;
       }
     }
   }
@@ -333,14 +312,14 @@ function ClaimListDiscover(props: Props) {
   if (hideReposts && !options.reposted_claim_id && !forceShowReposts) {
     if (Array.isArray(options.claim_type)) {
       if (options.claim_type.length > 1) {
-        options.claim_type = options.claim_type.filter(claimType => claimType !== 'repost');
+        options.claim_type = options.claim_type.filter((claimType) => claimType !== 'repost');
       }
     } else {
       options.claim_type = ['stream', 'channel'];
     }
   }
 
-  const hasMatureTags = tagsParam && tagsParam.split(',').some(t => MATURE_TAGS.includes(t));
+  const hasMatureTags = tagsParam && tagsParam.split(',').some((t) => MATURE_TAGS.includes(t));
   const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
   const claimSearchResult = claimSearchByQuery[claimSearchCacheQuery];
   const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[claimSearchCacheQuery];
@@ -499,7 +478,6 @@ function ClaimListDiscover(props: Props) {
             timedOutMessage={timedOutMessage}
             renderProperties={renderProperties}
             includeSupportAction={includeSupportAction}
-            hideBlock={hideBlock}
             injectedItem={injectedItem}
           />
           {loading && (
@@ -527,7 +505,6 @@ function ClaimListDiscover(props: Props) {
             timedOutMessage={timedOutMessage}
             renderProperties={renderProperties}
             includeSupportAction={includeSupportAction}
-            hideBlock={hideBlock}
             injectedItem={injectedItem}
           />
           {loading && new Array(dynamicPageSize).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}

ui/component/claimMenuList/claim-preview-loading.jsx

@@ -0,0 +1,30 @@
+// @flow
+import classnames from 'classnames';
+import React from 'react';
+
+type Props = {
+  isChannel: boolean,
+  type: string,
+};
+
+function ClaimPreviewLoading(props: Props) {
+  const { isChannel, type } = props;
+  return (
+    <li
+      className={classnames('claim-preview__wrapper', {
+        'claim-preview__wrapper--channel': isChannel && type !== 'inline',
+        'claim-preview__wrapper--inline': type === 'inline',
+      })}
+    >
+      <div className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })}>
+        <div className="placeholder media__thumb" />
+        <div className="placeholder__wrapper">
+          <div className="placeholder claim-preview__title" />
+          <div className="placeholder media__subtitle" />
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export default ClaimPreviewLoading;

ui/component/claimMenuList/claim-preview-no-content.jsx

@@ -0,0 +1,32 @@
+// @flow
+import classnames from 'classnames';
+import React from 'react';
+import Empty from 'component/common/empty';
+
+type Props = {
+  isChannel: boolean,
+  type: string,
+};
+
+function ClaimPreviewNoContent(props: Props) {
+  const { isChannel, type } = props;
+  return (
+    <li
+      className={classnames('claim-preview__wrapper', {
+        'claim-preview__wrapper--channel': isChannel && type !== 'inline',
+        'claim-preview__wrapper--inline': type === 'inline',
+      })}
+    >
+      <div
+        className={classnames('claim-preview claim-preview--inactive', {
+          'claim-preview--large': type === 'large',
+          'claim-preview__empty': true,
+        })}
+      >
+        <Empty text={__('Nothing found here. Like big tech ethics.')} />
+      </div>
+    </li>
+  );
+}
+
+export default ClaimPreviewNoContent;

ui/component/claimMenuList/claim-preview-no-mature.jsx

@@ -0,0 +1,33 @@
+// @flow
+import classnames from 'classnames';
+import React from 'react';
+import Empty from 'component/common/empty';
+
+type Props = {
+  isChannel: boolean,
+  type: string,
+  message: string,
+};
+
+function ClaimPreviewHidden(props: Props) {
+  const { isChannel, type, message } = props;
+  return (
+    <li
+      className={classnames('claim-preview__wrapper', {
+        'claim-preview__wrapper--channel': isChannel && type !== 'inline',
+        'claim-preview__wrapper--inline': type === 'inline',
+      })}
+    >
+      <div
+        className={classnames('claim-preview  claim-preview--inactive claim-preview--empty', {
+          'claim-preview--large': type === 'large',
+        })}
+      >
+        <div className="media__thumb" />
+        <Empty text={message} />
+      </div>
+    </li>
+  );
+}
+
+export default ClaimPreviewHidden;

ui/component/claimMenuList/index.js

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri, makeSelectClaimIsMine } from 'lbry-redux';
+import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
+import { doToggleMuteChannel } from 'redux/actions/blocked';
+import { doCommentModBlock, doCommentModUnBlock } from 'redux/actions/comments';
+import { makeSelectChannelIsBlocked } from 'redux/selectors/comments';
+import ClaimPreview from './view';
+
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  channelIsMuted: makeSelectChannelIsMuted(props.uri)(state),
+  channelIsBlocked: makeSelectChannelIsBlocked(props.uri)(state),
+});
+
+export default connect(select, {
+  doToggleMuteChannel,
+  doCommentModBlock,
+  doCommentModUnBlock,
+})(ClaimPreview);

ui/component/claimMenuList/view.jsx

@@ -0,0 +1,86 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import React from 'react';
+import classnames from 'classnames';
+import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
+import Icon from 'component/common/icon';
+
+type Props = {
+  claim: ?Claim,
+  inline?: boolean,
+  claimIsMine: boolean,
+  channelIsMuted: boolean,
+  channelIsBlocked: boolean,
+  doToggleMuteChannel: (string) => void,
+  doCommentModBlock: (string) => void,
+  doCommentModUnBlock: (string) => void,
+};
+
+function ClaimMenuList(props: Props) {
+  const {
+    claim,
+    inline = false,
+    claimIsMine,
+    doToggleMuteChannel,
+    channelIsMuted,
+    channelIsBlocked,
+    doCommentModBlock,
+    doCommentModUnBlock,
+  } = props;
+  const channelUri =
+    claim &&
+    (claim.value_type === 'channel'
+      ? claim.permanent_url
+      : claim.signing_channel && claim.signing_channel.permanent_url);
+
+  if (!channelUri) {
+    return null;
+  }
+
+  function handleToggleMute() {
+    doToggleMuteChannel(channelUri);
+  }
+
+  function handleToggleBlock() {
+    if (channelIsBlocked) {
+      doCommentModUnBlock(channelUri);
+    } else {
+      doCommentModBlock(channelUri);
+    }
+  }
+
+  return (
+    <Menu>
+      <MenuButton
+        className={classnames('menu__button', { 'claim__menu-button': !inline, 'claim__menu-button--inline': inline })}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        <Icon size={20} icon={ICONS.MORE_VERTICAL} />
+      </MenuButton>
+      <MenuList className="menu__list">
+        {!claimIsMine && (
+          <>
+            <MenuItem className="comment__menu-option" onSelect={handleToggleBlock}>
+              <div className="menu__link">
+                <Icon aria-hidden icon={ICONS.BLOCK} />
+                {channelIsBlocked ? __('Unblock Channel') : __('Block Channel')}
+              </div>
+            </MenuItem>
+
+            <MenuItem className="comment__menu-option" onSelect={handleToggleMute}>
+              <div className="menu__link">
+                <Icon aria-hidden icon={ICONS.MUTE} />
+                {channelIsMuted ? __('Unmute Channel') : __('Mute Channel')}
+              </div>
+            </MenuItem>
+          </>
+        )}
+      </MenuList>
+    </Menu>
+  );
+}
+
+export default ClaimMenuList;

ui/component/claimPreview/index.js

@@ -11,7 +11,7 @@ import {
   makeSelectClaimWasPurchased,
   makeSelectStreamingUrlForUri,
 } from 'lbry-redux';
-import { selectBlockedChannels, selectChannelIsBlocked } from 'redux/selectors/blocked';
+import { selectMutedChannels, makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
@@ -30,17 +30,17 @@ const select = (state, props) => ({
   nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   filteredOutpoints: selectFilteredOutpoints(state),
-  blockedChannelUris: selectBlockedChannels(state),
+  blockedChannelUris: selectMutedChannels(state),
   hasVisitedUri: props.uri && makeSelectHasVisitedUri(props.uri)(state),
-  channelIsBlocked: props.uri && selectChannelIsBlocked(props.uri)(state),
+  channelIsBlocked: props.uri && makeSelectChannelIsMuted(props.uri)(state),
   isSubscribed: props.uri && makeSelectIsSubscribed(props.uri, true)(state),
   streamingUrl: props.uri && makeSelectStreamingUrlForUri(props.uri)(state),
   wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
 });
 
-const perform = dispatch => ({
+const perform = (dispatch) => ({
-  resolveUri: uri => dispatch(doResolveUri(uri)),
+  resolveUri: (uri) => dispatch(doResolveUri(uri)),
-  getFile: uri => dispatch(doFileGet(uri, false)),
+  getFile: (uri) => dispatch(doFileGet(uri, false)),
 });
 
 export default connect(select, perform)(ClaimPreview);

ui/component/claimPreview/view.jsx

@@ -3,7 +3,6 @@ import type { Node } from 'react';
 import React, { useEffect, forwardRef } from 'react';
 import { NavLink, withRouter } from 'react-router-dom';
 import classnames from 'classnames';
-import { SIMPLE_SITE } from 'config';
 import { parseURI } from 'lbry-redux';
 // @if TARGET='app'
 import { openClaimPreviewMenu } from 'util/context-menu';
@@ -16,7 +15,6 @@ import FileProperties from 'component/fileProperties';
 import ClaimTags from 'component/claimTags';
 import SubscribeButton from 'component/subscribeButton';
 import ChannelThumbnail from 'component/channelThumbnail';
-import BlockButton from 'component/blockButton';
 import ClaimSupportButton from 'component/claimSupportButton';
 import useGetThumbnail from 'effects/use-get-thumbnail';
 import ClaimPreviewTitle from 'component/claimPreviewTitle';
@@ -25,6 +23,8 @@ import ClaimRepostAuthor from 'component/claimRepostAuthor';
 import FileDownloadLink from 'component/fileDownloadLink';
 import AbandonedChannelPreview from 'component/abandonedChannelPreview';
 import PublishPending from 'component/publishPending';
+import ClaimMenuList from 'component/claimMenuList';
+import ChannelStakedIndicator from 'component/channelStakedIndicator';
 import ClaimPreviewLoading from './claim-preview-loading';
 import ClaimPreviewHidden from './claim-preview-no-mature';
 import ClaimPreviewNoContent from './claim-preview-no-content';
@@ -55,12 +55,10 @@ type Props = {
   }>,
   blockedChannelUris: Array<string>,
   channelIsBlocked: boolean,
-  isSubscribed: boolean,
   actions: boolean | Node | string | number,
   properties: boolean | Node | string | number | ((Claim) => Node),
   empty?: Node,
   onClick?: (any) => any,
-  hideBlock?: boolean,
   streamingUrl: ?string,
   getFile: (string) => void,
   customShouldHide?: (Claim) => boolean,
@@ -72,6 +70,7 @@ type Props = {
   wrapperElement?: string,
   hideRepostLabel?: boolean,
   repostUrl?: string,
+  hideMenu?: boolean,
 };
 
 const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@@ -87,7 +86,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     // is the claim consider nsfw?
     nsfw,
     claimIsMine,
-    isSubscribed,
     streamingUrl,
     // user properties
     channelIsBlocked,
@@ -113,13 +111,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     hideActions = false,
     properties,
     onClick,
-    hideBlock,
     actions,
     blockedChannelUris,
     blackListedOutpoints,
     filteredOutpoints,
     includeSupportAction,
     renderActions,
+    hideMenu = false,
     // repostUrl,
   } = props;
   const WrapperElement = wrapperElement || 'li';
@@ -275,7 +273,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
       >
         {isChannelUri && claim ? (
           <UriIndicator uri={contentUri} link>
-            <ChannelThumbnail uri={contentUri} obscure={channelIsBlocked} />
+            <ChannelThumbnail uri={contentUri} />
           </UriIndicator>
         ) : (
           <>
@@ -313,9 +311,9 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                 </NavLink>
               )}
 
-              {type !== 'small' && !isChannelUri && signingChannel && SIMPLE_SITE && (
+              {/* {type !== 'small' && !isChannelUri && signingChannel && SIMPLE_SITE && (
                 <ChannelThumbnail uri={signingChannel.permanent_url} />
-              )}
+              )} */}
             </div>
             <ClaimPreviewSubtitle uri={uri} type={type} />
             {(pending || !!reflectingProgress) && <PublishPending uri={uri} />}
@@ -329,12 +327,17 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                     actions
                   ) : (
                     <div className="claim-preview__primary-actions">
+                      {!isChannelUri && signingChannel && (
+                        <div className="claim-preview__channel-staked">
+                          <ChannelThumbnail uri={signingChannel.permanent_url} hideStakedIndicator />
+                          <ChannelStakedIndicator uri={signingChannel.permanent_url} inline />
+                        </div>
+                      )}
+
                       {isChannelUri && !channelIsBlocked && !claimIsMine && (
                         <SubscribeButton uri={contentUri.startsWith('lbry://') ? contentUri : `lbry://${contentUri}`} />
                       )}
-                      {!hideBlock && isChannelUri && !isSubscribed && (!claimIsMine || channelIsBlocked) && (
+
-                        <BlockButton uri={contentUri.startsWith('lbry://') ? contentUri : `lbry://${contentUri}`} />
-                      )}
                       {includeSupportAction && <ClaimSupportButton uri={uri} />}
                     </div>
                   )}
@@ -355,6 +358,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
           )}
         </div>
       </div>
+      {!hideMenu && <ClaimMenuList uri={uri} />}
     </WrapperElement>
   );
 });

ui/component/claimPreviewTile/index.js

@@ -9,7 +9,7 @@ import {
   makeSelectChannelForClaimUri,
   makeSelectClaimIsNsfw,
 } from 'lbry-redux';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import ClaimPreviewTile from './view';
@@ -22,14 +22,14 @@ const select = (state, props) => ({
   title: props.uri && makeSelectTitleForUri(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   filteredOutpoints: selectFilteredOutpoints(state),
-  blockedChannelUris: selectBlockedChannels(state),
+  blockedChannelUris: selectMutedChannels(state),
   showMature: selectShowMatureContent(state),
   isMature: makeSelectClaimIsNsfw(props.uri)(state),
 });
 
-const perform = dispatch => ({
+const perform = (dispatch) => ({
-  resolveUri: uri => dispatch(doResolveUri(uri)),
+  resolveUri: (uri) => dispatch(doResolveUri(uri)),
-  getFile: uri => dispatch(doFileGet(uri, false)),
+  getFile: (uri) => dispatch(doFileGet(uri, false)),
 });
 
 export default connect(select, perform)(ClaimPreviewTile);

ui/component/claimPreviewTile/view.jsx

@@ -14,6 +14,8 @@ import { parseURI } from 'lbry-redux';
 import FileProperties from 'component/fileProperties';
 import FileDownloadLink from 'component/fileDownloadLink';
 import ClaimRepostAuthor from 'component/claimRepostAuthor';
+import ClaimMenuList from 'component/claimMenuList';
+
 // @if TARGET='app'
 import { openClaimPreviewMenu } from 'util/context-menu';
 // @endif
@@ -194,6 +196,7 @@ function ClaimPreviewTile(props: Props) {
               <UriIndicator uri={uri} link />
             </div>
           )}
+          <ClaimMenuList uri={uri} />
         </h2>
       </NavLink>
       <div>

ui/component/claimTilesDiscover/index.js

@@ -1,16 +1,16 @@
 import { connect } from 'react-redux';
 import { doClaimSearch, selectClaimSearchByQuery, selectFetchingClaimSearchByQuery, SETTINGS } from 'lbry-redux';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import ClaimListDiscover from './view';
 
-const select = state => ({
+const select = (state) => ({
   claimSearchByQuery: selectClaimSearchByQuery(state),
   fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
   showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
   hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
-  hiddenUris: selectBlockedChannels(state),
+  hiddenUris: selectMutedChannels(state),
 });
 
 const perform = {

ui/component/comment/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { makeSelectThumbnailForUri, selectMyChannelClaims } from 'lbry-redux';
 import { doCommentUpdate } from 'redux/actions/comments';
-import { selectChannelIsBlocked } from 'redux/selectors/blocked';
+import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { doToast } from 'redux/actions/notifications';
 import { doSetPlayingUri } from 'redux/actions/content';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
@@ -11,7 +11,7 @@ import Comment from './view';
 
 const select = (state, props) => ({
   thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
-  channelIsBlocked: props.authorUri && selectChannelIsBlocked(props.authorUri)(state),
+  channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
   commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
   othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state),
   activeChannelClaim: selectActiveChannelClaim(state),

ui/component/comment/view.jsx

@@ -200,7 +200,7 @@ function Comment(props: Props) {
             </div>
             <div className="comment__menu">
               <Menu>
-                <MenuButton>
+                <MenuButton className="menu__button">
                   <Icon
                     size={18}
                     className={mouseIsHovering ? 'comment__menu-icon--hovering' : 'comment__menu-icon'}

ui/component/commentMenuList/index.js

@@ -1,12 +1,7 @@
 import { connect } from 'react-redux';
 import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux';
-import {
+import { doCommentAbandon, doCommentPin, doCommentList, doCommentModBlock } from 'redux/actions/comments';
-  doCommentAbandon,
+import { doToggleMuteChannel } from 'redux/actions/blocked';
-  doCommentPin,
-  doCommentList,
-  //   doCommentModBlock,
-} from 'redux/actions/comments';
-import { doToggleBlockChannel } from 'redux/actions/blocked';
 // import { doSetActiveChannel } from 'redux/actions/app';
 import { doSetPlayingUri } from 'redux/actions/content';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
@@ -19,14 +14,14 @@ const select = (state, props) => ({
   activeChannelClaim: selectActiveChannelClaim(state),
 });
 
-const perform = dispatch => ({
+const perform = (dispatch) => ({
   closeInlinePlayer: () => dispatch(doSetPlayingUri({ uri: null })),
   deleteComment: (commentId, creatorChannelUrl) => dispatch(doCommentAbandon(commentId, creatorChannelUrl)),
-  blockChannel: channelUri => dispatch(doToggleBlockChannel(channelUri)),
+  blockChannel: (channelUri) => dispatch(doToggleMuteChannel(channelUri)),
   pinComment: (commentId, remove) => dispatch(doCommentPin(commentId, remove)),
-  fetchComments: uri => dispatch(doCommentList(uri)),
+  fetchComments: (uri) => dispatch(doCommentList(uri)),
   //   setActiveChannel: channelId => dispatch(doSetActiveChannel(channelId)),
-  //   commentModBlock: commentAuthor => dispatch(doCommentModBlock(commentAuthor)),
+  commentModBlock: (commentAuthor) => dispatch(doCommentModBlock(commentAuthor)),
 });
 
 export default connect(select, perform)(CommentMenuList);

ui/component/commentMenuList/view.jsx

@@ -23,7 +23,7 @@ type Props = {
   activeChannelClaim: ?ChannelClaim,
   claimIsMine: boolean,
   isTopLevel: boolean,
-  //   commentModBlock: string => void,
+  commentModBlock: (string) => void,
 };
 
 function CommentMenuList(props: Props) {
@@ -43,17 +43,10 @@ function CommentMenuList(props: Props) {
     isPinned,
     handleEditComment,
     fetchComments,
-    // commentModBlock,
+    commentModBlock,
-    // setActiveChannel,
   } = props;
   const activeChannelIsCreator = activeChannelClaim && activeChannelClaim.permanent_url === contentChannelPermanentUrl;
 
-  //   let authorChannel;
-  //   try {
-  //     const { claimName } = parseURI(authorUri);
-  //     authorChannel = claimName;
-  //   } catch (e) {}
-
   function handlePinComment(commentId, remove) {
     pinComment(commentId, remove).then(() => fetchComments(uri));
   }
@@ -65,32 +58,16 @@ function CommentMenuList(props: Props) {
 
   function handleCommentBlock() {
     if (claimIsMine) {
-      // Block them from commenting on future content
+      commentModBlock(authorUri);
-      //   commentModBlock(authorUri);
+    }
   }
 
+  function handleCommentMute() {
     blockChannel(authorUri);
   }
 
-  //   function handleChooseChannel() {
-  //     const { channelClaimId } = parseURI(authorUri);
-  //     setActiveChannel(channelClaimId);
-  //   }
-
   return (
-    <MenuList className="menu__list--comments">
+    <MenuList className="menu__list">
-      {/* {commentIsMine && activeChannelClaim && activeChannelClaim.permanent_url !== authorUri && (
-        <MenuItem className="comment__menu-option" onSelect={handleChooseChannel}>
-          <div className="menu__link">
-            <Icon aria-hidden icon={ICONS.CHANNEL} />
-            {__('Use this channel')}
-          </div>
-          <span className="comment__menu-help">
-            {__('Switch to %channel_name% to interact with this comment', { channel_name: authorChannel })}.
-          </span>
-        </MenuItem>
-      )} */}
-
       {activeChannelIsCreator && <div className="comment__menu-title">{__('Creator tools')}</div>}
 
       {activeChannelIsCreator && isTopLevel && (
@@ -123,16 +100,25 @@ function CommentMenuList(props: Props) {
         </MenuItem>
       )}
 
-      {/* Disabled until we deal with current app blocklist parity */}
       {!commentIsMine && (
         <MenuItem className="comment__menu-option" onSelect={handleCommentBlock}>
           <div className="menu__link">
             <Icon aria-hidden icon={ICONS.BLOCK} />
             {__('Block')}
           </div>
-          {/* {activeChannelIsCreator && (
+          {activeChannelIsCreator && (
-            <span className="comment__menu-help">Hide this channel's comments and block them from commenting.</span>
+            <span className="comment__menu-help">Prevent this channel from interacting with you.</span>
-          )} */}
+          )}
+        </MenuItem>
+      )}
+
+      {!commentIsMine && (
+        <MenuItem className="comment__menu-option" onSelect={handleCommentMute}>
+          <div className="menu__link">
+            <Icon aria-hidden icon={ICONS.MUTE} />
+            {__('Mute')}
+          </div>
+          {activeChannelIsCreator && <span className="comment__menu-help">Hide this channel for you only.</span>}
         </MenuItem>
       )}
 

ui/component/common/icon-custom.jsx

@@ -238,6 +238,13 @@ export const icons = {
       <circle cx="12" cy="12" r="10" />
     </g>
   ),
+  [ICONS.MUTE]: buildIcon(
+    <g>
+      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+      <line x1="23" y1="9" x2="17" y2="15" />
+      <line x1="17" y1="9" x2="23" y2="15" />
+    </g>
+  ),
   [ICONS.LIGHT]: buildIcon(
     <g>
       <circle cx="12" cy="12" r="5" />

ui/component/fileAuthor/view.jsx

@@ -10,7 +10,7 @@ function FileAuthor(props: Props) {
   const { channelUri } = props;
 
   return channelUri ? (
-    <ClaimPreview uri={channelUri} type="inline" properties={false} hideBlock />
+    <ClaimPreview uri={channelUri} type="inline" properties={false} />
   ) : (
     <div className="claim-preview--inline claim-preview__title">{__('Anonymous')}</div>
   );

ui/component/notification/view.jsx

@@ -22,7 +22,7 @@ type Props = {
   menuButton: boolean,
   children: any,
   doReadNotifications: ([number]) => void,
-  doDeleteNotification: number => void,
+  doDeleteNotification: (number) => void,
 };
 
 export default function Notification(props: Props) {
@@ -166,10 +166,10 @@ export default function Notification(props: Props) {
 
         <div className="notification__menu">
           <Menu>
-            <MenuButton onClick={e => e.stopPropagation()}>
+            <MenuButton onClick={(e) => e.stopPropagation()}>
               <Icon size={18} icon={ICONS.MORE_VERTICAL} />
             </MenuButton>
-            <MenuList className="menu__list--comments">
+            <MenuList className="menu__list">
               <MenuItem className="menu__link" onSelect={() => doDeleteNotification(id)}>
                 <Icon aria-hidden icon={ICONS.DELETE} />
                 {__('Delete')}

ui/component/router/view.jsx

@@ -272,7 +272,7 @@ function AppRouter(props: Props) {
       <PrivateRoute {...props} path={`/$/${PAGES.REWARDS_VERIFY}`} component={RewardsVerifyPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} component={TagsFollowingManagePage} />
-      <PrivateRoute {...props} path={`/$/${PAGES.BLOCKED}`} component={ListBlockedPage} />
+      <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />

ui/constants/action_types.js

@@ -268,6 +268,15 @@ export const COMMENT_REACT_FAILED = 'COMMENT_REACT_FAILED';
 export const COMMENT_PIN_STARTED = 'COMMENT_PIN_STARTED';
 export const COMMENT_PIN_COMPLETED = 'COMMENT_PIN_COMPLETED';
 export const COMMENT_PIN_FAILED = 'COMMENT_PIN_FAILED';
+export const COMMENT_MODERATION_BLOCK_LIST_STARTED = 'COMMENT_MODERATION_BLOCK_LIST_STARTED';
+export const COMMENT_MODERATION_BLOCK_LIST_COMPLETED = 'COMMENT_MODERATION_BLOCK_LIST_COMPLETED';
+export const COMMENT_MODERATION_BLOCK_LIST_FAILED = 'COMMENT_MODERATION_BLOCK_LIST_FAILED';
+export const COMMENT_MODERATION_BLOCK_STARTED = 'COMMENT_MODERATION_BLOCK_STARTED';
+export const COMMENT_MODERATION_BLOCK_COMPLETE = 'COMMENT_MODERATION_BLOCK_COMPLETE';
+export const COMMENT_MODERATION_BLOCK_FAILED = 'COMMENT_MODERATION_BLOCK_FAILED';
+export const COMMENT_MODERATION_UN_BLOCK_STARTED = 'COMMENT_MODERATION_UN_BLOCK_STARTED';
+export const COMMENT_MODERATION_UN_BLOCK_COMPLETE = 'COMMENT_MODERATION_UN_BLOCK_COMPLETE';
+export const COMMENT_MODERATION_UN_BLOCK_FAILED = 'COMMENT_MODERATION_UN_BLOCK_FAILED';
 
 // Blocked channels
 export const TOGGLE_BLOCK_CHANNEL = 'TOGGLE_BLOCK_CHANNEL';

ui/constants/icons.js

@@ -82,6 +82,7 @@ export const LIBRARY = 'Folder';
 export const TAG = 'Tag';
 export const SUPPORT = 'TrendingUp';
 export const BLOCK = 'Slash';
+export const MUTE = 'VolumeX';
 export const UNBLOCK = 'Circle';
 export const VIEW = 'View';
 export const EYE = 'Eye';

ui/constants/modal_types.js

@@ -41,7 +41,6 @@ export const LIQUIDATE_SUPPORTS = 'liquidate_supports';
 export const MASS_TIP_UNLOCK = 'mass_tip_unlock';
 export const CONFIRM_AGE = 'confirm_age';
 export const SYNC_ENABLE = 'SYNC_ENABLE';
-export const REMOVE_BLOCKED = 'remove_blocked';
 export const IMAGE_UPLOAD = 'image_upload';
 export const MOBILE_SEARCH = 'mobile_search';
 export const VIEW_IMAGE = 'view_image';

ui/constants/pages.js

@@ -24,6 +24,7 @@ exports.SEND = 'send';
 exports.SETTINGS = 'settings';
 exports.SETTINGS_NOTIFICATIONS = 'settings/notifications';
 exports.SETTINGS_ADVANCED = 'settings/advanced';
+exports.SETTINGS_BLOCKED_MUTED = 'settings/block_and_mute';
 exports.SHOW = 'show';
 exports.ACCOUNT = 'account';
 exports.SEARCH = 'search';
@@ -36,7 +37,6 @@ exports.CHANNELS_FOLLOWING = 'following';
 exports.DEPRECATED__CHANNELS_FOLLOWING_MANAGE = 'following/channels/manage';
 exports.CHANNELS_FOLLOWING_DISCOVER = 'following/discover';
 exports.WALLET = 'wallet';
-exports.BLOCKED = 'blocked';
 exports.CHANNELS = 'channels';
 exports.EMBED = 'embed';
 exports.TOP = 'top';

ui/modal/modalRemoveBlocked/index.js

@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
-import { doToggleBlockChannel } from 'redux/actions/blocked';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
-import ModalRemoveBlocked from './view';
-
-const select = (state, props) => ({
-  blockedChannels: selectBlockedChannels(state),
-});
-
-const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
-  toggleBlockChannel: uri => dispatch(doToggleBlockChannel(uri)),
-});
-
-export default connect(select, perform)(ModalRemoveBlocked);

ui/modal/modalRemoveBlocked/view.jsx

@@ -1,46 +0,0 @@
-// @flow
-import React from 'react';
-import { Modal } from 'modal/modal';
-import I18nMessage from 'component/i18nMessage';
-
-type Props = {
-  blockedUri: string,
-  closeModal: () => void,
-  blockedChannels: Array<string>,
-  toggleBlockChannel: (uri: string) => void,
-};
-
-function ModalRemoveBlocked(props: Props) {
-  const { blockedUri, closeModal, blockedChannels, toggleBlockChannel } = props;
-
-  function handleConfirm() {
-    if (blockedUri && blockedChannels.includes(blockedUri)) {
-      // DANGER: Always ensure the uri is actually in the list since we are using a
-      // toggle function. If 'null' is accidentally toggled INTO the list, the app
-      // won't start. Ideally, we should add a "removeBlockedChannel()", but with
-      // the gating above, it should be safe/good enough.
-      toggleBlockChannel(blockedUri);
-    }
-
-    closeModal();
-  }
-
-  return (
-    <Modal
-      isOpen
-      type="confirm"
-      title={__('Remove from blocked list')}
-      confirmButtonLabel={__('Remove')}
-      onConfirmed={handleConfirm}
-      onAborted={() => closeModal()}
-    >
-      <em>{blockedUri}</em>
-      <p />
-      <p>
-        <I18nMessage>Are you sure you want to remove this from the list?</I18nMessage>
-      </p>
-    </Modal>
-  );
-}
-
-export default ModalRemoveBlocked;

ui/modal/modalRouter/view.jsx

@@ -16,7 +16,6 @@ import ModalRevokeClaim from 'modal/modalRevokeClaim';
 import ModalPhoneCollection from 'modal/modalPhoneCollection';
 import ModalFirstSubscription from 'modal/modalFirstSubscription';
 import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
-import ModalRemoveBlocked from 'modal/modalRemoveBlocked';
 import ModalSocialShare from 'modal/modalSocialShare';
 import ModalSendTip from 'modal/modalSendTip';
 import ModalPublish from 'modal/modalPublish';
@@ -142,8 +141,6 @@ function ModalRouter(props: Props) {
       return <ModalFileSelection {...modalProps} />;
     case MODALS.LIQUIDATE_SUPPORTS:
       return <ModalSupportsLiquidate {...modalProps} />;
-    case MODALS.REMOVE_BLOCKED:
-      return <ModalRemoveBlocked {...modalProps} />;
     case MODALS.IMAGE_UPLOAD:
       return <ModalImageUpload {...modalProps} />;
     case MODALS.SYNC_ENABLE:

ui/page/channel/index.js

@@ -8,7 +8,7 @@ import {
   makeSelectClaimForUri,
   makeSelectClaimIsPending,
 } from 'lbry-redux';
-import { selectChannelIsBlocked } from 'redux/selectors/blocked';
+import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
 import { selectYoutubeChannels } from 'redux/selectors/user';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
@@ -23,16 +23,16 @@ const select = (state, props) => ({
   page: selectCurrentChannelPage(state),
   claim: makeSelectClaimForUri(props.uri)(state),
   isSubscribed: makeSelectIsSubscribed(props.uri, true)(state),
-  channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
+  channelIsBlocked: makeSelectChannelIsMuted(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   subCount: makeSelectSubCountForUri(props.uri)(state),
   pending: makeSelectClaimIsPending(props.uri)(state),
   youtubeChannels: selectYoutubeChannels(state),
 });
 
-const perform = dispatch => ({
+const perform = (dispatch) => ({
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  fetchSubCount: claimId => dispatch(doFetchSubCount(claimId)),
+  fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),
 });
 
 export default connect(select, perform)(ChannelPage);

ui/page/channel/view.jsx

@@ -6,7 +6,6 @@ import { parseURI } from 'lbry-redux';
 import { YOUTUBE_STATUSES } from 'lbryinc';
 import Page from 'component/page';
 import SubscribeButton from 'component/subscribeButton';
-import BlockButton from 'component/blockButton';
 import ShareButton from 'component/shareButton';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
 import { useHistory } from 'react-router';
@@ -21,6 +20,7 @@ import classnames from 'classnames';
 import HelpLink from 'component/common/help-link';
 import ClaimSupportButton from 'component/claimSupportButton';
 import ChannelStakedIndicator from 'component/channelStakedIndicator';
+import ClaimMenuList from 'component/claimMenuList';
 
 export const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
@@ -157,7 +157,7 @@ function ChannelPage(props: Props) {
           {!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} />}
           {!channelIsBlocked && <ClaimSupportButton uri={uri} />}
           {!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
-          {!isSubscribed && <BlockButton uri={permanentUrl} />}
+          <ClaimMenuList uri={claim.permanent_url} inline />
         </div>
         {cover && (
           <img

ui/page/channelsFollowingDiscover/index.js

@@ -1,14 +1,14 @@
 import { connect } from 'react-redux';
 import { selectFollowedTags } from 'redux/selectors/tags';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import { selectHomepageData } from 'redux/selectors/settings';
 import ChannelsFollowingManagePage from './view';
 
-const select = state => ({
+const select = (state) => ({
   followedTags: selectFollowedTags(state),
   subscribedChannels: selectSubscriptions(state),
-  blockedChannels: selectBlockedChannels(state),
+  blockedChannels: selectMutedChannels(state),
   homepageData: selectHomepageData(state),
 });
 

ui/page/listBlocked/index.js

@@ -1,9 +1,12 @@
 import { connect } from 'react-redux';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
+import { selectModerationBlockList, selectFetchingModerationBlockList } from 'redux/selectors/comments';
 import ListBlocked from './view';
 
-const select = state => ({
+const select = (state) => ({
-  uris: selectBlockedChannels(state),
+  mutedUris: selectMutedChannels(state),
+  blockedUris: selectModerationBlockList(state),
+  fetchingModerationBlockList: selectFetchingModerationBlockList(state),
 });
 
-export default connect(select, null)(ListBlocked);
+export default connect(select)(ListBlocked);

ui/page/listBlocked/view.jsx

@@ -1,34 +1,125 @@
 // @flow
+import * as ICONS from 'constants/icons';
 import React from 'react';
+import classnames from 'classnames';
 import ClaimList from 'component/claimList';
 import Page from 'component/page';
-import Card from 'component/common/card';
+import Spinner from 'component/spinner';
+import Button from 'component/button';
+import usePrevious from 'effects/use-previous';
+import usePersistedState from 'effects/use-persisted-state';
+import ChannelBlockButton from 'component/channelBlockButton';
+import ChannelMuteButton from 'component/channelMuteButton';
 
 type Props = {
-  uris: Array<string>,
+  mutedUris: ?Array<string>,
+  blockedUris: ?Array<string>,
+  fetchingModerationBlockList: boolean,
 };
 
+const VIEW_BLOCKED = 'blocked';
+const VIEW_MUTED = 'muted';
+
 function ListBlocked(props: Props) {
-  const { uris } = props;
+  const { mutedUris, blockedUris, fetchingModerationBlockList } = props;
+
+  const [viewMode, setViewMode] = usePersistedState('blocked-muted:display', VIEW_BLOCKED);
+  const [loading, setLoading] = React.useState(!blockedUris || !blockedUris.length);
+
+  // Keep a local list to allow for undoing actions in this component
+  const [localBlockedList, setLocalBlockedList] = React.useState(undefined);
+  const [localMutedList, setLocalMutedList] = React.useState(undefined);
+
+  const previousFetchingModBlockList = usePrevious(fetchingModerationBlockList);
+  const hasLocalMuteList = localMutedList && localMutedList.length > 0;
+  const hasLocalBlockList = localBlockedList && localBlockedList.length > 0;
+  const stringifiedMutedChannels = JSON.stringify(mutedUris);
+  const justMuted = localMutedList && mutedUris && localMutedList.length < mutedUris.length;
+  const justBlocked = localBlockedList && blockedUris && localBlockedList.length < blockedUris.length;
+  const stringifiedBlockedChannels = JSON.stringify(blockedUris);
+
+  React.useEffect(() => {
+    if (previousFetchingModBlockList && !fetchingModerationBlockList) {
+      setLoading(false);
+    }
+  }, [setLoading, previousFetchingModBlockList, fetchingModerationBlockList]);
+
+  React.useEffect(() => {
+    const jsonMutedChannels = stringifiedMutedChannels && JSON.parse(stringifiedMutedChannels);
+    if (!hasLocalMuteList && jsonMutedChannels && jsonMutedChannels.length > 0) {
+      setLocalMutedList(jsonMutedChannels);
+    }
+  }, [stringifiedMutedChannels, hasLocalMuteList]);
+
+  React.useEffect(() => {
+    const jsonBlockedChannels = stringifiedBlockedChannels && JSON.parse(stringifiedBlockedChannels);
+    if (!hasLocalBlockList && jsonBlockedChannels && jsonBlockedChannels.length > 0) {
+      setLocalBlockedList(jsonBlockedChannels);
+    }
+  }, [stringifiedBlockedChannels, hasLocalBlockList]);
+
+  React.useEffect(() => {
+    if (justMuted && stringifiedMutedChannels) {
+      setLocalMutedList(JSON.parse(stringifiedMutedChannels));
+    }
+  }, [stringifiedMutedChannels, justMuted, setLocalMutedList]);
+
+  React.useEffect(() => {
+    if (justBlocked && stringifiedBlockedChannels) {
+      setLocalBlockedList(JSON.parse(stringifiedBlockedChannels));
+    }
+  }, [stringifiedBlockedChannels, justBlocked, setLocalBlockedList]);
 
   return (
     <Page>
-      {uris && uris.length ? (
+      {loading && (
-        <Card
-          isBodyList
-          title={__('Your blocked channels')}
-          body={<ClaimList uris={uris} showUnresolvedClaims showHiddenByUser />}
-        />
-      ) : (
         <div className="main--empty">
-          <section className="card card--section">
+          <Spinner />
-            <h2 className="card__title card__title--deprecated">{__('You aren’t blocking any channels')}</h2>
-            <p className="section__subtitle">
-              {__('When you block a channel, all content from that channel will be hidden.')}
-            </p>
-          </section>
         </div>
       )}
+
+      {!loading && (
+        <>
+          <div className="section__header--actions">
+            <div className="section__actions--inline">
+              <Button
+                icon={ICONS.BLOCK}
+                button="alt"
+                label={__('Blocked')}
+                className={classnames(`button-toggle`, {
+                  'button-toggle--active': viewMode === VIEW_BLOCKED,
+                })}
+                onClick={() => setViewMode(VIEW_BLOCKED)}
+              />
+              <Button
+                icon={ICONS.MUTE}
+                button="alt"
+                label={__('Muted')}
+                className={classnames(`button-toggle`, {
+                  'button-toggle--active': viewMode === VIEW_MUTED,
+                })}
+                onClick={() => setViewMode(VIEW_MUTED)}
+              />
+            </div>
+          </div>
+          {
+            <ClaimList
+              uris={viewMode === VIEW_MUTED ? localMutedList : localBlockedList}
+              showUnresolvedClaims
+              showHiddenByUser
+              hideMenu
+              renderActions={(claim) => {
+                return (
+                  <div className="section__actions">
+                    <ChannelBlockButton uri={claim.permanent_url} />
+                    <ChannelMuteButton uri={claim.permanent_url} />
+                  </div>
+                );
+              }}
+            />
+          }
+        </>
+      )}
     </Page>
   );
 }

ui/page/settings/index.js

@@ -12,11 +12,10 @@ import {
 import { doSetPlayingUri } from 'redux/actions/content';
 import { makeSelectClientSetting, selectDaemonSettings, selectLanguage } from 'redux/selectors/settings';
 import { doWalletStatus, selectWalletIsEncrypted, SETTINGS } from 'lbry-redux';
-import { selectBlockedChannelsCount } from 'redux/selectors/blocked';
 import SettingsPage from './view';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 
-const select = state => ({
+const select = (state) => ({
   daemonSettings: selectDaemonSettings(state),
   allowAnalytics: selectAllowAnalytics(state),
   isAuthenticated: selectUserVerifiedEmail(state),
@@ -27,7 +26,6 @@ const select = state => ({
   autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
   walletEncrypted: selectWalletIsEncrypted(state),
   autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state),
-  userBlockedChannelsCount: selectBlockedChannelsCount(state),
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
   floatingPlayer: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
   hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
@@ -35,14 +33,14 @@ const select = state => ({
   language: selectLanguage(state),
 });
 
-const perform = dispatch => ({
+const perform = (dispatch) => ({
   setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
-  clearDaemonSetting: key => dispatch(doClearDaemonSetting(key)),
+  clearDaemonSetting: (key) => dispatch(doClearDaemonSetting(key)),
-  toggle3PAnalytics: allow => dispatch(doToggle3PAnalytics(allow)),
+  toggle3PAnalytics: (allow) => dispatch(doToggle3PAnalytics(allow)),
   clearCache: () => dispatch(doClearCache()),
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
   updateWalletStatus: () => dispatch(doWalletStatus()),
-  confirmForgetPassword: modalProps => dispatch(doNotifyForgetPassword(modalProps)),
+  confirmForgetPassword: (modalProps) => dispatch(doNotifyForgetPassword(modalProps)),
   clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
   setDarkTime: (time, options) => dispatch(doSetDarkTime(time, options)),
   openModal: (id, params) => dispatch(doOpenModal(id, params)),

ui/page/settings/view.jsx

@@ -44,9 +44,9 @@ type DaemonSettings = {
 
 type Props = {
   setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
-  clearDaemonSetting: string => void,
+  clearDaemonSetting: (string) => void,
   setClientSetting: (string, SetDaemonSettingArg) => void,
-  toggle3PAnalytics: boolean => void,
+  toggle3PAnalytics: (boolean) => void,
   clearCache: () => Promise<any>,
   daemonSettings: DaemonSettings,
   allowAnalytics: boolean,
@@ -60,14 +60,13 @@ type Props = {
   autoplay: boolean,
   updateWalletStatus: () => void,
   walletEncrypted: boolean,
-  userBlockedChannelsCount?: number,
   confirmForgetPassword: ({}) => void,
   floatingPlayer: boolean,
   hideReposts: ?boolean,
   clearPlayingUri: () => void,
   darkModeTimes: DarkModeTimes,
   setDarkTime: (string, {}) => void,
-  openModal: string => void,
+  openModal: (string) => void,
   language?: string,
   enterSettings: () => void,
   exitSettings: () => void,
@@ -98,7 +97,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
 
     if (isAuthenticated || !IS_WEB) {
       this.props.updateWalletStatus();
-      getPasswordFromCookie().then(p => {
+      getPasswordFromCookie().then((p) => {
         if (typeof p === 'string') {
           this.setState({ storedPassword: true });
         }
@@ -172,7 +171,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
       setDaemonSetting,
       setClientSetting,
       toggle3PAnalytics,
-      userBlockedChannelsCount,
       floatingPlayer,
       hideReposts,
       clearPlayingUri,
@@ -262,7 +260,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                       value={currentTheme}
                       disabled={automaticDarkModeEnabled}
                     >
-                      {themes.map(theme => (
+                      {themes.map((theme) => (
                         <option key={theme} value={theme}>
                           {theme === 'light' ? __('Light') : __('Dark')}
                         </option>
@@ -282,11 +280,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
                         <FormField
                           type="select"
                           name="automatic_dark_mode_range"
-                          onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
+                          onChange={(value) => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
                           value={darkModeTimes.from.hour}
                           label={__('From --[initial time]--')}
                         >
-                          {startHours.map(time => (
+                          {startHours.map((time) => (
                             <option key={time} value={time}>
                               {this.to12Hour(time)}
                             </option>
@@ -296,10 +294,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
                           type="select"
                           name="automatic_dark_mode_range"
                           label={__('To --[final time]--')}
-                          onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
+                          onChange={(value) => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
                           value={darkModeTimes.to.hour}
                         >
-                          {endHours.map(time => (
+                          {endHours.map((time) => (
                             <option key={time} value={time}>
                               {this.to12Hour(time)}
                             </option>
@@ -342,7 +340,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                   <FormField
                     type="checkbox"
                     name="hide_reposts"
-                    onChange={e => {
+                    onChange={(e) => {
                       if (isAuthenticated) {
                         let param = e.target.checked ? { add: 'noreposts' } : { remove: 'noreposts' };
                         Lbryio.call('user_tag', 'edit', param);
@@ -411,7 +409,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                   <FormField
                     type="checkbox"
                     name="share_third_party"
-                    onChange={e => toggle3PAnalytics(e.target.checked)}
+                    onChange={(e) => toggle3PAnalytics(e.target.checked)}
                     checked={allowAnalytics}
                     label={__('Allow the app to access third party analytics platforms')}
                     helper={__('We use detailed analytics to improve all aspects of the LBRY experience.')}
@@ -438,21 +436,14 @@ class SettingsPage extends React.PureComponent<Props, State> {
                 />
 
                 <Card
-                  title={__('Blocked channels')}
+                  title={__('Blocked and muted channels')}
-                  subtitle={
-                    userBlockedChannelsCount === 0
-                      ? __("You don't have blocked channels.")
-                      : userBlockedChannelsCount === 1
-                      ? __('You have one blocked channel.')
-                      : __('You have %channels% blocked channels.', { channels: userBlockedChannelsCount })
-                  }
                   actions={
                     <div className="section__actions">
                       <Button
                         button="secondary"
                         label={__('Manage')}
                         icon={ICONS.SETTINGS}
-                        navigate={`/$/${PAGES.BLOCKED}`}
+                        navigate={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`}
                       />
                     </div>
                   }

ui/redux/actions/blocked.js

@@ -3,7 +3,7 @@ import * as ACTIONS from 'constants/action_types';
 import { selectPrefsReady } from 'redux/selectors/sync';
 import { doAlertWaitingForSync } from 'redux/actions/app';
 
-export const doToggleBlockChannel = (uri: string) => (dispatch: Dispatch, getState: GetState) => {
+export const doToggleMuteChannel = (uri: string) => (dispatch: Dispatch, getState: GetState) => {
   const state = getState();
   const ready = selectPrefsReady(state);
 

ui/redux/actions/comments.js

@@ -1,7 +1,7 @@
 // @flow
 import * as ACTIONS from 'constants/action_types';
 import * as REACTION_TYPES from 'constants/reactions';
-import { Lbry, selectClaimsByUri } from 'lbry-redux';
+import { Lbry, buildURI, selectClaimsByUri, selectMyChannelClaims } from 'lbry-redux';
 import { doToast, doSeeNotifications } from 'redux/actions/notifications';
 import {
   makeSelectCommentIdsForUri,
@@ -50,7 +50,7 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
         });
         return result;
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch({
           type: ACTIONS.COMMENT_LIST_FAILED,
           data: error,
@@ -89,7 +89,7 @@ export function doCommentReactList(uri: string | null, commentId?: string) {
           },
         });
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch({
           type: ACTIONS.COMMENT_REACTION_LIST_FAILED,
           data: error,
@@ -171,14 +171,14 @@ export function doCommentReact(commentId: string, type: string) {
           data: commentId + type,
         });
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch({
           type: ACTIONS.COMMENT_REACT_FAILED,
           data: commentId + type,
         });
 
         const myRevertedReactsObj = myReacts
-          .filter(el => el !== type)
+          .filter((el) => el !== type)
           .reduce((acc, el) => {
             acc[el] = 1;
             return acc;
@@ -233,7 +233,7 @@ export function doCommentCreate(comment: string = '', claim_id: string = '', par
         });
         return result;
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch({
           type: ACTIONS.COMMENT_CREATE_FAILED,
           data: error,
@@ -274,7 +274,7 @@ export function doCommentPin(commentId: string, remove: boolean) {
           data: result,
         });
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch({
           type: ACTIONS.COMMENT_PIN_FAILED,
           data: error,
@@ -339,7 +339,7 @@ export function doCommentAbandon(commentId: string, creatorChannelUri?: string)
           );
         }
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch({
           type: ACTIONS.COMMENT_ABANDON_FAILED,
           data: error,
@@ -389,7 +389,7 @@ export function doCommentUpdate(comment_id: string, comment: string) {
             );
           }
         })
-        .catch(error => {
+        .catch((error) => {
           dispatch({
             type: ACTIONS.COMMENT_UPDATE_FAILED,
             data: error,
@@ -406,38 +406,157 @@ export function doCommentUpdate(comment_id: string, comment: string) {
 }
 
 // Hides a users comments from all creator's claims and prevent them from commenting in the future
-export function doCommentModBlock(commentAuthor: string) {
+export function doCommentModToggleBlock(channelUri: string, unblock: boolean = false) {
   return async (dispatch: Dispatch, getState: GetState) => {
     const state = getState();
-    const claim = selectClaimsByUri(state)[commentAuthor];
+    const myChannels = selectMyChannelClaims(state);
+    const claim = selectClaimsByUri(state)[channelUri];
 
     if (!claim) {
       console.error("Can't find claim to block"); // eslint-disable-line
       return;
     }
 
-    const creatorIdToBan = claim ? claim.claim_id : null;
+    dispatch({
-    const creatorNameToBan = claim ? claim.name : null;
+      type: unblock ? ACTIONS.COMMENT_MODERATION_UN_BLOCK_STARTED : ACTIONS.COMMENT_MODERATION_BLOCK_STARTED,
-    const activeChannelClaim = selectActiveChannelClaim(state);
+      data: {
-
+        uri: channelUri,
-    let channelSignature = {};
+      },
-    if (activeChannelClaim) {
-      try {
-        channelSignature = await Lbry.channel_sign({
-          channel_id: activeChannelClaim.claim_id,
-          hexdata: toHex(activeChannelClaim.name),
     });
+
+    const creatorIdForAction = claim ? claim.claim_id : null;
+    const creatorNameForAction = claim ? claim.name : null;
+
+    let channelSignatures = [];
+    if (myChannels) {
+      for (const channelClaim of myChannels) {
+        try {
+          const channelSignature = await Lbry.channel_sign({
+            channel_id: channelClaim.claim_id,
+            hexdata: toHex(channelClaim.name),
+          });
+
+          channelSignatures.push({ ...channelSignature, claim_id: channelClaim.claim_id, name: channelClaim.name });
         } catch (e) {}
       }
+    }
 
-    return Comments.moderation_block({
+    const sharedModBlockParams = unblock
-      mod_channel_id: activeChannelClaim.claim_id,
+      ? {
-      mod_channel_name: activeChannelClaim.name,
+          un_blocked_channel_id: creatorIdForAction,
-      signature: channelSignature.signature,
+          un_blocked_channel_name: creatorNameForAction,
-      signing_ts: channelSignature.signing_ts,
+        }
-      banned_channel_id: creatorIdToBan,
+      : {
-      banned_channel_name: creatorNameToBan,
+          blocked_channel_id: creatorIdForAction,
-      delete_all: true,
+          blocked_channel_name: creatorNameForAction,
+        };
+
+    const commentAction = unblock ? Comments.moderation_unblock : Comments.moderation_block;
+
+    return Promise.all(
+      channelSignatures.map((signatureData) =>
+        commentAction({
+          mod_channel_id: signatureData.claim_id,
+          mod_channel_name: signatureData.name,
+          signature: signatureData.signature,
+          signing_ts: signatureData.signing_ts,
+          ...sharedModBlockParams,
+        })
+      )
+    )
+      .then(() => {
+        dispatch({
+          type: unblock ? ACTIONS.COMMENT_MODERATION_UN_BLOCK_COMPLETE : ACTIONS.COMMENT_MODERATION_BLOCK_COMPLETE,
+          data: { channelUri },
+        });
+
+        if (!unblock) {
+          dispatch(doToast({ message: __('Channel blocked. You will not see them again.') }));
+        }
+      })
+      .catch(() => {
+        dispatch({
+          type: unblock ? ACTIONS.COMMENT_MODERATION_UN_BLOCK_FAILED : ACTIONS.COMMENT_MODERATION_BLOCK_FAILED,
+        });
+      });
+  };
+}
+
+export function doCommentModBlock(commentAuthor: string) {
+  return (dispatch: Dispatch) => {
+    return dispatch(doCommentModToggleBlock(commentAuthor));
+  };
+}
+
+export function doCommentModUnBlock(commentAuthor: string) {
+  return (dispatch: Dispatch) => {
+    return dispatch(doCommentModToggleBlock(commentAuthor, true));
+  };
+}
+
+export function doFetchModBlockedList() {
+  return async (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const myChannels = selectMyChannelClaims(state);
+
+    dispatch({
+      type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_STARTED,
+    });
+
+    let channelSignatures = [];
+    if (myChannels) {
+      for (const channelClaim of myChannels) {
+        try {
+          const channelSignature = await Lbry.channel_sign({
+            channel_id: channelClaim.claim_id,
+            hexdata: toHex(channelClaim.name),
+          });
+
+          channelSignatures.push({ ...channelSignature, claim_id: channelClaim.claim_id, name: channelClaim.name });
+        } catch (e) {}
+      }
+    }
+
+    return Promise.all(
+      channelSignatures.map((signatureData) =>
+        Comments.moderation_block_list({
+          mod_channel_id: signatureData.claim_id,
+          mod_channel_name: signatureData.name,
+          signature: signatureData.signature,
+          signing_ts: signatureData.signing_ts,
+        })
+      )
+    )
+      .then((blockLists) => {
+        let globalBlockList = new Set();
+        blockLists.forEach((channelBlockListData) => {
+          const blockListForChannel = channelBlockListData && channelBlockListData.blocked_channels;
+          if (blockListForChannel) {
+            blockListForChannel.forEach((blockedChannel) => {
+              // REMOVE THIS
+              if (blockedChannel.blocked_channel_name) {
+                const channelUri = buildURI({
+                  channelName: blockedChannel.blocked_channel_name,
+                  claimId: blockedChannel.blocked_channel_id,
+                });
+
+                globalBlockList.add(channelUri);
+              }
+            });
+          }
+        });
+
+        dispatch({
+          type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_COMPLETED,
+          data: {
+            blockList: Array.from(globalBlockList).reverse(),
+          },
+        });
+      })
+      .catch((err) => {
+        dispatch({
+          type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_FAILED,
+        });
       });
   };
 }

ui/redux/reducers/blocked.js

@@ -15,9 +15,9 @@ export default handleActions(
       let newBlockedChannels = blockedChannels.slice();
 
       if (newBlockedChannels.includes(uri)) {
-        newBlockedChannels = newBlockedChannels.filter(id => id !== uri);
+        newBlockedChannels = newBlockedChannels.filter((id) => id !== uri);
       } else {
-        newBlockedChannels.push(uri);
+        newBlockedChannels.unshift(uri);
       }
 
       return {
@@ -29,7 +29,7 @@ export default handleActions(
       action: { data: { blocked: ?Array<string> } }
     ) => {
       const { blocked } = action.data;
-      const sanitizedBlocked = blocked && blocked.filter(e => typeof e === 'string');
+      const sanitizedBlocked = blocked && blocked.filter((e) => typeof e === 'string');
       return {
         ...state,
         blockedChannels: sanitizedBlocked && sanitizedBlocked.length ? sanitizedBlocked : state.blockedChannels,

ui/redux/reducers/comments.js

@@ -16,6 +16,10 @@ const defaultState: CommentsState = {
   typesReacting: [],
   myReactsByCommentId: undefined,
   othersReactsByCommentId: undefined,
+  moderationBlockList: undefined,
+  fetchingModerationBlockList: false,
+  blockingByUri: {},
+  unBlockingByUri: {},
 };
 
 export default handleActions(
@@ -144,7 +148,7 @@ export default handleActions(
       };
     },
 
-    [ACTIONS.COMMENT_LIST_STARTED]: state => ({ ...state, isLoading: true }),
+    [ACTIONS.COMMENT_LIST_STARTED]: (state) => ({ ...state, isLoading: true }),
 
     [ACTIONS.COMMENT_LIST_COMPLETED]: (state: CommentsState, action: any) => {
       const { comments, claimId, uri } = action.data;
@@ -227,17 +231,15 @@ export default handleActions(
         isLoading: false,
       };
     },
-    // do nothing
+
     [ACTIONS.COMMENT_ABANDON_FAILED]: (state: CommentsState, action: any) => ({
       ...state,
       isCommenting: false,
     }),
-    // do nothing
     [ACTIONS.COMMENT_UPDATE_STARTED]: (state: CommentsState, action: any) => ({
       ...state,
       isCommenting: true,
     }),
-    // replace existing comment with comment returned here under its comment_id
     [ACTIONS.COMMENT_UPDATE_COMPLETED]: (state: CommentsState, action: any) => {
       const { comment } = action.data;
       const commentById = Object.assign({}, state.commentById);
@@ -249,25 +251,100 @@ export default handleActions(
         isCommenting: false,
       };
     },
-    // nothing can be done here
+
     [ACTIONS.COMMENT_UPDATE_FAILED]: (state: CommentsState, action: any) => ({
       ...state,
       isCmmenting: false,
     }),
-    // nothing can really be done here
+    [ACTIONS.COMMENT_MODERATION_BLOCK_LIST_STARTED]: (state: CommentsState, action: any) => ({
-    [ACTIONS.COMMENT_HIDE_STARTED]: (state: CommentsState, action: any) => ({
       ...state,
-      isLoading: true,
+      fetchingModerationBlockList: true,
     }),
-    [ACTIONS.COMMENT_HIDE_COMPLETED]: (state: CommentsState, action: any) => ({
+    [ACTIONS.COMMENT_MODERATION_BLOCK_LIST_COMPLETED]: (state: CommentsState, action: any) => {
-      ...state, // todo: add HiddenComments state & create selectors
+      const { blockList } = action.data;
-      isLoading: false,
+
-    }),
+      return {
-    // nothing can be done here
-    [ACTIONS.COMMENT_HIDE_FAILED]: (state: CommentsState, action: any) => ({
         ...state,
-      isLoading: false,
+        moderationBlockList: blockList,
+        fetchingModerationBlockList: false,
+      };
+    },
+    [ACTIONS.COMMENT_MODERATION_BLOCK_LIST_FAILED]: (state: CommentsState, action: any) => ({
+      ...state,
+      fetchingModerationBlockList: false,
     }),
+
+    [ACTIONS.COMMENT_MODERATION_BLOCK_STARTED]: (state: CommentsState, action: any) => ({
+      ...state,
+      blockingByUri: {
+        ...state.blockingByUri,
+        [action.data.uri]: true,
+      },
+    }),
+
+    [ACTIONS.COMMENT_MODERATION_UN_BLOCK_STARTED]: (state: CommentsState, action: any) => ({
+      ...state,
+      unBlockingByUri: {
+        ...state.unBlockingByUri,
+        [action.data.uri]: true,
+      },
+    }),
+    [ACTIONS.COMMENT_MODERATION_BLOCK_FAILED]: (state: CommentsState, action: any) => ({
+      ...state,
+      blockingByUri: {
+        ...state.blockingByUri,
+        [action.data.uri]: false,
+      },
+    }),
+
+    [ACTIONS.COMMENT_MODERATION_UN_BLOCK_FAILED]: (state: CommentsState, action: any) => ({
+      ...state,
+      unBlockingByUri: {
+        ...state.unBlockingByUri,
+        [action.data.uri]: false,
+      },
+    }),
+
+    [ACTIONS.COMMENT_MODERATION_BLOCK_COMPLETE]: (state: CommentsState, action: any) => {
+      const { channelUri } = action.data;
+      const commentById = Object.assign({}, state.commentById);
+      const blockingByUri = Object.assign({}, state.blockingByUri);
+      const moderationBlockList = state.moderationBlockList || [];
+      const newModerationBlockList = moderationBlockList.slice();
+
+      for (const commentId in commentById) {
+        const comment = commentById[commentId];
+
+        if (channelUri === comment.channel_url) {
+          delete commentById[comment.comment_id];
+        }
+      }
+
+      delete blockingByUri[channelUri];
+
+      newModerationBlockList.push(channelUri);
+
+      return {
+        ...state,
+        commentById,
+        blockingByUri,
+        moderationBlockList: newModerationBlockList,
+      };
+    },
+    [ACTIONS.COMMENT_MODERATION_UN_BLOCK_COMPLETE]: (state: CommentsState, action: any) => {
+      const { channelUri } = action.data;
+      const unBlockingByUri = Object.assign(state.unBlockingByUri, {});
+      const moderationBlockList = state.moderationBlockList || [];
+      const newModerationBlockList = moderationBlockList.slice().filter((uri) => uri !== channelUri);
+
+      delete unBlockingByUri[channelUri];
+
+      return {
+        ...state,
+        unBlockingByUri,
+        moderationBlockList: newModerationBlockList,
+      };
+    },
   },
   defaultState
 );

ui/redux/selectors/blocked.js

@@ -3,23 +3,11 @@ import { createSelector } from 'reselect';
 
 const selectState = (state: { blocked: BlocklistState }) => state.blocked || {};
 
-export const selectBlockedChannels = createSelector(selectState, (state: BlocklistState) => {
+export const selectMutedChannels = createSelector(selectState, (state: BlocklistState) => {
-  return state.blockedChannels.filter(e => typeof e === 'string');
+  return state.blockedChannels.filter((e) => typeof e === 'string');
 });
 
-export const selectBlockedChannelsCount = createSelector(selectBlockedChannels, (state: Array<string>) => state.length);
+export const makeSelectChannelIsMuted = (uri: string) =>
-
+  createSelector(selectMutedChannels, (state: Array<string>) => {
-export const selectBlockedChannelsObj = createSelector(selectState, (state: BlocklistState) => {
-  return state.blockedChannels.reduce((acc: any, val: any) => {
-    const outpoint = `${val.txid}:${String(val.nout)}`;
-    return {
-      ...acc,
-      [outpoint]: 1,
-    };
-  }, {});
-});
-
-export const selectChannelIsBlocked = (uri: string) =>
-  createSelector(selectBlockedChannels, (state: Array<string>) => {
     return state.includes(uri);
   });

ui/redux/selectors/comments.js

@@ -1,22 +1,28 @@
 // @flow
 import * as SETTINGS from 'constants/settings';
 import { createSelector } from 'reselect';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { selectBlacklistedOutpointMap, selectFilteredOutpointMap } from 'lbryinc';
 import { selectClaimsById, isClaimNsfw, selectMyActiveClaims } from 'lbry-redux';
 
-const selectState = state => state.comments || {};
+const selectState = (state) => state.comments || {};
 
-export const selectCommentsById = createSelector(selectState, state => state.commentById || {});
+export const selectCommentsById = createSelector(selectState, (state) => state.commentById || {});
-
+export const selectIsFetchingComments = createSelector(selectState, (state) => state.isLoading);
-export const selectIsFetchingComments = createSelector(selectState, state => state.isLoading);
+export const selectIsPostingComment = createSelector(selectState, (state) => state.isCommenting);
-
+export const selectIsFetchingReacts = createSelector(selectState, (state) => state.isFetchingReacts);
-export const selectIsPostingComment = createSelector(selectState, state => state.isCommenting);
+export const selectOthersReactsById = createSelector(selectState, (state) => state.othersReactsByCommentId);
-
+export const selectModerationBlockList = createSelector(
-export const selectIsFetchingReacts = createSelector(selectState, state => state.isFetchingReacts);
+  selectState,
-
+  (state) => state.moderationBlockList && state.moderationBlockList.reverse()
-export const selectOthersReactsById = createSelector(selectState, state => state.othersReactsByCommentId);
+);
+export const selectBlockingByUri = createSelector(selectState, (state) => state.blockingByUri);
+export const selectUnBlockingByUri = createSelector(selectState, (state) => state.unBlockingByUri);
+export const selectFetchingModerationBlockList = createSelector(
+  selectState,
+  (state) => state.fetchingModerationBlockList
+);
 
 export const selectCommentsByClaimId = createSelector(selectState, selectCommentsById, (state, byId) => {
   const byClaimId = state.byId || {};
@@ -40,7 +46,7 @@ export const selectTopLevelCommentsByClaimId = createSelector(selectState, selec
   const comments = {};
 
   // replace every comment_id in the list with the actual comment object
-  Object.keys(byClaimId).forEach(claimId => {
+  Object.keys(byClaimId).forEach((claimId) => {
     const commentIds = byClaimId[claimId];
 
     comments[claimId] = Array(commentIds === null ? 0 : commentIds.length);
@@ -53,14 +59,14 @@ export const selectTopLevelCommentsByClaimId = createSelector(selectState, selec
 });
 
 export const makeSelectCommentForCommentId = (commentId: string) =>
-  createSelector(selectCommentsById, comments => comments[commentId]);
+  createSelector(selectCommentsById, (comments) => comments[commentId]);
 
 export const selectRepliesByParentId = createSelector(selectState, selectCommentsById, (state, byId) => {
   const byParentId = state.repliesByParentId || {};
   const comments = {};
 
   // replace every comment_id in the list with the actual comment object
-  Object.keys(byParentId).forEach(id => {
+  Object.keys(byParentId).forEach((id) => {
     const commentIds = byParentId[id];
 
     comments[id] = Array(commentIds === null ? 0 : commentIds.length);
@@ -77,10 +83,10 @@ export const selectRepliesByParentId = createSelector(selectState, selectComment
   selectState,
   state => state.byId || {}
 ); */
-export const selectCommentsByUri = createSelector(selectState, state => {
+export const selectCommentsByUri = createSelector(selectState, (state) => {
   const byUri = state.commentsByUri || {};
   const comments = {};
-  Object.keys(byUri).forEach(uri => {
+  Object.keys(byUri).forEach((uri) => {
     const claimId = byUri[uri];
     if (claimId === null) {
       comments[uri] = null;
@@ -99,16 +105,16 @@ export const makeSelectCommentIdsForUri = (uri: string) =>
   });
 
 export const makeSelectMyReactionsForComment = (commentId: string) =>
-  createSelector(selectState, state => {
+  createSelector(selectState, (state) => {
     return state.myReactsByCommentId[commentId] || [];
   });
 
 export const makeSelectOthersReactionsForComment = (commentId: string) =>
-  createSelector(selectState, state => {
+  createSelector(selectState, (state) => {
     return state.othersReactsByCommentId[commentId];
   });
 
-export const selectPendingCommentReacts = createSelector(selectState, state => state.pendingCommentReactions);
+export const selectPendingCommentReacts = createSelector(selectState, (state) => state.pendingCommentReactions);
 
 export const makeSelectCommentsForUri = (uri: string) =>
   createSelector(
@@ -116,7 +122,7 @@ export const makeSelectCommentsForUri = (uri: string) =>
     selectCommentsByUri,
     selectClaimsById,
     selectMyActiveClaims,
-    selectBlockedChannels,
+    selectMutedChannels,
     selectBlacklistedOutpointMap,
     selectFilteredOutpointMap,
     makeSelectClientSetting(SETTINGS.SHOW_MATURE),
@@ -125,7 +131,12 @@ export const makeSelectCommentsForUri = (uri: string) =>
       const comments = byClaimId && byClaimId[claimId];
 
       return comments
-        ? comments.filter(comment => {
+        ? comments.filter((comment) => {
+            if (!comment) {
+              // It may have been recently deleted after being blocked
+              return false;
+            }
+
             const channelClaim = claimsById[comment.channel_id];
 
             // Return comment if `channelClaim` doesn't exist so the component knows to resolve the author
@@ -162,7 +173,7 @@ export const makeSelectTopLevelCommentsForUri = (uri: string) =>
     selectCommentsByUri,
     selectClaimsById,
     selectMyActiveClaims,
-    selectBlockedChannels,
+    selectMutedChannels,
     selectBlacklistedOutpointMap,
     selectFilteredOutpointMap,
     makeSelectClientSetting(SETTINGS.SHOW_MATURE),
@@ -171,7 +182,7 @@ export const makeSelectTopLevelCommentsForUri = (uri: string) =>
       const comments = byClaimId && byClaimId[claimId];
 
       return comments
-        ? comments.filter(comment => {
+        ? comments.filter((comment) => {
             if (!comment) {
               return false;
             }
@@ -212,7 +223,7 @@ export const makeSelectRepliesForParentId = (id: string) =>
     selectCommentsById,
     selectClaimsById,
     selectMyActiveClaims,
-    selectBlockedChannels,
+    selectMutedChannels,
     selectBlacklistedOutpointMap,
     selectFilteredOutpointMap,
     makeSelectClientSetting(SETTINGS.SHOW_MATURE),
@@ -223,13 +234,13 @@ export const makeSelectRepliesForParentId = (id: string) =>
       if (!replyIdsForParent.length) return null;
 
       const comments = [];
-      replyIdsForParent.forEach(cid => {
+      replyIdsForParent.forEach((cid) => {
         comments.push(commentsById[cid]);
       });
       // const comments = byParentId && byParentId[id];
 
       return comments
-        ? comments.filter(comment => {
+        ? comments.filter((comment) => {
             if (!comment) {
               return false;
             }
@@ -265,6 +276,20 @@ export const makeSelectRepliesForParentId = (id: string) =>
   );
 
 export const makeSelectTotalCommentsCountForUri = (uri: string) =>
-  createSelector(makeSelectCommentsForUri(uri), comments => {
+  createSelector(makeSelectCommentsForUri(uri), (comments) => {
     return comments ? comments.length : 0;
   });
+
+export const makeSelectChannelIsBlocked = (uri: string) =>
+  createSelector(selectModerationBlockList, (blockedChannelUris) => {
+    if (!blockedChannelUris || !blockedChannelUris) {
+      return false;
+    }
+
+    return blockedChannelUris.includes(uri);
+  });
+
+export const makeSelectUriIsBlockingOrUnBlocking = (uri: string) =>
+  createSelector(selectBlockingByUri, selectUnBlockingByUri, (blockingByUri, unBlockingByUri) => {
+    return blockingByUri[uri] || unBlockingByUri[uri];
+  });

ui/redux/selectors/content.js

@@ -13,7 +13,7 @@ import {
   makeSelectFileNameForUri,
 } from 'lbry-redux';
 import { makeSelectRecommendedContentForUri } from 'redux/selectors/search';
-import { selectBlockedChannels } from 'redux/selectors/blocked';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectAllCostInfoByUri, makeSelectCostInfoForUri } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import * as RENDER_MODES from 'constants/file_render_modes';
@@ -81,7 +81,7 @@ export const makeSelectNextUnplayedRecommended = (uri: string) =>
     selectHistory,
     selectClaimsByUri,
     selectAllCostInfoByUri,
-    selectBlockedChannels,
+    selectMutedChannels,
     (
       recommendedForUri: Array<string>,
       history: Array<{ uri: string }>,

ui/scss/component/_channel.scss

@@ -390,6 +390,16 @@ $metadata-z-index: 1;
   padding: 0;
 }
 
+.channel-staked__wrapper--inline {
+  position: relative;
+  background-color: transparent;
+  display: inline-block;
+  bottom: auto;
+  left: auto;
+  top: var(--spacing-xs);
+  padding: 0;
+}
+
 .channel-staked__indicator {
   margin-left: 2px;
   z-index: 3;

ui/scss/component/_claim-list.scss

@@ -64,6 +64,12 @@
 .claim-preview__wrapper {
   padding: var(--spacing-m);
   list-style: none;
+
+  &:hover {
+    .claim__menu-button {
+      display: block;
+    }
+  }
 }
 
 .claim-preview__wrapper--notice {
@@ -247,17 +253,6 @@
 
 .claim-preview-info {
   align-items: flex-start;
-
-  .channel-thumbnail {
-    display: none;
-    @include handleChannelGif(1.4rem);
-    margin-right: 0;
-    margin-left: var(--spacing-s);
-
-    @media (min-width: $breakpoint-small) {
-      display: block;
-    }
-  }
 }
 
 .claim-preview-info,
@@ -408,6 +403,10 @@
 
   &:hover {
     cursor: pointer;
+
+    .claim__menu-button {
+      display: block;
+    }
   }
 
   @media (min-width: $breakpoint-large) {
@@ -456,12 +455,23 @@
 }
 
 .claim-tile__title {
-  margin: var(--spacing-s);
+  position: relative;
+
+  padding: var(--spacing-s);
+  padding-right: var(--spacing-m);
+  padding-bottom: 0;
+  margin-bottom: var(--spacing-s);
+
   font-weight: 600;
   color: var(--color-text);
   font-size: var(--font-small);
   min-height: 2rem;
 
+  .claim__menu-button {
+    right: 0.2rem;
+    top: var(--spacing-s);
+  }
+
   @media (min-width: $breakpoint-small) {
     min-height: 2.5rem;
   }
@@ -571,3 +581,36 @@
 .claim-preview__null-label {
   margin: auto;
 }
+
+.claim-preview__channel-staked {
+  display: flex;
+  align-items: center;
+
+  .channel-thumbnail {
+    @include handleChannelGif(1.4rem);
+    margin-right: 0;
+  }
+}
+
+.claim__menu-button {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+
+  .icon {
+    stroke: var(--color-text);
+  }
+
+  &:not([aria-expanded='true']) {
+    display: none;
+  }
+}
+
+.claim__menu-button--inline {
+  position: relative;
+  display: block;
+  right: auto;
+  top: auto;
+  @extend .button--alt;
+  padding: 0 var(--spacing-xxs);
+}

ui/scss/component/menu-button.scss

@@ -43,6 +43,15 @@
   box-shadow: none;
 }
 
+.menu__button {
+  &:hover {
+    .icon {
+      border-radius: var(--border-radius);
+      background-color: var(--color-card-background-highlighted);
+    }
+  }
+}
+
 .menu__title {
   &[aria-expanded='true'] {
     background-color: var(--color-primary-alt);
@@ -54,16 +63,7 @@
   animation: menu-animate-in var(--animation-duration) var(--animation-style);
   border-bottom-left-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
-}
 
-.menu__list--header {
-  @extend .menu__list;
-  padding: var(--spacing-xs);
-  margin-top: 19px;
-}
-
-.menu__list--comments {
-  @extend .menu__list;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
   padding: var(--spacing-xs) 0;
@@ -73,6 +73,15 @@
   }
 }
 
+.menu__list--header {
+  @extend .menu__list;
+  margin-top: 19px;
+}
+
+.menu__list--comments {
+  @extend .menu__list;
+}
+
 .menu__link {
   display: flex;
   align-items: center;

ui/scss/init/_color.scss

@@ -36,7 +36,7 @@
   --color-button-primary-bg-hover: var(--color-primary-alt-2);
   --color-button-primary-hover-text: var(--color-primary-alt);
   --color-button-secondary-bg: var(--color-secondary-alt);
-  --color-button-secondary-border: #c5d7ed;
+  --color-button-secondary-border: var(--color-secondary-alt);
   --color-button-secondary-text: var(--color-secondary);
   --color-button-secondary-bg-hover: #b9d0e9;
   --color-button-alt-bg: var(--color-gray-1);

ui/store.js

@@ -24,9 +24,9 @@ function isNotFunction(object) {
 }
 
 function createBulkThunkMiddleware() {
-  return ({ dispatch, getState }) => next => action => {
+  return ({ dispatch, getState }) => (next) => (action) => {
     if (action.type === 'BATCH_ACTIONS') {
-      action.actions.filter(isFunction).map(actionFn => actionFn(dispatch, getState));
+      action.actions.filter(isFunction).map((actionFn) => actionFn(dispatch, getState));
     }
     return next(action);
   };
@@ -68,7 +68,6 @@ const subscriptionsFilter = createFilter('subscriptions', ['subscriptions']);
 const blockedFilter = createFilter('blocked', ['blockedChannels']);
 const settingsFilter = createBlacklistFilter('settings', ['loadedLanguages', 'language']);
 const whiteListedReducers = [
-  'comments',
   'fileInfo',
   'publish',
   'wallet',
@@ -143,7 +142,7 @@ const sharedStateFilters = {
   subscriptions: {
     source: 'subscriptions',
     property: 'subscriptions',
-    transform: function(value) {
+    transform: (value) => {
       return value.map(({ uri }) => uri);
     },
   },
@@ -162,7 +161,7 @@ const sharedStateCb = ({ dispatch, getState }) => {
 };
 
 const populateAuthTokenHeader = () => {
-  return next => action => {
+  return (next) => (action) => {
     if (
       (action.type === ACTIONS.USER_FETCH_SUCCESS || action.type === ACTIONS.AUTHENTICATION_SUCCESS) &&
       action.data.user.has_verified_email === true

ui/util/hex.js

@@ -1,8 +1,50 @@
 // @flow
+
+const EMOJI_REGEX = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g;
+
 export function toHex(str: string): string {
-  var result = '';
+  const array = Array.from(str);
-  for (var i = 0; i < str.length; i++) {
+
-    result += str.charCodeAt(i).toString(16);
+  let result = '';
+
+  for (var i = 0; i < array.length; i++) {
+    const val = array[i];
+
+    const isEmoji = EMOJI_REGEX.test(val);
+
+    const utf = isEmoji
+      ? toUTF8Array(val)
+          .map((num) => num.toString(16))
+          .join('')
+      : val.charCodeAt(0).toString(16);
+
+    result += utf;
   }
+
   return result;
 }
+
+function toUTF8Array(str) {
+  var utf8 = [];
+  for (var i = 0; i < str.length; i++) {
+    var charcode = str.charCodeAt(i);
+    if (charcode < 0x80) utf8.push(charcode);
+    else if (charcode < 0x800) {
+      utf8.push(0xc0 | (charcode >> 6), 0x80 | (charcode & 0x3f));
+    } else if (charcode < 0xd800 || charcode >= 0xe000) {
+      utf8.push(0xe0 | (charcode >> 12), 0x80 | ((charcode >> 6) & 0x3f), 0x80 | (charcode & 0x3f));
+    }
+    // surrogate pair
+    else {
+      i++;
+      charcode = (((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff)) + 0x010000;
+      utf8.push(
+        0xf0 | (charcode >> 18),
+        0x80 | ((charcode >> 12) & 0x3f),
+        0x80 | ((charcode >> 6) & 0x3f),
+        0x80 | (charcode & 0x3f)
+      );
+    }
+  }
+  return utf8;
+}