File view tags (#527)

* display claim tags below description

app/src/component/fileItemMedia/view.js

@@ -45,11 +45,23 @@ class FileItemMedia extends React.PureComponent {
     }
   }
 
+  isThumbnailValid = (thumbnail) => {
+    if (!thumbnail || ((typeof thumbnail) !== 'string')) {
+      return false;
+    }
+
+    if (thumbnail.substring(0, 7) != 'http://' && thumbnail.substring(0, 8) != 'https://') {
+      return false;
+    }
+
+    return true;
+  }
+
   render() {
     let style = this.props.style;
     const { blurRadius, isResolvingUri, thumbnail, title, resizeMode } = this.props;
     const atStyle = this.state.autoThumbStyle;
-    if (thumbnail && ((typeof thumbnail) === 'string') && thumbnail.trim().length > 0 && !this.state.imageLoadFailed) {
+    if (this.isThumbnailValid(thumbnail) && !this.state.imageLoadFailed) {
       if (style == null) {
         style = fileItemMediaStyle.thumbnail;
       }

app/src/component/uriBar/view.js

@@ -44,6 +44,11 @@ class UriBar extends React.PureComponent {
     const { updateSearchQuery, onSearchSubmitted, navigation } = this.props;
 
     let timeout = setTimeout(() => {
+      if (text.trim().length === 0) {
+        // don't do anything if the text is empty
+        return;
+      }
+
       updateSearchQuery(text);
 
       if (!text.startsWith('lbry://')) {

app/src/page/file/view.js

@@ -358,6 +358,12 @@ class FilePage extends React.PureComponent {
     }, 500);
   }
 
+  renderTags = (tags) => {
+    return tags.map((tag, i) => (
+      <Text style={filePageStyle.tagItem} key={`${tag}-${i}`}>{tag}</Text>
+    ));
+  }
+
   render() {
     const {
       claim,
@@ -424,6 +430,12 @@ class FilePage extends React.PureComponent {
           </View>
         );
       } else {
+
+        let tags = [];
+        if (claim && claim.value && claim.value.tags) {
+          tags = claim.value.tags;
+        }
+
         const completed = fileInfo && fileInfo.completed;
         const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id);
         const description = metadata.description ? metadata.description : null;
@@ -630,8 +642,16 @@ class FilePage extends React.PureComponent {
                   </View>}
 
                   {(this.state.showDescription && description && description.length > 0) && <View style={filePageStyle.divider} />}
-                  {(this.state.showDescription && description) &&
+                  {(this.state.showDescription && description) && (
-                    <Text style={filePageStyle.description} selectable={true}>{this.linkify(description)}</Text>}
+                    <View>
+                      <Text style={filePageStyle.description} selectable={true}>{this.linkify(description)}</Text>
+                      {tags && tags.length > 0 && (
+                        <View style={filePageStyle.tagContainer}>
+                          <Text style={filePageStyle.tagTitle}>Tags</Text>
+                          <View style={filePageStyle.tagList}>{this.renderTags(tags)}</View>
+                        </View>
+                      )}
+                    </View>)}
 
                   <View onLayout={this.setRelatedContentPosition} />
                   <RelatedContent navigation={navigation} uri={uri} />

app/src/styles/filePage.js

@@ -302,6 +302,23 @@ const filePageStyle = StyleSheet.create({
   },
   tipButton: {
     marginRight: 8
+  },
+  tagContainer: {
+    marginLeft: 12,
+    marginRight: 12,
+    flexDirection: 'row'
+  },
+  tagTitle: {
+    fontFamily: 'Inter-UI-SemiBold',
+    flex: 0.2
+  },
+  tagList: {
+    fontFamily: 'Inter-UI-Regular',
+    flex: 0.8,
+    flexDirection: 'row'
+  },
+  tagItem: {
+    marginRight: 16
   }
 });