toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Make sure opengraph displays images (#2083)

Browse source 
* Make sure opengraph displays images

* Revert change for IMAGE_MAX_HEIGHT constant
This commit is contained in:
Elias Nahum 2018-09-07 10:06:22 -03:00 committed by Harrison Healey
parent db898694a5
commit 9ca10dc719
2 changed files with 63 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
app/components/post_attachment_opengraph/post_attachment_opengraph.js
View file

@ -13,7 +13,6 @@ import {
View,
} from 'react-native';
import ProgressiveImage from 'app/components/progressive_image';
import ImageCacheManager from 'app/utils/image_cache_manager';
import {previewImageAtIndex, calculateDimensions} from 'app/utils/images';
import {getNearestPoint} from 'app/utils/opengraph';
@ -96,10 +95,22 @@ export default class PostAttachmentOpenGraph extends PureComponent {
});
if (imageUrl) {
ImageCacheManager.cache(null, imageUrl, this.getImageSize);
ImageCacheManager.cache(this.getFilename(imageUrl), imageUrl, this.getImageSize);
}
}
getFilename = (link) => {
let filename = link.substring(link.lastIndexOf('/') + 1, link.indexOf('?') === -1 ? link.length : link.indexOf('?'));
const extension = filename.split('.').pop();
if (extension === filename) {
const ext = filename.indexOf('.') === -1 ? '.png' : filename.substring(filename.lastIndexOf('.'));
filename = `${filename}${ext}`;
}
return `og-${filename}`;
};
getImageSize = (imageUrl) => {
let prefix = '';
if (Platform.OS === 'android') {
@ -141,13 +152,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
originalWidth,
originalHeight,
} = this.state;
let filename = link.substring(link.lastIndexOf('/') + 1, link.indexOf('?') === -1 ? link.length : link.indexOf('?'));
const extension = filename.split('.').pop();
if (extension === filename) {
const ext = filename.indexOf('.') === -1 ? '.png' : filename.substring(filename.lastIndexOf('.'));
filename = `${filename}${ext}`;
}
const filename = this.getFilename(link);
const files = [{
caption: filename,
@ -175,6 +180,13 @@ export default class PostAttachmentOpenGraph extends PureComponent {
const style = getStyleSheet(theme);
let description = null;
let source;
if (imageUrl) {
source = {
uri: imageUrl,
};
}
if (openGraphData.description) {
description = (
<View style={style.flex}>
@ -216,19 +228,22 @@ export default class PostAttachmentOpenGraph extends PureComponent {
</View>
{description}
{hasImage &&
<View ref='item'>
<TouchableWithoutFeedback
onPress={this.handlePreviewImage}
style={{width, height}}
>
<ProgressiveImage
ref='image'
style={[style.image, {width, height}]}
imageUri={imageUrl}
resizeMode='contain'
/>
</TouchableWithoutFeedback>
</View>
<View
ref='item'
style={style.imageContainer}
>
<TouchableWithoutFeedback
onPress={this.handlePreviewImage}
style={{width, height}}
>
<Image
ref='image'
style={[style.image, {width, height}]}
source={source}
resizeMode='contain'
/>
</TouchableWithoutFeedback>
</View>
}
</View>
);
@ -266,6 +281,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
color: changeOpacity(theme.centerChannelColor, 0.7),
marginBottom: 10,
},
imageContainer: {
alignItems: 'center',
},
image: {
borderRadius: 3,
},

46
app/utils/image_cache_manager.js
View file

@ -27,33 +27,33 @@ export default class ImageCacheManager {
listener(path);
} else {
addListener(uri, listener);
if (!uri.startsWith('http')) {
if (uri.startsWith('http')) {
try {
const certificate = await mattermostBucket.getPreference('cert', LocalConfig.AppGroupId);
const options = {
session: uri,
timeout: 10000,
indicator: true,
overwrite: true,
path,
certificate,
};
this.downloadTask = await RNFetchBlob.config(options).fetch('GET', uri);
if (this.downloadTask.respInfo.respType === 'text') {
throw new Error();
}
notifyAll(uri, path);
} catch (e) {
RNFetchBlob.fs.unlink(path);
notifyAll(uri, uri);
}
} else {
// In case the uri we are trying to cache is already a local file just notify and return
notifyAll(uri, uri);
return;
}
try {
const certificate = await mattermostBucket.getPreference('cert', LocalConfig.AppGroupId);
const options = {
session: uri,
timeout: 10000,
indicator: true,
overwrite: true,
path,
certificate,
};
this.downloadTask = await RNFetchBlob.config(options).fetch('GET', uri);
if (this.downloadTask.respInfo.respType === 'text') {
throw new Error();
}
notifyAll(uri, path);
} catch (e) {
RNFetchBlob.fs.unlink(path);
notifyAll(uri, uri);
}
unsubscribe(uri);
}
};