Merge pull request #31 from lbryio/tweaks
tweaks to publish gallery and featured search result
This commit is contained in:
commit
430fc1a661
3 changed files with 44 additions and 20 deletions
|
@ -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}
|
||||
|
|
|
@ -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} />
|
||||
)}
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in a new issue