// @flow 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 FileViewer from 'component/fileViewer'; import Thumbnail from 'component/common/thumbnail'; import FilePrice from 'component/filePrice'; import FileDetails from 'component/fileDetails'; import FileActions from 'component/fileActions'; import UriIndicator from 'component/uriIndicator'; import Icon from 'component/common/icon'; import DateTime from 'component/dateTime'; import Button from 'component/button'; import SubscribeButton from 'component/subscribeButton'; import Page from 'component/page'; import FileDownloadLink from 'component/fileDownloadLink'; import classnames from 'classnames'; import getMediaType from 'util/get-media-type'; import RecommendedContent from 'component/recommendedContent'; type Props = { claim: StreamClaim, fileInfo: FileListItem, metadata: StreamMetadata, contentType: string, uri: string, rewardedContentClaimIds: Array, obscureNsfw: boolean, claimIsMine: boolean, costInfo: ?{cost: number}, fetchFileInfo: string => void, fetchCostInfo: string => void, setViewed: string => void, isSubscribed: ?string, isSubscribed: boolean, channelUri: string, viewCount: number, prepareEdit: ({}, string) => void, openModal: (id: string, {uri: string}) => void, markSubscriptionRead: (string, string) => void, fetchViewCount: string => void, balance: number, title: string, thumbnail: ?string, nsfw: boolean, }; class FilePage extends React.Component { static PLAYABLE_MEDIA_TYPES = ['audio', 'video']; static PREVIEW_MEDIA_TYPES = [ 'text', 'model', 'image', 'script', 'document', '3D-file', // Bypass unplayable files // TODO: Find a better way to detect supported types 'application', ]; componentDidMount() { const { uri, fetchFileInfo, fetchCostInfo, setViewed, isSubscribed, claimIsMine, fetchViewCount, claim, } = this.props; if(isSubscribed) { this.removeFromSubscriptionNotifications(); } if(claimIsMine) { fetchViewCount(claim.claim_id); } // always refresh file info when entering file page to see if we have the file // @if TARGET='app' fetchFileInfo(uri); // @endif // See https://github.com/lbryio/lbry-desktop/pull/1563 for discussion fetchCostInfo(uri); setViewed(uri); } componentWillReceiveProps(nextProps: Props) { const {fetchFileInfo, uri, setViewed} = this.props; // @if TARGET='app' if(nextProps.fileInfo === undefined) { fetchFileInfo(uri); } // @endif if(uri !== nextProps.uri) { setViewed(nextProps.uri); } } componentDidUpdate(prevProps: Props) { const {isSubscribed, claim, uri, fetchViewCount, claimIsMine} = this.props; if(!prevProps.isSubscribed && isSubscribed) { this.removeFromSubscriptionNotifications(); } if(prevProps.uri !== uri && claimIsMine) { fetchViewCount(claim.claim_id); } } removeFromSubscriptionNotifications() { // Always try to remove // If it doesn't exist, nothing will happen const {markSubscriptionRead, uri, channelUri} = this.props; markSubscriptionRead(channelUri, uri); } render() { const { claim, metadata, contentType, uri, rewardedContentClaimIds, obscureNsfw, openModal, claimIsMine, prepareEdit, costInfo, fileInfo, channelUri, viewCount, balance, title, thumbnail, nsfw, } = this.props; // File info 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; const mediaType = getMediaType(contentType, fileName); const showFile = PLAYABLE_MEDIA_TYPES.includes(mediaType) || PREVIEW_MEDIA_TYPES.includes(mediaType); const speechShareable = costInfo && costInfo.cost === 0 && contentType && ['video', 'image'].includes(contentType.split('/')[0]); // We want to use the short form uri for editing // 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} = { contentName: claim.name, claimId: claim.claim_id, }; if(channelName) { uriObject.channelName = channelName; } editUri = buildURI(uriObject); } const insufficientCredits = !claimIsMine && costInfo && costInfo.cost > balance; return (

{uri}

{insufficientCredits && (
{__( 'The publisher has chosen to charge LBC to view this content. Your balance is currently to low to view it.' )}{' '} {__('Checkout')}{' '}
)} {showFile && ( )} {!showFile && (thumbnail ? ( ) : (
{__("Sorry, looks like we can't preview this file.")}
))}

{title}

{isRewardContent && ( )} {nsfw &&
MATURE
}
{__('Published on')}
{claimIsMine && (
{viewCount} {viewCount !== 1 ? __('Views') : __('View')}
)}
{claimIsMine && (
); } } export default FilePage;