blocked channels are filtered from claim search and images are obscured

src/ui/component/channelThumbnail/view.jsx

@@ -9,10 +9,11 @@ type Props = {
   uri: string,
   className?: string,
   thumbnailPreview: ?string,
+  obscure?: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
-  const { thumbnail, uri, className, thumbnailPreview } = props;
+  const { thumbnail, uri, className, thumbnailPreview, obscure } = props;
 
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
@@ -25,8 +26,8 @@ function ChannelThumbnail(props: Props) {
         [colorClassName]: !thumbnail,
       })}
     >
-      {!thumbnail && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />}
-      {thumbnail && <img className="channel-thumbnail__custom" src={thumbnailPreview || thumbnail} />}
+      {(!thumbnail || obscure) && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />}
+      {!obscure && thumbnail && <img className="channel-thumbnail__custom" src={thumbnailPreview || thumbnail} />}
     </div>
   );
 }

src/ui/component/claimList/view.jsx

@@ -26,6 +26,7 @@ type Props = {
   id?: string,
   // If using the default header, this is a unique ID needed to persist the state of the filter setting
   persistedStorageKey?: string,
+  showHiddenByUser: boolean,
 };
 
 export default function ClaimList(props: Props) {
@@ -43,6 +44,7 @@ export default function ClaimList(props: Props) {
     pageSize,
     page,
     id,
+    showHiddenByUser,
   } = props;
   const [scrollBottomCbMap, setScrollBottomCbMap] = useState({});
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@@ -113,7 +115,7 @@ export default function ClaimList(props: Props) {
         <ul className="ul--no-style">
           {sortedUris.map((uri, index) => (
             <React.Fragment key={uri}>
-              <ClaimPreview uri={uri} type={type} />
+              <ClaimPreview uri={uri} type={type} showUserBlocked={showHiddenByUser} />
               {index === 4 && injectedItem && injectedItem}
             </React.Fragment>
           ))}

src/ui/component/claimListDiscover/index.js

@@ -1,6 +1,12 @@
 import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
-import { doClaimSearch, selectClaimSearchByQuery, selectFetchingClaimSearch, doToggleTagFollow } from 'lbry-redux';
+import {
+  doClaimSearch,
+  selectClaimSearchByQuery,
+  selectFetchingClaimSearch,
+  doToggleTagFollow,
+  selectBlockedChannels,
+} from 'lbry-redux';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import ClaimListDiscover from './view';
@@ -10,6 +16,7 @@ const select = state => ({
   loading: selectFetchingClaimSearch(state),
   subscribedChannels: selectSubscriptions(state),
   showNsfw: makeSelectClientSetting(SETTINGS.SHOW_NSFW)(state),
+  hiddenUris: selectBlockedChannels(state),
 });
 
 const perform = {

src/ui/component/claimListDiscover/view.jsx

@@ -44,6 +44,7 @@ type Props = {
   claimSearchByQuery: {
     [string]: Array<string>,
   },
+  hiddenUris: Array<string>,
 };
 
 function ClaimListDiscover(props: Props) {
@@ -59,6 +60,7 @@ function ClaimListDiscover(props: Props) {
     showNsfw,
     history,
     location,
+    hiddenUris,
   } = props;
   const didNavigateForward = history.action === 'PUSH';
   const { search, pathname } = location;
@@ -75,6 +77,7 @@ function ClaimListDiscover(props: Props) {
     no_totals: boolean,
     any_tags: Array<string>,
     channel_ids: Array<string>,
+    not_channel_ids: Array<string>,
     not_tags: Array<string>,
     order_by: Array<string>,
     release_time?: string,
@@ -86,6 +89,7 @@ function ClaimListDiscover(props: Props) {
     no_totals: true,
     any_tags: (personalView && personalSort === SEARCH_SORT_YOU) || !personalView ? tags : [],
     channel_ids: personalSort === SEARCH_SORT_CHANNELS ? subscribedChannels.map(sub => sub.uri.split('#')[1]) : [],
+    not_channel_ids: hiddenUris && hiddenUris.length ? hiddenUris.map(hiddenUri => hiddenUri.split('#')[1]) : [],
     not_tags: !showNsfw ? MATURE_TAGS : [],
     order_by:
       typeSort === TYPE_TRENDING

src/ui/component/claimPreview/view.jsx

@@ -102,10 +102,14 @@ function ClaimPreview(props: Props) {
         (outpoint.txid === claim.txid && outpoint.nout === claim.nout)
     );
   }
-  // if showUserBlocked wasnt passed to claimPreview (for blocked page) hide user-blocked channels
+  // block stream claims
   if (claim && !shouldHide && !showUserBlocked && blockedChannelUris.length && signingChannel) {
     shouldHide = blockedChannelUris.some(blockedUri => blockedUri === signingChannel.permanent_url);
   }
+  // block channel claims if we can't control for them in claim search
+  if (claim && isChannel && !shouldHide && !showUserBlocked && blockedChannelUris.length && isChannel) {
+    shouldHide = blockedChannelUris.some(blockedUri => blockedUri === claim.permanent_url);
+  }
 
   function handleContextMenu(e) {
     e.preventDefault();
@@ -157,7 +161,7 @@ function ClaimPreview(props: Props) {
         'claim-preview--pending': pending,
       })}
     >
-      {isChannel ? <ChannelThumbnail uri={uri} /> : <CardMedia thumbnail={thumbnail} />}
+      {isChannel ? <ChannelThumbnail uri={uri} obscure={channelIsBlocked} /> : <CardMedia thumbnail={thumbnail} />}
       <div className="claim-preview-metadata">
         <div className="claim-preview-info">
           <div className="claim-preview-title">

src/ui/page/channel/view.jsx

@@ -15,6 +15,7 @@ import ChannelThumbnail from 'component/channelThumbnail';
 import ChannelEdit from 'component/channelEdit';
 import ClaimUri from 'component/claimUri';
 import * as ICONS from 'constants/icons';
+import classnames from 'classnames';
 
 const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
@@ -77,11 +78,18 @@ function ChannelPage(props: Props) {
     <Page>
       <div className="card">
         <header className="channel-cover">
-          {!editing && cover && <img className="channel-cover__custom" src={cover} />}
+          {!editing && cover && (
+            <img
+              className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
+              src={cover}
+            />
+          )}
           {editing && <img className="channel-cover__custom" src={coverPreview} />}
           {/* component that offers select/upload */}
           <div className="channel__primary-info ">
-            {!editing && <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} />}
+            {!editing && (
+              <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} />
+            )}
             {editing && (
               <ChannelThumbnail
                 className="channel__thumbnail--channel-page"

src/ui/page/listBlocked/view.jsx

@@ -19,6 +19,7 @@ function ListBlocked(props: Props) {
             persistedStorageKey="block-list-published"
             uris={uris}
             defaultSort
+            showHiddenByUser
           />
         </div>
       ) : (

src/ui/scss/component/_channel.scss

@@ -102,3 +102,7 @@ $metadata-z-index: 1;
   color: rgba($lbry-white, 0.75);
   margin-right: var(--spacing-large);
 }
+
+.channel__image--blurred {
+  filter: blur(16px);
+}