1import * as Types from '../../../../../constants/types/chat2' 2import * as FsGen from '../../../../../actions/fs-gen' 3import * as Chat2Gen from '../../../../../actions/chat2-gen' 4import * as Constants from '../../../../../constants/chat2' 5import * as Container from '../../../../../util/container' 6import {globalColors} from '../../../../../styles' 7import ImageAttachment from '.' 8import {imgMaxWidth} from './image-render' 9 10type OwnProps = { 11 message: Types.MessageAttachment 12 toggleMessageMenu: () => void 13 isHighlighted?: boolean 14} 15 16const mapDispatchToProps = (dispatch: Container.TypedDispatch) => ({ 17 _onClick: (message: Types.MessageAttachment) => 18 dispatch( 19 Chat2Gen.createAttachmentPreviewSelect({ 20 message, 21 }) 22 ), 23 _onCollapse: (message: Types.MessageAttachment) => 24 dispatch( 25 Chat2Gen.createToggleMessageCollapse({ 26 collapse: !message.isCollapsed, 27 conversationIDKey: message.conversationIDKey, 28 messageID: message.id, 29 }) 30 ), 31 _onDoubleClick: (message: Types.MessageAttachment) => 32 dispatch( 33 Chat2Gen.createAttachmentPreviewSelect({ 34 message, 35 }) 36 ), 37 _onRetry: (message: Types.MessageAttachment) => 38 dispatch( 39 Chat2Gen.createAttachmentDownload({ 40 message, 41 }) 42 ), 43 _onShowInFinder: (message: Types.MessageAttachment) => { 44 message.downloadPath && 45 dispatch(FsGen.createOpenLocalPathInSystemFileManager({localPath: message.downloadPath})) 46 }, 47}) 48 49export default Container.connect( 50 (state: Container.TypedState, ownProps: OwnProps) => { 51 const editInfo = Constants.getEditInfo(state, ownProps.message.conversationIDKey) 52 const isEditing = !!(editInfo && editInfo.ordinal === ownProps.message.ordinal) 53 return {isEditing} 54 }, 55 mapDispatchToProps, 56 (stateProps, dispatchProps, ownProps: OwnProps) => { 57 const {message} = ownProps 58 const {height, width} = Constants.clampImageSize( 59 message.previewWidth, 60 message.previewHeight, 61 Math.min(imgMaxWidth(), 320) 62 ) 63 // On mobile we use this icon to indicate we have the file stored locally, and it can be viewed. This is a 64 // similar meaning to desktop. 65 const arrowColor = !Container.isMobile 66 ? message.downloadPath 67 ? globalColors.green 68 : message.transferState === 'downloading' 69 ? globalColors.blue 70 : '' 71 : '' 72 const buttonType = message.showPlayButton ? 'play' : null 73 const hasProgress = 74 !!message.transferState && 75 message.transferState !== 'remoteUploading' && 76 message.transferState !== 'mobileSaving' 77 78 return { 79 arrowColor, 80 downloadError: !!message.transferErrMsg, 81 fileName: message.fileName, 82 fullPath: message.fileURL, 83 hasProgress, 84 height, 85 inlineVideoPlayable: message.inlineVideoPlayable, 86 isCollapsed: message.isCollapsed, 87 isEditing: stateProps.isEditing, 88 isHighlighted: ownProps.isHighlighted, 89 message, 90 onClick: () => dispatchProps._onClick(message), 91 onCollapse: () => dispatchProps._onCollapse(message), 92 onDoubleClick: () => dispatchProps._onDoubleClick(message), 93 onRetry: () => dispatchProps._onRetry(message), 94 onShowInFinder: 95 !Container.isMobile && message.downloadPath 96 ? (e: React.SyntheticEvent) => { 97 e.preventDefault() 98 e.stopPropagation() 99 dispatchProps._onShowInFinder(message) 100 } 101 : null, 102 path: message.previewURL, 103 progress: message.transferProgress, 104 showButton: buttonType, 105 title: message.decoratedText ? message.decoratedText.stringValue() : message.title, 106 toggleMessageMenu: ownProps.toggleMessageMenu, 107 transferState: message.transferState, 108 videoDuration: message.videoDuration || '', 109 width, 110 } 111 } 112)(ImageAttachment) as any 113