Merge pull request #31 from lbryio/tweaks

tweaks to publish gallery and featured search result

src/page/publish/view.js

@@ -83,6 +83,7 @@ class PublishPage extends React.PureComponent {
 
     // gallery videos
     videos: null,
+    allThumbnailsChecked: false,
     checkedThumbnails: [],
 
     // camera
@@ -131,6 +132,7 @@ class PublishPage extends React.PureComponent {
     const { navigation } = this.props;
     // this.didFocusListener = navigation.addListener('didFocus', this.onComponentFocused);
     DeviceEventEmitter.addListener('onGalleryThumbnailChecked', this.handleGalleryThumbnailChecked);
+    DeviceEventEmitter.addListener('onAllGalleryThumbnailsChecked', this.handleAllGalleryThumbnailsChecked);
   }
 
   componentWillUnmount() {
@@ -138,6 +140,7 @@ class PublishPage extends React.PureComponent {
       this.didFocusListener.remove();
     }
     DeviceEventEmitter.removeListener('onGalleryThumbnailChecked', this.handleGalleryThumbnailChecked);
+    DeviceEventEmitter.removeListener('onAllGalleryThumbnailsChecked', this.handleAllGalleryThumbnailsChecked);
   }
 
   handleGalleryThumbnailChecked = evt => {
@@ -150,6 +153,10 @@ class PublishPage extends React.PureComponent {
     this.setState({ checkedThumbnails });
   };
 
+  handleAllGalleryThumbnailsChecked = () => {
+    this.setState({ allThumbnailsChecked: true });
+  };
+
   onComponentFocused = () => {
     const { pushDrawerStack, setPlayerVisible } = this.props;
     pushDrawerStack();
@@ -594,7 +601,15 @@ class PublishPage extends React.PureComponent {
 
   render() {
     const { balance, navigation, notify, publishFormValues } = this.props;
-    const { canUseCamera, currentPhase, checkedThumbnails, loadingVideos, thumbnailPath, videos } = this.state;
+    const {
+      allThumbnailsChecked,
+      canUseCamera,
+      currentPhase,
+      checkedThumbnails,
+      loadingVideos,
+      thumbnailPath,
+      videos,
+    } = this.state;
 
     let content;
     if (Constants.PHASE_SELECTOR === currentPhase) {
@@ -633,9 +648,10 @@ class PublishPage extends React.PureComponent {
               </View>
             </View>
           </View>
-          {loadingVideos && (
+          {(loadingVideos || !allThumbnailsChecked) && (
             <View style={publishStyle.loadingView}>
-              <ActivityIndicator size="large" color={Colors.NextLbryGreen} />
+              <ActivityIndicator size="small" color={Colors.NextLbryGreen} />
+              <Text style={publishStyle.loadingText}>Please wait while we load your videos...</Text>
             </View>
           )}
           {!loadingVideos && (!videos || videos.length === 0) && (
@@ -645,7 +661,7 @@ class PublishPage extends React.PureComponent {
               </Text>
             </View>
           )}
-          {videos && thumbnailPath && checkedThumbnails.length > 0 && (
+          {videos && thumbnailPath && allThumbnailsChecked && (
             <FlatGrid
               style={publishStyle.galleryGrid}
               initialNumToRender={18}

src/page/search/view.js

@@ -84,21 +84,6 @@ class SearchPage extends React.PureComponent {
     search(keywords);
   };
 
-  listHeaderComponent = () => {
-    const { navigation } = this.props;
-    const { currentUri } = this.state;
-
-    return (
-      <FileListItem
-        uri={currentUri}
-        featuredResult
-        style={searchStyle.featuredResultItem}
-        navigation={navigation}
-        onPress={() => navigateToUri(navigation, currentUri)}
-      />
-    );
-  };
-
   listEmptyComponent = () => {
     const { query } = this.props;
     return (
@@ -111,12 +96,28 @@ class SearchPage extends React.PureComponent {
     );
   };
 
+  listHeaderComponent = () => {
+    const { navigation } = this.props;
+    const { currentUri } = this.state;
+
+    return (
+      <FileListItem
+        uri={currentUri}
+        featuredResult
+        style={searchStyle.featuredResultItem}
+        navigation={navigation}
+        onPress={() => navigateToUri(navigation, this.state.currentUri)}
+      />
+    );
+  };
+
   render() {
     const { isSearching, navigation, query, uris, urisByQuery } = this.props;
 
     return (
       <View style={searchStyle.container}>
         <UriBar value={query} navigation={navigation} onSearchSubmitted={this.handleSearchSubmitted} />
+
         {isSearching && (
           <View style={searchStyle.busyContainer}>
             <ActivityIndicator size="large" color={Colors.NextLbryGreen} style={searchStyle.loading} />
@@ -133,7 +134,7 @@ class SearchPage extends React.PureComponent {
           maxToRenderPerBatch={20}
           removeClippedSubviews
           ListEmptyComponent={!isSearching ? this.listEmptyComponent() : null}
-          ListHeaderComponent={this.listHeaderComponent()}
+          ListHeaderComponent={this.state.currentUri ? this.listHeaderComponent() : null}
           renderItem={({ item }) => (
             <FileListItem key={item} uri={item} style={searchStyle.resultItem} navigation={navigation} />
           )}

src/styles/publish.js

@@ -148,6 +148,13 @@ const publishStyle = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  loadingText: {
+    color: Colors.White,
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 16,
+    marginLeft: 8,
   },
   titleRow: {
     flexDirection: 'row',