add 'blocked' message on channel page for channels that you have blocked

ui/component/channelContent/view.jsx

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

ui/component/claimList/view.jsx

@@ -100,7 +100,8 @@ export default function ClaimList(props: Props) {
 
   return tileLayout && !header ? (
     <section className="claim-grid">
-      {urisLength > 0 && uris.map((uri) => <ClaimPreviewTile key={uri} uri={uri} />)}
+      {urisLength > 0 &&
+        uris.map((uri) => <ClaimPreviewTile key={uri} uri={uri} showHiddenByUser={showHiddenByUser} />)}
       {!timedOut && urisLength === 0 && !loading && <div className="empty main--empty">{empty || noResultMsg}</div>}
       {timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>}
     </section>
@@ -155,6 +156,7 @@ export default function ClaimList(props: Props) {
                 properties={renderProperties || (type !== 'small' ? undefined : false)}
                 renderActions={renderActions}
                 showUserBlocked={showHiddenByUser}
+                showHiddenByUser={showHiddenByUser}
                 customShouldHide={(claim: StreamClaim) => {
                   // Hack to hide spee.ch thumbnail publishes
                   // If it meets these requirements, it was probably uploaded here:

ui/component/claimListDiscover/view.jsx

@@ -64,6 +64,7 @@ type Props = {
   languageSetting: string,
   searchInLanguage: boolean,
   scrollAnchor?: string,
+  showHiddenByUser?: boolean,
 };
 
 function ClaimListDiscover(props: Props) {
@@ -112,6 +113,7 @@ function ClaimListDiscover(props: Props) {
     languageSetting,
     searchInLanguage,
     scrollAnchor,
+    showHiddenByUser = false,
   } = props;
   const didNavigateForward = history.action === 'PUSH';
   const { search } = location;
@@ -482,6 +484,7 @@ function ClaimListDiscover(props: Props) {
             renderProperties={renderProperties}
             includeSupportAction={includeSupportAction}
             injectedItem={injectedItem}
+            showHiddenByUser={showHiddenByUser}
           />
           {loading && (
             <div className="claim-grid">
@@ -509,6 +512,7 @@ function ClaimListDiscover(props: Props) {
             renderProperties={renderProperties}
             includeSupportAction={includeSupportAction}
             injectedItem={injectedItem}
+            showHiddenByUser={showHiddenByUser}
           />
           {loading && new Array(dynamicPageSize).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
         </div>

ui/component/claimPreviewTile/view.jsx

@@ -43,6 +43,7 @@ type Props = {
   streamingUrl: string,
   isMature: boolean,
   showMature: boolean,
+  showHiddenByUser?: boolean,
 };
 
 function ClaimPreviewTile(props: Props) {
@@ -62,6 +63,7 @@ function ClaimPreviewTile(props: Props) {
     blockedChannelUris,
     isMature,
     showMature,
+    showHiddenByUser,
   } = props;
   const isRepost = claim && claim.repost_channel_url;
   const shouldFetch = claim === undefined;
@@ -130,12 +132,12 @@ function ClaimPreviewTile(props: Props) {
   }
 
   // block stream claims
-  if (claim && !shouldHide && blockedChannelUris.length && signingChannel) {
+  if (claim && !shouldHide && !showHiddenByUser && blockedChannelUris.length && signingChannel) {
     shouldHide = blockedChannelUris.some((blockedUri) => blockedUri === signingChannel.permanent_url);
   }
   // block channel claims if we can't control for them in claim search
   // e.g. fetchRecommendedSubscriptions
-  if (claim && isChannel && !shouldHide && blockedChannelUris.length) {
+  if (claim && isChannel && !shouldHide && !showHiddenByUser && blockedChannelUris.length) {
     shouldHide = blockedChannelUris.some((blockedUri) => blockedUri === claim.permanent_url);
   }
 

ui/page/channel/index.js

@@ -12,6 +12,7 @@ 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 { doOpenModal } from 'redux/actions/app';
 import ChannelPage from './view';
 
@@ -28,6 +29,7 @@ const select = (state, props) => ({
   subCount: makeSelectSubCountForUri(props.uri)(state),
   pending: makeSelectClaimIsPending(props.uri)(state),
   youtubeChannels: selectYoutubeChannels(state),
+  blockedChannels: selectModerationBlockList(state),
 });
 
 const perform = (dispatch) => ({

ui/page/channel/view.jsx

@@ -21,6 +21,7 @@ import HelpLink from 'component/common/help-link';
 import ClaimSupportButton from 'component/claimSupportButton';
 import ChannelStakedIndicator from 'component/channelStakedIndicator';
 import ClaimMenuList from 'component/claimMenuList';
+import Yrbl from 'component/yrbl';
 
 export const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
@@ -46,6 +47,7 @@ type Props = {
   subCount: number,
   pending: boolean,
   youtubeChannels: ?Array<{ channel_claim_id: string, sync_status: string, transfer_state: string }>,
+  blockedChannels: Array<string>,
 };
 
 function ChannelPage(props: Props) {
@@ -63,12 +65,14 @@ function ChannelPage(props: Props) {
     subCount,
     pending,
     youtubeChannels,
+    blockedChannels,
   } = props;
   const {
     push,
     goBack,
     location: { search },
   } = useHistory();
+  const [viewBlockedChannel, setViewBlockedChannel] = React.useState(false);
   const urlParams = new URLSearchParams(search);
   const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
   const [discussionWasMounted, setDiscussionWasMounted] = React.useState(false);
@@ -77,6 +81,7 @@ function ChannelPage(props: Props) {
   const { permanent_url: permanentUrl } = claim;
   const claimId = claim.claim_id;
   const formattedSubCount = Number(subCount).toLocaleString();
+  const isBlocked = claim && blockedChannels.includes(claim.permanent_url);
   const isMyYouTubeChannel =
     claim &&
     youtubeChannels &&
@@ -203,6 +208,21 @@ function ChannelPage(props: Props) {
         <div className="channel-cover__gradient" />
       </header>
 
+      {isBlocked && !viewBlockedChannel ? (
+        <div className="main--empty">
+          <Yrbl
+            title={__('This channel is blocked')}
+            subtitle={__('Are you sure you want to view this content? Viewing will not unblock @%channel%', {
+              channel: channelName,
+            })}
+            actions={
+              <div className="section__actions">
+                <Button button="primary" label={__('View Content')} onClick={() => setViewBlockedChannel(true)} />
+              </div>
+            }
+          />
+        </div>
+      ) : (
         <Tabs onChange={onTabChange} index={tabIndex}>
           <TabList className="tabs__list--channel-page">
             <Tab disabled={editing}>{__('Content')}</Tab>
@@ -211,7 +231,11 @@ function ChannelPage(props: Props) {
           </TabList>
           <TabPanels>
             <TabPanel>
-            <ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} />
+              <ChannelContent
+                uri={uri}
+                channelIsBlackListed={channelIsBlackListed}
+                viewBlockedChannel={viewBlockedChannel}
+              />
             </TabPanel>
             <TabPanel>
               <ChannelAbout uri={uri} />
@@ -221,6 +245,7 @@ function ChannelPage(props: Props) {
             </TabPanel>
           </TabPanels>
         </Tabs>
+      )}
     </Page>
   );
 }