LBRYCommunity/lbry-react-native
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity

display unsupported content view #75

Merged
akinwale merged 1 commit from better-file-handling into master 2019-11-07 16:51:57 +01:00
Conversation 0 Commits 1 Files changed 2 +57 -1
2 changed files with 57 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 61189b817a - Show all commits

25
src/page/file/view.js
View file

@ -6,6 +6,7 @@ import {
Alert,
DeviceEventEmitter,
Dimensions,
Image,
Linking,
NativeModules,
ScrollView,
@ -739,6 +740,7 @@ class FilePage extends React.PureComponent {
const isWebViewable = mediaType === 'text';
const canOpen = isViewable && completed;
const localFileUri = this.localUriForFileInfo(fileInfo);
const unsupported = !isPlayable && !canOpen;
const openFile = () => {
if (mediaType === 'image') {
@ -809,9 +811,30 @@ class FilePage extends React.PureComponent {
thumbnail={thumbnail}
/>
)}
{(!this.state.downloadButtonShown || this.state.downloadPressed) && !this.state.mediaLoaded && (
{!unsupported &&
(!this.state.downloadButtonShown || this.state.downloadPressed) &&
!this.state.mediaLoaded && (
<ActivityIndicator size="large" color={Colors.NextLbryGreen} style={filePageStyle.loading} />
)}
{unsupported && fileInfo && completed && (
<View style={filePageStyle.unsupportedContent}>
<Image
style={filePageStyle.unsupportedContentImage}
resizeMode={'stretch'}
source={require('../../assets/gerbil-happy.png')}
/>
<View style={filePageStyle.unspportedContentTextContainer}>
<Text style={filePageStyle.unsupportedContentTitle}>Unsupported Content</Text>
<Text style={filePageStyle.unsupportedContentText}>
Sorry, we are unable to display this content in the app. You can find the file named{' '}
<Text style={filePageStyle.unsupportedContentFilename}>{fileInfo.file_name}</Text> in your
downloads folder.
</Text>
</View>
</View>
)}
{((isPlayable && !completed && !canLoadMedia) ||
canOpen ||
(!completed && !this.state.streamingMode)) &&

33
src/styles/filePage.js
View file

@ -402,6 +402,39 @@ const filePageStyle = StyleSheet.create({
marginTop: 12,
marginBottom: 12,
},
unsupportedContent: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 16,
padding: 24,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: Colors.White,
},
unspportedContentTextContainer: {
flex: 1,
},
unsupportedContentFilename: {
color: Colors.LbryGreen,
fontFamily: 'Inter-UI-SemiBold',
kauffj commented 2019-11-06 18:43:03 +01:00 (Migrated from github.com)
Review
Copy link

this requires it's own font?

this requires it's own font?
akinwale commented 2019-11-07 16:51:16 +01:00 (Migrated from github.com)
Review
Copy link

Yes. Each font file (regular, bold, italic) is loaded separately, so we can't set the bold / italic styles as expected.

Yes. Each font file (regular, bold, italic) is loaded separately, so we can't set the bold / italic styles as expected.
fontSize: 16,
},
unsupportedContentImage: {
width: 64,
height: 80,
marginRight: 24,
},
unsupportedContentTitle: {
fontFamily: 'Inter-UI-Regular',
fontSize: 20,
},
unsupportedContentText: {
fontFamily: 'Inter-UI-Regular',
fontSize: 16,
marginTop: 4,
},
});
export default filePageStyle;