2019-07-09 01:54:32 +01:00
|
|
|
import React from 'react';
|
|
|
|
import { DrawerItems, SafeAreaView } from 'react-navigation';
|
2019-10-29 14:04:21 +01:00
|
|
|
import { Image, ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
import Button from 'component/button';
|
2019-08-20 09:03:33 +01:00
|
|
|
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
|
|
|
import Icon from 'react-native-vector-icons/FontAwesome5';
|
2019-10-29 14:04:21 +01:00
|
|
|
import channelIconStyle from 'styles/channelIcon';
|
2019-07-09 01:54:32 +01:00
|
|
|
import discoverStyle from 'styles/discover';
|
|
|
|
|
2019-08-20 09:03:33 +01:00
|
|
|
const groupedMenuItems = {
|
|
|
|
'Find content': [
|
2019-10-29 15:06:37 +01:00
|
|
|
{ icon: 'hashtag', label: 'Your Tags', route: Constants.DRAWER_ROUTE_DISCOVER },
|
2019-08-20 09:03:33 +01:00
|
|
|
{ icon: 'heart', solid: true, label: 'Subscriptions', route: Constants.DRAWER_ROUTE_SUBSCRIPTIONS },
|
2019-10-29 15:06:37 +01:00
|
|
|
{ icon: 'globe-americas', label: 'All Content', route: Constants.DRAWER_ROUTE_TRENDING },
|
2019-08-20 09:03:33 +01:00
|
|
|
],
|
|
|
|
'Your content': [
|
2019-09-13 08:16:06 +01:00
|
|
|
{ icon: 'at', label: 'Channels', route: Constants.DRAWER_ROUTE_CHANNEL_CREATOR },
|
2019-08-20 09:03:33 +01:00
|
|
|
{ icon: 'download', label: 'Library', route: Constants.DRAWER_ROUTE_MY_LBRY },
|
|
|
|
{ icon: 'cloud-upload-alt', label: 'Publishes', route: Constants.DRAWER_ROUTE_PUBLISHES },
|
2019-10-29 15:06:37 +01:00
|
|
|
{ icon: 'upload', label: 'New Publish', route: Constants.DRAWER_ROUTE_PUBLISH },
|
2019-08-20 09:03:33 +01:00
|
|
|
],
|
|
|
|
Wallet: [
|
2019-08-20 18:42:44 +01:00
|
|
|
{ icon: 'wallet', label: 'Wallet', route: Constants.DRAWER_ROUTE_WALLET },
|
2019-08-20 09:03:33 +01:00
|
|
|
{ icon: 'award', label: 'Rewards', route: Constants.DRAWER_ROUTE_REWARDS },
|
|
|
|
],
|
|
|
|
Settings: [
|
|
|
|
{ icon: 'cog', label: 'Settings', route: Constants.DRAWER_ROUTE_SETTINGS },
|
|
|
|
{ icon: 'info', label: 'About', route: Constants.DRAWER_ROUTE_ABOUT },
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
const groupNames = Object.keys(groupedMenuItems);
|
|
|
|
|
2019-07-09 01:54:32 +01:00
|
|
|
class DrawerContent extends React.PureComponent {
|
2019-10-29 14:04:21 +01:00
|
|
|
componentDidMount() {
|
|
|
|
const { fetchChannelListMine } = this.props;
|
|
|
|
fetchChannelListMine();
|
|
|
|
}
|
|
|
|
|
|
|
|
getAvatarImageUrl = () => {
|
|
|
|
const { channels = [] } = this.props;
|
|
|
|
if (channels) {
|
|
|
|
// get the first channel thumbnail found. In the future, allow the user to select a default channel thumbnail?
|
|
|
|
for (let i = 0; i < channels.length; i++) {
|
|
|
|
if (channels[i].value && channels[i].value.thumbnail) {
|
|
|
|
return channels[i].value.thumbnail.url;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
};
|
|
|
|
|
|
|
|
launchSignInFlow = () => {
|
|
|
|
// for now, sync flow (email, then password input) will be the default sign in flow
|
|
|
|
const { navigation } = this.props;
|
2019-11-07 17:13:37 +01:00
|
|
|
navigation.navigate({
|
|
|
|
routeName: 'Verification',
|
|
|
|
key: 'verification',
|
|
|
|
params: { syncFlow: true, signInFlow: true },
|
|
|
|
});
|
2019-10-29 14:04:21 +01:00
|
|
|
};
|
|
|
|
|
2019-07-09 01:54:32 +01:00
|
|
|
render() {
|
2019-10-29 14:04:21 +01:00
|
|
|
const { activeTintColor, navigation, user, onItemPress } = this.props;
|
2019-08-20 09:03:33 +01:00
|
|
|
const { state } = navigation;
|
|
|
|
|
|
|
|
const activeItemKey = state.routes[state.index] ? state.routes[state.index].key : null;
|
2019-10-29 14:04:21 +01:00
|
|
|
const signedIn = user && user.has_verified_email;
|
|
|
|
const avatarImageUrl = this.getAvatarImageUrl();
|
2019-07-09 01:54:32 +01:00
|
|
|
|
|
|
|
return (
|
2019-09-23 17:47:30 +01:00
|
|
|
<View style={discoverStyle.drawerContentArea}>
|
2019-10-29 14:04:21 +01:00
|
|
|
{false && (
|
|
|
|
<View style={discoverStyle.signInContainer}>
|
|
|
|
{!signedIn && (
|
|
|
|
<Button
|
|
|
|
style={discoverStyle.signInButton}
|
|
|
|
theme={'light'}
|
2019-12-05 13:16:43 +01:00
|
|
|
text={__('Sign in')}
|
2019-10-29 14:04:21 +01:00
|
|
|
onPress={this.launchSignInFlow}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{signedIn && (
|
|
|
|
<View style={discoverStyle.signedIn}>
|
|
|
|
<View style={discoverStyle.signedInAvatar}>
|
|
|
|
{avatarImageUrl && (
|
|
|
|
<Image
|
|
|
|
style={discoverStyle.signedInAvatarImage}
|
|
|
|
resizeMode={'cover'}
|
|
|
|
source={{ uri: avatarImageUrl }}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{!avatarImageUrl && (
|
|
|
|
<Text style={channelIconStyle.autothumbCharacter}>
|
|
|
|
{user.primary_email.substring(0, 1).toUpperCase()}
|
|
|
|
</Text>
|
|
|
|
)}
|
|
|
|
</View>
|
|
|
|
<Text style={discoverStyle.signedInEmail} numberOfLines={1}>
|
|
|
|
{user.primary_email}
|
|
|
|
</Text>
|
|
|
|
</View>
|
|
|
|
)}
|
|
|
|
</View>
|
|
|
|
)}
|
|
|
|
|
2019-09-23 17:47:30 +01:00
|
|
|
<ScrollView contentContainerStyle={discoverStyle.menuScrollContent}>
|
|
|
|
<SafeAreaView
|
|
|
|
style={discoverStyle.drawerContentContainer}
|
|
|
|
forceInset={{ top: 'always', horizontal: 'never' }}
|
|
|
|
>
|
2019-10-29 14:04:21 +01:00
|
|
|
{!signedIn && (
|
|
|
|
<TouchableOpacity
|
|
|
|
accessible
|
2019-12-05 13:16:43 +01:00
|
|
|
accessibilityLabel={__('Sign In')}
|
2019-10-29 14:04:21 +01:00
|
|
|
onPress={this.launchSignInFlow}
|
|
|
|
delayPressIn={0}
|
2019-10-29 14:52:59 +01:00
|
|
|
style={[discoverStyle.signInMenuItem, discoverStyle.signInMenuItemButton]}
|
2019-10-29 14:04:21 +01:00
|
|
|
>
|
2019-12-05 13:16:43 +01:00
|
|
|
<Text style={discoverStyle.signInMenuItemButtonText}>{__('SIGN IN')}</Text>
|
2019-10-29 14:04:21 +01:00
|
|
|
</TouchableOpacity>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{signedIn && (
|
2019-10-29 14:52:59 +01:00
|
|
|
<View style={[discoverStyle.signInMenuItem, discoverStyle.signInMenuItemBorder]}>
|
2019-10-29 14:04:21 +01:00
|
|
|
<Text style={discoverStyle.signInMenuItemText} numberOfLines={1}>
|
|
|
|
{user.primary_email.toUpperCase()}
|
|
|
|
</Text>
|
|
|
|
</View>
|
|
|
|
)}
|
|
|
|
|
2019-09-23 17:47:30 +01:00
|
|
|
{groupNames.map(groupName => {
|
|
|
|
const menuItems = groupedMenuItems[groupName];
|
2019-07-09 01:54:32 +01:00
|
|
|
|
2019-09-23 17:47:30 +01:00
|
|
|
return (
|
|
|
|
<View key={groupName} style={discoverStyle.menuGroup}>
|
|
|
|
{groupNames[3] !== groupName && (
|
|
|
|
<Text key={`${groupName}-title`} style={discoverStyle.menuGroupName}>
|
2019-12-05 13:16:43 +01:00
|
|
|
{__(groupName)}
|
2019-09-23 17:47:30 +01:00
|
|
|
</Text>
|
|
|
|
)}
|
|
|
|
{menuItems.map(item => {
|
|
|
|
const focused =
|
|
|
|
activeItemKey === item.route ||
|
|
|
|
(activeItemKey === Constants.FULL_ROUTE_NAME_DISCOVER &&
|
|
|
|
item.route === Constants.DRAWER_ROUTE_DISCOVER) ||
|
|
|
|
(activeItemKey === Constants.FULL_ROUTE_NAME_WALLET &&
|
|
|
|
item.route === Constants.DRAWER_ROUTE_WALLET);
|
|
|
|
return (
|
|
|
|
<TouchableOpacity
|
|
|
|
accessible
|
2019-12-05 13:16:43 +01:00
|
|
|
accessibilityLabel={__(item.label)}
|
2019-09-23 17:47:30 +01:00
|
|
|
style={[
|
|
|
|
discoverStyle.menuItemTouchArea,
|
|
|
|
focused ? discoverStyle.menuItemTouchAreaFocused : null,
|
|
|
|
]}
|
|
|
|
key={item.label}
|
|
|
|
onPress={() => navigation.navigate({ routeName: item.route })}
|
|
|
|
delayPressIn={0}
|
|
|
|
>
|
|
|
|
<View style={discoverStyle.menuItemIcon}>
|
|
|
|
<Icon
|
|
|
|
name={item.icon}
|
|
|
|
size={16}
|
|
|
|
solid={item.solid}
|
|
|
|
color={focused ? activeTintColor : null}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
<Text style={[discoverStyle.menuItem, focused ? discoverStyle.menuItemFocused : null]}>
|
2019-12-05 13:16:43 +01:00
|
|
|
{__(item.label)}
|
2019-09-23 17:47:30 +01:00
|
|
|
</Text>
|
|
|
|
</TouchableOpacity>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</SafeAreaView>
|
|
|
|
</ScrollView>
|
|
|
|
</View>
|
2019-07-09 01:54:32 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default DrawerContent;
|