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