diff --git a/src/page/file/view.js b/src/page/file/view.js
index 0318d8e..dcf4d5e 100644
--- a/src/page/file/view.js
+++ b/src/page/file/view.js
@@ -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 && (
)}
+
+ {unsupported && fileInfo && completed && (
+
+
+
+ Unsupported Content
+
+ Sorry, we are unable to display this content in the app. You can find the file named{' '}
+ {fileInfo.file_name} in your
+ downloads folder.
+
+
+
+ )}
+
{((isPlayable && !completed && !canLoadMedia) ||
canOpen ||
(!completed && !this.state.streamingMode)) &&
diff --git a/src/styles/filePage.js b/src/styles/filePage.js
index 6f15861..58d71eb 100644
--- a/src/styles/filePage.js
+++ b/src/styles/filePage.js
@@ -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',
+ 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;