Cross-device sync implementation #505

Merged
akinwale merged 38 commits from sync into master 2019-04-22 14:42:48 +02:00
7 changed files with 63 additions and 44 deletions
Showing only changes of commit 7484596fb4 - Show all commits

View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { ActivityIndicator, SectionList, Text, View } from 'react-native'; import { ActivityIndicator, SectionList, Text, View } from 'react-native';
import { normalizeURI } from 'lbry-redux'; import { normalizeURI } from 'lbry-redux';
import { navigateToUri } from 'utils/helper';
import SubscribeButton from 'component/subscribeButton'; import SubscribeButton from 'component/subscribeButton';
import SuggestedSubscriptionItem from 'component/suggestedSubscriptionItem'; import SuggestedSubscriptionItem from 'component/suggestedSubscriptionItem';
import Colors from 'styles/colors'; import Colors from 'styles/colors';
@ -36,7 +37,9 @@ class SuggestedSubscriptions extends React.PureComponent {
const channelUri = normalizeURI(titleParts[1]); const channelUri = normalizeURI(titleParts[1]);
return ( return (
<View style={subscriptionsStyle.titleRow}> <View style={subscriptionsStyle.titleRow}>
<Link style={subscriptionsStyle.channelTitle} text={channelName} href={channelUri} /> <Link style={subscriptionsStyle.channelTitle} text={channelName} onPress={() => {
navigateToUri(navigation, normalizeURI(channelUri));
}} />
<SubscribeButton style={subscriptionsStyle.subscribeButton} uri={channelUri} name={channelName} /> <SubscribeButton style={subscriptionsStyle.subscribeButton} uri={channelUri} name={channelName} />
</View> </View>
) )

View file

@ -101,10 +101,24 @@ class UriBar extends React.PureComponent {
} }
let style = [uriBarStyle.overlay]; let style = [uriBarStyle.overlay];
if (this.state.focused) { /*if (this.state.focused) {
style.push(uriBarStyle.inFocus); style.push(uriBarStyle.inFocus);
} }
{(this.state.focused && !this.state.directSearch) && (
<View style={uriBarStyle.suggestions}>
<FlatList style={uriBarStyle.suggestionList}
data={suggestions}
keyboardShouldPersistTaps={'handled'}
keyExtractor={(item, value) => item.value}
renderItem={({item}) => (
<UriBarItem
item={item}
navigation={navigation}
onPress={() => this.handleItemPress(item)}
/>)} />
</View>)}*/
return ( return (
<View style={style}> <View style={style}>
<View style={uriBarStyle.uriContainer}> <View style={uriBarStyle.uriContainer}>
@ -153,19 +167,6 @@ class UriBar extends React.PureComponent {
} }
}}/> }}/>
</View> </View>
{(this.state.focused && !this.state.directSearch) && (
<View style={uriBarStyle.suggestions}>
<FlatList style={uriBarStyle.suggestionList}
data={suggestions}
keyboardShouldPersistTaps={'handled'}
keyExtractor={(item, value) => item.value}
renderItem={({item}) => (
<UriBarItem
item={item}
navigation={navigation}
onPress={() => this.handleItemPress(item)}
/>)} />
</View>)}
</View> </View>
); );
} }

View file

@ -591,6 +591,10 @@ class FilePage extends React.PureComponent {
show={DateTime.SHOW_DATE} /> show={DateTime.SHOW_DATE} />
</View> </View>
<View style={filePageStyle.subscriptionRow}> <View style={filePageStyle.subscriptionRow}>
<Button style={[filePageStyle.actionButton, filePageStyle.tipButton]}
theme={"light"}
icon={"gift"}
onPress={() => this.setState({ showTipView: true })} />
<SubscribeButton <SubscribeButton
style={filePageStyle.actionButton} style={filePageStyle.actionButton}
uri={fullChannelUri} uri={fullChannelUri}
@ -603,14 +607,9 @@ class FilePage extends React.PureComponent {
</View> </View>
} }
{(this.state.showDescription && description && description.length > 0) && <View style={filePageStyle.divider} />} {this.state.showTipView && <View style={filePageStyle.divider} />}
{(this.state.showDescription && description) && {this.state.showTipView &&
<Text style={filePageStyle.description} selectable={true}>{this.linkify(description)}</Text>} <View style={filePageStyle.tipCard}>
<View onLayout={this.setRelatedContentPosition} />
<RelatedContent navigation={navigation} uri={uri} />
</ScrollView>
{this.state.showTipView && <View style={filePageStyle.tipCard}>
<View style={filePageStyle.row}> <View style={filePageStyle.row}>
<View style={filePageStyle.amountRow}> <View style={filePageStyle.amountRow}>
<TextInput ref={ref => this.tipAmountInput = ref} <TextInput ref={ref => this.tipAmountInput = ref}
@ -621,12 +620,20 @@ class FilePage extends React.PureComponent {
<Text style={[filePageStyle.text, filePageStyle.currency]}>LBC</Text> <Text style={[filePageStyle.text, filePageStyle.currency]}>LBC</Text>
</View> </View>
<Link style={[filePageStyle.link, filePageStyle.cancelTipLink]} text={'Cancel'} onPress={() => this.setState({ showTipView: false })} /> <Link style={[filePageStyle.link, filePageStyle.cancelTipLink]} text={'Cancel'} onPress={() => this.setState({ showTipView: false })} />
<Button text={'Send tip'} <Button text={'Send a tip'}
style={[filePageStyle.button, filePageStyle.sendButton]} style={[filePageStyle.button, filePageStyle.sendButton]}
disabled={!canSendTip} disabled={!canSendTip}
onPress={this.handleSendTip} /> onPress={this.handleSendTip} />
</View> </View>
</View>} </View>}
{(this.state.showDescription && description && description.length > 0) && <View style={filePageStyle.divider} />}
{(this.state.showDescription && description) &&
<Text style={filePageStyle.description} selectable={true}>{this.linkify(description)}</Text>}
<View onLayout={this.setRelatedContentPosition} />
<RelatedContent navigation={navigation} uri={uri} />
</ScrollView>
</View> </View>
)} )}
{!this.state.fullscreenMode && <FloatingWalletBalance navigation={navigation} />} {!this.state.fullscreenMode && <FloatingWalletBalance navigation={navigation} />}

View file

@ -55,7 +55,15 @@ class SearchPage extends React.PureComponent {
onSearchSubmitted={this.handleSearchSubmitted} /> onSearchSubmitted={this.handleSearchSubmitted} />
{!isSearching && (!uris || uris.length === 0) && {!isSearching && (!uris || uris.length === 0) &&
<Text style={searchStyle.noResultsText}>No results to display.</Text>} <Text style={searchStyle.noResultsText}>No results to display.</Text>}
<ScrollView style={searchStyle.scrollContainer} contentContainerStyle={searchStyle.scrollPadding}> {isSearching &&
<View style={searchStyle.busyContainer}>
<ActivityIndicator size="large" color={Colors.LbryGreen} style={searchStyle.loading} />
</View>}
{!isSearching &&
<ScrollView
style={searchStyle.scrollContainer}
contentContainerStyle={searchStyle.scrollPadding}
keyboardShouldPersistTaps={'handled'}>
skhameneh commented 2019-04-19 20:38:00 +02:00 (Migrated from github.com)
Review

Duplicated conditional, use fragments?

Duplicated conditional, use fragments?
{this.state.currentUri && {this.state.currentUri &&
<FileListItem <FileListItem
key={this.state.currentUri} key={this.state.currentUri}
@ -72,8 +80,7 @@ class SearchPage extends React.PureComponent {
navigation={navigation} navigation={navigation}
onPress={() => navigateToUri(navigation, uri)}/>) onPress={() => navigateToUri(navigation, uri)}/>)
) : null } ) : null }
</ScrollView> </ScrollView>}
{isSearching && <ActivityIndicator size="large" color={Colors.LbryGreen} style={searchStyle.loading} /> }
<FloatingWalletBalance navigation={navigation} /> <FloatingWalletBalance navigation={navigation} />
</View> </View>
); );

View file

@ -246,11 +246,8 @@ const filePageStyle = StyleSheet.create({
color: "rgba(64, 184, 154, .2)" color: "rgba(64, 184, 154, .2)"
}, },
tipCard: { tipCard: {
backgroundColor: Colors.White,
position: 'absolute',
top: containedMediaHeightWithControls - 16,
width: '100%', width: '100%',
paddingTop: 8, marginTop: -12,
paddingBottom: 8, paddingBottom: 8,
paddingLeft: 16, paddingLeft: 16,
paddingRight: 16 paddingRight: 16
@ -298,6 +295,9 @@ const filePageStyle = StyleSheet.create({
fontFamily: 'Inter-UI-Regular', fontFamily: 'Inter-UI-Regular',
fontSize: 16, fontSize: 16,
lineHeight: 24 lineHeight: 24
},
tipButton: {
marginRight: 8
} }
}); });

View file

@ -4,15 +4,16 @@ import Colors from 'styles/colors';
const searchStyle = StyleSheet.create({ const searchStyle = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
justifyContent: 'center',
alignItems: 'center'
}, },
scrollContainer: { scrollContainer: {
flex: 1, flex: 1,
width: '100%',
height: '100%',
marginTop: 60 marginTop: 60
}, },
busyContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
scrollPadding: { scrollPadding: {
paddingBottom: 16 paddingBottom: 16
}, },

View file

@ -30,7 +30,7 @@ const uriBarStyle = StyleSheet.create({
}, },
overlay: { overlay: {
position: 'absolute', position: 'absolute',
backgroundColor: 'transparent', backgroundColor: '#cc0000',
top: 0, top: 0,
width: '100%', width: '100%',
zIndex: 200, zIndex: 200,