1import * as React from 'react' 2import * as Kb from '../../../../../../common-adapters/index' 3import * as Constants from '../../../../../../constants/chat2' 4import * as Styles from '../../../../../../styles' 5import {imgMaxWidth} from '../../../attachment/image/image-render' 6import {Video} from './video' 7import openURL from '../../../../../../util/open-url' 8 9export type Props = { 10 autoplayVideo: boolean 11 height: number 12 isVideo: boolean 13 linkURL?: string 14 onClick?: () => void 15 style?: Object 16 url: string 17 width: number 18 widthPadding?: number 19} 20 21class UnfurlImage extends React.Component<Props> { 22 _getDimensions() { 23 const maxSize = Math.min(imgMaxWidth(), 320) - (this.props.widthPadding || 0) 24 const {height, width} = Constants.clampImageSize(this.props.width, this.props.height, maxSize) 25 return { 26 flexGrow: 0, 27 flexShrink: 0, 28 height, 29 minHeight: height, 30 minWidth: width, 31 width, 32 } 33 } 34 _onClick = () => { 35 if (this.props.linkURL) { 36 openURL(this.props.linkURL) 37 } 38 } 39 40 render() { 41 const dims = this._getDimensions() 42 const style = Styles.collapseStyles([dims, styles.image, this.props.style]) 43 return this.props.isVideo ? ( 44 <Video 45 autoPlay={this.props.autoplayVideo} 46 height={dims.height} 47 onClick={this.props.onClick} 48 style={style} 49 url={this.props.url} 50 width={dims.width} 51 /> 52 ) : ( 53 <Kb.ClickableBox onClick={this.props.onClick || this._onClick}> 54 <Kb.Image {...dims} src={this.props.url} style={style} /> 55 </Kb.ClickableBox> 56 ) 57 } 58} 59 60const styles = Styles.styleSheetCreate( 61 () => 62 ({ 63 image: { 64 borderRadius: Styles.borderRadius, 65 }, 66 } as const) 67) 68 69export default UnfurlImage 70