checks for downloaded paid content before disabling

src/ui/component/fileViewer/view.jsx

@@ -154,7 +154,7 @@ class FileViewer extends React.PureComponent<Props> {
   playContent() {
     const { play, uri, fileInfo, isDownloading, isLoading, insufficientCredits } = this.props;
 
-    if (insufficientCredits) {
+    if (!fileInfo && insufficientCredits) {
       return;
     }
 
@@ -255,7 +255,7 @@ class FileViewer extends React.PureComponent<Props> {
 
     const layoverClass = classnames('content__cover', {
       'card__media--nsfw': shouldObscureNsfw,
-      'card__media--disabled': insufficientCredits,
+      'card__media--disabled': !fileInfo && insufficientCredits,
     });
 
     const layoverStyle =

src/ui/page/file/view.jsx

@@ -2,7 +2,7 @@
 import * as MODALS from 'constants/modal_types';
 import * as icons from 'constants/icons';
 import * as React from 'react';
-import {buildURI, normalizeURI} from 'lbry-redux';
+import { buildURI, normalizeURI } from 'lbry-redux';
 import FileViewer from 'component/fileViewer';
 import Thumbnail from 'component/common/thumbnail';
 import FilePrice from 'component/filePrice';
@@ -28,7 +28,7 @@ type Props = {
   rewardedContentClaimIds: Array<string>,
   obscureNsfw: boolean,
   claimIsMine: boolean,
-  costInfo: ?{cost: number},
+  costInfo: ?{ cost: number },
   fetchFileInfo: string => void,
   fetchCostInfo: string => void,
   setViewed: string => void,
@@ -37,7 +37,7 @@ type Props = {
   channelUri: string,
   viewCount: number,
   prepareEdit: ({}, string) => void,
-  openModal: (id: string, {uri: string}) => void,
+  openModal: (id: string, { uri: string }) => void,
   markSubscriptionRead: (string, string) => void,
   fetchViewCount: string => void,
   balance: number,
@@ -72,11 +72,11 @@ class FilePage extends React.Component<Props> {
       claim,
     } = this.props;
 
-    if(isSubscribed) {
+    if (isSubscribed) {
       this.removeFromSubscriptionNotifications();
     }
 
-    if(claimIsMine) {
+    if (claimIsMine) {
       fetchViewCount(claim.claim_id);
     }
 
@@ -91,26 +91,26 @@ class FilePage extends React.Component<Props> {
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    const {fetchFileInfo, uri, setViewed} = this.props;
+    const { fetchFileInfo, uri, setViewed } = this.props;
     // @if TARGET='app'
-    if(nextProps.fileInfo === undefined) {
+    if (nextProps.fileInfo === undefined) {
       fetchFileInfo(uri);
     }
     // @endif
 
-    if(uri !== nextProps.uri) {
+    if (uri !== nextProps.uri) {
       setViewed(nextProps.uri);
     }
   }
 
   componentDidUpdate(prevProps: Props) {
-    const {isSubscribed, claim, uri, fetchViewCount, claimIsMine} = this.props;
+    const { isSubscribed, claim, uri, fetchViewCount, claimIsMine } = this.props;
 
-    if(!prevProps.isSubscribed && isSubscribed) {
+    if (!prevProps.isSubscribed && isSubscribed) {
       this.removeFromSubscriptionNotifications();
     }
 
-    if(prevProps.uri !== uri && claimIsMine) {
+    if (prevProps.uri !== uri && claimIsMine) {
       fetchViewCount(claim.claim_id);
     }
   }
@@ -118,7 +118,7 @@ class FilePage extends React.Component<Props> {
   removeFromSubscriptionNotifications() {
     // Always try to remove
     // If it doesn't exist, nothing will happen
-    const {markSubscriptionRead, uri, channelUri} = this.props;
+    const { markSubscriptionRead, uri, channelUri } = this.props;
     markSubscriptionRead(channelUri, uri);
   }
 
@@ -144,8 +144,8 @@ class FilePage extends React.Component<Props> {
     } = this.props;
 
     // File info
-    const {height, channel_name: channelName} = claim;
+    const { height, channel_name: channelName } = claim;
-    const {PLAYABLE_MEDIA_TYPES, PREVIEW_MEDIA_TYPES} = FilePage;
+    const { PLAYABLE_MEDIA_TYPES, PREVIEW_MEDIA_TYPES } = FilePage;
     const isRewardContent = (rewardedContentClaimIds || []).includes(claim.claim_id);
     const shouldObscureThumbnail = obscureNsfw && nsfw;
     const fileName = fileInfo ? fileInfo.file_name : null;
@@ -162,12 +162,12 @@ class FilePage extends React.Component<Props> {
     // This is what the user is used to seeing, they don't care about the claim id
     // We will select the claim id before they publish
     let editUri;
-    if(claimIsMine) {
+    if (claimIsMine) {
-      const uriObject: {contentName: string, claimId: string, channelName?: string} = {
+      const uriObject: { contentName: string, claimId: string, channelName?: string } = {
         contentName: claim.name,
         claimId: claim.claim_id,
       };
-      if(channelName) {
+      if (channelName) {
         uriObject.channelName = channelName;
       }
 
@@ -180,7 +180,7 @@ class FilePage extends React.Component<Props> {
       <Page notContained className="main--file-page">
         <div className="grid-area--content">
           <h1 className="media__uri">{uri}</h1>
-          {insufficientCredits && (
+          {!fileInfo && insufficientCredits && (
             <div className="media__insufficient-credits help--warning">
               {__(
                 'The publisher has chosen to charge LBC to view this content. Your balance is currently to low to view it.'
@@ -269,7 +269,7 @@ class FilePage extends React.Component<Props> {
                     button="alt"
                     icon={icons.TIP}
                     label={__('Send a tip')}
-                    onClick={() => openModal(MODALS.SEND_TIP, {uri})}
+                    onClick={() => openModal(MODALS.SEND_TIP, { uri })}
                   />
                 </React.Fragment>
               )}
@@ -277,7 +277,7 @@ class FilePage extends React.Component<Props> {
                 button="alt"
                 icon={icons.SHARE}
                 label={__('Share')}
-                onClick={() => openModal(MODALS.SOCIAL_SHARE, {uri, speechShareable})}
+                onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
               />
             </div>