improve first time play experience for paid content in blog posts

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, {

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 (
     <div
-      disabled={!hasResolvedUri}
+      disabled={disabled}
       role="button"
       className="embed__inline-button"
       onClick={handleClick}

ui/modal/modalAffirmPurchase/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doPlayUri, doSetPlayingUri } from 'redux/actions/content';
+import { doPlayUri, doSetPlayingUri, doSetFloatingUri } from 'redux/actions/content';
 import { selectPlayingUri } from 'redux/selectors/content';
 import { doHideModal, doAnaltyicsPurchaseEvent } from 'redux/actions/app';
 import { makeSelectMetadataForUri } from 'lbry-redux';
@@ -13,6 +13,7 @@ const select = (state, props) => ({
 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)),
 });

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);
+      }
     });
   }