Fix 5932 "no way to buy Paid Images or Posts"

- FileRenderInitiator: we don't display if it's not Audio or Video ("playables"). But only do that if it's free or was purchased, otherwise there's no button to buy it.

- FileRenderInline: if the user have not purchased it, don't show anything (not even the spinner).

ui/component/fileRenderInitiator/view.jsx

@@ -120,8 +120,10 @@ export default function FileRenderInitiator(props: Props) {
   but for playables, always render so area can be used to fill with floating player
    */
   if (isPlaying && !isPlayable) {
+    if (isFree || claimWasPurchased) {
       return null;
     }
+  }
 
   const showAppNag = IS_WEB && RENDER_MODES.UNSUPPORTED_IN_THIS_APP.includes(renderMode);
   const disabled = showAppNag || (!fileInfo && insufficientCredits && !claimWasPurchased);

ui/component/fileRenderInline/index.js

@@ -1,16 +1,19 @@
 import { connect } from 'react-redux';
-import { makeSelectFileInfoForUri, makeSelectStreamingUrlForUri } from 'lbry-redux';
+import { makeSelectFileInfoForUri, makeSelectStreamingUrlForUri, makeSelectClaimWasPurchased } from 'lbry-redux';
 import { doClaimEligiblePurchaseRewards } from 'redux/actions/rewards';
 import { makeSelectFileRenderModeForUri, selectPrimaryUri } from 'redux/selectors/content';
 import { withRouter } from 'react-router';
 import { doAnalyticsView } from 'redux/actions/app';
 import FileRenderInline from './view';
+import { makeSelectCostInfoForUri } from 'lbryinc';
 
 const select = (state, props) => ({
   fileInfo: makeSelectFileInfoForUri(props.uri)(state),
   isPlaying: selectPrimaryUri(state) === props.uri,
   streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
   renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
+  costInfo: makeSelectCostInfoForUri(props.uri)(state),
+  claimWasPurchased: makeSelectClaimWasPurchased(props.uri)(state),
 });
 
 const perform = (dispatch) => ({

ui/component/fileRenderInline/view.jsx

@@ -12,11 +12,24 @@ type Props = {
   streamingUrl?: string,
   triggerAnalyticsView: (string, number) => Promise<any>,
   claimRewards: () => void,
+  costInfo: any,
+  claimWasPurchased: boolean,
 };
 
 export default function FileRenderInline(props: Props) {
-  const { isPlaying, fileInfo, uri, streamingUrl, triggerAnalyticsView, claimRewards, renderMode } = props;
+  const {
+    isPlaying,
+    fileInfo,
+    uri,
+    streamingUrl,
+    triggerAnalyticsView,
+    claimRewards,
+    renderMode,
+    costInfo,
+    claimWasPurchased,
+  } = props;
   const [playTime, setPlayTime] = useState();
+  const isFree = !costInfo || (costInfo.cost !== undefined && costInfo.cost === 0);
   const isReadyToView = fileInfo && fileInfo.completed;
   const isReadyToPlay = streamingUrl || isReadyToView;
 
@@ -52,5 +65,9 @@ export default function FileRenderInline(props: Props) {
     return null;
   }
 
+  if (!isFree && !claimWasPurchased) {
+    return null;
+  }
+
   return renderContent ? <FileRender uri={uri} /> : <LoadingScreen isDocument />;
 }