From 5ab165131f521f45b6cbbe743b536d8aa8855e50 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Mon, 8 Jul 2019 16:54:58 -0400
Subject: [PATCH 1/5] adds user ability to block channels

small changes

blocked channels page

most features done

tweaks
---
 src/ui/analytics.js                       |  8 +++++
 src/ui/component/blockButton/index.js     | 15 +++++++++
 src/ui/component/blockButton/view.jsx     | 40 +++++++++++++++++++++++
 src/ui/component/channelContent/index.js  |  2 ++
 src/ui/component/channelContent/view.jsx  | 28 +++++++++++-----
 src/ui/component/claimPreview/index.js    |  6 ++++
 src/ui/component/claimPreview/view.jsx    | 18 +++++++++-
 src/ui/component/common/icon-custom.jsx   | 11 +++++++
 src/ui/component/router/view.jsx          |  2 ++
 src/ui/component/subscribeButton/view.jsx |  4 +--
 src/ui/constants/icons.js                 |  2 ++
 src/ui/constants/pages.js                 |  1 +
 src/ui/page/channel/index.js              |  4 +++
 src/ui/page/channel/view.jsx              | 20 ++++++++++--
 src/ui/page/file/view.jsx                 |  2 +-
 src/ui/page/listBlocked/index.js          | 12 +++++++
 src/ui/page/listBlocked/view.jsx          | 37 +++++++++++++++++++++
 src/ui/page/settings/index.js             |  3 +-
 src/ui/page/settings/view.jsx             | 13 ++++++++
 src/ui/reducers.js                        |  2 ++
 src/ui/store.js                           |  3 ++
 21 files changed, 217 insertions(+), 16 deletions(-)
 create mode 100644 src/ui/component/blockButton/index.js
 create mode 100644 src/ui/component/blockButton/view.jsx
 create mode 100644 src/ui/page/listBlocked/index.js
 create mode 100644 src/ui/page/listBlocked/view.jsx

diff --git a/src/ui/analytics.js b/src/ui/analytics.js
index b4c6f4f80..2c887eeaa 100644
--- a/src/ui/analytics.js
+++ b/src/ui/analytics.js
@@ -89,6 +89,14 @@ const analytics: Analytics = {
       });
     }
   },
+  channelBlockEvent: (uri, blocked, location) => {
+    if (analyticsEnabled) {
+      ReactGA.event({
+        category: blocked ? 'Channel-Hidden' : 'Channel-Unhidden',
+        action: uri,
+      });
+    }
+  },
 };
 
 // Initialize google analytics
diff --git a/src/ui/component/blockButton/index.js b/src/ui/component/blockButton/index.js
new file mode 100644
index 000000000..f641ef9f1
--- /dev/null
+++ b/src/ui/component/blockButton/index.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { selectChannelIsBlocked, doToggleBlockChannel, doToast } from 'lbry-redux';
+import BlockButton from './view';
+
+const select = (state, props) => ({
+  channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
+});
+
+export default connect(
+  select,
+  {
+    toggleBlockChannel: doToggleBlockChannel,
+    doToast,
+  }
+)(BlockButton);
diff --git a/src/ui/component/blockButton/view.jsx b/src/ui/component/blockButton/view.jsx
new file mode 100644
index 000000000..912742b59
--- /dev/null
+++ b/src/ui/component/blockButton/view.jsx
@@ -0,0 +1,40 @@
+// @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 'util/use-hover';
+
+type Props = {
+  uri: string,
+  isSubscribed: boolean,
+  toggleBlockChannel: (uri: string) => void,
+  channelIsBlocked: boolean,
+  doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
+};
+
+export default function BlockButton(props: Props) {
+  const { uri, toggleBlockChannel, channelIsBlocked, doToast } = props;
+
+  const blockRef = useRef();
+  const isHovering = useHover(blockRef);
+  const blockLabel = channelIsBlocked ? __('Blocked') : __('Block');
+  const blockedOverride = channelIsBlocked && isHovering && __('Unblock');
+
+  return (
+    <Button
+      ref={blockRef}
+      iconColor="red"
+      icon={blockedOverride ? ICONS.UNBLOCK : ICONS.BLOCK}
+      button={'alt'}
+      label={blockedOverride || blockLabel}
+      onClick={e => {
+        e.stopPropagation();
+        if (!channelIsBlocked) {
+          doToast({ message: `Blocked ${uri}`, linkText: 'Manage', linkTarget: `/${PAGES.BLOCKED}` });
+        }
+        toggleBlockChannel(uri);
+      }}
+    />
+  );
+}
diff --git a/src/ui/component/channelContent/index.js b/src/ui/component/channelContent/index.js
index df8fa3d77..b61c63c87 100644
--- a/src/ui/component/channelContent/index.js
+++ b/src/ui/component/channelContent/index.js
@@ -6,6 +6,7 @@ import {
   makeSelectFetchingChannelClaims,
   makeSelectClaimIsMine,
   makeSelectTotalPagesForChannel,
+  selectChannelIsBlocked,
 } from 'lbry-redux';
 import { withRouter } from 'react-router';
 import ChannelPage from './view';
@@ -19,6 +20,7 @@ const select = (state, props) => {
     fetching: makeSelectFetchingChannelClaims(props.uri)(state),
     totalPages: makeSelectTotalPagesForChannel(props.uri, PAGE_SIZE)(state),
     channelIsMine: makeSelectClaimIsMine(props.uri)(state),
+    channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
   };
 };
 
diff --git a/src/ui/component/channelContent/view.jsx b/src/ui/component/channelContent/view.jsx
index 8075a2e16..40e1c98ab 100644
--- a/src/ui/component/channelContent/view.jsx
+++ b/src/ui/component/channelContent/view.jsx
@@ -12,12 +12,13 @@ type Props = {
   fetching: boolean,
   params: { page: number },
   claimsInChannel: Array<StreamClaim>,
+  channelIsBlocked: boolean,
   channelIsMine: boolean,
   fetchClaims: (string, number) => void,
 };
 
 function ChannelContent(props: Props) {
-  const { uri, fetching, claimsInChannel, totalPages, channelIsMine, fetchClaims } = props;
+  const { uri, fetching, claimsInChannel, totalPages, channelIsMine, channelIsBlocked, fetchClaims } = props;
   const hasContent = Boolean(claimsInChannel && claimsInChannel.length);
   return (
     <Fragment>
@@ -27,21 +28,30 @@ function ChannelContent(props: Props) {
         </section>
       )}
 
-      {!fetching && !hasContent && (
+      {!fetching && !hasContent && !channelIsBlocked && (
         <div className="card--section">
           <h2 className="help">{__("This channel hasn't uploaded anything.")}</h2>
         </div>
       )}
 
+      {!fetching && channelIsBlocked && (
+        <div className="card--section">
+          <h2 className="card__content help">{__('You have blocked this channel content.')}</h2>
+        </div>
+      )}
+
       {!channelIsMine && <HiddenNsfwClaims className="card__subtitle" uri={uri} />}
 
-      {hasContent && <ClaimList header={false} uris={claimsInChannel.map(claim => claim.permanent_url)} />}
-
-      <Paginate
-        onPageChange={page => fetchClaims(uri, page)}
-        totalPages={totalPages}
-        loading={fetching && !hasContent}
-      />
+      {hasContent && !channelIsBlocked && (
+        <ClaimList header={false} uris={claimsInChannel.map(claim => claim.permanent_url)} />
+      )}
+      {!channelIsBlocked && (
+        <Paginate
+          onPageChange={page => fetchClaims(uri, page)}
+          totalPages={totalPages}
+          loading={fetching && !hasContent}
+        />
+      )}
     </Fragment>
   );
 }
diff --git a/src/ui/component/claimPreview/index.js b/src/ui/component/claimPreview/index.js
index 7277c96e5..88b81ed86 100644
--- a/src/ui/component/claimPreview/index.js
+++ b/src/ui/component/claimPreview/index.js
@@ -8,10 +8,13 @@ import {
   makeSelectThumbnailForUri,
   makeSelectTitleForUri,
   makeSelectClaimIsNsfw,
+  selectBlockedChannels,
+  selectChannelIsBlocked,
 } from 'lbry-redux';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowNsfw } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
+import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import ClaimPreview from './view';
 
 const select = (state, props) => ({
@@ -25,7 +28,10 @@ const select = (state, props) => ({
   nsfw: makeSelectClaimIsNsfw(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   filteredOutpoints: selectFilteredOutpoints(state),
+  blockedChannelUris: selectBlockedChannels(state),
   hasVisitedUri: makeSelectHasVisitedUri(props.uri)(state),
+  channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
+  isSubscribed: makeSelectIsSubscribed(props.uri, true)(state),
 });
 
 const perform = dispatch => ({
diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx
index 41dda6e82..5b4b7fa90 100644
--- a/src/ui/component/claimPreview/view.jsx
+++ b/src/ui/component/claimPreview/view.jsx
@@ -13,12 +13,14 @@ 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 Button from 'component/button';
 
 type Props = {
   uri: string,
   claim: ?Claim,
   obscureNsfw: boolean,
+  showUserBlocked: boolean,
   claimIsMine: boolean,
   pending?: boolean,
   resolveUri: string => void,
@@ -39,6 +41,9 @@ type Props = {
     txid: string,
     nout: number,
   }>,
+  blockedChannelUris: Array<string>,
+  channelIsBlocked: boolean,
+  isSubscribed: boolean,
 };
 
 function ClaimPreview(props: Props) {
@@ -58,7 +63,11 @@ function ClaimPreview(props: Props) {
     type,
     blackListedOutpoints,
     filteredOutpoints,
+    blockedChannelUris,
     hasVisitedUri,
+    showUserBlocked,
+    channelIsBlocked,
+    isSubscribed,
   } = props;
   const haventFetched = claim === undefined;
   const abandoned = !isResolvingUri && !claim;
@@ -93,6 +102,10 @@ 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
+  if (claim && !shouldHide && !showUserBlocked && blockedChannelUris.length && signingChannel) {
+    shouldHide = blockedChannelUris.some(blockedUri => blockedUri === signingChannel.permanent_url);
+  }
 
   function handleContextMenu(e) {
     e.preventDefault();
@@ -152,7 +165,10 @@ function ClaimPreview(props: Props) {
           </div>
           {!hideActions && (
             <div>
-              {isChannel && <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />}
+              {isChannel && !channelIsBlocked && (
+                <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
+              )}
+              {isChannel && !isSubscribed && <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />}
               {!isChannel && <FileProperties uri={uri} />}
             </div>
           )}
diff --git a/src/ui/component/common/icon-custom.jsx b/src/ui/component/common/icon-custom.jsx
index 7e63cc046..bcae02a96 100644
--- a/src/ui/component/common/icon-custom.jsx
+++ b/src/ui/component/common/icon-custom.jsx
@@ -128,6 +128,17 @@ export const icons = {
       <line x1="12" y1="17" x2="12" y2="17" />
     </g>
   ),
+  [ICONS.BLOCK]: buildIcon(
+    <g>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+    </g>
+  ),
+  [ICONS.UNBLOCK]: buildIcon(
+    <g>
+      <circle cx="12" cy="12" r="10" />
+    </g>
+  ),
   [ICONS.LIGHT]: buildIcon(
     <g>
       <circle cx="12" cy="12" r="5" />
diff --git a/src/ui/component/router/view.jsx b/src/ui/component/router/view.jsx
index 13f6b3872..3a1ed042f 100644
--- a/src/ui/component/router/view.jsx
+++ b/src/ui/component/router/view.jsx
@@ -21,6 +21,7 @@ import WalletPage from 'page/wallet';
 import NavigationHistory from 'page/navigationHistory';
 import TagsPage from 'page/tags';
 import FollowingPage from 'page/following';
+import ListBlocked from 'page/listBlocked';
 
 // Tell the browser we are handling scroll restoration
 if ('scrollRestoration' in history) {
@@ -64,6 +65,7 @@ function AppRouter(props: Props) {
       <Route path={`/$/${PAGES.TAGS}`} exact component={TagsPage} />
       <Route path={`/$/${PAGES.FOLLOWING}`} exact component={FollowingPage} />
       <Route path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
+      <Route path={`/$/${PAGES.BLOCKED}`} exact component={ListBlocked} />
       {/* Below need to go at the end to make sure we don't match any of our pages first */}
       <Route path="/:claimName" exact component={ShowPage} />
       <Route path="/:claimName/:contentName" exact component={ShowPage} />
diff --git a/src/ui/component/subscribeButton/view.jsx b/src/ui/component/subscribeButton/view.jsx
index cdaea453a..e7e71e47a 100644
--- a/src/ui/component/subscribeButton/view.jsx
+++ b/src/ui/component/subscribeButton/view.jsx
@@ -6,7 +6,7 @@ import { parseURI } from 'lbry-redux';
 import Button from 'component/button';
 import useHover from 'util/use-hover';
 
-type SubscribtionArgs = {
+type SubscriptionArgs = {
   channelName: string,
   uri: string,
 };
@@ -16,7 +16,7 @@ type Props = {
   isSubscribed: boolean,
   subscriptions: Array<string>,
   doChannelSubscribe: ({ channelName: string, uri: string }) => void,
-  doChannelUnsubscribe: SubscribtionArgs => void,
+  doChannelUnsubscribe: SubscriptionArgs => void,
   doOpenModal: (id: string) => void,
   showSnackBarOnSubscribe: boolean,
   doToast: ({ message: string }) => void,
diff --git a/src/ui/constants/icons.js b/src/ui/constants/icons.js
index 502d19de9..68163f222 100644
--- a/src/ui/constants/icons.js
+++ b/src/ui/constants/icons.js
@@ -71,3 +71,5 @@ export const DARK = 'Moon';
 export const LIBRARY = 'Folder';
 export const TAG = 'Tag';
 export const SUPPORT = 'TrendingUp';
+export const BLOCK = 'Slash';
+export const UNBLOCK = 'Circle';
diff --git a/src/ui/constants/pages.js b/src/ui/constants/pages.js
index 491b9707c..9dd524e2a 100644
--- a/src/ui/constants/pages.js
+++ b/src/ui/constants/pages.js
@@ -20,3 +20,4 @@ export const SEARCH = 'search';
 export const TRANSACTIONS = 'transactions';
 export const TAGS = 'tags';
 export const WALLET = 'wallet';
+export const BLOCKED = 'blocked';
diff --git a/src/ui/page/channel/index.js b/src/ui/page/channel/index.js
index 667546b11..1fef9d592 100644
--- a/src/ui/page/channel/index.js
+++ b/src/ui/page/channel/index.js
@@ -6,7 +6,9 @@ import {
   makeSelectCoverForUri,
   selectCurrentChannelPage,
   makeSelectClaimForUri,
+  selectChannelIsBlocked,
 } from 'lbry-redux';
+import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import ChannelPage from './view';
 
 const select = (state, props) => ({
@@ -16,6 +18,8 @@ const select = (state, props) => ({
   channelIsMine: makeSelectClaimIsMine(props.uri)(state),
   page: selectCurrentChannelPage(state),
   claim: makeSelectClaimForUri(props.uri)(state),
+  isSubscribed: makeSelectIsSubscribed(props.uri, true)(state),
+  channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
 });
 
 export default connect(
diff --git a/src/ui/page/channel/view.jsx b/src/ui/page/channel/view.jsx
index 91e52a0f7..b0a9609da 100644
--- a/src/ui/page/channel/view.jsx
+++ b/src/ui/page/channel/view.jsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { parseURI } from 'lbry-redux';
 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 { withRouter } from 'react-router';
@@ -29,10 +30,24 @@ type Props = {
   history: { push: string => void },
   match: { params: { attribute: ?string } },
   channelIsMine: boolean,
+  isSubscribed: boolean,
+  channelIsBlocked: boolean,
 };
 
 function ChannelPage(props: Props) {
-  const { uri, title, cover, history, location, page, channelIsMine, thumbnail, claim } = props;
+  const {
+    uri,
+    title,
+    cover,
+    history,
+    location,
+    page,
+    channelIsMine,
+    thumbnail,
+    claim,
+    isSubscribed,
+    channelIsBlocked,
+  } = props;
   const { channelName } = parseURI(uri);
   const { search } = location;
   const urlParams = new URLSearchParams(search);
@@ -91,7 +106,8 @@ function ChannelPage(props: Props) {
             <Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
             <div className="card__actions--inline">
               <ShareButton uri={uri} />
-              <SubscribeButton uri={permanentUrl} />
+              {!channelIsBlocked && <SubscribeButton uri={permanentUrl} />}
+              {!isSubscribed && <BlockButton uri={permanentUrl} />}
             </div>
           </TabList>
 
diff --git a/src/ui/page/file/view.jsx b/src/ui/page/file/view.jsx
index 7b493a916..baa32679e 100644
--- a/src/ui/page/file/view.jsx
+++ b/src/ui/page/file/view.jsx
@@ -39,7 +39,7 @@ type Props = {
   channelUri: string,
   viewCount: number,
   prepareEdit: ({}, string, {}) => void,
-  openModal: (id: string, { uri: string, claimIsMine: boolean, isSupport: boolean }) => void,
+  openModal: (id: string, { [key: string]: any }) => void,
   markSubscriptionRead: (string, string) => void,
   fetchViewCount: string => void,
   balance: number,
diff --git a/src/ui/page/listBlocked/index.js b/src/ui/page/listBlocked/index.js
new file mode 100644
index 000000000..c8088e9a5
--- /dev/null
+++ b/src/ui/page/listBlocked/index.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { selectBlockedChannels } from 'lbry-redux';
+import ListBlocked from './view';
+
+const select = state => ({
+  uris: selectBlockedChannels(state),
+});
+
+export default connect(
+  select,
+  null
+)(ListBlocked);
diff --git a/src/ui/page/listBlocked/view.jsx b/src/ui/page/listBlocked/view.jsx
new file mode 100644
index 000000000..e691a8458
--- /dev/null
+++ b/src/ui/page/listBlocked/view.jsx
@@ -0,0 +1,37 @@
+// @flow
+import React from 'react';
+import ClaimList from 'component/claimList';
+import Page from 'component/page';
+
+type Props = {
+  uris: Array<string>,
+};
+
+function ListBlocked(props: Props) {
+  const { uris } = props;
+
+  return (
+    <Page notContained>
+      {uris && uris.length ? (
+        <div className="card">
+          <ClaimList
+            header={<h1>{__('Your Blocked Channels')}</h1>}
+            persistedStorageKey="block-list-published"
+            uris={uris}
+            defaultSort
+          />
+        </div>
+      ) : (
+        <div className="main--empty">
+          <section className="card card--section">
+            <header className="card__header">
+              <h2 className="card__title">{__('It looks like you have no blocked channels.')}</h2>
+            </header>
+          </section>
+        </div>
+      )}
+    </Page>
+  );
+}
+
+export default ListBlocked;
diff --git a/src/ui/page/settings/index.js b/src/ui/page/settings/index.js
index c30f89506..029af2073 100644
--- a/src/ui/page/settings/index.js
+++ b/src/ui/page/settings/index.js
@@ -8,7 +8,7 @@ import {
   selectLanguages,
   selectosNotificationsEnabled,
 } from 'redux/selectors/settings';
-import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
+import { doWalletStatus, selectWalletIsEncrypted, selectBlockedChannelsCount } from 'lbry-redux';
 import SettingsPage from './view';
 
 const select = state => ({
@@ -26,6 +26,7 @@ const select = state => ({
   osNotificationsEnabled: selectosNotificationsEnabled(state),
   autoDownload: makeSelectClientSetting(settings.AUTO_DOWNLOAD)(state),
   supportOption: makeSelectClientSetting(settings.SUPPORT_OPTION)(state),
+  userBlockedChannelsCount: selectBlockedChannelsCount(state),
   hideBalance: makeSelectClientSetting(settings.HIDE_BALANCE)(state),
 });
 
diff --git a/src/ui/page/settings/view.jsx b/src/ui/page/settings/view.jsx
index 10afc9654..74107f032 100644
--- a/src/ui/page/settings/view.jsx
+++ b/src/ui/page/settings/view.jsx
@@ -1,5 +1,6 @@
 // @flow
 import * as SETTINGS from 'constants/settings';
+import * as PAGES from 'constants/pages';
 import * as React from 'react';
 import classnames from 'classnames';
 import { FormField, FormFieldPrice, Form } from 'component/common/form';
@@ -44,6 +45,7 @@ type Props = {
   walletEncrypted: boolean,
   osNotificationsEnabled: boolean,
   supportOption: boolean,
+  userBlockedChannelsCount?: number,
   hideBalance: boolean,
 };
 
@@ -153,6 +155,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
       setClientSetting,
       supportOption,
       hideBalance,
+      userBlockedChannelsCount,
     } = this.props;
 
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
@@ -278,6 +281,16 @@ class SettingsPage extends React.PureComponent<Props, State> {
               </Form>
             </section>
 
+            <section className="card card--section">
+              <h2 className="card__title">{__('Blocked Channels')}</h2>
+              <p className="card__subtitle card__help ">
+                {__('You have')} {userBlockedChannelsCount} {__('blocked')}{' '}
+                {userBlockedChannelsCount === 1 && __('channel')}
+                {userBlockedChannelsCount !== 1 && __('channels')}.{' '}
+                <Button button="link" label={__('Manage')} navigate={`/$/${PAGES.BLOCKED}`} />
+              </p>
+            </section>
+
             <section className="card card--section">
               <h2 className="card__title">{__('Notifications')}</h2>
               <Form>
diff --git a/src/ui/reducers.js b/src/ui/reducers.js
index e3d7d04ed..a4be57f6d 100644
--- a/src/ui/reducers.js
+++ b/src/ui/reducers.js
@@ -8,6 +8,7 @@ import {
   notificationsReducer,
   tagsReducer,
   commentReducer,
+  blockChannelReducer,
   publishReducer,
 } from 'lbry-redux';
 import {
@@ -47,6 +48,7 @@ export default history =>
     stats: statsReducer,
     subscriptions: subscriptionsReducer,
     tags: tagsReducer,
+    blockedChannels: blockChannelReducer,
     user: userReducer,
     wallet: walletReducer,
   });
diff --git a/src/ui/store.js b/src/ui/store.js
index 462149eba..952839edd 100644
--- a/src/ui/store.js
+++ b/src/ui/store.js
@@ -48,6 +48,7 @@ const appFilter = createFilter('app', ['hasClickedComment', 'searchOptionsExpand
 const walletFilter = createFilter('wallet', ['receiveAddress']);
 const searchFilter = createFilter('search', ['options']);
 const tagsFilter = createFilter('tags', ['followedTags']);
+const blockedFilter = createFilter('blockedChannels', ['blockedChannels']);
 const whiteListedReducers = [
   // @if TARGET='app'
   'publish',
@@ -59,6 +60,7 @@ const whiteListedReducers = [
   'app',
   'search',
   'tags',
+  'blockedChannels',
 ];
 
 const transforms = [
@@ -66,6 +68,7 @@ const transforms = [
   walletFilter,
   contentFilter,
   fileInfoFilter,
+  blockedFilter,
   // @endif
   appFilter,
   searchFilter,

From 5c61a1de0e192935a01a3611cb0d1dec6826d5e9 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Thu, 1 Aug 2019 20:56:25 -0400
Subject: [PATCH 2/5] blocked channels are filtered from claim search and
 images are obscured

---
 src/ui/component/channelThumbnail/view.jsx  |  7 ++++---
 src/ui/component/claimList/view.jsx         |  4 +++-
 src/ui/component/claimListDiscover/index.js |  9 ++++++++-
 src/ui/component/claimListDiscover/view.jsx |  4 ++++
 src/ui/component/claimPreview/view.jsx      |  8 ++++++--
 src/ui/page/channel/view.jsx                | 12 ++++++++++--
 src/ui/page/listBlocked/view.jsx            |  1 +
 src/ui/scss/component/_channel.scss         |  4 ++++
 8 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/ui/component/channelThumbnail/view.jsx b/src/ui/component/channelThumbnail/view.jsx
index 383be9ec1..9d73f4c25 100644
--- a/src/ui/component/channelThumbnail/view.jsx
+++ b/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>
   );
 }
diff --git a/src/ui/component/claimList/view.jsx b/src/ui/component/claimList/view.jsx
index 8959ecb17..cce1efae6 100644
--- a/src/ui/component/claimList/view.jsx
+++ b/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>
           ))}
diff --git a/src/ui/component/claimListDiscover/index.js b/src/ui/component/claimListDiscover/index.js
index 1007c230b..7e4f7e5b1 100644
--- a/src/ui/component/claimListDiscover/index.js
+++ b/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 = {
diff --git a/src/ui/component/claimListDiscover/view.jsx b/src/ui/component/claimListDiscover/view.jsx
index de2a606a6..e4d13128a 100644
--- a/src/ui/component/claimListDiscover/view.jsx
+++ b/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
diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx
index 5b4b7fa90..9b6246238 100644
--- a/src/ui/component/claimPreview/view.jsx
+++ b/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">
diff --git a/src/ui/page/channel/view.jsx b/src/ui/page/channel/view.jsx
index b0a9609da..331fda1ff 100644
--- a/src/ui/page/channel/view.jsx
+++ b/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"
diff --git a/src/ui/page/listBlocked/view.jsx b/src/ui/page/listBlocked/view.jsx
index e691a8458..b528993ff 100644
--- a/src/ui/page/listBlocked/view.jsx
+++ b/src/ui/page/listBlocked/view.jsx
@@ -19,6 +19,7 @@ function ListBlocked(props: Props) {
             persistedStorageKey="block-list-published"
             uris={uris}
             defaultSort
+            showHiddenByUser
           />
         </div>
       ) : (
diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss
index 903896165..3d68ee9cd 100644
--- a/src/ui/scss/component/_channel.scss
+++ b/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);
+}

From ffbe3dcf8a7e9f702a3e7b8370ecb3aa507636e4 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Thu, 1 Aug 2019 21:34:48 -0400
Subject: [PATCH 3/5] tweaks

---
 src/ui/component/claimPreview/view.jsx | 18 ++++++++++++++----
 src/ui/scss/component/_claim-list.scss |  8 ++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx
index 9b6246238..9b2b5a38d 100644
--- a/src/ui/component/claimPreview/view.jsx
+++ b/src/ui/component/claimPreview/view.jsx
@@ -168,12 +168,22 @@ function ClaimPreview(props: Props) {
             {claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
           </div>
           {!hideActions && (
-            <div>
+            <div className={'claim-preview-actions'}>
               {isChannel && !channelIsBlocked && (
-                <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
+                <div className={'claim-preview__button'}>
+                  <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
+                </div>
+              )}
+              {isChannel && !isSubscribed && (
+                <div className={'claim-preview__button'}>
+                  <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
+                </div>
+              )}
+              {!isChannel && (
+                <div className={'claim-preview__button'}>
+                  <FileProperties uri={uri} />
+                </div>
               )}
-              {isChannel && !isSubscribed && <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />}
-              {!isChannel && <FileProperties uri={uri} />}
             </div>
           )}
         </div>
diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss
index 104c1e33e..e51cff635 100644
--- a/src/ui/scss/component/_claim-list.scss
+++ b/src/ui/scss/component/_claim-list.scss
@@ -231,6 +231,14 @@ $border-color--dark: var(--dm-color-04);
   justify-content: space-between;
 }
 
+.claim-preview-actions {
+  display: flex;
+  justify-content: space-evenly;
+}
+.claim-preview__button {
+  margin-left: 2rem;
+}
+
 .claim-preview-properties {
   align-items: flex-end;
   flex: 1;

From e1f2d8938b344607d8c5dc7c3066f652695386b0 Mon Sep 17 00:00:00 2001
From: jessop <jessop@lbry.com>
Date: Fri, 2 Aug 2019 11:11:31 -0400
Subject: [PATCH 4/5] changes after review

---
 src/ui/component/blockButton/index.js      |  3 ++-
 src/ui/component/blockButton/view.jsx      |  7 ++++---
 src/ui/component/channelContent/view.jsx   |  2 +-
 src/ui/component/channelThumbnail/view.jsx |  8 ++++----
 src/ui/component/claimPreview/view.jsx     | 19 +++++--------------
 src/ui/page/listBlocked/view.jsx           |  7 +++----
 src/ui/reducers.js                         |  5 ++---
 src/ui/store.js                            |  4 ++--
 8 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/src/ui/component/blockButton/index.js b/src/ui/component/blockButton/index.js
index f641ef9f1..430531c48 100644
--- a/src/ui/component/blockButton/index.js
+++ b/src/ui/component/blockButton/index.js
@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
-import { selectChannelIsBlocked, doToggleBlockChannel, doToast } from 'lbry-redux';
+import { selectChannelIsBlocked, doToggleBlockChannel, doToast, makeSelectShortUrlForUri } from 'lbry-redux';
 import BlockButton from './view';
 
 const select = (state, props) => ({
   channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
+  shortUrl: makeSelectShortUrlForUri(props.uri)(state),
 });
 
 export default connect(
diff --git a/src/ui/component/blockButton/view.jsx b/src/ui/component/blockButton/view.jsx
index 912742b59..210a5001c 100644
--- a/src/ui/component/blockButton/view.jsx
+++ b/src/ui/component/blockButton/view.jsx
@@ -7,6 +7,7 @@ import useHover from 'util/use-hover';
 
 type Props = {
   uri: string,
+  shortUrl: string,
   isSubscribed: boolean,
   toggleBlockChannel: (uri: string) => void,
   channelIsBlocked: boolean,
@@ -14,7 +15,7 @@ type Props = {
 };
 
 export default function BlockButton(props: Props) {
-  const { uri, toggleBlockChannel, channelIsBlocked, doToast } = props;
+  const { uri, shortUrl, toggleBlockChannel, channelIsBlocked, doToast } = props;
 
   const blockRef = useRef();
   const isHovering = useHover(blockRef);
@@ -25,13 +26,13 @@ export default function BlockButton(props: Props) {
     <Button
       ref={blockRef}
       iconColor="red"
-      icon={blockedOverride ? ICONS.UNBLOCK : ICONS.BLOCK}
+      icon={ICONS.BLOCK}
       button={'alt'}
       label={blockedOverride || blockLabel}
       onClick={e => {
         e.stopPropagation();
         if (!channelIsBlocked) {
-          doToast({ message: `Blocked ${uri}`, linkText: 'Manage', linkTarget: `/${PAGES.BLOCKED}` });
+          doToast({ message: `Blocked ${shortUrl}`, linkText: 'Manage', linkTarget: `/${PAGES.BLOCKED}` });
         }
         toggleBlockChannel(uri);
       }}
diff --git a/src/ui/component/channelContent/view.jsx b/src/ui/component/channelContent/view.jsx
index 40e1c98ab..2d04fab7d 100644
--- a/src/ui/component/channelContent/view.jsx
+++ b/src/ui/component/channelContent/view.jsx
@@ -36,7 +36,7 @@ function ChannelContent(props: Props) {
 
       {!fetching && channelIsBlocked && (
         <div className="card--section">
-          <h2 className="card__content help">{__('You have blocked this channel content.')}</h2>
+          <h2 className="help">{__('You have blocked this channel content.')}</h2>
         </div>
       )}
 
diff --git a/src/ui/component/channelThumbnail/view.jsx b/src/ui/component/channelThumbnail/view.jsx
index 9d73f4c25..75dc316b4 100644
--- a/src/ui/component/channelThumbnail/view.jsx
+++ b/src/ui/component/channelThumbnail/view.jsx
@@ -19,15 +19,15 @@ function ChannelThumbnail(props: Props) {
   const { channelName } = parseURI(uri);
   const initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
   const colorClassName = `channel-thumbnail__default--${initializer % 4}`;
-
+  const showThumb = !obscure && !!thumbnail;
   return (
     <div
       className={classnames('channel-thumbnail', className, {
-        [colorClassName]: !thumbnail,
+        [colorClassName]: !showThumb,
       })}
     >
-      {(!thumbnail || obscure) && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />}
-      {!obscure && thumbnail && <img className="channel-thumbnail__custom" src={thumbnailPreview || thumbnail} />}
+      {!showThumb && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />}
+      {showThumb && <img className="channel-thumbnail__custom" src={thumbnailPreview || thumbnail} />}
     </div>
   );
 }
diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx
index 9b2b5a38d..68a5b58ef 100644
--- a/src/ui/component/claimPreview/view.jsx
+++ b/src/ui/component/claimPreview/view.jsx
@@ -107,6 +107,7 @@ function ClaimPreview(props: Props) {
     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 && !showUserBlocked && blockedChannelUris.length && isChannel) {
     shouldHide = blockedChannelUris.some(blockedUri => blockedUri === claim.permanent_url);
   }
@@ -168,22 +169,12 @@ function ClaimPreview(props: Props) {
             {claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
           </div>
           {!hideActions && (
-            <div className={'claim-preview-actions'}>
+            <div className={'card__actions'}>
               {isChannel && !channelIsBlocked && (
-                <div className={'claim-preview__button'}>
-                  <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
-                </div>
-              )}
-              {isChannel && !isSubscribed && (
-                <div className={'claim-preview__button'}>
-                  <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
-                </div>
-              )}
-              {!isChannel && (
-                <div className={'claim-preview__button'}>
-                  <FileProperties uri={uri} />
-                </div>
+                <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
               )}
+              {isChannel && !isSubscribed && <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />}
+              {!isChannel && <FileProperties uri={uri} />}
             </div>
           )}
         </div>
diff --git a/src/ui/page/listBlocked/view.jsx b/src/ui/page/listBlocked/view.jsx
index b528993ff..f3b4a4c76 100644
--- a/src/ui/page/listBlocked/view.jsx
+++ b/src/ui/page/listBlocked/view.jsx
@@ -11,7 +11,7 @@ function ListBlocked(props: Props) {
   const { uris } = props;
 
   return (
-    <Page notContained>
+    <Page>
       {uris && uris.length ? (
         <div className="card">
           <ClaimList
@@ -25,9 +25,8 @@ function ListBlocked(props: Props) {
       ) : (
         <div className="main--empty">
           <section className="card card--section">
-            <header className="card__header">
-              <h2 className="card__title">{__('It looks like you have no blocked channels.')}</h2>
-            </header>
+            <h2 className="card__title">{__('You aren’t blocking any channels')}</h2>
+            <p className="card__subtitle">When you block a channel, all content from that channel will be hidden.</p>
           </section>
         </div>
       )}
diff --git a/src/ui/reducers.js b/src/ui/reducers.js
index a4be57f6d..8e53d02cf 100644
--- a/src/ui/reducers.js
+++ b/src/ui/reducers.js
@@ -8,7 +8,7 @@ import {
   notificationsReducer,
   tagsReducer,
   commentReducer,
-  blockChannelReducer,
+  blockedReducer,
   publishReducer,
 } from 'lbry-redux';
 import {
@@ -26,7 +26,6 @@ import contentReducer from 'redux/reducers/content';
 import settingsReducer from 'redux/reducers/settings';
 import subscriptionsReducer from 'redux/reducers/subscriptions';
 
-
 export default history =>
   combineReducers({
     router: connectRouter(history),
@@ -48,7 +47,7 @@ export default history =>
     stats: statsReducer,
     subscriptions: subscriptionsReducer,
     tags: tagsReducer,
-    blockedChannels: blockChannelReducer,
+    blocked: blockedReducer,
     user: userReducer,
     wallet: walletReducer,
   });
diff --git a/src/ui/store.js b/src/ui/store.js
index 952839edd..ba423ab7b 100644
--- a/src/ui/store.js
+++ b/src/ui/store.js
@@ -48,7 +48,7 @@ const appFilter = createFilter('app', ['hasClickedComment', 'searchOptionsExpand
 const walletFilter = createFilter('wallet', ['receiveAddress']);
 const searchFilter = createFilter('search', ['options']);
 const tagsFilter = createFilter('tags', ['followedTags']);
-const blockedFilter = createFilter('blockedChannels', ['blockedChannels']);
+const blockedFilter = createFilter('blocked', ['blockedChannels']);
 const whiteListedReducers = [
   // @if TARGET='app'
   'publish',
@@ -60,7 +60,7 @@ const whiteListedReducers = [
   'app',
   'search',
   'tags',
-  'blockedChannels',
+  'blocked',
 ];
 
 const transforms = [

From 9ed8d46926fdeaf79ae9000cd75dbbb840f436eb Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 2 Aug 2019 14:01:40 -0400
Subject: [PATCH 5/5] update lbry-redux and fix className

---
 package.json                           | 2 +-
 src/ui/component/claimPreview/view.jsx | 2 +-
 yarn.lock                              | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index da0497824..273b98b7b 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "jsmediatags": "^3.8.1",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#469d3b70cbe39f28aafee4e072fdfc5bac604c4b",
+    "lbry-redux": "lbryio/lbry-redux#8f12baa88f6f057eb3b7d0cf04d6e4bb0eb11763",
     "lbryinc": "lbryio/lbryinc#a93596c51c8fb0a226cb84df04c26a6bb60a45fb",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
diff --git a/src/ui/component/claimPreview/view.jsx b/src/ui/component/claimPreview/view.jsx
index 68a5b58ef..bb673fe37 100644
--- a/src/ui/component/claimPreview/view.jsx
+++ b/src/ui/component/claimPreview/view.jsx
@@ -169,7 +169,7 @@ function ClaimPreview(props: Props) {
             {claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
           </div>
           {!hideActions && (
-            <div className={'card__actions'}>
+            <div className="card__actions--inline">
               {isChannel && !channelIsBlocked && (
                 <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
               )}
diff --git a/yarn.lock b/yarn.lock
index 528038283..99afc4fbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6653,9 +6653,9 @@ lazy-val@^1.0.3, lazy-val@^1.0.4:
     yargs "^13.2.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#469d3b70cbe39f28aafee4e072fdfc5bac604c4b:
+lbry-redux@lbryio/lbry-redux#8f12baa88f6f057eb3b7d0cf04d6e4bb0eb11763:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/469d3b70cbe39f28aafee4e072fdfc5bac604c4b"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/8f12baa88f6f057eb3b7d0cf04d6e4bb0eb11763"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"