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 (
({ const perform = dispatch => ({ analyticsPurchaseEvent: fileInfo => dispatch(doAnaltyicsPurchaseEvent(fileInfo)), setPlayingUri: uri => dispatch(doSetPlayingUri(uri)), + setFloatingUri: uri => dispatch(doSetFloatingUri(uri)), closeModal: () => dispatch(doHideModal()), loadVideo: (uri, onSuccess) => dispatch(doPlayUri(uri, true, undefined, onSuccess)), }); diff --git a/ui/modal/modalAffirmPurchase/view.jsx b/ui/modal/modalAffirmPurchase/view.jsx index 000feb621..53bee522d 100644 --- a/ui/modal/modalAffirmPurchase/view.jsx +++ b/ui/modal/modalAffirmPurchase/view.jsx @@ -19,6 +19,7 @@ type Props = { analyticsPurchaseEvent: GetResponse => void, playingUri: ?string, setPlayingUri: (?string) => void, + setFloatingUri: (?string) => void, }; function ModalAffirmPurchase(props: Props) { @@ -30,6 +31,7 @@ function ModalAffirmPurchase(props: Props) { analyticsPurchaseEvent, playingUri, setPlayingUri, + setFloatingUri, } = props; const [success, setSuccess] = React.useState(false); const [purchasing, setPurchasing] = React.useState(false); @@ -42,6 +44,10 @@ function ModalAffirmPurchase(props: Props) { setPurchasing(false); setSuccess(true); analyticsPurchaseEvent(fileInfo); + + if (playingUri !== uri) { + setFloatingUri(uri); + } }); }