automatically get free images and display as thumbnails

ui/component/claimListDiscover/view.jsx

@@ -148,39 +148,6 @@ function ClaimListDiscover(props: Props) {
     </div>
   );
 
-<<<<<<< HEAD
-=======
-  const noTags = (
-<<<<<<< HEAD
-    <p>
-      <I18nMessage
-        tokens={{
-          customize: <Button button="link" navigate={`/$/${PAGES.FOLLOWING}`} label={__('customize')} />,
-        }}
-      >
-        You're not following any tags. Add tags above or smash that %customize% button!
-      </I18nMessage>
-    </p>
-=======
-    <div>
-      <p>
-        <I18nMessage
-          tokens={{
-            customize: <Button button="link" navigate={`/$/${PAGES.FOLLOWING}`} label={__('customize')} />,
-          }}
-        >
-          You're not following any tags. Add tags above or smash that %customize% button!
-        </I18nMessage>
-      </p>
-    </div>
->>>>>>> i18n feedback
-  );
-
-  const noFollowing =
-    (personalSort === SEARCH_SORT_YOU && noTags) || (personalSort === SEARCH_SORT_CHANNELS && noChannels);
-  const emptyState = !loading && !hasContent ? noFollowing : noResults;
-
->>>>>>> i18n feedback
   function getSearch() {
     let search = `?`;
     if (!personalView) {

ui/component/claimPreview/index.js

@@ -14,6 +14,8 @@ import {
   doClearPublish,
   doPrepareEdit,
   makeSelectMediaTypeForUri,
+  doFileGet,
+  makeSelectStreamingUrlForUri,
 } from 'lbry-redux';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { selectShowMatureContent } from 'redux/selectors/settings';
@@ -39,10 +41,12 @@ const select = (state, props) => ({
   hasVisitedUri: props.uri && makeSelectHasVisitedUri(props.uri)(state),
   channelIsBlocked: props.uri && selectChannelIsBlocked(props.uri)(state),
   isSubscribed: props.uri && makeSelectIsSubscribed(props.uri, true)(state),
+  streamingUrl: props.uri && makeSelectStreamingUrlForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({
   resolveUri: uri => dispatch(doResolveUri(uri)),
+  getFile: uri => dispatch(doFileGet(uri, false)),
   beginPublish: name => {
     dispatch(doClearPublish());
     dispatch(doPrepareEdit({ name }));

ui/component/claimPreview/view.jsx

@@ -17,7 +17,7 @@ import SubscribeButton from 'component/subscribeButton';
 import ChannelThumbnail from 'component/channelThumbnail';
 import BlockButton from 'component/blockButton';
 import Button from 'component/button';
-import { generateStreamUrl } from '../../util/lbrytv';
+import useGetThumbnail from 'effects/use-get-thumbnail';
 
 type Props = {
   uri: string,
@@ -30,7 +30,6 @@ type Props = {
   isResolvingUri: boolean,
   history: { push: string => void },
   thumbnail: string,
-  mediaType: string,
   title: string,
   nsfw: boolean,
   placeholder: string,
@@ -52,6 +51,8 @@ type Props = {
   properties: boolean | Node | string | number,
   onClick?: any => any,
   hideBlock?: boolean,
+  streamingUrl: ?string,
+  getFile: string => void,
 };
 
 const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@@ -64,7 +65,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     isResolvingUri,
     thumbnail,
     title,
-    mediaType,
     nsfw,
     resolveUri,
     claim,
@@ -82,6 +82,8 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     properties,
     onClick,
     hideBlock,
+    getFile,
+    streamingUrl,
   } = props;
   const shouldFetch =
     claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending);
@@ -89,6 +91,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
   const showPublishLink = abandoned && placeholder === 'publish';
   const hideActions = type === 'small' || type === 'tooltip';
+  const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile) || thumbnail;
 
   let name;
   let isValid = false;
@@ -198,18 +201,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
         'claim-preview--pending': pending,
       })}
     >
-<<<<<<< HEAD
       {isChannel && claim ? (
-=======
-      {isChannel ? (
->>>>>>> dirty, unacceptable image rendering
         <UriIndicator uri={uri} link>
           <ChannelThumbnail uri={uri} obscure={channelIsBlocked} />
         </UriIndicator>
       ) : (
-        <FileThumbnail thumbnail={thumbnail} />
+        <FileThumbnail thumbnail={thumbnailUrl} />
       )}
-<<<<<<< HEAD
       <div className="claim-preview__text">
         <div className="claim-preview-metadata">
           <div className="claim-preview-info">
@@ -217,12 +215,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
               {claim ? <TruncatedText text={title || claim.name} lines={2} /> : <span>{__('Nothing here')}</span>}
             </div>
             {!isChannel && claim && <FileProperties uri={uri} />}
-=======
-      <div className="claim-preview-metadata">
-        <div className="claim-preview-info">
-          <div className="claim-preview-title">
-            {claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
->>>>>>> dirty, unacceptable image rendering
           </div>
 
           <div className="media__subtitle">

ui/component/fileViewerInitiator/view.jsx

@@ -52,6 +52,7 @@ export default function FileViewerInitiator(props: Props) {
   const cost = costInfo && costInfo.cost;
   const forceVideo = ['application/x-ext-mkv', 'video/x-matroska'].includes(contentType);
   const isPlayable = ['audio', 'video'].includes(mediaType) || forceVideo;
+  const isImage = mediaType === 'image';
   const fileStatus = fileInfo && fileInfo.status;
   const webStreamOnly = contentType === 'application/pdf' || mediaType === 'text';
   const supported = IS_WEB ? (!cost && isStreamable) || webStreamOnly || forceVideo : true;
@@ -98,7 +99,7 @@ export default function FileViewerInitiator(props: Props) {
 
   useEffect(() => {
     const videoOnPage = document.querySelector('video');
-    if (((autoplay && !videoOnPage && isAutoPlayable) || isText) && hasCostInfo && cost === 0) {
+    if (((autoplay && !videoOnPage && isAutoPlayable) || isText || isImage) && hasCostInfo && cost === 0) {
       viewFile();
     }
   }, [autoplay, viewFile, isAutoPlayable, hasCostInfo, cost, isText]);

ui/effects/use-get-thumbnail.js

@@ -0,0 +1,38 @@
+// @flow
+import React from 'react';
+import { generateStreamUrl } from 'util/lbrytv';
+
+export default function useGetThumbnail(uri: string, claim: ?Claim, streamingUrl: ?string, getFile: string => void) {
+  const hasClaim = claim !== undefined;
+
+  // $FlowFixMe
+  const isImage = claim && claim.value && claim.value.stream_type === 'image';
+  // $FlowFixMe
+  const isFree = claim && claim.value && (!claim.value.fee || Number(claim.value.fee.amount) <= 0);
+  let thumbnailToUse;
+
+  // @if TARGET='web'
+  if (claim && isImage && isFree) {
+    thumbnailToUse = generateStreamUrl(claim.name, claim.claim_id, 'https://api.lbry.tv');
+  }
+  // @endif
+
+  const [thumbnail, setThumbnail] = React.useState(thumbnailToUse);
+  React.useEffect(() => {
+    setThumbnail(thumbnailToUse);
+  }, [thumbnailToUse]);
+
+  // @if TARGET='app'
+  React.useEffect(() => {
+    if (hasClaim && isImage && isFree) {
+      if (streamingUrl) {
+        setThumbnail(streamingUrl);
+      } else {
+        getFile(uri);
+      }
+    }
+  }, [hasClaim, isFree, isImage, streamingUrl, uri]);
+  // @endif
+
+  return thumbnail;
+}