diff --git a/ui/component/embedPlayButton/index.js b/ui/component/embedPlayButton/index.js index 1a350a971..e910e7915 100644 --- a/ui/component/embedPlayButton/index.js +++ b/ui/component/embedPlayButton/index.js @@ -1,7 +1,7 @@ import * as SETTINGS from 'constants/settings'; import { connect } from 'react-redux'; import { makeSelectThumbnailForUri, doResolveUri, makeSelectClaimForUri } from 'lbry-redux'; -import { doFetchCostInfoForUri } from 'lbryinc'; +import { doFetchCostInfoForUri, makeSelectCostInfoForUri } from 'lbryinc'; import { doSetFloatingUri, doPlayUri } from 'redux/actions/content'; import { doAnaltyicsPurchaseEvent } from 'redux/actions/app'; import { makeSelectClientSetting } from 'redux/selectors/settings'; @@ -11,6 +11,7 @@ const select = (state, props) => ({ thumbnail: makeSelectThumbnailForUri(props.uri)(state), claim: makeSelectClaimForUri(props.uri)(state), floatingPlayerEnabled: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state), + costInfo: makeSelectCostInfoForUri(props.uri)(state), }); export default connect(select, { diff --git a/ui/component/embedPlayButton/view.jsx b/ui/component/embedPlayButton/view.jsx index 1fcbef1d9..5c35bfa64 100644 --- a/ui/component/embedPlayButton/view.jsx +++ b/ui/component/embedPlayButton/view.jsx @@ -13,12 +13,13 @@ type Props = { doResolveUri: string => void, doFetchCostInfoForUri: string => void, doSetFloatingUri: string => void, + costInfo: ?{ cost: number }, floatingPlayerEnabled: boolean, doPlayUri: (string, ?boolean, ?boolean, (GetResponse) => void) => void, doAnaltyicsPurchaseEvent: GetResponse => void, }; -export default function FileRenderFloating(props: Props) { +export default function EmbedPlayButton(props: Props) { const { uri, thumbnail = '', @@ -29,10 +30,12 @@ export default function FileRenderFloating(props: Props) { floatingPlayerEnabled, doPlayUri, doAnaltyicsPurchaseEvent, + costInfo, } = props; const { push } = useHistory(); const isMobile = useIsMobile(); const hasResolvedUri = claim !== undefined; + const disabled = !hasResolvedUri || !costInfo; useEffect(() => { doResolveUri(uri); @@ -40,7 +43,7 @@ export default function FileRenderFloating(props: Props) { }, [uri, doResolveUri, doFetchCostInfoForUri]); function handleClick() { - if (!hasResolvedUri) { + if (disabled) { return; } @@ -57,7 +60,7 @@ export default function FileRenderFloating(props: Props) { return (