show click through on channel page for muted channels too

static/app-strings.json

@@ -1593,5 +1593,9 @@
   "You do not have any blocked channels": "You do not have any blocked channels",
   "Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content.": "Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content.",
   "Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.": "Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.",
+  "This channel is blocked": "This channel is blocked",
+  "This channel is muted": "This channel is muted",
+  "Are you sure you want to view this content? Viewing will not unblock @%channel%": "Are you sure you want to view this content? Viewing will not unblock @%channel%",
+  "Are you sure you want to view this content? Viewing will not unmute @%channel%": "Are you sure you want to view this content? Viewing will not unmute @%channel%",
   "--end--": "--end--"
 }

ui/component/channelContent/view.jsx

@@ -29,7 +29,7 @@ type Props = {
   isAuthenticated: boolean,
   showMature: boolean,
   tileLayout: boolean,
-  viewBlockedChannel: boolean,
+  viewHiddenChannels: boolean,
 };
 
 function ChannelContent(props: Props) {
@@ -45,7 +45,7 @@ function ChannelContent(props: Props) {
     defaultInfiniteScroll = true,
     showMature,
     tileLayout,
-    viewBlockedChannel,
+    viewHiddenChannels,
   } = props;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
   const [searchQuery, setSearchQuery] = React.useState('');
@@ -122,7 +122,7 @@ function ChannelContent(props: Props) {
 
       {claim && claimsInChannel > 0 ? (
         <ClaimListDiscover
-          showHiddenByUser={viewBlockedChannel}
+          showHiddenByUser={viewHiddenChannels}
           forceShowReposts
           tileLayout={tileLayout}
           uris={searchResults}

ui/page/channel/index.js

@@ -8,11 +8,11 @@ import {
   makeSelectClaimForUri,
   makeSelectClaimIsPending,
 } from 'lbry-redux';
-import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
 import { selectYoutubeChannels } from 'redux/selectors/user';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import { selectModerationBlockList } from 'redux/selectors/comments';
+import { selectMutedChannels } from 'redux/selectors/blocked';
 import { doOpenModal } from 'redux/actions/app';
 import ChannelPage from './view';
 
@@ -24,12 +24,12 @@ const select = (state, props) => ({
   page: selectCurrentChannelPage(state),
   claim: makeSelectClaimForUri(props.uri)(state),
   isSubscribed: makeSelectIsSubscribed(props.uri, true)(state),
-  channelIsBlocked: makeSelectChannelIsMuted(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   subCount: makeSelectSubCountForUri(props.uri)(state),
   pending: makeSelectClaimIsPending(props.uri)(state),
   youtubeChannels: selectYoutubeChannels(state),
   blockedChannels: selectModerationBlockList(state),
+  mutedChannels: selectMutedChannels(state),
 });
 
 const perform = (dispatch) => ({

ui/page/channel/view.jsx

@@ -48,6 +48,7 @@ type Props = {
   pending: boolean,
   youtubeChannels: ?Array<{ channel_claim_id: string, sync_status: string, transfer_state: string }>,
   blockedChannels: Array<string>,
+  mutedChannels: Array<string>,
 };
 
 function ChannelPage(props: Props) {
@@ -59,13 +60,13 @@ function ChannelPage(props: Props) {
     page,
     channelIsMine,
     isSubscribed,
-    channelIsBlocked,
     blackListedOutpoints,
     fetchSubCount,
     subCount,
     pending,
     youtubeChannels,
     blockedChannels,
+    mutedChannels,
   } = props;
   const {
     push,
@@ -82,6 +83,7 @@ function ChannelPage(props: Props) {
   const claimId = claim.claim_id;
   const formattedSubCount = Number(subCount).toLocaleString();
   const isBlocked = claim && blockedChannels.includes(claim.permanent_url);
+  const isMuted = claim && mutedChannels.includes(claim.permanent_url);
   const isMyYouTubeChannel =
     claim &&
     youtubeChannels &&
@@ -159,25 +161,14 @@ function ChannelPage(props: Props) {
               navigate={`/$/${PAGES.CHANNELS}`}
             />
           )}
-          {!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} />}
+          {!channelIsBlackListed && <ShareButton uri={uri} />}
-          {!channelIsBlocked && <ClaimSupportButton uri={uri} />}
+          {!(isBlocked || isMuted) && <ClaimSupportButton uri={uri} />}
-          {!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
+          {!(isBlocked || isMuted) && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
           <ClaimMenuList uri={claim.permanent_url} inline />
         </div>
-        {cover && (
+        {cover && <img className={classnames('channel-cover__custom')} src={cover} />}
-          <img
-            className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
-            src={cover}
-          />
-        )}
         <div className="channel__primary-info">
-          <ChannelThumbnail
+          <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} allowGifs hideStakedIndicator />
-            className="channel__thumbnail--channel-page"
-            uri={uri}
-            obscure={channelIsBlocked}
-            allowGifs
-            hideStakedIndicator
-          />
           <h1 className="channel__title">
             {title || '@' + channelName}
             <ChannelStakedIndicator uri={uri} large />
@@ -208,13 +199,19 @@ function ChannelPage(props: Props) {
         <div className="channel-cover__gradient" />
       </header>
 
-      {isBlocked && !viewBlockedChannel ? (
+      {(isBlocked || isMuted) && !viewBlockedChannel ? (
         <div className="main--empty">
           <Yrbl
-            title={__('This channel is blocked')}
+            title={isBlocked ? __('This channel is blocked') : __('This channel is muted')}
-            subtitle={__('Are you sure you want to view this content? Viewing will not unblock @%channel%', {
+            subtitle={
-              channel: channelName,
+              isBlocked
-            })}
+                ? __('Are you sure you want to view this content? Viewing will not unblock @%channel%', {
+                    channel: channelName,
+                  })
+                : __('Are you sure you want to view this content? Viewing will not unmute @%channel%', {
+                    channel: channelName,
+                  })
+            }
             actions={
               <div className="section__actions">
                 <Button button="primary" label={__('View Content')} onClick={() => setViewBlockedChannel(true)} />
@@ -231,11 +228,7 @@ function ChannelPage(props: Props) {
           </TabList>
           <TabPanels>
             <TabPanel>
-              <ChannelContent
+              <ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} viewHiddenChannels />
-                uri={uri}
-                channelIsBlackListed={channelIsBlackListed}
-                viewBlockedChannel={viewBlockedChannel}
-              />
             </TabPanel>
             <TabPanel>
               <ChannelAbout uri={uri} />

ui/scss/component/_channel.scss

@@ -185,10 +185,6 @@ $metadata-z-index: 1;
   }
 }
 
-.channel__image--blurred {
-  filter: blur(16px);
-}
-
 .channel__quick-actions {
   display: flex;
   flex-direction: row;