show reward icon in content lists and file page

src/component/fileItem/index.js

@@ -18,7 +18,7 @@ const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
   fileInfo: makeSelectFileInfoForUri(props.uri)(state),
   metadata: makeSelectMetadataForUri(props.uri)(state),
-  rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
+  rewardedContentClaimIds: selectRewardContentClaimIds(state),
   isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
   obscureNsfw: !selectShowNsfw(state),
   shortUrl: makeSelectShortUrlForUri(props.uri)(state),

src/component/fileListItem/index.js

@@ -10,7 +10,7 @@ import {
   makeSelectTitleForUri,
   makeSelectThumbnailForUri,
 } from 'lbry-redux';
-import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
+import { selectBlackListedOutpoints, selectFilteredOutpoints, selectRewardContentClaimIds } from 'lbryinc';
 import { selectShowNsfw } from 'redux/selectors/settings';
 import FileListItem from './view';
 
@@ -24,6 +24,7 @@ const select = (state, props) => ({
   nsfw: makeSelectClaimIsNsfw(props.uri)(state),
   isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
   obscureNsfw: !selectShowNsfw(state),
+  rewardedContentClaimIds: selectRewardContentClaimIds(state),
   shortUrl: makeSelectShortUrlForUri(props.uri)(state),
   title: makeSelectTitleForUri(props.uri)(state),
   thumbnail: makeSelectThumbnailForUri(props.uri)(state),

src/component/fileListItem/view.js

@@ -70,6 +70,7 @@ class FileListItem extends React.PureComponent {
       obscureNsfw,
       onPress,
       navigation,
+      rewardedContentClaimIds,
       thumbnail,
       hideChannel,
       onLongPress,
@@ -82,12 +83,21 @@ class FileListItem extends React.PureComponent {
     const isResolving = !fileInfo && isResolvingUri;
     const duration = claim && claim.value && claim.value.video ? claim.value.video.duration : null;
 
-    let name, channel, height, channelClaimId, fullChannelUri, shortChannelUri, shouldHide, signingChannel;
+    let name,
+      channel,
+      height,
+      isRewardContent,
+      channelClaimId,
+      fullChannelUri,
+      shortChannelUri,
+      shouldHide,
+      signingChannel;
     if (claim) {
       name = claim.name;
       signingChannel = claim.signing_channel;
       channel = signingChannel ? signingChannel.name : null;
       height = claim.height;
+      isRewardContent = rewardedContentClaimIds.includes(claim.claim_id);
       channelClaimId = signingChannel ? signingChannel.claim_id : null;
       fullChannelUri = channelClaimId ? `${channel}#${channelClaimId}` : channel;
       shortChannelUri = signingChannel ? signingChannel.short_url : null;
@@ -150,9 +160,12 @@ class FileListItem extends React.PureComponent {
             )}
 
             {(title || name) && (
-              <Text style={featuredResult ? fileListStyle.featuredTitle : fileListStyle.title}>
-                {this.formatTitle(title) || this.formatTitle(name)}
-              </Text>
+              <View style={fileListStyle.titleContainer}>
+                <Text style={featuredResult ? fileListStyle.featuredTitle : fileListStyle.title}>
+                  {this.formatTitle(title) || this.formatTitle(name)}
+                </Text>
+                {isRewardContent && <Icon style={fileListStyle.rewardIcon} name="award" size={12} />}
+              </View>
             )}
             {channel && !hideChannel && (
               <Link

src/page/file/view.js

@@ -865,6 +865,7 @@ class FilePage extends React.PureComponent {
                     <Text style={filePageStyle.title} selectable>
                       {title}
                     </Text>
+                    {isRewardContent && <Icon name="award" style={filePageStyle.rewardIcon} size={14} />}
                     <View style={filePageStyle.descriptionToggle}>
                       <Icon name={this.state.showDescription ? 'caret-up' : 'caret-down'} size={24} />
                     </View>

src/styles/fileList.js

@@ -105,6 +105,16 @@ const fileListStyle = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  titleContainer: {
+    flexDirection: 'row',
+    marginRight: 16,
+  },
+  rewardIcon: {
+    color: Colors.Red,
+    textAlign: 'right',
+    marginLeft: 4,
+    marginTop: 4,
+  },
 });
 
 export default fileListStyle;

src/styles/filePage.js

@@ -354,8 +354,9 @@ const filePageStyle = StyleSheet.create({
     fontSize: 14,
   },
   rewardIcon: {
-    color: Colors.White,
-    marginRight: 8,
+    color: Colors.Red,
+    marginTop: -8,
+    marginLeft: 8,
   },
   backButton: {
     position: 'absolute',