Explore page redesign #518
8 changed files with 34 additions and 14 deletions
|
@ -78,7 +78,8 @@ class FileItem extends React.PureComponent {
|
||||||
isResolvingUri={isResolvingUri}
|
isResolvingUri={isResolvingUri}
|
||||||
style={mediaStyle} />
|
style={mediaStyle} />
|
||||||
|
|
||||||
{!compactView && <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />}
|
{(!compactView && fileInfo && fileInfo.completed) && <Icon style={discoverStyle.downloadedIcon} solid={true} color={Colors.BrightGreen} name={"folder"} size={16} />}
|
||||||
|
{(!compactView && (!fileInfo || !fileInfo.completed)) && <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />}
|
||||||
{!compactView && <View style={isRewardContent ? discoverStyle.rewardTitleContainer : null}>
|
{!compactView && <View style={isRewardContent ? discoverStyle.rewardTitleContainer : null}>
|
||||||
<Text numberOfLines={1} style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>
|
<Text numberOfLines={1} style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>
|
||||||
{isRewardContent && <Icon style={discoverStyle.rewardIcon} name="award" size={14} />}
|
{isRewardContent && <Icon style={discoverStyle.rewardIcon} name="award" size={14} />}
|
||||||
|
|
|
@ -12,6 +12,7 @@ import { navigateToUri, formatBytes } from 'utils/helper';
|
||||||
import Colors from 'styles/colors';
|
import Colors from 'styles/colors';
|
||||||
import DateTime from 'component/dateTime';
|
import DateTime from 'component/dateTime';
|
||||||
import FileItemMedia from 'component/fileItemMedia';
|
import FileItemMedia from 'component/fileItemMedia';
|
||||||
|
import Icon from 'react-native-vector-icons/FontAwesome5';
|
||||||
import Link from 'component/link';
|
import Link from 'component/link';
|
||||||
import NsfwOverlay from 'component/nsfwOverlay';
|
import NsfwOverlay from 'component/nsfwOverlay';
|
||||||
import fileListStyle from 'styles/fileList';
|
import fileListStyle from 'styles/fileList';
|
||||||
|
@ -85,6 +86,7 @@ class FileListItem extends React.PureComponent {
|
||||||
resizeMode="cover"
|
resizeMode="cover"
|
||||||
title={(title || name)}
|
title={(title || name)}
|
||||||
thumbnail={metadata ? metadata.thumbnail : null} />
|
thumbnail={metadata ? metadata.thumbnail : null} />
|
||||||
|
{fileInfo && fileInfo.completed && <Icon style={fileListStyle.downloadedIcon} solid={true} color={Colors.BrightGreen} name={"folder"} size={16} />}
|
||||||
<View style={fileListStyle.detailsContainer}>
|
<View style={fileListStyle.detailsContainer}>
|
||||||
{featuredResult && <Text style={fileListStyle.featuredUri} numberOfLines={1}>{uri}</Text>}
|
{featuredResult && <Text style={fileListStyle.featuredUri} numberOfLines={1}>{uri}</Text>}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import {
|
import {
|
||||||
|
doFileList,
|
||||||
selectBalance,
|
selectBalance,
|
||||||
|
selectFileInfosDownloaded,
|
||||||
} from 'lbry-redux';
|
} from 'lbry-redux';
|
||||||
import {
|
import {
|
||||||
doFetchFeaturedUris,
|
doFetchFeaturedUris,
|
||||||
|
@ -24,6 +26,7 @@ const select = state => ({
|
||||||
enabledChannelNotifications: selectEnabledChannelNotifications(state),
|
enabledChannelNotifications: selectEnabledChannelNotifications(state),
|
||||||
featuredUris: selectFeaturedUris(state),
|
featuredUris: selectFeaturedUris(state),
|
||||||
fetchingFeaturedUris: selectFetchingFeaturedUris(state),
|
fetchingFeaturedUris: selectFetchingFeaturedUris(state),
|
||||||
|
fileInfos: selectFileInfosDownloaded(state),
|
||||||
ratingReminderDisabled: makeSelectClientSetting(Constants.SETTING_RATING_REMINDER_DISABLED)(state),
|
ratingReminderDisabled: makeSelectClientSetting(Constants.SETTING_RATING_REMINDER_DISABLED)(state),
|
||||||
ratingReminderLastShown: makeSelectClientSetting(Constants.SETTING_RATING_REMINDER_LAST_SHOWN)(state),
|
ratingReminderLastShown: makeSelectClientSetting(Constants.SETTING_RATING_REMINDER_LAST_SHOWN)(state),
|
||||||
unreadSubscriptions: selectUnreadSubscriptions(state),
|
unreadSubscriptions: selectUnreadSubscriptions(state),
|
||||||
|
@ -33,6 +36,7 @@ const perform = dispatch => ({
|
||||||
fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()),
|
fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()),
|
||||||
fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
|
fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
|
||||||
fetchSubscriptions: () => dispatch(doFetchMySubscriptions()),
|
fetchSubscriptions: () => dispatch(doFetchMySubscriptions()),
|
||||||
|
fileList: () => dispatch(doFileList()),
|
||||||
removeUnreadSubscriptions: () => dispatch(doRemoveUnreadSubscriptions()),
|
removeUnreadSubscriptions: () => dispatch(doRemoveUnreadSubscriptions()),
|
||||||
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value))
|
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value))
|
||||||
});
|
});
|
||||||
|
|
|
@ -46,12 +46,14 @@ class DiscoverPage extends React.PureComponent {
|
||||||
const {
|
const {
|
||||||
fetchFeaturedUris,
|
fetchFeaturedUris,
|
||||||
fetchRewardedContent,
|
fetchRewardedContent,
|
||||||
fetchSubscriptions
|
fetchSubscriptions,
|
||||||
|
fileList
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
fetchFeaturedUris();
|
fetchFeaturedUris();
|
||||||
fetchRewardedContent();
|
fetchRewardedContent();
|
||||||
fetchSubscriptions();
|
fetchSubscriptions();
|
||||||
|
fileList();
|
||||||
|
|
||||||
this.showRatingReminder();
|
this.showRatingReminder();
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,15 +9,15 @@ import {
|
||||||
View,
|
View,
|
||||||
ScrollView
|
ScrollView
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import { navigateToUri, uriFromFileInfo } from '../../utils/helper';
|
import { navigateToUri, uriFromFileInfo } from 'utils/helper';
|
||||||
import Colors from '../../styles/colors';
|
import Colors from 'styles/colors';
|
||||||
import PageHeader from '../../component/pageHeader';
|
import PageHeader from 'component/pageHeader';
|
||||||
import FileListItem from '../../component/fileListItem';
|
import FileListItem from 'component/fileListItem';
|
||||||
import FloatingWalletBalance from '../../component/floatingWalletBalance';
|
import FloatingWalletBalance from 'component/floatingWalletBalance';
|
||||||
import StorageStatsCard from '../../component/storageStatsCard';
|
import StorageStatsCard from 'component/storageStatsCard';
|
||||||
import UriBar from '../../component/uriBar';
|
import UriBar from 'component/uriBar';
|
||||||
import downloadsStyle from '../../styles/downloads';
|
import downloadsStyle from 'styles/downloads';
|
||||||
import fileListStyle from '../../styles/fileList';
|
import fileListStyle from 'styles/fileList';
|
||||||
|
|
||||||
class DownloadsPage extends React.PureComponent {
|
class DownloadsPage extends React.PureComponent {
|
||||||
static navigationOptions = {
|
static navigationOptions = {
|
||||||
|
|
|
@ -4,6 +4,7 @@ const Colors = {
|
||||||
DarkGrey: '#555555',
|
DarkGrey: '#555555',
|
||||||
DescriptionGrey: '#999999',
|
DescriptionGrey: '#999999',
|
||||||
LbryGreen: '#2f9176',
|
LbryGreen: '#2f9176',
|
||||||
|
BrightGreen: '#61fcd8',
|
||||||
BrighterLbryGreen: '#40b887',
|
BrighterLbryGreen: '#40b887',
|
||||||
LightGrey: '#cccccc',
|
LightGrey: '#cccccc',
|
||||||
LighterGrey: '#e5e5e5',
|
LighterGrey: '#e5e5e5',
|
||||||
|
|
|
@ -70,12 +70,17 @@ const discoverStyle = StyleSheet.create({
|
||||||
marginTop: 4,
|
marginTop: 4,
|
||||||
color: Colors.LbryGreen
|
color: Colors.LbryGreen
|
||||||
},
|
},
|
||||||
|
downloadedIcon: {
|
||||||
|
position: 'absolute',
|
||||||
|
right: 8,
|
||||||
|
top: 8
|
||||||
|
},
|
||||||
filePriceContainer: {
|
filePriceContainer: {
|
||||||
backgroundColor: '#61fcd8',
|
backgroundColor: Colors.BrightGreen,
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
right: 16,
|
right: 8,
|
||||||
top: 16,
|
top: 8,
|
||||||
width: 56,
|
width: 56,
|
||||||
height: 24,
|
height: 24,
|
||||||
borderRadius: 4
|
borderRadius: 4
|
||||||
|
|
|
@ -81,6 +81,11 @@ const fileListStyle = StyleSheet.create({
|
||||||
backgroundColor: Colors.LbryGreen,
|
backgroundColor: Colors.LbryGreen,
|
||||||
opacity: 0.2
|
opacity: 0.2
|
||||||
},
|
},
|
||||||
|
downloadedIcon: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 8,
|
||||||
|
left: 8
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default fileListStyle;
|
export default fileListStyle;
|
||||||
|
|
Loading…
Reference in a new issue