diff --git a/package-lock.json b/package-lock.json index 90240d4..a20eca7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8056,9 +8056,9 @@ "integrity": "sha512-XRHhGH5aM4lSenX4zZBa07JaszJGXeF8cv1KY314Q4qJWOihKWLpkdvwqwsBieZ2iy8DPhdAVioQzw8JLD/Okw==" }, "react-native-fast-image": { - "version": "5.4.2", - "resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-5.4.2.tgz", - "integrity": "sha512-S4E96Lwmx6z6QD3MaAuP7cNcXRLfgEUYU2GB694TbGEoOjk/FO1OnfbxfFp0vUs/klr4HJwACcwihPPxrFTt8w==" + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-6.1.1.tgz", + "integrity": "sha512-9bYUY8GLKpuTF9WOC28VM/ceH0+GyV60g3bcwYeiq0A+oDBVyVlj/ovMaJqRxHII6GQYX0WbTkiT5kWtPCtWkA==" }, "react-native-fs": { "version": "2.13.3", diff --git a/package.json b/package.json index ce0a40f..8a0beb9 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "react-native-country-picker-modal": "^0.6.2", "react-native-document-picker": "^2.3.0", "react-native-exception-handler": "2.9.0", - "react-native-fast-image": "^5.0.3", + "react-native-fast-image": "^6.1.1", "react-native-fs": "^2.13.3", "react-native-gesture-handler": "^1.1.0", "react-native-image-zoom-viewer": "^2.2.5", diff --git a/src/component/fileItem/view.js b/src/component/fileItem/view.js index e72ed52..6f38554 100644 --- a/src/component/fileItem/view.js +++ b/src/component/fileItem/view.js @@ -85,7 +85,6 @@ class FileItem extends React.PureComponent { duration={duration} title={title} thumbnail={thumbnail} - blurRadius={obscure ? 15 : 0} resizeMode="cover" isResolvingUri={isResolvingUri} style={mediaStyle} diff --git a/src/component/fileItemMedia/view.js b/src/component/fileItemMedia/view.js index 20ff308..36ecac6 100644 --- a/src/component/fileItemMedia/view.js +++ b/src/component/fileItemMedia/view.js @@ -59,34 +59,13 @@ class FileItemMedia extends React.PureComponent { render() { let style = this.props.style; - const { blurRadius, duration, isResolvingUri, thumbnail, title, resizeMode } = this.props; + const { duration, isResolvingUri, thumbnail, title, resizeMode } = this.props; const atStyle = this.state.autoThumbStyle; if (this.isThumbnailValid(thumbnail) && !this.state.imageLoadFailed) { if (style == null) { style = fileItemMediaStyle.thumbnail; } - if (blurRadius > 0) { - // No blur radius support in FastImage yet - return ( - - - {duration && ( - - )} - - ); - } - return ( + This content is Not Safe For Work. To view adult content, please change your Settings. diff --git a/src/page/search/index.js b/src/page/search/index.js index 7cda584..b86cc92 100644 --- a/src/page/search/index.js +++ b/src/page/search/index.js @@ -10,19 +10,21 @@ import { } from 'lbry-redux'; import { doPushDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer'; import { selectCurrentRoute } from 'redux/selectors/drawer'; -import Constants from 'constants'; +import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api import SearchPage from './view'; +const numSearchResults = 50; + const select = state => ({ currentRoute: selectCurrentRoute(state), isSearching: selectIsSearching(state), query: selectSearchValue(state), - uris: makeSelectSearchUris(makeSelectQueryWithOptions(null, 25)(state))(state), + uris: makeSelectSearchUris(makeSelectQueryWithOptions(null, numSearchResults)(state))(state), urisByQuery: selectSearchUrisByQuery(state), }); const perform = dispatch => ({ - search: query => dispatch(doSearch(query, 25)), + search: query => dispatch(doSearch(query, numSearchResults)), updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)), pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_SEARCH)), setPlayerVisible: () => dispatch(doSetPlayerVisible(false)), diff --git a/src/page/search/view.js b/src/page/search/view.js index eaf1325..46bb0d0 100644 --- a/src/page/search/view.js +++ b/src/page/search/view.js @@ -1,6 +1,6 @@ import React from 'react'; import { Lbry, parseURI, normalizeURI, isURIValid } from 'lbry-redux'; -import { ActivityIndicator, Button, NativeModules, Text, TextInput, View, ScrollView } from 'react-native'; +import { ActivityIndicator, Button, FlatList, NativeModules, Text, TextInput, View } from 'react-native'; import { navigateToUri } from 'utils/helper'; import Colors from 'styles/colors'; import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api @@ -84,6 +84,33 @@ class SearchPage extends React.PureComponent { search(keywords); }; + listHeaderComponent = () => { + const { navigation } = this.props; + const { currentUri } = this.state; + + return ( + navigateToUri(navigation, currentUri)} + /> + ); + }; + + listEmptyComponent = () => { + const { query } = this.props; + return ( + + + There are no results to display for {query}. Please try a different + search term. + + + ); + }; + render() { const { isSearching, navigation, query, uris, urisByQuery } = this.props; @@ -96,37 +123,21 @@ class SearchPage extends React.PureComponent { )} - {!isSearching && ( - - {this.state.currentUri && ( - navigateToUri(navigation, this.state.currentUri)} - /> - )} - {uris && uris.length - ? uris.map(uri => ( - - )) - : null} - {(!uris || uris.length === 0) && ( - - - There are no results to display for {query}. Please try a - different search term. - - - )} - - )} + item} + initialNumToRender={10} + maxToRenderPerBatch={20} + removeClippedSubviews + ListEmptyComponent={!isSearching ? this.listEmptyComponent() : null} + ListHeaderComponent={this.listHeaderComponent()} + renderItem={({ item }) => ( + + )} + /> ); diff --git a/src/styles/discover.js b/src/styles/discover.js index 5d816fd..452626e 100644 --- a/src/styles/discover.js +++ b/src/styles/discover.js @@ -188,8 +188,8 @@ const discoverStyle = StyleSheet.create({ position: 'absolute', left: 0, top: 0, - width: '100%', - height: '100%', + right: 0, + bottom: 0, }, overlayText: { color: Colors.White, diff --git a/src/styles/search.js b/src/styles/search.js index c27429b..df62e8c 100644 --- a/src/styles/search.js +++ b/src/styles/search.js @@ -12,6 +12,11 @@ const searchStyle = StyleSheet.create({ }, busyContainer: { flex: 1, + position: 'absolute', + top: 60, + left: 0, + right: 0, + bottom: 0, alignItems: 'center', justifyContent: 'center', },