Merge pull request #31 from lbryio/tweaks

tweaks to publish gallery and featured search result
This commit is contained in:
Akinwale Ariwodola 2019-08-21 16:51:09 +01:00 committed by GitHub
commit 430fc1a661
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 20 deletions

View file

@ -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}

View file

@ -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} />
)}

View file

@ -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',