unified display of channel results #108

Merged
akinwale merged 5 commits from channel-results into master 2020-01-09 17:19:31 +01:00
3 changed files with 30 additions and 48 deletions
Showing only changes of commit 4e88d75639 - Show all commits

View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { normalizeURI, parseURI } from 'lbry-redux'; import { normalizeURI, parseURI } from 'lbry-redux';
import { ActivityIndicator, Image, Platform, Text, TouchableOpacity, View } from 'react-native'; import { ActivityIndicator, Image, Platform, Text, TouchableOpacity, View } from 'react-native';
import { navigateToUri, formatBytes } from 'utils/helper'; import { navigateToUri, formatTitle, getDownloadProgress, getStorageForFileInfo } from 'utils/helper';
import Colors from 'styles/colors'; import Colors from 'styles/colors';
import ChannelIconItem from 'component/channelIconItem'; import ChannelIconItem from 'component/channelIconItem';
import channelIconStyle from 'styles/channelIcon'; import channelIconStyle from 'styles/channelIcon';
@ -21,24 +21,6 @@ class FileListItem extends React.PureComponent {
url: null, url: null,
}; };
getStorageForFileInfo = fileInfo => {
if (!fileInfo.completed) {
const written = formatBytes(fileInfo.written_bytes);
const total = formatBytes(fileInfo.total_bytes);
return `(${written} / ${total})`;
}
return formatBytes(fileInfo.written_bytes);
};
formatTitle = title => {
if (!title) {
return title;
}
return title.length > 80 ? title.substring(0, 77).trim() + '...' : title;
};
getDownloadProgress = fileInfo => { getDownloadProgress = fileInfo => {
return Math.ceil((fileInfo.written_bytes / fileInfo.total_bytes) * 100); return Math.ceil((fileInfo.written_bytes / fileInfo.total_bytes) * 100);
}; };
@ -223,7 +205,7 @@ class FileListItem extends React.PureComponent {
{(title || name) && ( {(title || name) && (
<View style={fileListStyle.titleContainer}> <View style={fileListStyle.titleContainer}>
<Text style={featuredResult ? fileListStyle.featuredTitle : fileListStyle.title}> <Text style={featuredResult ? fileListStyle.featuredTitle : fileListStyle.title}>
{this.formatTitle(title) || this.formatTitle(name)} {formatTitle(title) || formatTitle(name)}
</Text> </Text>
{isRewardContent && <Icon style={fileListStyle.rewardIcon} name="award" size={12} />} {isRewardContent && <Icon style={fileListStyle.rewardIcon} name="award" size={12} />}
</View> </View>
@ -253,7 +235,7 @@ class FileListItem extends React.PureComponent {
<View style={fileListStyle.info}> <View style={fileListStyle.info}>
{fileInfo && !isNaN(fileInfo.written_bytes) && fileInfo.written_bytes > 0 && ( {fileInfo && !isNaN(fileInfo.written_bytes) && fileInfo.written_bytes > 0 && (
<Text style={fileListStyle.infoText}>{this.getStorageForFileInfo(fileInfo)}</Text> <Text style={fileListStyle.infoText}>{getStorageForFileInfo(fileInfo)}</Text>
)} )}
<DateTime style={fileListStyle.publishInfo} textStyle={fileListStyle.infoText} timeAgo uri={uri} /> <DateTime style={fileListStyle.publishInfo} textStyle={fileListStyle.infoText} timeAgo uri={uri} />
</View> </View>
@ -266,7 +248,7 @@ class FileListItem extends React.PureComponent {
color={Colors.NextLbryGreen} color={Colors.NextLbryGreen}
height={3} height={3}
style={fileListStyle.progress} style={fileListStyle.progress}
progress={this.getDownloadProgress(fileInfo)} progress={getDownloadProgress(fileInfo)}
/> />
)} )}
</View> </View>

View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { normalizeURI, parseURI } from 'lbry-redux'; import { normalizeURI, parseURI } from 'lbry-redux';
import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native'; import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native';
import { navigateToUri, formatBytes } from 'utils/helper'; import { navigateToUri, formatTitle, getDownloadProgress, getStorageForFileInfo } from 'utils/helper';
import Colors from 'styles/colors'; import Colors from 'styles/colors';
import ChannelIconItem from 'component/channelIconItem'; import ChannelIconItem from 'component/channelIconItem';
import channelIconStyle from 'styles/channelIcon'; import channelIconStyle from 'styles/channelIcon';
@ -28,28 +28,6 @@ class FileResultItem extends React.PureComponent {
}); });
} }
getStorageForFileInfo = fileInfo => {
if (!fileInfo.completed) {
const written = formatBytes(fileInfo.written_bytes);
const total = formatBytes(fileInfo.total_bytes);
return `(${written} / ${total})`;
}
return formatBytes(fileInfo.written_bytes);
};
formatTitle = title => {
if (!title) {
return title;
}
return title.length > 80 ? title.substring(0, 77).trim() + '...' : title;
};
getDownloadProgress = fileInfo => {
return Math.ceil((fileInfo.written_bytes / fileInfo.total_bytes) * 100);
};
onPressHandler = () => { onPressHandler = () => {
const { autoplay, navigation, result } = this.props; const { autoplay, navigation, result } = this.props;
const { claimId, name } = result; const { claimId, name } = result;
@ -135,7 +113,7 @@ class FileResultItem extends React.PureComponent {
{(title || name) && ( {(title || name) && (
<View style={fileListStyle.titleContainer}> <View style={fileListStyle.titleContainer}>
<Text style={featuredResult ? fileListStyle.featuredTitle : fileListStyle.title}> <Text style={featuredResult ? fileListStyle.featuredTitle : fileListStyle.title}>
{this.formatTitle(title) || this.formatTitle(name)} {formatTitle(title) || formatTitle(name)}
</Text> </Text>
{isRewardContent && <Icon style={fileListStyle.rewardIcon} name="award" size={12} />} {isRewardContent && <Icon style={fileListStyle.rewardIcon} name="award" size={12} />}
</View> </View>
@ -160,7 +138,7 @@ class FileResultItem extends React.PureComponent {
<View style={fileListStyle.info}> <View style={fileListStyle.info}>
{fileInfo && !isNaN(fileInfo.written_bytes) && fileInfo.written_bytes > 0 && ( {fileInfo && !isNaN(fileInfo.written_bytes) && fileInfo.written_bytes > 0 && (
<Text>{this.getStorageForFileInfo(fileInfo)}</Text> <Text>{getStorageForFileInfo(fileInfo)}</Text>
)} )}
<DateTime <DateTime
style={fileListStyle.publishInfo} style={fileListStyle.publishInfo}
@ -178,7 +156,7 @@ class FileResultItem extends React.PureComponent {
color={Colors.NextLbryGreen} color={Colors.NextLbryGreen}
height={3} height={3}
style={fileListStyle.progress} style={fileListStyle.progress}
progress={this.getDownloadProgress(fileInfo)} progress={getDownloadProgress(fileInfo)}
/> />
)} )}
</View> </View>

View file

@ -370,3 +370,25 @@ export function uploadImageAsset(filePath, success, failure) {
export function formatLbryUrlForWeb(url) { export function formatLbryUrlForWeb(url) {
return url.replace('lbry://', '/').replace(/#/g, ':'); return url.replace('lbry://', '/').replace(/#/g, ':');
} }
export function getDownloadProgress(fileInfo) {
return Math.ceil((fileInfo.written_bytes / fileInfo.total_bytes) * 100);
}
export function getStorageForFileInfo(fileInfo) {
if (!fileInfo.completed) {
const written = formatBytes(fileInfo.written_bytes);
const total = formatBytes(fileInfo.total_bytes);
return `(${written} / ${total})`;
}
return formatBytes(fileInfo.written_bytes);
}
export function formatTitle(title) {
if (!title) {
return title;
}
return title.length > 80 ? title.substring(0, 77).trim() + '...' : title;
}