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 {PLAYABLE_MEDIA_TYPES, PREVIEW_MEDIA_TYPES} = FilePage;
+    const { height, channel_name: channelName } = claim;
+    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) {
-      const uriObject: {contentName: string, claimId: string, channelName?: string} = {
+    if (claimIsMine) {
+      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.'
@@ -202,16 +202,16 @@ class FilePage extends React.Component<Props> {
             (thumbnail ? (
               <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
             ) : (
-                <div
-                  className={classnames('content__empty', {
-                    'content__empty--nsfw': shouldObscureThumbnail,
-                  })}
-                >
-                  <div className="card__media-text">
-                    {__("Sorry, looks like we can't preview this file.")}
-                  </div>
+              <div
+                className={classnames('content__empty', {
+                  'content__empty--nsfw': shouldObscureThumbnail,
+                })}
+              >
+                <div className="card__media-text">
+                  {__("Sorry, looks like we can't preview this file.")}
                 </div>
-              ))}
+              </div>
+            ))}
         </div>
 
         <div className="grid-area--info media__content media__content--large">
@@ -223,10 +223,10 @@ class FilePage extends React.Component<Props> {
                 size={20}
                 iconColor="red"
                 icon={icons.FEATURED}
-              // Figure out how to get the tooltip to overlap the navbar on the file page and I will love you
-              // https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
-              // https://spee.ch/4/overflow-issue
-              // tooltip="bottom"
+                // Figure out how to get the tooltip to overlap the navbar on the file page and I will love you
+                // https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
+                // https://spee.ch/4/overflow-issue
+                // tooltip="bottom"
               />
             )}
             {nsfw && <div className="badge badge--nsfw">MATURE</div>}
@@ -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>