unified display of channel results #108
3 changed files with 30 additions and 48 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue