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/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..430531c48 --- /dev/null +++ b/src/ui/component/blockButton/index.js @@ -0,0 +1,16 @@ +import { connect } from 'react-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( + 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..210a5001c --- /dev/null +++ b/src/ui/component/blockButton/view.jsx @@ -0,0 +1,41 @@ +// @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, + shortUrl: 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, shortUrl, toggleBlockChannel, channelIsBlocked, doToast } = props; + + const blockRef = useRef(); + const isHovering = useHover(blockRef); + const blockLabel = channelIsBlocked ? __('Blocked') : __('Block'); + const blockedOverride = channelIsBlocked && isHovering && __('Unblock'); + + return ( +